/* CSS Variables & Meta Configuration */
:root {
  /* Brand & Theme Colors (Shoe Lane Palette) */
  --primary-bg: #ffffff;
  --hero-bg: #38b6ff; /* Vibrant Cyan from 'LANE' box */
  --topbar-bg: #0a0a0a; /* Dark background for top bar contrast */
  --text-dark: #0a0a0a; /* Bold Black from logo typography */
  --text-muted: #666666;
  --text-light: #ffffff;
  --accent-cyan: #38b6ff;
  --cart-badge-bg: #0a0a0a;
  --border-light: #f0f0f0;
  --border-pill: #dcdcdc;

  /* Fonts */
--font-primary: 'Cinzel', serif;
  --font-hero: 'Anton', sans-serif; /* Updated to Anton */
  

  /* Transitions & Spacing */
  --transition-fast: 0.3s ease;
  --header-height: 85px;
  --top-bar-height: 40px;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-primary);
}

body {
  background-color: var(--primary-bg);
  color: var(--text-dark);
  overflow-x: hidden;
}

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

/* ================= TOP BAR STYLES ================= */
/* Container to manage sticky positioning */
.top-bar {
  background-color: var(--topbar-bg);
  color: var(--text-light);
  font-size: 12px;
  padding: 0 60px;
  height: var(--top-bar-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 11;
  /* Smooth transform transition for hiding */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  will-change: transform, opacity;
}

/* Class toggled via JS when scrolled down */
.top-bar.hide-topbar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Left Promo Link */
.top-bar-promo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-light);
  transition: opacity var(--transition-fast);
}

.top-bar-promo i {
  color: var(--accent-cyan);
}

.top-bar-promo .promo-link {
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.top-bar-promo:hover {
  opacity: 0.85;
}

/* Right Contact Items */
.top-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--transition-fast);
}

.top-bar-item i {
  font-size: 13px;
}

.top-bar-item:hover {
  color: var(--accent-cyan);
}

.top-bar-item.whatsapp i {
  color: #25d366; /* WhatsApp Brand Green */
}

/* ================= HEADER / NAVBAR STYLES ================= */

/* Make Header Sticky */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 60px;
  background-color: var(--primary-bg);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 1000; /* Ensure header stays above hero section */
  /* Smooth transition when moving up to attach to top */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

  
/* Navigation Links (Left) */
.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
  align-items: center;
  flex: 1;
}

.nav-links li {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav-links li a {
  transition: color var(--transition-fast);
}

.nav-links li a:hover {
  color: var(--accent-cyan);
}

/* Centered Brand Logo */
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: relative;
  overflow: visible;
}

.logo-img {
  height: 90px; 
  width: auto;
  object-fit: contain;
  margin: -25px 0; 
  transition: transform var(--transition-fast);
}

/* Controls & Icons (Right) */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: flex-end;
  flex: 1;
}

/* Pill Dropdown Selectors */
.pill-select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid var(--border-pill);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  background-color: var(--primary-bg);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.pill-select:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.pill-select i {
  font-size: 10px;
  color: var(--text-muted);
}

/* Navigation Icons */
.nav-icons {
  display: flex;
  gap: 18px;
  font-size: 18px;
  align-items: center;
  margin-left: 10px;
}

.nav-icons i {
  cursor: pointer;
  transition: color var(--transition-fast);
}

.nav-icons i:hover {
  color: var(--accent-cyan);
}

.nav-icon-img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  cursor: pointer;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.nav-icon-img:hover {
  transform: scale(1.1);
  filter: brightness(0.9) sepia(1) hue-rotate(160deg) saturate(4); 
}

/* Cart Wrapper & Badge */
.cart-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  background-color: var(--cart-badge-bg);
  color: var(--text-light);
  font-size: 10px;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ================= HERO SECTION ================= */
/* ================= HERO SECTION ================= */
.hero {
  position: relative;
  background-color: var(--hero-bg);
  /* Grid pattern layer */
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 40px 40px; /* Adjust grid box size here */
  height: calc(100vh - var(--header-height) - var(--top-bar-height));
  min-height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth Hero Container Transitions */
.hero {
  transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dynamic Outline Effect Fix */
.hero-title-bg {
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: 'Anton', sans-serif;
  font-size: 14vw;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-light);
  opacity: 0.9;
  white-space: nowrap;
  user-select: none;
  z-index: 2;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-title-bg.fade-out {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
}

.hero-title-bg::before {
  content: attr(data-title); /* Dynamically syncs title text */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18vw; 
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.25); 
  z-index: -1;
  pointer-events: none;
}

/* Image Transitions */
.hero-image img {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
              opacity 0.5s ease, 
              filter 0.6s ease;
}

.hero-image img.fade-out {
  opacity: 0;
  transform: scale(0.8) rotate(-5deg);
}
.hero-title-bg {
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: 'Anton', sans-serif;
  font-size: 14vw;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-light);
  opacity: 0.9;
  white-space: nowrap;
  user-select: none;
  z-index: 2;
}

 .hero-title-bg::before {
  content: "Sports Shoes";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18vw; 
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.25); 
  z-index: -1;
  pointer-events: none;
}


.hero-image {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}
.hero-image a {
  display: block;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image img {
  max-width: 70%;
  height: auto;
  object-fit: contain;
  transition: transform 0.5s ease;
}

/* 1. Add 3D Perspective to the Parent Container */
.hero-image {
  perspective: 1000px; /* Enables true 3D spatial depth */
}

/* 2. Set Up Base Styles & Transition on the Image */
.hero-image img {
  max-width: 70%;
  height: auto;
  object-fit: contain;
  transform-style: preserve-3d;
  will-change: transform, filter;
  /* Custom cubic-bezier creates an explosive, dynamic spring bounce */
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
              filter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Natural base shadow */
 }

/* 3. Next-Level Interactive 3D Hover State */
.hero-image img:hover {
  /* Lifts off the screen, tilts on X/Y axes, rotates, and scales up */
  transform: translate3d(0, -25px, 50px) rotateX(12deg) rotateY(-18deg) rotateZ(-6deg) scale(1.12);
  /* Ground-projected drop shadow expands and softens as shoe lifts off */
 }

 /* ================= HERO CONTROLS (BOTTOM RIGHT) ================= */
.hero-controls {
  position: absolute;
  bottom: 40px;
  right: 60px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Slide Indicator Dots */
.hero-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.hero-dots .dot.active,
.hero-dots .dot:hover {
  background-color: var(--text-light);
  width: 24px; /* Expanded pill effect for active state */
  border-radius: 12px;
}

/* Arrow Group Styling */
.hero-arrows {
  display: flex;
  gap: 10px;
}

.arrow {
  position: relative;
  top: auto;
  transform: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.arrow-left {
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--text-light);
  background: transparent;
}

.arrow-left:hover {
  background: var(--text-light);
  color: var(--text-dark);
}

.arrow-right {
  background: var(--text-dark);
  color: var(--text-light);
}

.arrow-right:hover {
  background: var(--text-light);
  color: var(--text-dark);
}

/* ================= HERO SECTION UPDATE ================= */

/* Left-Top Wording Badge */
.hero-left-info {
  position: absolute;
  top: 40px;
  left: 60px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-left-info.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}

.hero-tagline {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dark);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  padding: 4px 12px;
  display: inline-block;
  width: fit-content;
  text-transform: uppercase;
}

.hero-subtitle {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* CTA Button Styling (Right Bottom, Left of Dots) */
.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background-color: var(--text-dark);
  color: var(--text-light);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 30px;
  transition: all var(--transition-fast);
 }

.hero-cta-btn i {
  transition: transform var(--transition-fast);
}

 
.hero-cta-btn:hover i {
  transform: translateX(4px);
}

/* ================= MOBILE RESPONSIVE ================= */
@media screen and (max-width: 768px) {
  .hero-left-info {
    top: 15px;
    left: 15px;
  }

  .hero-tagline {
    font-size: 9px;
    padding: 3px 8px;
  }

  .hero-subtitle {
    font-size: 12px;
  }

  .hero-cta-btn {
    padding: 8px 16px;
    font-size: 10px;
  }

  .hero-cta-btn:hover {
    transform: none !important;
  }

  .hero-cta-btn:hover i {
    transform: none !important;
  }
}


@media screen and (max-width: 768px) {


   .hero {
    height: 480px; /* Fixed height instead of full screen */
    min-height: unset; /* Remove full-screen minimum threshold */
  }

  .hero-title-bg {
    font-size: 16vw;
  }

  .hero-title-bg::before {
    font-size: 20vw;
  }

  .hero-image {
    max-width: 100%;
  }

  .hero-image img {
    max-width: 95%; /* Scaled down slightly to fit fixed container height */
  }

  .hero-controls {
    right: 15px;
    bottom: 15px;
    gap: 10px;
  }

  .arrow {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }
  .nav-icon-img:hover {
    transform: none !important;
    filter: none !important;
  }

  /* Disable hover on logo */
  .logo-img:hover {
    transform: none !important;
  }

  /* Disable hover on FontAwesome / Font icons */
  .nav-icons i:hover,
  .top-bar-item:hover,
  .top-bar-promo:hover {
    color: inherit !important;
    opacity: 1 !important;
  }

  /* Disable hover transform & tilt on hero shoe image */
  .hero-image img:hover {
    transform: none !important;
    filter: none !important;
  }

  /* Disable hover background changes on hero arrows */
  .arrow-left:hover {
    background: transparent !important;
    color: var(--text-light) !important;
  }

  .arrow-right:hover {
    background: var(--text-dark) !important;
    color: var(--text-light) !important;
  }
}

 
/* ================= MOBILE RESPONSIVE STYLES ================= */

/* Hide Mobile Menu Toggle on Desktop */
.mobile-menu-btn {
  display: none;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  /* --- Top Bar Adjustments --- */
  .top-bar {
    padding: 0 15px;
    justify-content: center;
    text-align: center;
  }

  .top-bar-left {
    width: 100%;
    justify-content: center;
  }

  /* Hide Contact Details (Email, Phone, WhatsApp) on Mobile */
  .top-bar-right {
    display: none !important;
  }

  .top-bar-promo {
    font-size: 11px;
  }

  /* --- Header / Navigation Layout --- */
  header {
    padding: 12px 16px; /* Compact padding to preserve nav height */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Display Mobile Menu Button on Left */
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    flex: 1;
  }

  /* Hide Desktop Links, Selectors, and User Icon */
  .nav-links,
  .pill-select,
  .desktop-only-icon {
    display: none !important;
  }

  /* Logo Centered & 65px Tall Without Expanding Header */
  .logo {
    flex: 1;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  .logo-img {
    height: 65px; /* Requested size */
    width: auto;
    margin: -10px 0; /* Negative margin prevents increasing nav bar height */
    object-fit: contain;
  }

  /* Right Icons Wrapper */
  .nav-controls {
    flex: 1;
    justify-content: flex-end;
  }

  .nav-icons {
    gap: 16px; /* Spacing between larger icons */
    margin-left: 0;
  }

  /* Increased Icon Dimensions */
  .nav-icon-img {
    width: 22px;  /* Larger icons */
    height: 22px;
  }

  /* Cart Badge Positioning for Larger Cart Icon */
  .cart-badge {
    top: -6px;
    right: -8px;
    width: 17px;
    height: 17px;
    font-size: 10px;
  }
}



/* ================= MOBILE SLIDE-OVER MENU DRAWER ================= */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}

.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
}
/* ================= MOBILE SLIDE-OVER MENU DRAWER ================= */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  /* Updated width: covers 90% of screen width (max 380px on larger mobile screens) */
  width: 90%;
  max-width: 380px;
  height: 100vh;
  height: 100dvh;
  background-color: var(--primary-bg, #ffffff);
  z-index: 2999;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   overflow: hidden;
}

.mobile-nav-drawer.active {
  transform: translateX(0);
}

/* Touch dragging feel */
.mobile-nav-drawer.dragging {
  transition: none !important;
}
  
/* Header */
.mobile-nav-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
}

.mobile-nav-brand {
  display: flex;
  align-items: center;
}

.mobile-nav-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}


/* Mobile Menu Icon Alignment */
.mobile-nav-item a .nav-icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform var(--transition-fast, 0.3s ease), filter var(--transition-fast, 0.3s ease);
}

.mobile-nav-contact .nav-icon-img,
.mobile-pill-select .nav-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.user-avatar-circle .nav-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Converts black PNG icon to white inside dark circle */
}

.mobile-nav-close-btn {
  background: #f5f5f5;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.mobile-nav-close-img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.mobile-nav-close-btn:hover {
  background-color: var(--accent-cyan, #38b6ff);
  transform: rotate(90deg);
}

/* Account Banner Bar */
.mobile-nav-user-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #fafafa;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
}

.user-avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--text-dark, #0a0a0a);
  color: var(--accent-cyan, #38b6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.user-welcome-info {
  display: flex;
  flex-direction: column;
}

.user-greeting {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted, #888888);
}

.user-auth-trigger {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  text-decoration: none;
  transition: color 0.2s ease;
}

.user-auth-trigger:hover {
  color: var(--accent-cyan, #38b6ff);
}

/* Scrollable Body */
.mobile-nav-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

/* Navigation List */
.mobile-nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.mobile-nav-item a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dark, #0a0a0a);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.mobile-nav-item a i {
  font-size: 15px;
  width: 18px;
  text-align: center;
  color: var(--text-muted, #888888);
  transition: color 0.2s ease;
}

.mobile-nav-item.active a,
.mobile-nav-item a:hover {
  background-color: #f7f7f7;
  color: var(--accent-cyan, #38b6ff);
  padding-left: 28px;
}

.mobile-nav-item.active a i,
.mobile-nav-item a:hover i {
  color: var(--accent-cyan, #38b6ff);
}

.mobile-nav-divider {
  height: 1px;
  background-color: var(--border-light, #f0f0f0);
  margin: 16px 20px;
}

/* Preferences Section */
.mobile-nav-preferences {
  padding: 0 20px;
  margin-bottom: 16px;
}

.pref-title {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted, #888888);
  margin-bottom: 10px;
}

.pref-pills-row {
  display: flex;
  gap: 10px;
}

.mobile-pill-select {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8f8f8;
  border: 1px solid var(--border-pill, #dcdcdc);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
}

.mobile-pill-select i {
  font-size: 11px;
  color: var(--text-muted, #888888);
}

.mobile-pill-select i.arrow {
  font-size: 9px;
}

/* Contact Info Section */
.mobile-nav-contact {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.mobile-contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #666666);
  text-decoration: none;
}

.mobile-contact-line.whatsapp i {
  color: #25d366;
}

/* Footer Socials */
.mobile-nav-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-light, #f0f0f0);
  background: #fafafa;
}

.mobile-social-links {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.mobile-social-links a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border-pill, #dcdcdc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark, #0a0a0a);
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mobile-social-links a:hover {
  background-color: var(--accent-cyan, #38b6ff);
  border-color: var(--accent-cyan, #38b6ff);
}

/* ================= USER ONLINE INDICATOR & NAV STYLES ================= */

/* Desktop User Icon Wrapper */
.user-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.user-icon-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.user-icon-link .desktop-only-icon {
  cursor: pointer;
}

/* Desktop Green Online Dot */
.user-online-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  background-color: #22c55e;
  border: 2px solid #ffffff;
  border-radius: 50%;
  pointer-events: none;
}

/* Mobile Avatar & Online Dot */
.mobile-nav-user-bar .user-avatar-circle {
  position: relative;
}

.user-online-dot-mobile {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: #22c55e;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

/* Mobile Logged In User Text Styling */
.user-greeting.logged-in {
  font-size: 11px;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-account-link {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dark, #0a0a0a);
  text-decoration: none;
  transition: color var(--transition-fast, 0.25s ease);
}

.user-account-link:hover {
  color: var(--accent-cyan, #38b6ff);
}

/* Hide Desktop User Icon & Green Dot on Mobile Screens */
@media screen and (max-width: 600px) {
  .user-icon-wrapper {
    display: none !important;
  }
}



/* ================= CATEGORY GRID / SLIDER SECTION ================= */
.category-section {
  padding: 60px 60px 90px 60px; /* Extra bottom padding for controls */
  background-color: var(--primary-bg);
  position: relative;
}

.category-slider-container {
  position: relative;
  width: 100%;
}

/* Outer Overflow Wrapper - Touch Swipe Enabled */
.category-slider-wrapper {
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
  scrollbar-width: none; /* Hide scrollbar Firefox */
  -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
}

.category-slider-wrapper::-webkit-scrollbar {
  display: none; /* Hide scrollbar Chrome/Safari */
}

/* Flex Track for Horizontal Sliding */
.category-grid {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease-in-out;
}

/* Card Widths: 4 Visible on PC */
.category-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0px;
  text-decoration: none;
  /* (100% - 3 gaps of 20px) / 4 cards */
  flex: 0 0 calc((100% - 60px) / 4);
  min-width: calc((100% - 60px) / 4);
  scroll-snap-align: start;
}

/* Image Container & Smooth Zoom */
.category-img-wrapper {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #f5f5f5;
}

.category-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s ease-out;
  will-change: transform; 
}

/* Hover Zoom Effect */
.category-card:hover .category-img-wrapper img {
  transform: scale(1.12);
}

/* Cyan Category Badge */
.category-badge {
  position: absolute;
  bottom: 20px;
  left: 0;
  background-color: var(--text-dark);
  color: var(--text-light);
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 20px;
  text-transform: uppercase;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  z-index: 2;
}

.category-card:hover .category-badge {
  background-color: var(--text-light);
  color: var(--text-dark);
  transform: translateX(5px);
}

/* Bottom Right Navigation Controls */
.category-controls {
  position: absolute;
  bottom: -60px;
  right: 0;
  display: flex;
  gap: 10px;
  z-index: 5;
}

.cat-arrow {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
 }

.cat-arrow-left {
  border: 1px solid rgba(10, 10, 10, 0.2);
  color: var(--text-dark);
  background: transparent;
}

.cat-arrow-left:hover {
  background: var(--text-dark);
  color: var(--text-light);
}

.cat-arrow-right {
  background: var(--text-dark);
  color: var(--text-light);
}

.cat-arrow-right:hover {
  background: var(--accent-cyan);
  color: var(--text-dark);
}

/* Responsive Breakpoints */
@media screen and (max-width: 1024px) {
  .category-section {
    padding: 40px 30px 80px 30px;
  }
  
  /* Show 2 Cards on Tablet */
  .category-card {
    flex: 0 0 calc((100% - 15px) / 2);
    min-width: calc((100% - 15px) / 2);
  }

  .category-grid {
    gap: 15px;
  }
}

@media screen and (max-width: 600px) {
  .category-section {
    padding: 30px 15px 70px 15px;
  }

  /* Show Only 1 Card on Mobile */
  .category-card {
    flex: 0 0 100%;
    min-width: 100%;
  }

  .category-badge {
    bottom: 15px;
    font-size: 11px;
    padding: 8px 14px;
  }
  
  .category-card:hover .category-img-wrapper img,
  .category-card:hover .category-badge {
    transform: none !important;
  }

  .category-controls {
    bottom: -50px;
    right: 0;
  }

  .cat-arrow {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
}

/* ================= SECTION TITLE STYLES ================= */
.section-title-wrapper {
  text-align: center;
  margin-bottom: 40px;
}

.section-title {
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.2;
}

.title-underline {
  width: 60px;
  height: 3px;
  background-color: var(--accent-cyan); /* Styled using your cyan theme color */
  margin: 12px auto 16px auto;
  border-radius: 2px;
}

.section-subtitle {
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Mobile Responsive Adjustments */
@media screen and (max-width: 768px) {
  .section-title-wrapper {
    margin-bottom: 25px;
  }

  .section-title {
    font-size: 24px;
    letter-spacing: 1px;
  }

  .section-subtitle {
    font-size: 14px;
  }
  
  .title-underline {
    width: 45px;
    margin: 8px auto 12px auto;
  }
}




/* ================= FEATURED PRODUCTS SECTION ================= */
.products-section {
  padding: 60px 60px;
  background-color: var(--primary-bg, #ffffff);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Card Container */
.product-card {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  text-align: center;
}

/* Image Container */
.product-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-img-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Base Image Styling & Animation Setup */
.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.product-img-primary {
  position: relative;
  z-index: 1;
  opacity: 1;
}

.product-img-hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: scale(1.08);
}

.product-img-wrapper:hover .product-img-primary {
  opacity: 0;
  transform: scale(1.05);
}

.product-img-wrapper:hover .product-img-hover {
  opacity: 1;
  transform: scale(1);
}

/* Sale Badge */
.sale-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: var(--text-dark, #111111);
  color: var(--text-light, #ffffff);
  font-size: 10px;
  font-weight: 500;
  padding: 4px 8px;
  letter-spacing: 1px;
  z-index: 3;
}

/* Sold Out Badge */
.sold-out-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background-color: #e53e3e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 500;
  padding: 4px 8px;
  letter-spacing: 1px;
  z-index: 4;
  border-radius: 0px;
  text-transform: uppercase;
}

/* Product Info Container */
.product-info {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Action Buttons Container */
.product-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  opacity: 1;
  visibility: visible;
  position: static;
  transform: none;
}

.action-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--primary-bg, #ffffff);
  border: 1px solid var(--border-pill, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: all var(--transition-fast, 0.2s ease);
}

.action-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  transition: transform var(--transition-fast, 0.2s ease), filter var(--transition-fast, 0.2s ease);
}


/* ==========================================================================
   MOBILE-OPTIMIZED ACTION BUTTONS & WISHLIST BUMP
   ========================================================================== */

/* Base button transitions and hardware acceleration */
.action-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
  cursor: pointer;
  
  /* Disable highlight overlay on mobile tap */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  
  /* Smooth transitions & GPU rendering to eliminate frame drops on mobile */
  will-change: transform, background-color;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover style: Restricted to devices with a primary hover pointer (Desktop) */
@media (hover: hover) and (pointer: fine) {
  .action-btn:hover {
    background-color: var(--accent-cyan, #00b4d8);
    border-color: var(--accent-cyan, #00b4d8);
  }
  
  .action-btn:hover .action-icon-img {
    filter: brightness(0) invert(1);
  }
}

/* Active Wishlist state (persists in localStorage) */
.action-btn.active-wishlist {
  background-color: var(--accent-cyan, #00b4d8) !important;
  border-color: var(--accent-cyan, #00b4d8) !important;
}

/* Ensure inner icon image transitions and scales correctly */
.action-btn .action-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  pointer-events: none;
  transition: filter 0.25s ease, transform 0.2s ease;
}

.action-btn.active-wishlist .action-icon-img {
  filter: brightness(0) invert(1);
}

/* Tactile Active Press State for Mobile */
.action-btn:active {
  transform: scale(0.9);
}

/* Heart Bump Animation Keyframes optimized for mobile webkit rendering */
@keyframes heartBump {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.72);
  }
  60% {
    transform: scale(1.28);
  }
  100% {
    transform: scale(1);
  }
}

/* Class attached temporarily on tap/click */
.action-btn.wishlist-bump {
  animation: heartBump 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Action Container Grid Adjustments */
.product-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Mobile Screen Specific Optimizations (<= 768px) */
@media (max-width: 768px) {
  .product-actions {
    gap: 6px;
    margin-bottom: 6px;
  }

  /* Keeps physical button compact while maintaining safe touch targets */
  .action-btn {
    width: 32px;
    height: 32px;
    position: relative;
  }

  /* Extended invisible touch area (min 44px HIG compliance) */
  .action-btn::after {
    content: '';
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -6px;
    right: -6px;
  }
}

/* Brand Link */
.product-brand {
  font-family: var(--font-primary, inherit);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted, #888888);
  text-decoration: none;
  margin-bottom: 2px;
  transition: color var(--transition-fast, 0.2s ease);
}

.product-brand:hover {
  color: var(--accent-cyan, #00b4d8);
}

/* Product Title */
.product-title {
  font-family: var(--font-primary, inherit);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark, #111111);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.product-title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast, 0.2s ease);
}

.product-title-link:hover {
  color: var(--accent-cyan, #00b4d8);
}

/* Product Price Styling */
.product-price {
  font-family: var(--font-primary, inherit);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-cyan, #00b4d8);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
}

.product-price .old-price {
  text-decoration: line-through;
  color: var(--text-muted, #888888);
  margin-right: 0;
  margin-bottom: 2px;
  font-weight: 500;
  font-size: 13px;
}

.product-price .sale-price {
  color: var(--accent-cyan, #00b4d8);
}

/* Color Swatches Overlay */
.color-swatches {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 4;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  padding: 4px 8px;
  border-radius: 20px;
}

.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--dot-color);
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.color-dot:hover {
  transform: scale(1.2);
}

/* ================= PAYMENT OPTIONS SECTION ================= */
.payment-options {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: 100%;
}

.payment-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: #666666;
  font-family: var(--font-primary, sans-serif);
  line-height: 1.2;
}

.payment-row strong {
  color: #2b2b2b;
  font-weight: 600;
}

.payment-logo {
  height: 14px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #222222;
  cursor: pointer;
  line-height: 1;
}

/* Method 1: Media query for screens <= 768px */
@media (max-width: 768px) {
  /* Prevent hover scale and opacity change on primary image */
  .product-img-wrapper:hover .product-img-primary {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  /* Keep hover image hidden on touch devices */
  .product-img-wrapper:hover .product-img-hover {
    opacity: 0 !important;
    transform: scale(1.08) !important;
  }
}

/* ================= MOBILE RESPONSIVE ADJUSTMENTS ================= */
@media screen and (max-width: 1024px) {
  .products-section {
    padding: 40px 30px;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 600px) {
  .products-section {
    padding: 30px 15px;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }

  .product-actions {
    gap: 8px;
    margin-bottom: 8px;
  }

  .action-btn {
    width: 32px;
    height: 32px;
  }

  .action-icon-img {
    width: 14px;
    height: 14px;
  }

  .product-brand {
    font-size: 9px;
    letter-spacing: 1px;
    margin-bottom: 1px;
  }

  .product-title {
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.2;
  }

  .product-price {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .sold-out-badge {
    bottom: 8px;
    left: 8px;
    font-size: 9px;
    padding: 3px 6px;
  }

  .color-swatches {
    bottom: 8px;
    right: 8px;
    padding: 3px 6px;
    gap: 4px;
  }

  .color-dot {
    width: 10px;
    height: 10px;
  }

  .payment-row {
    font-size: 9px;
    gap: 3px;
  }

  .payment-logo {
    height: 11px;
  }
}



/* ================= TOP BRANDS SECTION ================= */
.brands-section {
  padding: 60px 20px;
  background-color: var(--primary-bg, #ffffff);
  overflow: hidden;
}

.brands-slider-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  cursor: grab; /* Mouse drag Indicator */
  user-select: none;  
  -webkit-user-select: none;
}

.brands-slider-container:active {
  cursor: grabbing;
}

/* Track container holding both card sets */
.brands-track {
  display: flex;
  gap: 20px;
  width: max-content;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* PC View: Exactly 6 visible per row */
.brand-card {
  flex: 0 0 calc((1200px - (20px * 5)) / 6);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background-color: #ffffff;
  border: 1px solid var(--border-light, #f0f0f0);
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-user-drag: none;  
}

/* Brand Logo Image Container */
.brand-logo-wrapper {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.brand-logo-img {
  max-width: 80%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.7);
  transition: filter 0.3s ease, transform 0.3s ease;
  pointer-events: none;  
}

.brand-card:hover .brand-logo-img {
  filter: grayscale(0%) opacity(1);
}

.brand-name {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #666666;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.brand-card:hover .brand-name {
  color: #0a0a0a;
}

/* ================= MOBILE RESPONSIVE STYLES ================= */
@media screen and (max-width: 768px) {
  .brands-section {
    padding: 30px 15px;
  }

  .brands-track {
    gap: 12px;
  }

  .brand-card {
    flex: 0 0 calc((100vw - 30px - 12px) / 2);
    padding: 16px 10px;
  }

  .brand-logo-wrapper {
    height: 45px;
    margin-bottom: 8px;
  }

  .brand-logo-img {
    filter: grayscale(0%) opacity(1);
  }

  .brand-name {
    font-size: 10px;
  }
}



/* ================= BLOG SECTION ================= */
.blog-section {
  padding: 60px 60px 90px 60px;
  background-color: var(--primary-bg, #ffffff);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Card Container */
.blog-card {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  text-align: center;
}

/* Image Container */
.blog-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #f4f4f4;
}

.blog-img-link {
  display: block;
  width: 100%;
  height: 100%;
}

.blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.blog-card:hover .blog-img {
  transform: scale(1.08);
}

/* Top-Left Square Date Badge */
.blog-date-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: #ffffff;
  color: var(--text-dark, #0a0a0a);
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
   z-index: 3;
  pointer-events: none;
}

.blog-date-badge .day {
  font-family: var(--font-primary, serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-dark, #0a0a0a);
}

.blog-date-badge .month {
  font-family: var(--font-primary, serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--text-muted, #666666);
}

/* Blog Content */
.blog-content {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-category {
  font-family: var(--font-primary, serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted, #888888);
  margin-bottom: 8px;
}

.blog-title {
  font-family: var(--font-primary, serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  line-height: 1.3;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

.blog-title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast, 0.3s ease);
}

.blog-title-link:hover {
  color: var(--accent-cyan, #38b6ff);
}

/* Accent Line Divider */
.blog-divider {
  width: 35px;
  height: 2px;
  background-color: var(--accent-cyan, #38b6ff);
  margin: 0 auto 14px auto;
  border-radius: 1px;
  transition: width var(--transition-fast, 0.3s ease);
}

.blog-card:hover .blog-divider {
  width: 55px;
}

.blog-excerpt {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: var(--text-muted, #666666);
  line-height: 1.6;
  max-width: 92%;
  margin: 0 auto;
}

/* ================= MOBILE & TABLET RESPONSIVE ================= */
@media screen and (max-width: 1024px) {
  .blog-section {
    padding: 40px 30px 60px 30px;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media screen and (max-width: 600px) {
  .blog-section {
    padding: 30px 0 50px 0; /* Remove horizontal padding so slider touches edges */
  }

  .blog-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 15px; /* Adds spacing at start and end of scroll area */
  }

  /* Hide scrollbar for clean UI */
  .blog-grid::-webkit-scrollbar {
    display: none;
  }
  .blog-grid {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .blog-card {
    flex: 0 0 100%; /* Forces each card to take full width */
    max-width: 100%;
    scroll-snap-align: center; /* Snaps card directly to middle on release */
    scroll-snap-stop: always;
  }

  .blog-date-badge {
    top: 10px;
    left: 10px;
    width: 44px;
    height: 44px;
  }

  .blog-date-badge .day {
    font-size: 14px;
  }

  .blog-date-badge .month {
    font-size: 9px;
  }

  .blog-title {
    font-size: 16px;
  }

  .blog-excerpt {
    font-size: 12px;
    max-width: 100%;
  }

  .blog-card:hover .blog-img {
    transform: none !important;
  }
}

/* ================= FEATURES / SERVICES BANNER ================= */
.features-section {
  padding: 50px 60px;
  background-color: var(--primary-bg, #ffffff);
  border-top: 1px solid var(--border-light, #f0f0f0);
  border-bottom: 1px solid var(--border-light, #f0f0f0);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Feature Card Wrapper */
.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  background-color: #fafafa;
  border: 1px solid var(--border-light, #f0f0f0);
  border-radius: 0px;
  transition: transform var(--transition-fast, 0.3s ease), 
              border-color var(--transition-fast, 0.3s ease), 
              box-shadow var(--transition-fast, 0.3s ease);
}

.feature-card:hover {
  border-color: var(--accent-cyan, #38b6ff);
}

/* Circular Icon Housing */
.feature-icon-wrapper {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background-color: var(--text-dark, #0a0a0a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background-color var(--transition-fast, 0.3s ease);
}

.feature-card:hover .feature-icon-wrapper {
  background-color: var(--accent-cyan, #38b6ff);
}

/* New PNG Icon Styling */
.feature-icon {
  width: 40px;
  height: 40px; 
  object-fit: contain;
  /* Converts default black PNG to pure white */
  filter: brightness(0) invert(1);
  transition: filter var(--transition-fast, 0.3s ease);
}

/* Switches icon to pure black on hover over cyan background */
.feature-card:hover .feature-icon {
  filter: brightness(0);
}

/* Content Typography */
.feature-title {
  font-family: var(--font-primary, serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.feature-subtitle {
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-cyan, #38b6ff);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.feature-desc {
  font-family: var(--font-primary, serif);
  font-size: 12px;
  color: var(--text-muted, #666666);
  line-height: 1.5;
  margin: 0;
}

/* ================= MOBILE & TABLET RESPONSIVE ================= */
@media screen and (max-width: 1024px) {
  .features-section {
    padding: 40px 30px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 600px) {
  .features-section {
    padding: 30px 15px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .feature-card {
    padding: 20px 14px;
  }

  .feature-card:hover {
    transform: none !important;
  }

  .feature-icon-wrapper {
    width: 55px;
    height: 55px;
    margin-bottom: 12px;
  }

  .feature-icon {
    width: 32px;
    height: 32px;
  }

  .feature-title {
    font-size: 14px;
  }

  .feature-subtitle {
    font-size: 11px;
  }

  .feature-desc {
    font-size: 11px;
  }
}


/* ================= ABOUT US SECTION ================= */
.about-section {
  padding: 80px 60px;
  background-color: var(--primary-bg, #ffffff);
  overflow: hidden;
}

.about-container {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1300px;
  margin: 0 auto;
}

/* Left Image Column */
.about-img-wrapper {
  flex: 1;
  position: relative;
}

.about-img-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0px;
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.about-img-wrapper:hover .about-img {
  transform: scale(1.06);
}

/* Floating Experience Badge */
.about-experience-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background-color: var(--text-dark, #0a0a0a);
  color: var(--text-light, #ffffff);
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.about-experience-badge .exp-number {
  font-family: var(--font-primary, serif);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent-cyan, #38b6ff);
  line-height: 1;
}

.about-experience-badge .exp-text {
  font-family: var(--font-primary, serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 5px;
  color: var(--text-light, #ffffff);
}

/* Right Content Column */
.about-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-tagline {
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-cyan, #38b6ff);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.about-title {
  font-family: var(--font-primary, serif);
  font-size: 30px;
  font-weight: 800;
  color: var(--text-dark, #0a0a0a);
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.about-underline {
  width: 50px;
  height: 3px;
  background-color: var(--accent-cyan, #38b6ff);
  margin-bottom: 20px;
}

.about-description {
  font-family: var(--font-primary, serif);
  font-size: 14px;
  color: var(--text-muted, #666666);
  line-height: 1.7;
  margin-bottom: 28px;
}

.about-description strong {
  color: var(--text-dark, #0a0a0a);
}

/* Features Grid Inside About Us */
.about-features-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-bottom: 32px;
}

.about-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.about-icon {
  font-size: 18px;
  color: var(--accent-cyan, #38b6ff);
  margin-top: 2px;
}

.about-feature-text h4 {
  font-family: var(--font-primary, serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.about-feature-text p {
  font-family: var(--font-primary, serif);
  font-size: 12px;
  color: var(--text-muted, #666666);
  line-height: 1.4;
  margin: 0;
}

/* Button CTA */
.about-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background-color: var(--text-dark, #0a0a0a);
  color: var(--text-light, #ffffff);
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--transition-fast, 0.3s ease);
  border: 1px solid var(--text-dark, #0a0a0a);
}

.about-btn i {
  transition: transform var(--transition-fast, 0.3s ease);
}

.about-btn:hover {
  background-color: var(--accent-cyan, #38b6ff);
  border-color: var(--accent-cyan, #38b6ff);
  color: var(--text-dark, #0a0a0a);
}

.about-btn:hover i {
  transform: translateX(5px);
}

/* ================= STORE LOCATOR SUBSECTION ================= */
.store-locator-wrapper {
  max-width: 1300px;
  margin: 70px auto 0 auto;
  padding-top: 50px;
  border-top: 1px solid #eeeeee;
}

.store-locator-header {
  margin-bottom: 30px;
}

.store-locator-title {
  font-family: var(--font-primary, serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-dark, #0a0a0a);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.store-locator-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  align-items: stretch;
}

/* Store Details Card */
.store-info-card {
  background-color: #f9f9f9;
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
 }

.store-info-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.store-info-icon {
  font-size: 20px;
  color: var(--accent-cyan, #38b6ff);
  margin-top: 2px;
}

.store-info-item h5 {
  font-family: var(--font-primary, serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 4px 0;
}

.store-info-item p {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: var(--text-muted, #666666);
  line-height: 1.5;
  margin: 0;
}

.store-directions-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  background-color: var(--text-dark, #0a0a0a);
  color: var(--text-light, #ffffff);
  font-family: var(--font-primary, serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--transition-fast, 0.3s ease);
  margin-top: 10px;
}

.store-directions-btn:hover {
  background-color: var(--accent-cyan, #38b6ff);
  color: var(--text-dark, #0a0a0a);
}

/* Map Frame */
.store-map-frame {
  width: 100%;
  min-height: 350px;
  position: relative;
  border: 1px solid #e0e0e0;
}

.store-map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 350px;
  border: 0;
  display: block;
}

/* ================= MOBILE & TABLET RESPONSIVE ================= */
@media screen and (max-width: 1024px) {
  .about-section {
    padding: 60px 30px;
  }

  .about-container {
    flex-direction: column;
    gap: 45px;
  }

  .about-img-wrapper, 
  .about-content {
    width: 100%;
  }

  .about-experience-badge {
    bottom: -15px;
    right: 15px;
    padding: 15px 20px;
  }

  .about-title {
    font-size: 24px;
  }

  /* Store Locator Tablet adjustments */
  .store-locator-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .store-map-frame {
    height: 350px;
  }
}

@media screen and (max-width: 600px) {
  .about-section {
    padding: 40px 15px;
  }

  .about-container {
    gap: 35px;
  }

  .about-title {
    font-size: 20px;
  }

  .about-experience-badge {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 15px;
    width: 100%;
  }

  .about-btn {
    width: 100%;
    justify-content: center;
  }

  /* Store Locator Mobile adjustments */
  .store-locator-wrapper {
    margin-top: 50px;
    padding-top: 35px;
  }

  .store-locator-title {
    font-size: 18px;
  }

  .store-info-card {
    padding: 20px;
  }

  .store-map-frame {
    height: 280px;
    min-height: 280px;
  }

  .store-directions-btn {
    width: 100%;
  }
}




/* ================= CONTACT US SECTION ================= */
.contact-section {
  padding: 80px 60px;
  background-color: var(--primary-bg, #ffffff);
  border-top: 1px solid var(--border-light, #f0f0f0);
}

.contact-container {
  display: flex;
  gap: 60px;
  max-width: 1300px;
  margin: 0 auto;
}

/* Left Column Styling */
.contact-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-tagline {
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-cyan, #38b6ff);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.contact-title {
  font-family: var(--font-primary, serif);
  font-size: 30px;
  font-weight: 800;
  color: var(--text-dark, #0a0a0a);
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.contact-underline {
  width: 50px;
  height: 3px;
  background-color: var(--accent-cyan, #38b6ff);
  margin-bottom: 20px;
}

.contact-description {
  font-family: var(--font-primary, serif);
  font-size: 14px;
  color: var(--text-muted, #666666);
  line-height: 1.6;
  margin-bottom: 30px;
}

/* Contact Details List */
.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-bottom: 35px;
}

.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--text-dark, #0a0a0a);
  color: var(--accent-cyan, #38b6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: background-color var(--transition-fast, 0.3s ease), 
              color var(--transition-fast, 0.3s ease);
}

.contact-detail-item:hover .contact-icon {
  background-color: var(--accent-cyan, #38b6ff);
  color: var(--text-dark, #0a0a0a);
}

.contact-detail-text h4 {
  font-family: var(--font-primary, serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.contact-detail-text p {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: var(--text-muted, #666666);
  line-height: 1.4;
  margin: 0;
}

/* Social Media Row */
.contact-socials {
  display: flex;
  gap: 12px;
}

.social-link {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-pill, #dcdcdc);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark, #0a0a0a);
  font-size: 15px;
  text-decoration: none;
  transition: all var(--transition-fast, 0.3s ease);
}

.social-link:hover {
  background-color: var(--accent-cyan, #38b6ff);
  border-color: var(--accent-cyan, #38b6ff);
  color: var(--text-dark, #0a0a0a);
  transform: translateY(-3px);
}

/* Right Column Form Styling */
.contact-form-col {
  flex: 1.1;
  background-color: #fafafa;
  padding: 40px;
  border: 1px solid var(--border-light, #f0f0f0);
}

.form-title {
  font-family: var(--font-primary, serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-row .form-group {
  flex: 1;
}

.form-group {
  width: 100%;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  background-color: var(--primary-bg, #ffffff);
  border: 1px solid var(--border-pill, #dcdcdc);
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: var(--text-dark, #0a0a0a);
  outline: none;
  transition: border-color var(--transition-fast, 0.3s ease);
}

.form-input::placeholder {
  color: var(--text-muted, #888888);
}

.form-input:focus {
  border-color: var(--accent-cyan, #38b6ff);
}

.form-textarea {
  resize: vertical;
}

.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  background-color: var(--text-dark, #0a0a0a);
  color: var(--text-light, #ffffff);
  border: 1px solid var(--text-dark, #0a0a0a);
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast, 0.3s ease);
  margin-top: 8px;
}

.contact-submit-btn:hover {
  background-color: var(--accent-cyan, #38b6ff);
  border-color: var(--accent-cyan, #38b6ff);
  color: var(--text-dark, #0a0a0a);
}

.contact-submit-btn i {
  transition: transform var(--transition-fast, 0.3s ease);
}

.contact-submit-btn:hover i {
  transform: translateX(4px) translateY(-2px);
}

/* ================= MOBILE & TABLET RESPONSIVE ================= */
@media screen and (max-width: 1024px) {
  .contact-section {
    padding: 60px 30px;
  }

  .contact-container {
    flex-direction: column;
    gap: 45px;
  }

  .contact-info-col, 
  .contact-form-col {
    width: 100%;
  }

  .contact-title {
    font-size: 24px;
  }
}

@media screen and (max-width: 600px) {
  .contact-section {
    padding: 40px 15px;
  }

  .contact-form-col {
    padding: 24px 16px;
  }

  .form-row {
    flex-direction: column;
    gap: 16px;
  }

  .contact-title {
    font-size: 20px;
  }

  .contact-submit-btn {
    width: 100%;
  }
}


/* ================= REVIEWS / TESTIMONIALS SECTION ================= */
.reviews-section {
  padding: 80px 60px;
  background-color: var(--primary-bg, #ffffff);
  border-top: 1px solid var(--border-light, #f0f0f0);
}

.reviews-container {
  max-width: 1300px;
  margin: 0 auto;
}

/* Summary Bar */
.reviews-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fafafa;
  border: 1px solid var(--border-light, #f0f0f0);
  padding: 24px 32px;
  margin-bottom: 40px;
  border-radius: 8px;
}

.summary-score-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.score-number {
  font-family: var(--font-primary, serif);
  font-size: 42px;
  font-weight: 800;
  color: var(--text-dark, #0a0a0a);
  line-height: 1;
}

.summary-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-stars {
  color: #f59e0b;
  font-size: 16px;
  display: flex;
  gap: 3px;
}

.score-total {
  font-family: var(--font-primary, serif);
  font-size: 12px;
  color: var(--text-muted, #666666);
  font-weight: 600;
}

/* Write Review CTA Button */
.write-review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  background-color: var(--text-dark, #0a0a0a);
  color: var(--text-light, #ffffff);
  border: 1px solid var(--text-dark, #0a0a0a);
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast, 0.3s ease);
}

.write-review-btn:hover {
  background-color: var(--accent-cyan, #38b6ff);
  border-color: var(--accent-cyan, #38b6ff);
  color: var(--text-dark, #0a0a0a);
}

/* Slider Track Wrapper */
.reviews-slider-wrapper {
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 12px 0; /* Padding prevents outline clipping on focus/hover */
}

.reviews-slider-wrapper::-webkit-scrollbar {
  display: none;
}

.reviews-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  align-items: stretch;
}

/* Review Card Container */
.google-style-card {
  /* Desktop Layout: Exactly 3 cards visible with calculated gap */
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 300px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  padding: 24px;
  position: relative;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.google-style-card:hover {
  border-color: var(--accent-cyan, #38b6ff);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

/* Card Header: Author & Brand Logo Circle Badge */
.google-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.google-author-avatar-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.author-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--text-dark, #0a0a0a);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary, serif);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Circular Logo Badge overlapping the Avatar */
.brand-badge-circle {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1.5px solid var(--accent-cyan, #38b6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-badge-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.google-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}

.author-name {
  font-family: var(--font-primary, serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  margin: 0;
  line-height: 1.2;
}

.google-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.verified-badge {
  color: #10b981;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.bullet-dot {
  color: #9ca3af;
}

.review-date {
  color: var(--text-muted, #6b7280);
  font-weight: 500;
}

/* Stars Row */
.google-stars-row {
  margin-bottom: 10px;
}

.review-stars {
  color: #f59e0b;
  font-size: 14px;
  display: flex;
  gap: 2px;
}

.review-heading {
  font-family: var(--font-primary, serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Review Content & Read More Logic */
.review-text-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.review-text {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: var(--text-muted, #4b5563);
  line-height: 1.6;
  margin: 0;
  transition: all 0.3s ease;
}

/* Multi-line Truncation (...) */
.review-text.is-truncated {
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4; /* Maximum lines before showing '...' */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.read-more-btn {
  background: none;
  border: none;
  color: var(--accent-cyan, #38b6ff);
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0 0 0;
  margin-top: 4px;
  text-align: left;
  width: fit-content;
  transition: color 0.2s ease;
}

.read-more-btn:hover {
  color: var(--text-dark, #0a0a0a);
  text-decoration: underline;
}

/* Bottom Controls */
.reviews-bottom-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 30px;
}

.rev-arrow {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-size: 14px;
  transition: all var(--transition-fast, 0.3s ease);
}

.rev-arrow-left {
  border: 1px solid rgba(10, 10, 10, 0.2);
  color: var(--text-dark, #0a0a0a);
  background: #ffffff;
}

.rev-arrow-left:hover {
  background: var(--text-dark, #0a0a0a);
  color: var(--text-light, #ffffff);
}

.rev-arrow-right {
  background: var(--text-dark, #0a0a0a);
  color: var(--text-light, #ffffff);
}

.rev-arrow-right:hover {
  background: var(--accent-cyan, #38b6ff);
  color: var(--text-dark, #0a0a0a);
}

/* ================= MEDIA QUERIES ================= */

/* Tablet Optimization (Max 1024px) */
@media screen and (max-width: 1024px) {
  .reviews-section {
    padding: 60px 30px;
  }

  .reviews-summary-bar {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .summary-score-box {
    flex-direction: row;
    gap: 16px;
  }

  /* Show 2 cards at a time on Tablet */
  .google-style-card {
    flex: 0 0 calc((100% - 24px) / 2);
    min-width: 280px;
  }
}

/* Mobile Optimization (Max 600px) */
@media screen and (max-width: 600px) {
  .reviews-section {
    padding: 40px 16px;
  }

  .reviews-summary-bar {
    padding: 20px 16px;
  }

  .summary-score-box {
    flex-direction: column;
    gap: 8px;
  }

  .write-review-btn {
    width: 100%;
  }

  /* Show ~1 full card + preview peek of next card on mobile swipe */
  .google-style-card {
    flex: 0 0 85%;
    min-width: 260px;
    padding: 20px 16px;
  }

  .reviews-grid {
    gap: 16px;
  }

  .reviews-bottom-controls {
    justify-content: center;
    margin-top: 24px;
    gap: 12px;
  }

  .rev-arrow {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }
}



/* ================= WRITE A REVIEW MODAL STYLES ================= */
.review-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}

.review-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.review-modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(0.95);
  width: calc(100% - 30px);
  max-width: 480px;
  background-color: var(--primary-bg, #ffffff);
  z-index: 2501;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s ease;
  overflow: hidden;
  border-radius: 0px;
}

.review-modal-container.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}

.review-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: transform var(--transition-fast, 0.25s ease);
}

.review-close-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.review-close-btn:hover {
  transform: scale(1.1) rotate(90deg);
}

.review-modal-content {
  padding: 28px 30px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.review-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.review-badge {
  font-family: var(--font-primary, serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent-cyan, #38b6ff);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.review-title {
  font-family: var(--font-primary, serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark, #0a0a0a);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.review-subtitle {
  font-family: var(--font-primary, serif);
  font-size: 12px;
  color: var(--text-muted, #666666);
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.review-form-group.text-center {
  align-items: center;
  text-align: center;
}

.review-label {
  font-family: var(--font-primary, serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Star Rating Input Styling */
.star-rating-picker {
  display: flex;
  gap: 8px;
  font-size: 22px;
  color: #d1d5db;
  cursor: pointer;
  margin: 2px 0;
}

.star-rating-picker .star-btn {
  transition: transform 0.2s ease, color 0.2s ease;
}

.star-rating-picker .star-btn:hover {
  transform: scale(1.2);
}

.star-rating-picker .star-btn.active {
  color: #f59e0b;
}

.rating-value-text {
  font-family: var(--font-primary, serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #666666);
}

.review-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.review-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  background-color: #fafafa;
  border: 1px solid var(--border-pill, #dcdcdc);
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: var(--text-dark, #0a0a0a);
  outline: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.review-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}

.review-input:focus {
  border-color: var(--accent-cyan, #38b6ff);
  background-color: #ffffff;
}

.review-submit-btn {
  width: 100%;
  padding: 12px;
  background-color: var(--text-dark, #0a0a0a);
  color: var(--text-light, #ffffff);
  border: 1px solid var(--text-dark, #0a0a0a);
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  position: relative;
  transition: all 0.3s ease;
}

.review-submit-btn:hover {
  background-color: var(--accent-cyan, #38b6ff);
  border-color: var(--accent-cyan, #38b6ff);
  color: var(--text-dark, #0a0a0a);
}

.review-submit-btn.is-loading {
  pointer-events: none;
  color: transparent !important;
}

.review-submit-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
  border-radius: 50%;
  animation: dualRingSpin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-sizing: border-box;
}

/* ================= MOBILE RESPONSIVE (BOTTOM SHEET) ================= */
@media screen and (max-width: 600px) {
  .review-modal-container {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    touch-action: pan-y;
  }

  .review-modal-container.dragging {
    transition: none !important;
  }

  .review-modal-container.active {
    transform: translateY(0);
  }

  /* Mobile Grab Handle Bar */
  .review-modal-container::before {
    content: '';
    display: block;
    width: 36px;
    height: 5px;
    background-color: #d1d1d6;
    border-radius: 20px;
    margin: 10px auto 0 auto;
    cursor: grab;
  }

  .review-modal-content {
    padding: 16px 20px 28px 20px;
  }

  .review-close-btn {
    display: none; /* Mobile utilizes pull-down gesture */
  }

  .review-title {
    font-size: 18px;
  }

  .star-rating-picker {
    font-size: 20px;
  }

  .review-input {
    padding: 9px 12px;
    font-size: 12px;
  }

  .review-submit-btn {
    padding: 11px;
    font-size: 11px;
  }
}




/* ================= FAQ SECTION ================= */
.faq-section {
  padding: 80px 60px;
  background-color: var(--primary-bg, #ffffff);
  border-top: 1px solid var(--border-light, #f0f0f0);
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Individual FAQ Accordion Item */
.faq-item {
  border: 1px solid var(--border-light, #f0f0f0);
  background-color: #fafafa;
  transition: border-color var(--transition-fast, 0.3s ease), 
              box-shadow var(--transition-fast, 0.3s ease);
}

.faq-item.active {
  border-color: var(--accent-cyan, #38b6ff);
  background-color: #ffffff;
  box-shadow: 0 4px 15px rgba(56, 182, 255, 0.06);
}

/* Question Trigger Header */
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-primary, serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  letter-spacing: 0.3px;
  transition: color var(--transition-fast, 0.3s ease);
}

.faq-question:hover {
  color: var(--accent-cyan, #38b6ff);
}

.faq-icon {
  font-size: 14px;
  color: var(--text-muted, #666666);
  transition: transform var(--transition-fast, 0.3s ease), 
              color var(--transition-fast, 0.3s ease);
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
  color: var(--accent-cyan, #38b6ff);
}

/* Expanding Answer Body */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
  padding: 0 24px;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 24px 20px 24px;
  transition: max-height 0.4s cubic-bezier(1, 0, 1, 0), padding 0.3s ease;
}

.faq-answer p {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: var(--text-muted, #666666);
  line-height: 1.6;
  margin: 0;
}

/* ================= MOBILE & TABLET RESPONSIVE ================= */
@media screen and (max-width: 1024px) {
  .faq-section {
    padding: 60px 30px;
  }
}

@media screen and (max-width: 600px) {
  .faq-section {
    padding: 40px 15px;
  }

  .faq-question {
    padding: 16px 18px;
    font-size: 13px;
  }

  .faq-answer {
    padding: 0 18px;
  }

  .faq-item.active .faq-answer {
    padding: 0 18px 16px 18px;
  }

  .faq-answer p {
    font-size: 12px;
  }
}





/* ================= SITE FOOTER ================= */
.site-footer {
  background-color: var(--topbar-bg, #0a0a0a);
  color: var(--text-light, #ffffff);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 10;
}

/* 1. Newsletter Row */
.footer-newsletter-wrapper {
  background-color: #111111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 60px;
}

.footer-newsletter-container {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.newsletter-title {
  font-family: var(--font-primary, serif);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-light, #ffffff);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.newsletter-subtitle {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.newsletter-form {
  flex-shrink: 0;
  width: 100%;
  max-width: 500px;
}

.newsletter-input-group {
  display: flex;
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px;
}

.newsletter-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 16px;
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: var(--text-light, #ffffff);
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.newsletter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--accent-cyan, #38b6ff);
  color: var(--text-dark, #0a0a0a);
  border: none;
  padding: 12px 22px;
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all var(--transition-fast, 0.3s ease);
}

.newsletter-btn:hover {
  background-color: #ffffff;
  color: var(--text-dark, #0a0a0a);
}

.newsletter-btn i {
  transition: transform var(--transition-fast, 0.3s ease);
}

.newsletter-btn:hover i {
  transform: translateX(4px);
}

/* 2. Main Footer Grid */
.footer-main {
  padding: 70px 60px 60px 60px;
}

.footer-container {
  max-width: 1300px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 40px;
}

/* Brand Column & Footer Logo */
.footer-logo {
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 16px;
  text-decoration: none;
}

.footer-logo-img {
  max-width: 180px;
  height: auto;
  display: block;
  object-fit: contain;
  transition: max-width 0.3s ease;
}

.logo-text-bold {
  font-family: var(--font-hero, 'Anton', sans-serif);
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--text-light, #ffffff);
  line-height: 1;
}

.logo-text-sub {
  font-family: var(--font-primary, serif);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--accent-cyan, #38b6ff);
  font-weight: 700;
  text-transform: uppercase;
}

.footer-brand-desc {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Social Icons */
.footer-social-links {
  display: flex;
  gap: 10px;
}

.footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light, #ffffff);
  font-size: 14px;
  text-decoration: none;
  transition: all var(--transition-fast, 0.3s ease);
}

.footer-social-icon:hover {
  background-color: var(--accent-cyan, #38b6ff);
  border-color: var(--accent-cyan, #38b6ff);
  color: var(--text-dark, #0a0a0a);
  transform: translateY(-3px);
}

/* Column Headings */
.footer-col-title {
  font-family: var(--font-primary, serif);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-light, #ffffff);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.footer-title-line {
  width: 35px;
  height: 2px;
  background-color: var(--accent-cyan, #38b6ff);
  margin-bottom: 20px;
}

/* Footer Links List */
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-list li a {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--transition-fast, 0.3s ease), padding-left var(--transition-fast, 0.3s ease);
}

.footer-links-list li a:hover {
  color: var(--accent-cyan, #38b6ff);
  padding-left: 5px;
}

/* Contact Info Column */
.footer-contact-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-info-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}

.contact-info-line i {
  font-size: 14px;
  color: var(--accent-cyan, #38b6ff);
  margin-top: 3px;
  flex-shrink: 0;
}

/* 3. Payments & Trust Bar */
.footer-payments-bar {
  background-color: #050505;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 18px 60px;
}

.payments-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.payments-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.5px;
}

.payments-label i {
  color: var(--accent-cyan, #38b6ff);
  font-size: 14px;
}

.payment-methods-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.payment-badge {
  font-family: var(--font-primary, serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-light, #ffffff);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 10px;
  border-radius: 2px;
}

/* 4. Bottom Copyright Bar */
.footer-bottom-bar {
  padding: 20px 60px;
  background-color: #000000;
}

.bottom-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-primary, serif);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.copyright-text strong {
  color: var(--text-light, #ffffff);
}

.developer-text a {
  color: var(--accent-cyan, #38b6ff);
  text-decoration: none;
  font-weight: 600;
  transition: text-decoration var(--transition-fast, 0.3s ease);
}

.developer-text a:hover {
  text-decoration: underline;
}

/* ================= MOBILE & TABLET RESPONSIVE ================= */
@media screen and (max-width: 1024px) {
  .footer-newsletter-wrapper,
  .footer-main,
  .footer-payments-bar,
  .footer-bottom-bar {
    padding-left: 30px;
    padding-right: 30px;
  }

  .footer-newsletter-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  .newsletter-form {
    max-width: 100%;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
  }

  .payments-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media screen and (max-width: 600px) {
  .footer-newsletter-wrapper,
  .footer-main,
  .footer-payments-bar,
  .footer-bottom-bar {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Single column on mobile & center all section contents */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Reduce logo size on mobile */
  .footer-logo-img {
    max-width: 130px;
    margin: 0 auto;
  }

  /* Center headings and title underline indicators */
  .footer-col-title {
    text-align: center;
  }

  .footer-title-line {
    margin-left: auto;
    margin-right: auto;
  }

  /* Center social icons bar */
  .footer-social-links {
    justify-content: center;
  }

  /* Center text elements & details */
  .footer-brand-desc,
  .contact-info-line {
    text-align: center;
    justify-content: center;
  }

  .contact-info-line i {
    margin-top: 2px;
  }

  .footer-links-list li a:hover {
    padding-left: 0;
  }

  /* Newsletter section centered mobile layout */
  .newsletter-text {
    text-align: center;
  }

  .newsletter-title {
    font-size: 18px;
  }

  .newsletter-input-group {
    flex-direction: column;
    background: transparent;
    border: none;
    gap: 10px;
  }

  .newsletter-input {
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
  }

  .newsletter-btn {
    width: 100%;
    justify-content: center;
  }

  /* Center payment badges */
  .payment-methods-list {
    justify-content: center;
  }

  /* Bottom Copyright Bar */
  .bottom-container {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}




/* ================= QUICK VIEW MODAL ================= */
.quickview-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 16px;
  box-sizing: border-box;
}

.quickview-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.quickview-modal-container {
  position: relative;
  background-color: var(--primary-bg, #ffffff);
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-sizing: border-box;
}

.quickview-modal-overlay.active .quickview-modal-container {
  transform: translateY(0);
}

/* Custom Close Button Styling */
.quickview-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  background: #f5f5f5;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.quickview-close-icon {
  width: 45%;
  height: 45%;
  object-fit: contain;
  display: block;
}

.quickview-close-btn:hover {
  background-color: #ffffff;
  opacity: 1;
}

.quickview-modal-content {
  display: flex;
  gap: 36px;
}

/* Left Gallery */
.quickview-gallery {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0; /* Prevents horizontal overflow issues in flex containers */
}

.quickview-main-img-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #f4f4f4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quickview-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrollable / Swipeable 3-Item Thumbnail Track */
.quickview-thumbnails {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; /* Space for smooth touch drag */
  scrollbar-width: thin; /* Clean scrollbar for Firefox */
  scrollbar-color: #dcdcdc transparent;
}

/* Custom Scrollbar styling for Webkit */
.quickview-thumbnails::-webkit-scrollbar {
  height: 4px;
}

.quickview-thumbnails::-webkit-scrollbar-track {
  background: transparent;
}

.quickview-thumbnails::-webkit-scrollbar-thumb {
  background: #dcdcdc;
  border-radius: 4px;
}

.qv-thumb {
  /* Exactly 3 items visible at once calculated with gap space */
  flex: 0 0 calc((100% - 20px) / 3);
  width: calc((100% - 20px) / 3);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: #f4f4f4;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
  scroll-snap-align: start;
  box-sizing: border-box;
}

.qv-thumb:hover,
.qv-thumb.active {
  border-color: var(--accent-cyan, #38b6ff);
  opacity: 1;
}

/* Right Details */
.quickview-details {
  flex: 1.1;
  display: flex;
  flex-direction: column;
}

.qv-product-title {
  font-family: var(--font-primary, serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-dark, #0a0a0a);
  text-transform: uppercase;
  margin: 0 0 6px 0;
}

/* Price Wrapper Container */
.qv-price-wrapper {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
}

/* Current Price */
.qv-product-price {
  font-family: var(--font-primary, serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-cyan, #38b6ff);
  line-height: 1;
}

/* Old Price (Subtle Gray, Smaller, Strikethrough) */
.qv-old-price {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  font-weight: 500;
  color: #999999;
  text-decoration: line-through;
  line-height: 1;
}

/* ================= MOBILE RESPONSIVENESS ================= */
@media (max-width: 768px) {
  .qv-price-wrapper {
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .qv-product-price {
    font-size: 16px;
  }

  .qv-old-price {
    font-size: 12px;
  }
}


.qv-product-desc {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  color: var(--text-muted, #666666);
  line-height: 1.6;
  margin-bottom: 24px;
}

.qv-option-group {
  margin-bottom: 20px;
}

.qv-option-label {
  display: block;
  font-family: var(--font-primary, serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dark, #0a0a0a);
  margin-bottom: 8px;
  position: relative;
  width: fit-content;
}

.qv-option-label::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--text-dark, #0a0a0a);
}

/* Sizes */
.qv-size-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Updated Sizes to accommodate dual labels like "7 | 41" */
.qv-size-btn {
  min-width: 60px;
  width: auto;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border-pill, #dcdcdc);
  background-color: #ffffff;
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  cursor: pointer;
  transition: all 0.2s ease;
}

.qv-size-btn:hover,
.qv-size-btn.active {
  border-color: var(--text-dark, #0a0a0a);
  background-color: var(--text-dark, #0a0a0a);
  color: var(--text-light, #ffffff);
}

/* Color Dots */
.qv-color-selector {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 15px;
}

.qv-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--dot-color);
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qv-color-dot.active,
.qv-color-dot:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 2px var(--primary-bg, #ffffff), 0 0 0 3px var(--text-dark, #0a0a0a);
}

/* Quantity & Action Button */
.qv-actions-row {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  align-items: center;
}

/* Quantity Box & Alignment Fixes */
.qv-quantity-box {
  display: flex;
  border: 1px solid var(--border-pill, #dcdcdc);
  height: 48px;
  width: 80px;  
  flex-shrink: 0;
  box-sizing: border-border;
  background-color: #ffffff;
}

.qv-quantity-box input {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--font-primary, serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  outline: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
   -moz-appearance: textfield;
}

.qv-quantity-box input::-webkit-outer-spin-button,
.qv-quantity-box input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qv-qty-controls {
  display: flex;
  flex-direction: column;
  width: 28px;
  border-left: 1px solid var(--border-pill, #dcdcdc);
  height: 100%;
}

.qv-qty-btn {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 9px;
  color: var(--text-dark, #0a0a0a);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition: background-color 0.2s ease;
}

.qv-qty-btn:hover {
  background-color: #f4f4f4;
}

.qv-qty-btn:first-child {
  border-bottom: 1px solid var(--border-pill, #dcdcdc);
}

 

.qv-add-to-cart-btn {
  flex: 1;
  height: 48px;
  background-color: var(--text-dark, #0a0a0a);
  color: var(--text-light, #ffffff);
  border: 1px solid var(--text-dark, #0a0a0a);
  font-family: var(--font-primary, serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all var(--transition-fast, 0.3s ease);
}

.qv-add-to-cart-btn:hover {
  background-color: var(--accent-cyan, #38b6ff);
  border-color: var(--accent-cyan, #38b6ff);
  color: var(--text-dark, #0a0a0a);
}

/* ================= MOBILE RESPONSIVENESS ================= */
@media (max-width: 768px) {
  .quickview-modal-container {
    padding: 24px 20px 20px;
    max-height: 85vh;
  }

  .quickview-close-btn {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
  }

  .quickview-modal-content {
    flex-direction: column;
    gap: 20px;
  }

  /* Ensures mobile keeps showing 3 thumbnails with touch swipe enabled */
  .quickview-thumbnails {
    gap: 8px;
  }

  .qv-thumb {
    flex: 0 0 calc((100% - 16px) / 3);
    width: calc((100% - 16px) / 3);
  }

  .qv-product-title {
    font-size: 20px;
  }

  
  .qv-product-desc {
    margin-bottom: 16px;
  }

  .qv-actions-row {
    flex-direction: row;
    gap: 12px;
  }
}

/* ================= MODAL ADD TO CART BUTTON LOADING ================= */
.qv-add-to-cart-btn.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important; /* Hide text while loading */
}

.qv-add-to-cart-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
  border-radius: 50%;
  animation: dualRingSpin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-sizing: border-box;
}

/* Success state temporarily turns green */
.qv-add-to-cart-btn.is-success {
  background-color: #38b6ff !important;
  border-color: #38b6ff !important;
  color: #0a0a0a !important;
}




/* ================= ACTION BUTTON LOADING SPINNER (STYLE 2) ================= */

@keyframes dualRingSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Base Loading State (Desktop) */
.action-btn.is-loading {
  pointer-events: none;
  background-color: var(--text-dark, #0a0a0a);
  border-color: var(--text-dark, #0a0a0a);
  position: relative;
}

.action-btn.is-loading .action-icon-img {
  opacity: 0;
}

.action-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
  border-radius: 50%;
  animation: dualRingSpin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-sizing: border-box;
}

/* Mobile Responsive Adjustments (Max Width: 600px) */
@media screen and (max-width: 600px) {
  /* Fits the smaller 32px action-btn container on mobile screens */
  .action-btn.is-loading::after {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
  }
}



/* --- SIDE CART OVERLAY & DRAWER --- */
.side-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.side-cart-overlay.active {
  opacity: 1;
  visibility: visible;
}

.side-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height support for mobile browsers */
  background: #ffffff;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.side-cart-drawer.active {
  transform: translateX(0);
}

/* Header */
.cart-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}

.cart-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-header-title h3 {
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: #111;
  margin: 0;
}

.cart-count-badge {
  background: #f0f0f0;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  color: #555;
}

.cart-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.cart-close-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}   

.cart-close-btn:hover {
  transform: scale(1.15) rotate(90deg);
}
/* Free Shipping Tracker */
.shipping-progress-wrapper {
  padding: 14px 24px;
  background: #fdfdfd;
  border-bottom: 1px solid #f0f0f0;
}

.shipping-text {
  font-size: 0.82rem;
  color: #333;
  margin-bottom: 8px;
}

.progress-bar-bg {
  width: 100%;
  height: 5px; /* Slightly increased height for better visual effect */
  background: #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.4s ease;
  
  /* Segmented ("cut cut") gradient effect using 45deg stripes */
  background-image: repeating-linear-gradient(
    -45deg,
    #38b6ff,
    #38b6ff 8px,
    #ffffff 8px,  /* Transparent or white cut lines */
    #ffffff 12px
  );
  
  background-size: 20px 20px;
  animation: moveStripes 1s linear infinite;
}

/* Moving bar animation */
@keyframes moveStripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}

/* Cart Body Items */
.cart-items-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  -webkit-overflow-scrolling: touch;
}

.cart-item {
  display: flex;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px dashed #e8e8e8;
}

.cart-item-img {
  width: 80px;
  height: 80px;
  border-radius: 0px;
  background: #f7f7f7;
  overflow: hidden;
  flex-shrink: 0;
}

.cart-item-img a {
  display: block;
  width: 100%;
  height: 100%;
}

.cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cart-item-img:hover img {
  transform: scale(1.05);
}

.cart-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cart-item-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #111;
  text-decoration: none;
  max-width: 190px; /* Adjust according to layout width */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.remove-item-btn {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.remove-item-btn:hover {
  color: #e53e3e;
}

.cart-item-meta {
  font-size: 0.78rem;
  color: #777;
  margin: 4px 0 8px;
}

.cart-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 /* Quantity Picker Alignment Fixes */
.cart-qty-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  overflow: hidden;
  height: 28px; /* High layout stability across devices */
  background: #ffffff;
}

.qty-btn {
  background: #f9f9f9;
  border: none;
  width: 28px;
  height: 100%;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  color: #333333;
  transition: background 0.2s ease;
  user-select: none;
}

.qty-btn:hover {
  background: #eeeeee;
}

.qty-input {
  width: 32px;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #111111;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Removes default browser spinners for inputs */
  -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-btn:hover {
  background: #eeeeee;
}

 
.cart-item-price {
  font-weight: 600;
  font-size: 0.85rem;
  color: #111;
}

/* Footer Section */
.cart-footer {
  padding: 20px 24px 24px;
  border-top: 1px solid #f0f0f0;
  background: #ffffff;
}

.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: 1.05rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 8px;
}

.cart-installment-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.76rem;
  color: #666;
  margin-bottom: 6px;
}

.mini-pay-logo {
  height: 14px;
  object-fit: contain;
}

.cart-tax-notice {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 16px;
}

.cart-checkout-actions {
  display: flex;
  gap: 10px;
}

.view-cart-btn, .checkout-btn {
  flex: 1;
  padding: 13px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 0px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.view-cart-btn {
  background: #f2f2f2;
  color: #111;
}

.view-cart-btn:hover {
  background: #e5e5e5;
}

.checkout-btn {
  background: #111111;
  color: #ffffff;
}

.checkout-btn:hover {
  background: #333333;
}

/* ================= VIEW CART & CHECKOUT BUTTON LOADING STATES ================= */

/* Base Loading Class */
.view-cart-btn.is-loading,
.checkout-btn.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important; /* Hides button text */
}

/* Spinner styling for View Cart (Light background -> Dark spinner) */
.view-cart-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top-color: #111111;
  border-bottom-color: #111111;
  border-radius: 50%;
  animation: dualRingSpin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-sizing: border-box;
}
/* ================= CUSTOM CART SCROLLBAR (DESKTOP) ================= */

/* Firefox Scrollbar Support */
@supports (scrollbar-color: auto) {
  .cart-items-body {
    scrollbar-width: thin;
    scrollbar-color: #dcdcdc transparent;
  }
}

/* WebKit Browsers (Chrome, Edge, Safari) */
.cart-items-body::-webkit-scrollbar {
  width: 5px; /* Slim aesthetic scrollbar width */
}

.cart-items-body::-webkit-scrollbar-track {
  background: transparent; /* Seamless blend with cart background */
}

.cart-items-body::-webkit-scrollbar-thumb {
  background-color: #dcdcdc; /* Subtle default pill */
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

/* Accent Cyan highlight when hovering over the scrollbar */
.cart-items-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-cyan, #38b6ff);
}

/* Spinner styling for Checkout (Dark background -> White spinner) */
.checkout-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
  border-radius: 50%;
  animation: dualRingSpin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-sizing: border-box;
}

/* Mobile responsive sizing */
@media (max-width: 480px) {
  .view-cart-btn.is-loading::after,
  .checkout-btn.is-loading::after {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
  }
}

/* ==========================================
   MOBILE RESPONSIVE BREAKPOINTS
   ========================================== */

/* Standard Mobile Devices (<= 480px) */
@media (max-width: 480px) {
  .cart-header {
    padding: 16px 18px;
  }

  .cart-header-title h3 {
    font-size: 1.1rem;
  }

  .cart-count-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
  }

  .shipping-progress-wrapper {
    padding: 12px 18px;
  }

  .shipping-text {
    font-size: 0.76rem;
  }

  .cart-items-body {
    padding: 16px 18px;
    gap: 14px;
  }

  .cart-item {
    gap: 12px;
    padding-bottom: 14px;
  }

  .cart-item-img {
    width: 70px;
    height: 70px;
  }

  .cart-item-title {
    font-size: 0.88rem;
  }

  .cart-item-meta {
    font-size: 0.72rem;
    margin: 2px 0 6px;
  }

  .cart-item-price {
    font-size: 0.8rem;
  }

  .qty-btn {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .qty-input {
    width: 28px;
    font-size: 0.8rem;
  }

  .cart-footer {
    padding: 16px 18px 20px;
  }

  .cart-subtotal-row {
    font-size: 0.95rem;
  }

  .cart-installment-note {
    font-size: 0.7rem;
  }

  .mini-pay-logo {
    height: 12px;
  }

  .cart-tax-notice {
    font-size: 0.7rem;
    margin-bottom: 12px;
  }

  .view-cart-btn, .checkout-btn {
    padding: 11px 8px;
    font-size: 0.75rem;
    letter-spacing: 0.2px;
  }
}

/* Small Screen Mobile Devices (<= 360px) */
@media (max-width: 360px) {
  .cart-checkout-actions {
    flex-direction: column;
    gap: 8px;
  }

  .cart-item-img {
    width: 60px;
    height: 60px;
  }
}

/* --- EMPTY CART & LOADING STATES --- */
.empty-cart-view {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  width: 100%;
}

.empty-cart-icon-wrapper {
  width: 80px;
  height: 80px;
  background: #f7f7f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.empty-cart-icon-wrapper i {
  font-size: 2.2rem;
  color: #999999;
}

.empty-cart-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #111111;
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}

.empty-cart-desc {
  font-size: 0.84rem;
  color: #777777;
  margin: 0 0 24px 0;
  max-width: 260px;
  line-height: 1.4;
}

.empty-cart-btn {
  display: inline-block;
  background: #111111;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 13px 28px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.empty-cart-btn:hover {
  background: #333333;
 }

/* Loading Spinner State */
.cart-loading-view {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #777777;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 40px 0;
}

.cart-loading-view i {
  font-size: 1.8rem;
  color: #111111;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .empty-cart-icon-wrapper {
    width: 70px;
    height: 70px;
  }
  
  .empty-cart-icon-wrapper i {
    font-size: 1.8rem;
  }
  
  .empty-cart-title {
    font-size: 1.05rem;
  }
  
  .empty-cart-desc {
    font-size: 0.78rem;
  }
  
  .empty-cart-btn {
    padding: 11px 22px;
    font-size: 0.75rem;
  }
}


/* Out of Stock Size Button */
.qv-size-btn.disabled,
.qv-size-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed !important;
  pointer-events: none;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
  color: #888;
  border-color: #ddd;
}

 
/* Out of Stock Color Dot */
.qv-color-dot.disabled {
  opacity: 0.3;
  cursor: not-allowed !important;
  pointer-events: none;
  position: relative;
  filter: grayscale(80%);
}

.qv-color-dot.disabled::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -20%;
  width: 140%;
  height: 2px;
  background-color: #7a7a7a;
  transform: rotate(-45deg);
}









/* ================= MEGA MENU STYLES ================= */

/* Position relative wrapper on parent LI */
.nav-links li.has-mega-menu {
  position: static; /* Allows full-width positioning under header */
}

/* Base Mega Menu Outer Drawer */
/* ================= JS-CONTROLLED MEGA MENU ================= */

/* Hide by default */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--primary-bg, #ffffff);
  border-top: 1px solid var(--border-light, #f0f0f0);
    padding: 35px 60px;
  z-index: 999;
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s ease;
  pointer-events: none;
}

/* Activated via JavaScript with delay buffer */
.nav-links li.has-mega-menu.active-mega .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

 

/* Container Inner Layout Grid */
.mega-menu-container {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.2fr; /* 3 text columns + 1 featured product column */
  gap: 40px;
}

/* Column Titles & Underline */
.mega-title {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-dark, #0a0a0a);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mega-line {
  width: 30px;
  height: 2px;
  background-color: var(--accent-cyan, #38b6ff);
  margin-bottom: 16px;
  border-radius: 1px;
}

/* Links List */
.mega-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mega-links li a {
  font-family: var(--font-primary, serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #666666);
  text-transform: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.mega-links li a:hover {
  color: var(--accent-cyan, #38b6ff);
  transform: translateX(4px);
}

/* Navigation Badges (HOT / NEW) */
.nav-badge,
.mega-badge {
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 2px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.nav-badge.hot,
.mega-badge.hot {
  background-color: #ff3b30; /* Vibrant Red */
}

.nav-badge.new,
.mega-badge.new {
  background-color: #34c759; /* Vibrant Green */
}

/* ================= FEATURED PRODUCT SHOWCASE CARD ================= */
.mega-product-card {
  display: flex;
  flex-direction: column;
  background-color: #fafafa;
  border: 1px solid var(--border-light, #f0f0f0);
  text-decoration: none;
  padding: 12px;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

  

.mega-product-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f4f4f4;
  overflow: hidden;
  margin-bottom: 10px;
}

.mega-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
 

.mega-prod-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--text-dark, #0a0a0a);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  z-index: 2;
}

.mega-product-info {
  display: flex;
  flex-direction: column;
}

.mega-prod-brand {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, #888888);
  letter-spacing: 1px;
}

.mega-prod-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark, #0a0a0a);
  margin: 2px 0 4px 0;
}

.mega-prod-price {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}

.mega-prod-price .old {
  text-decoration: line-through;
  color: #999999;
  font-size: 11px;
}

.mega-prod-price .new {
  color: var(--accent-cyan, #38b6ff);
}

/* Responsive Hide for Mobile (Mobile uses slide drawer instead) */
@media screen and (max-width: 1024px) {
  .mega-menu {
    display: none !important;
  }
}

/* ================= HERO HIGH-DENSITY ANIMATED WHITE PARTICLES ================= */

/* Particle Layer Overlay Container */
.hero-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1; /* Positioned above hero background, beneath footwear image */
  overflow: hidden;
}

/* Base Styling for Individual Particles */
.hero-particles .particle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 65%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50%;
  filter: blur(0.8px);
  will-change: transform, opacity;
  animation: floatOutwards 3.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

/* Individual Particle Trajectories, Sizes, Delays, and Outward Positions */
.hero-particles .p1  { width: 14px; height: 14px; animation-delay: 0.0s; --tx: -240px; --ty: -180px; }
.hero-particles .p2  { width: 24px; height: 24px; animation-delay: 0.3s; --tx: 280px;  --ty: -140px; }
.hero-particles .p3  { width: 10px; height: 10px; animation-delay: 0.6s; --tx: -320px; --ty: 160px;  }
.hero-particles .p4  { width: 28px; height: 28px; animation-delay: 0.9s; --tx: 260px;  --ty: 200px;  }
.hero-particles .p5  { width: 16px; height: 16px; animation-delay: 1.2s; --tx: -160px; --ty: 260px;  }
.hero-particles .p6  { width: 30px; height: 30px; animation-delay: 1.5s; --tx: 200px;  --ty: -280px; }
.hero-particles .p7  { width: 12px; height: 12px; animation-delay: 1.8s; --tx: -360px; --ty: -100px; }
.hero-particles .p8  { width: 20px; height: 20px; animation-delay: 0.1s; --tx: 340px;  --ty: 80px;   }
.hero-particles .p9  { width: 8px;  height: 8px;  animation-delay: 0.4s; --tx: -100px; --ty: -240px; }
.hero-particles .p10 { width: 18px; height: 18px; animation-delay: 0.7s; --tx: 140px;  --ty: 280px;  }
.hero-particles .p11 { width: 22px; height: 22px; animation-delay: 1.0s; --tx: -280px; --ty: -240px; }
.hero-particles .p12 { width: 12px; height: 12px; animation-delay: 1.3s; --tx: 360px;  --ty: -220px; }
.hero-particles .p13 { width: 16px; height: 16px; animation-delay: 1.6s; --tx: -380px; --ty: 60px;   }
.hero-particles .p14 { width: 26px; height: 26px; animation-delay: 1.9s; --tx: 220px;  --ty: -200px; }
.hero-particles .p15 { width: 10px; height: 10px; animation-delay: 0.2s; --tx: -200px; --ty: 320px;  }
.hero-particles .p16 { width: 32px; height: 32px; animation-delay: 0.5s; --tx: 300px;  --ty: 260px;  }
.hero-particles .p17 { width: 14px; height: 14px; animation-delay: 0.8s; --tx: -340px; --ty: -300px; }
.hero-particles .p18 { width: 8px;  height: 8px;  animation-delay: 1.1s; --tx: 380px;  --ty: -80px;  }
.hero-particles .p19 { width: 20px; height: 20px; animation-delay: 1.4s; --tx: -80px;  --ty: -300px; }
.hero-particles .p20 { width: 15px; height: 15px; animation-delay: 1.7s; --tx: 120px;  --ty: -340px; }
.hero-particles .p21 { width: 18px; height: 18px; animation-delay: 2.0s; --tx: -400px; --ty: -150px; }
.hero-particles .p22 { width: 25px; height: 25px; animation-delay: 2.2s; --tx: 400px;  --ty: 150px;  }
.hero-particles .p23 { width: 9px;  height: 9px;  animation-delay: 2.4s; --tx: -150px; --ty: -360px; }
.hero-particles .p24 { width: 13px; height: 13px; animation-delay: 2.6s; --tx: 160px;  --ty: -360px; }
.hero-particles .p25 { width: 27px; height: 27px; animation-delay: 2.8s; --tx: -250px; --ty: 350px;  }
.hero-particles .p26 { width: 11px; height: 11px; animation-delay: 3.0s; --tx: 270px;  --ty: -320px; }
.hero-particles .p27 { width: 21px; height: 21px; animation-delay: 0.15s;--tx: -310px; --ty: 210px;  }
.hero-particles .p28 { width: 17px; height: 17px; animation-delay: 0.45s;--tx: 330px;  --ty: -270px; }
.hero-particles .p29 { width: 7px;  height: 7px;  animation-delay: 0.75s;--tx: -50px;  --ty: 380px;  }
.hero-particles .p30 { width: 29px; height: 29px; animation-delay: 1.05s;--tx: 60px;   --ty: -380px; }
.hero-particles .p31 { width: 15px; height: 15px; animation-delay: 1.35s;--tx: -420px; --ty: -40px;  }
.hero-particles .p32 { width: 23px; height: 23px; animation-delay: 1.65s;--tx: 420px;  --ty: 40px;   }
.hero-particles .p33 { width: 11px; height: 11px; animation-delay: 1.95s;--tx: -220px; --ty: -400px; }
.hero-particles .p34 { width: 19px; height: 19px; animation-delay: 2.25s;--tx: 230px;  --ty: 380px;  }
.hero-particles .p35 { width: 13px; height: 13px; animation-delay: 2.55s;--tx: -350px; --ty: 300px;  }

/* Outward Burst Keyframe Sequence */
@keyframes floatOutwards {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
  25% {
    opacity: 0.95;
    transform: translate(calc(-50% + (var(--tx) * 0.35)), calc(-50% + (var(--ty) * 0.35))) scale(1);
  }
  75% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.2);
  }
}

/* Mobile Screen Responsive Downscaling (Screen width <= 768px) */
@media screen and (max-width: 768px) {
  .hero-particles .p1  { --tx: -110px; --ty: -80px;  width: 10px; height: 10px; }
  .hero-particles .p2  { --tx: 130px;  --ty: -60px;  width: 14px; height: 14px; }
  .hero-particles .p3  { --tx: -140px; --ty: 70px;   width: 8px;  height: 8px;  }
  .hero-particles .p4  { --tx: 110px;  --ty: 90px;   width: 14px; height: 14px; }
  .hero-particles .p5  { --tx: -70px;  --ty: 120px;  width: 10px; height: 10px; }
  .hero-particles .p6  { --tx: 90px;   --ty: -120px; width: 16px; height: 16px; }
  .hero-particles .p7  { --tx: -150px; --ty: -40px;  width: 8px;  height: 8px;  }
  .hero-particles .p8  { --tx: 140px;  --ty: 30px;   width: 12px; height: 12px; }
  .hero-particles .p9  { --tx: -40px;  --ty: -110px; width: 6px;  height: 6px;  }
  .hero-particles .p10 { --tx: 60px;   --ty: 130px;  width: 12px; height: 12px; }
  .hero-particles .p11 { --tx: -120px; --ty: -100px; width: 12px; height: 12px; }
  .hero-particles .p12 { --tx: 150px;  --ty: -90px;  width: 8px;  height: 8px;  }
  .hero-particles .p13 { --tx: -160px; --ty: 20px;   width: 10px; height: 10px; }
  .hero-particles .p14 { --tx: 100px;  --ty: -80px;  width: 14px; height: 14px; }
  .hero-particles .p15 { --tx: -90px;  --ty: 140px;  width: 8px;  height: 8px;  }
  .hero-particles .p16 { --tx: 130px;  --ty: 110px;  width: 16px; height: 16px; }
  .hero-particles .p17 { --tx: -140px; --ty: -130px; width: 10px; height: 10px; }
  .hero-particles .p18 { --tx: 160px;  --ty: -30px;  width: 6px;  height: 6px;  }
  .hero-particles .p19 { --tx: -30px;  --ty: -140px; width: 10px; height: 10px; }
  .hero-particles .p20 { --tx: 50px;   --ty: -150px; width: 8px;  height: 8px;  }
  .hero-particles .p21 { --tx: -170px; --ty: -60px;  width: 10px; height: 10px; }
  .hero-particles .p22 { --tx: 170px;  --ty: 60px;   width: 12px; height: 12px; }
  .hero-particles .p23 { --tx: -60px;  --ty: -150px; width: 6px;  height: 6px;  }
  .hero-particles .p24 { --tx: 70px;   --ty: -150px; width: 8px;  height: 8px;  }
  .hero-particles .p25 { --tx: -100px; --ty: 150px;  width: 14px; height: 14px; }
  .hero-particles .p26 { --tx: 110px;  --ty: -130px; width: 8px;  height: 8px;  }
  .hero-particles .p27 { --tx: -130px; --ty: 90px;   width: 10px; height: 10px; }
  .hero-particles .p28 { --tx: 140px;  --ty: -110px; width: 10px; height: 10px; }
  .hero-particles .p29 { --tx: -20px;  --ty: 160px;  width: 6px;  height: 6px;  }
  .hero-particles .p30 { --tx: 30px;   --ty: -160px; width: 14px; height: 14px; }
  .hero-particles .p31 { --tx: -180px; --ty: -20px;  width: 8px;  height: 8px;  }
  .hero-particles .p32 { --tx: 180px;  --ty: 20px;   width: 12px; height: 12px; }
  .hero-particles .p33 { --tx: -90px;  --ty: -170px; width: 8px;  height: 8px;  }
  .hero-particles .p34 { --tx: 100px;  --ty: 160px;  width: 10px; height: 10px; }
  .hero-particles .p35 { --tx: -150px; --ty: 120px;  width: 8px;  height: 8px;  }
}

/* ================= HERO NON-REPEATING RANDOM ROCK WALL OVERLAY ================= */
 
/* ================= VIEW ALL BUTTON STYLES ================= */
.view-all-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 45px;
  width: 100%;
}

.view-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 36px;
  background-color: var(--text-dark, #0a0a0a);
  color: var(--text-light, #ffffff);
  font-family: var(--font-primary, serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--text-dark, #0a0a0a);
  border-radius: 0px; /* Modern Pill Style */
  transition: all var(--transition-fast, 0.3s ease);
 }

.view-all-btn i {
  font-size: 12px;
  transition: transform var(--transition-fast, 0.3s ease);
}

/* Hover Effects (Desktop) */
@media (hover: hover) and (pointer: fine) {
  .view-all-btn:hover {
    background-color: var(--accent-cyan, #38b6ff);
    border-color: var(--accent-cyan, #38b6ff);
    color: var(--text-dark, #0a0a0a);
   }

  
}

/* Mobile Active Press State */
.view-all-btn:active {
  transform: scale(0.97);
}

/* ================= MOBILE RESPONSIVE ADJUSTMENTS ================= */
@media screen and (max-width: 768px) {
  .view-all-wrapper {
    margin-top: 30px;
  }

  .view-all-btn {
    width: 100%; /* Full-width CTA button on mobile screens */
    padding: 12px 20px;
    font-size: 12px;
    letter-spacing: 1px;
  }
}


/* ==========================================================================
   PERMANENT NAV & HEADER COLOR LOCK (PREVENTS DARK/LIGHT MODE OVERRIDES)
   ========================================================================== */

/* Force browser rendering scheme to light for header components */
header, 
.top-bar, 
.mega-menu, 
.mobile-nav-drawer, 
.side-cart-drawer {
  color-scheme: light !important;
  forced-color-adjust: none !important;
}

/* 1. TOP BAR COLOR LOCK */
.top-bar {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.top-bar-promo, 
.top-bar-item {
  color: #ffffff !important;
}

.top-bar-promo .promo-link, 
.top-bar-promo i, 
.top-bar-item:hover {
  color: #38b6ff !important;
}

/* 2. HEADER MAIN CONTAINER LOCK */
header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* 3. NAVIGATION LINKS LOCK */
.nav-links li a {
  color: #0a0a0a !important;
}

.nav-links li a:hover {
  color: #38b6ff !important;
}

/* 4. CONTROLS & PILL SELECT LOCK */
.pill-select {
  background-color: #ffffff !important;
  color: #0a0a0a !important;
  border: 1px solid #dcdcdc !important;
}

.pill-select i {
  color: #666666 !important;
}

.pill-select:hover {
  border-color: #38b6ff !important;
  color: #38b6ff !important;
}

/* 5. ICONS & BADGES LOCK */
.nav-icons i {
  color: #0a0a0a !important;
}

.cart-badge {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
}

/* Fix for PNG Icon colors in Light/Dark mode */
.nav-icon-img {
  filter: none !important;
}

/* 6. MEGA MENU LOCK */
.mega-menu {
  background-color: #ffffff !important;
  border-top: 1px solid #f0f0f0 !important;
}

.mega-title {
  color: #0a0a0a !important;
}

.mega-links li a {
  color: #666666 !important;
}

.mega-links li a:hover {
  color: #38b6ff !important;
}

.mega-product-card {
  background-color: #fafafa !important;
  border: 1px solid #f0f0f0 !important;
}

.mega-prod-title {
  color: #0a0a0a !important;
}

/* 7. MOBILE DRAWER & OVERLAYS LOCK */
.mobile-nav-drawer, 
.mobile-nav-header, 
.mobile-nav-body {
  background-color: #ffffff !important;
}

.mobile-nav-item a {
  color: #0a0a0a !important;
}

.mobile-nav-user-bar {
  background-color: #fafafa !important;
}

.mobile-nav-user-bar .user-greeting {
  color: #888888 !important;
}

.mobile-nav-user-bar .user-auth-trigger, 
.mobile-nav-user-bar .user-account-link {
  color: #0a0a0a !important;
}

/* Force dark mode query override prevention */
@media (prefers-color-scheme: dark) {
  .top-bar {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
  }
  header, 
  .mega-menu, 
  .mobile-nav-drawer, 
  .pill-select {
    background-color: #ffffff !important;
    color: #0a0a0a !important;
  }
}