/*
Run AI Technologies Limited Multivendor E Commerce Store
Author: iMplement|Samuel Baseke
Email: implement@implement.co.ke
Website: www.implement.co.ke
Version 1.0
*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --text-footer: 0.8rem;
  --text-sm: 1.2rem;
  --text-base: 1.6rem;
  --text-paragraph: 2rem;
  --text-h5: 2.4rem;
  --text-h4: 3.2rem;
  --text-h3: 4rem;
  --text-h2: 4.8rem;
  --text-h1: 6.2rem;

  /* FONT WEIGHT */
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* LINE HEIGHT */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;

  /* LETTER SPACING */
  --letter-spacing-tight: -2px;
  --letter-spacing-normal: normal;
  --letter-spacing-mid: 1px;

  /* FONT FAMILY */
  --font-family: "Poppins", sans-serif;

  /* MISCELLANEOUS */
  --nav-height: 300px;

  /* COLORS */
  --primary-dark: #0a0f1c;
  --primary-blue: #1e3a8a;
  --blue-deep: #1e3a8a;
  --blue-mid: #1d4ed8;
  --accent-cyan: #00bfff;
  --accent-orange: #f97316;
  --text-dark: #1f2937;
  --text-light: #6b7280;
  --bg-light: #f8fafc;
  --white: #ffffff;
  --card-bg: #111827;
  --card-border: #1f2937;
  --top-bar: #555555;
  /* EXTENDED */
  --cyan-50: #ecfeff;
  --cyan-100: #cffafe;
  --cyan-dark: #0891b2;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --orange-dark: #ea580c;
  --orange: #f97316;
  --orange-dk: #ea580c;
  --bg: #f0f4f8;
  --surface: #ffffff;
  --border: #e5e7eb;
  --muted: #6b7280;
  --muted-lt: #9ca3af;
  --green: #16a34a;
  --green-bg: #dcfce7;
  --yellow: #f59e0b;
  --red: #dc2626;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.14);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.18);

  /* GREYSCALE */
  --grey-50: #f9fafb;
  --grey-100: #f3f4f6;
  --grey-200: #e5e7eb;
  --grey-300: #d1d5db;
  --grey-400: #9ca3af;
  --grey-500: #6b7280;
  --grey-600: #4b5563;
  --grey-700: #374151;
  --grey-800: #1f2937;
  --grey-900: #111827;
  --grey-950: #030712;
  /* GREY SHADE */
  --grey-shade: var(--grey-800);
  --radius-sm: 8px;
  --radius-msm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xlg: 28px;
  --font-display: "Syne", sans-serif;
  --font-body: "DM Sans", sans-serif;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  font-family: "Poppins", sans-serif;
  line-height: 1.4;
  color: var(--text-dark);
  background: var(--bg-light);
  overflow-x: clip; /* CHANGED from hidden to clip to allow sticky nav */
}
/* ============================================
   Overflow Fix for Sticky Navbar Starts
   ============================================ */
/* ============================================
   Overflow Fix for Sticky Navbar Starts
   ============================================ */
/* Overflow Fix for Sticky Navbar Ends */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-mid);
  color: var(--text-dark);
}
h1 {
  font-size: var(--text-h1);
}
h2 {
  font-size: var(--text-h2);
}
h3 {
  font-size: var(--text-h3);
}
h4 {
  font-size: var(--text-h4);
}
h5 {
  font-size: var(--text-h5);
}
p {
  font-size: var(--text-paragraph);
}
a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  display: block;
}
.container {
  width: 92%;
  max-width: 1280px;
  margin: 0 auto;
}
/* Top Navigation Styles */
.top {
  background: var(--top-bar);
  padding: 6px 0;
  font-size: 1.2rem;
}
.top a {
  color: var(--bg-light);
  transition: color 0.2s ease;
}
.top a:hover {
  color: var(--accent-cyan);
}
.top .cart-summary {
  color: var(--bg-light);
  display: flex;
  align-items: center;
  gap: 4px;
}
.top .menu li + li::before {
  content: "|";
  margin-right: 12px;
  color: var(--accent-orange);
}

/* Mobile */
@media (max-width: 768px) {
  .top .container {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .top .menu li + li::before {
    display: none;
  }
}
/* HEADER STYLES */
/* ============================================
   MAIN NAVBAR Starts
   ============================================ */
body #navbar {
  background: var(--white) !important;
  border-bottom: 3px solid var(--accent-cyan);
  box-shadow: var(--shadow-sm); /* Lighter shadow by default */
  padding: 0;
  transition: box-shadow 0.3s ease;
  /* Removed position: sticky and top: 0 from here */
}

body #navbar.scrolled {
  box-shadow: var(--shadow-lg); /* Darkens shadow on scroll */
}
/* MAIN NAVBAR Ends */

/* ============================================
   Navbar Brand / Logo Starts
   ============================================ */
body #navbar .navbar-brand {
  padding: 8px 0;
  margin-right: 1rem;
  transition: opacity 0.2s ease;
}

body #navbar .navbar-brand:hover {
  opacity: 0.85;
}
/* Navbar Brand / Logo Ends */

/* ============================================
   Navbar Toggler Starts
   ============================================ */
body #navbar .navbar-toggler {
  border: 2px solid var(--accent-cyan) !important;
  border-radius: 6px;
  padding: 5px 9px;
  color: var(--accent-cyan);
  background: transparent;
  box-shadow: none !important;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

body #navbar .navbar-toggler:hover,
body #navbar .navbar-toggler:focus {
  background: var(--accent-cyan) !important;
  color: var(--white) !important;
}

body #navbar .navbar-toggler i {
  font-size: 1.4rem;
  color: inherit;
}
/* Navbar Toggler Ends */

/* ============================================
   Nav Links Starts
   ============================================ */
body #navbar .navbar-nav .nav-item .nav-link {
  font-size: 1.3rem !important;
  font-weight: 500;
  color: var(--text-dark) !important;
  padding: 2.2rem 1.4rem !important;
  position: relative;
  transition: color 0.2s ease;
}

/* Nav Link Underline Indicator Starts */
body #navbar .navbar-nav .nav-item .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--accent-cyan);
  border-radius: 3px 3px 0 0;
  transition: width 0.25s ease;
}
/* Nav Link Underline Indicator Ends */

body #navbar .navbar-nav .nav-item .nav-link:hover,
body #navbar .navbar-nav .nav-item .nav-link.active {
  color: var(--accent-cyan) !important;
}

body #navbar .navbar-nav .nav-item .nav-link:hover::after,
body #navbar .navbar-nav .nav-item .nav-link.active::after {
  width: 70%;
}

body #navbar .navbar-nav .nav-item .nav-link i {
  color: var(--accent-orange);
  transition: transform 0.2s ease;
}

body #navbar .navbar-nav .nav-item .nav-link:hover i {
  transform: translateY(-2px);
}
/* Nav Links Ends */

/* ============================================
   Navbar Buttons Starts
   ============================================ */

/* Search Button Starts */
body .btn-navbar-search {
  background: transparent !important;
  border: 2px solid var(--grey-300) !important;
  color: var(--grey-600) !important;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 1.3rem;
  line-height: 1;
  transition: all 0.2s ease;
}

body .btn-navbar-search:hover,
body .btn-navbar-search[aria-expanded="true"] {
  background: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--white) !important;
}
/* Search Button Ends */

/* Cart Button Starts */
body .btn-navbar-cart {
  background: var(--accent-orange) !important;
  border: 2px solid var(--accent-orange) !important;
  color: var(--white) !important;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 1.3rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

body .btn-navbar-cart:hover {
  background: var(--orange-dark) !important;
  border-color: var(--orange-dark) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
}
/* Cart Button Ends */

/* ============================================
   Navbar Buttons Ends
   ============================================ */

/* ============================================
   Search Bar Collapse Starts
   ============================================ */
body .search-bar-wrapper {
  background: var(--grey-100);
  border-top: 1px solid var(--grey-200);
  border-bottom: 3px solid var(--accent-cyan);
  box-shadow: var(--shadow-sm);
}

/* Search Input Group Starts */
body .search-input-group {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 2px solid var(--grey-200);
  border-radius: 10px;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body .search-input-group:focus-within {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.15);
}
/* Search Input Group Ends */

/* Search Input Starts */
body .search-input-group .search-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 10px 16px;
  font-size: 1.3rem !important;
  color: var(--text-dark);
  background: transparent;
}

body .search-input-group .search-input::placeholder {
  color: var(--grey-400);
}
/* Search Input Ends */

/* Search Submit Button Starts */
body .search-input-group .btn-search-submit {
  background: var(--accent-cyan);
  color: var(--white);
  border: none;
  padding: 10px 20px;
  font-size: 1.3rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

body .search-input-group .btn-search-submit:hover {
  background: var(--cyan-dark);
}
/* Search Submit Button Ends */

/* ============================================
   Search Bar Collapse Ends
   ============================================ */

/* ============================================
   Mobile Responsive Starts
   ============================================ */
@media (max-width: 991px) {
  /* Mobile Nav Links Starts */
  body #navbar .navbar-nav .nav-item .nav-link {
    padding: 1.2rem 0.5rem !important;
    border-bottom: 1px solid var(--grey-200);
    font-size: 1.4rem !important;
  }

  body #navbar .navbar-nav .nav-item .nav-link::after {
    display: none;
  }

  body #navbar .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
  }
  /* Mobile Nav Links Ends */

  /* Mobile Search Bar Starts */
  body .search-input-group .btn-search-submit span {
    display: none;
  }

  body .search-input-group .btn-search-submit {
    padding: 10px 14px;
  }
  /* Mobile Search Bar Ends */
}
/* ============================================
   Mobile Responsive Ends
   ============================================ */

/* ============================================
   Sticky Scroll Effect Starts
   ============================================ */
@media (min-width: 992px) {
  body #navbar {
    transition:
      padding 0.3s ease,
      box-shadow 0.3s ease;
  }

  body #navbar.scrolled {
    box-shadow: var(--shadow-lg);
  }
}
/* ============================================
   Sticky Scroll Effect Ends
   ============================================ */

/* ============================================
 /* ============================================
   HERO SECTION Starts
   ============================================ */
#hero {
  position: relative;
  width: 100%;
}
/* HERO SECTION Ends */

/* ============================================
   Hero Carousel Starts
   ============================================ */
#heroCarousel {
  width: 100%;
}

/* Carousel Item Base Starts */
.carousel-item {
  height: 620px;
  background-size: cover;
  background-position: center center; /* Forces the focal point to the middle */
  background-repeat: no-repeat;
  background-color: var(--primary-dark); /* Added fallback */
  position: relative;
}
/* Carousel Item Base Ends */

/* Slide Background Images Starts */
.carousel-item:nth-child(1) {
  background-image: url("../images/products/Untitled.png");
}

.carousel-item:nth-child(2) {
  background-image: url("../images/products/Tiandy-nvr.png");
}

.carousel-item:nth-child(3) {
  background-image: url("../images/products/Tiandy_POE_NVR_1HDD_8ch01.jpg");
}

.carousel-item:nth-child(4) {
  background-image: url("../images/products/20260116_144810.jpg");
}
/* Slide Background Images Ends */

/* Carousel Overlay Starts */
.carousel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 15, 28, 0.85) 0%,
    rgba(30, 58, 138, 0.6) 60%,
    rgba(0, 191, 255, 0.15) 100%
  );
  z-index: 1;
}
/* Carousel Overlay Ends */

/* Carousel Container Starts */
#heroCarousel .container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}
/* Carousel Container Ends */

/* ============================================
   Hero Carousel Ends
   ============================================ */

/* ============================================
   Hero Content Starts
   ============================================ */
.hero-content {
  max-width: 680px;
  padding: 4rem 0;
  animation: heroFadeUp 0.8s ease forwards;
}

/* Hero Fade Up Animation Starts */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Hero Fade Up Animation Ends */

/* Hero Badge Starts */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 191, 255, 0.12);
  border: 1px solid rgba(0, 191, 255, 0.35);
  color: var(--accent-cyan);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 2rem;
  backdrop-filter: blur(6px);
}
/* Hero Badge Ends */

/* Badge Dot Starts */
.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-cyan);
  border-radius: 50%;
  display: inline-block;
  animation: pulseDot 1.8s ease-in-out infinite;
}

@keyframes pulseDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
}
/* Badge Dot Ends */

/* Hero Heading Starts */
.hero-heading {
  font-size: 5.6rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 1.6rem;
}
/* Hero Heading Ends */

/* Hero Typewriter Starts */
.hero-typewriter {
  color: var(--accent-cyan);
  display: inline-block; /* CHANGED from block */
  min-height: 1.2em; /* Uses em for better scaling */
  font-size: inherit; /* Inherits font size from the heading */
  font-weight: 700;
  white-space: nowrap; /* Prevents words from breaking to a new line */
}

/* Typewriter Cursor Starts */
.hero-typewriter::after {
  content: "|";
  color: var(--accent-orange);
  animation: blinkCursor 0.75s step-end infinite;
  margin-left: 2px;
}

@keyframes blinkCursor {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/* Typewriter Cursor Ends */

/* ============================================
   Hero Typewriter Ends
   ============================================ */

/* Hero Description Starts */
.hero-desc {
  font-size: 1.5rem;
  color: rgba(248, 250, 252, 0.85);
  line-height: 1.7;
  margin-bottom: 2.8rem;
  max-width: 560px;
}
/* Hero Description Ends */

/* ============================================
   Hero Buttons Starts
   ============================================ */
.btn-hero-primary {
  background: var(--accent-cyan);
  color: var(--primary-dark);
  border: 2px solid var(--accent-cyan);
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
}

.btn-hero-primary:hover {
  background: var(--cyan-dark);
  border-color: var(--cyan-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 191, 255, 0.35);
}

.btn-hero-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 1.4rem;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  color: var(--white);
  transform: translateY(-2px);
}
/* ============================================
   Hero Buttons Ends
   ============================================ */

/* ============================================
   Hero Content Ends
   ============================================ */

/* ============================================
   Carousel Indicators Starts
   ============================================ */
#heroCarousel .carousel-indicators {
  z-index: 3;
  margin-bottom: 2.4rem;
  gap: 8px;
}

#heroCarousel .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  transition: all 0.3s ease;
  padding: 0;
}

#heroCarousel .carousel-indicators button.active {
  background: var(--accent-cyan);
  width: 32px;
  border-radius: 10px;
}
/* ============================================
   Carousel Indicators Ends
   ============================================ */

/* ============================================
   Carousel Controls Starts
   ============================================ */
.hero-ctrl-btn {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.4rem;
  backdrop-filter: blur(6px);
  transition: all 0.25s ease;
}

.carousel-control-prev:hover .hero-ctrl-btn,
.carousel-control-next:hover .hero-ctrl-btn {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: var(--primary-dark);
  transform: scale(1.1);
}

.carousel-control-prev,
.carousel-control-next {
  width: 6%;
  z-index: 3;
  opacity: 1;
}
/* ============================================
   Carousel Controls Ends
   ============================================ */

/* ============================================
   Trust Bar Starts
   ============================================ */
.trust-bar {
  background: var(--white);
  border-top: 3px solid var(--accent-cyan);
  box-shadow: var(--shadow-md);
  padding: 2rem 0;
}

/* Trust Grid Starts */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: center;
}
/* Trust Grid Ends */

/* Trust Item Starts */
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.trust-item:hover {
  background: var(--grey-50);
}
/* Trust Item Ends */

/* Trust Icon Starts */
.trust-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  background: linear-gradient(
    135deg,
    rgba(0, 191, 255, 0.12),
    rgba(30, 58, 138, 0.12)
  );
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--accent-cyan);
  transition: transform 0.2s ease;
}

.trust-item:hover .trust-icon {
  transform: scale(1.1);
}
/* Trust Icon Ends */

/* Trust Text Starts */
.trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-text strong {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.3;
}

.trust-text span {
  font-size: 1.1rem;
  color: var(--grey-500);
  line-height: 1.4;
}
/* Trust Text Ends */

/* ============================================
   Trust Bar Ends
   ============================================ */

/* ============================================
   Hero Mobile Responsive Starts
   ============================================ */
@media (max-width: 991px) {
  /* Slide Height Starts */
  .carousel-item {
    height: 480px; /* Reduced height to prevent aggressive cropping on tablets */
    background-position: center 30%; /* Shifts focus slightly higher */
  }
  /* Slide Height Ends */

  /* Heading Size Starts */
  .hero-heading,
  .hero-typewriter {
    font-size: 4rem;
  }

  .hero-typewriter {
    min-height: 5rem;
  }
  /* Heading Size Ends */

  /* Trust Grid Starts */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Trust Grid Ends */
}

@media (max-width: 576px) {
  /* Slide Height Starts */
  .carousel-item {
    height: 480px;
  }
  /* Slide Height Ends */

  /* Heading Size Starts */
  .hero-heading,
  .hero-typewriter {
    font-size: 3.2rem;
  }

  .hero-typewriter {
    min-height: 4.2rem;
  }
  /* Heading Size Ends */

  /* Buttons Stack Starts */
  .hero-btns {
    flex-direction: column;
  }

  .btn-hero-primary,
  .btn-hero-outline {
    text-align: center;
    width: 100%;
  }
  /* Buttons Stack Ends */

  /* Trust Grid Starts */
  .trust-grid {
    grid-template-columns: 1fr;
  }
  /* Trust Grid Ends */

  /* Controls Hide Starts */
  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }
  /* Controls Hide Ends */
}
/* ============================================
   Hero Mobile Responsive Ends
   ============================================ */

/* ============================================
   WHY US SECTION Starts
   ============================================ */
body #why-us {
  background: var(--grey-800);
  padding: 80px 0;
}
/* WHY US SECTION Ends */

/* ============================================
   SHOP SECTION Starts
   ============================================ */
body #shop {
  background: var(--grey-100);
  padding: 32px 0 60px;
}
/* SHOP SECTION Ends */

/* ============================================
   Shop Layout Grid Starts
   ============================================ */
body #shop .shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  gap: 16px;
  align-items: start;
}
/* Shop Layout Grid Ends */

/* ============================================
   Aside Box Starts
   ============================================ */
body #shop .aside-box {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 14px;
}

body #shop .aside-title {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
}

body #shop .aside-title i {
  color: var(--primary-blue);
}

body #shop .small-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
/* Aside Box Ends */

/* ============================================
   Category List Starts
   ============================================ */
body #shop .cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

body #shop .cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--grey-700);
  transition:
    background 0.2s ease,
    color 0.2s ease;
  margin-bottom: 2px;
}

body #shop .cat-item:hover {
  background: var(--blue-50);
  color: var(--accent-cyan);
}

body #shop .cat-item.active {
  background: #fff7ed;
  color: var(--accent-orange);
  font-weight: 600;
}

body #shop .cat-item i {
  font-size: 1.3rem;
  width: 16px;
  text-align: center;
  color: var(--accent-cyan);
  flex-shrink: 0;
}

body #shop .cat-item.active i {
  color: var(--accent-orange);
}

body #shop .cat-count {
  margin-left: auto;
  background: var(--grey-200);
  color: var(--grey-500);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}

body #shop .cat-item.active .cat-count {
  background: #fed7aa;
  color: #c2410c;
}
/* Category List Ends */

/* ============================================
   Price Filter Starts
   ============================================ */
body #shop .price-display {
  display: flex;
  justify-content: space-between;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
}

body #shop .price-display .price-max {
  color: var(--accent-orange);
}

body #shop .price-range {
  width: 100%;
  accent-color: var(--accent-cyan);
  margin-bottom: 6px;
}

body #shop .price-hint {
  font-size: 1.1rem;
  color: var(--grey-400);
  margin-bottom: 12px;
}

/* Price Presets Starts */
body #shop .price-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

body #shop .price-preset {
  padding: 7px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--grey-600);
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

body #shop .price-preset:hover,
body #shop .price-preset.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--cyan-50);
}
/* Price Presets Ends */

body #shop .filter-divider {
  height: 1px;
  background: var(--grey-100);
  margin: 14px 0;
}
/* ============================================
   Enhanced Sort Select Styling Starts
   ============================================ */
body #shop .sort-select {
  /* Remove default browser styling and arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  font-size: 1.3rem;
  font-weight: 500;
  /* Extra padding on the right to make room for our custom arrow */
  padding: 8px 36px 8px 14px;
  border: 1px solid var(--grey-300);
  border-radius: 8px;
  color: var(--text-dark);
  background-color: var(--white);

  /* Custom SVG Chevron Arrow (Matches your theme) */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234b5563%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px auto;

  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

/* Hover State */
body #shop .sort-select:hover {
  border-color: var(--accent-cyan);
}

/* Focus State (When clicked) */
body #shop .sort-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.15);
}

/* Fix for Firefox to hide its stubborn default arrow */
body #shop .sort-select::-ms-expand {
  display: none;
}
/* Enhanced Sort Select Styling Ends */
/* Rating Filters Starts */
body #shop .rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--grey-600);
}
@media (max-width: 991px) {
  body #shop .mobile-filter-bar .sort-select {
    flex: 1; /* Tells the box to take up the available middle space */
    min-width: 130px; /* Prevents it from shrinking too much */
    font-size: 1.25rem; /* Slightly smaller text for tight mobile screens */
  }
}
body #shop .stars {
  color: #f59e0b;
  letter-spacing: 1px;
  font-size: 1.3rem;
}

body #shop .rating-count {
  font-size: 1.1rem;
  color: var(--grey-400);
}
/* Rating Filters Ends */

/* Availability Filters Starts */
body #shop .avail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--grey-600);
}
/* Availability Filters Ends */

/* Apply Button Starts */
body #shop .btn-apply-filter {
  width: 100%;
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 10px;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

body #shop .btn-apply-filter:hover {
  background: var(--accent-orange);
}
/* Apply Button Ends */

/* ============================================
   Price Filter Ends
   ============================================ */

/* ============================================
   Sort & Tag Bar Starts
   ============================================ */
body #shop .sort-tag-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

body #shop .sort-select {
  font-size: 1.2rem;
  padding: 7px 12px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  color: var(--text-dark);
  background: var(--white);
  cursor: pointer;
}

body #shop .tag-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

body #shop .tag-btn {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 1.1rem;
  font-weight: 600;
  border: 1px solid var(--grey-200);
  color: var(--grey-600);
  background: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
}

body #shop .tag-btn:hover,
body #shop .tag-btn.active {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: var(--white);
}

body #shop .result-count {
  font-size: 1.2rem;
  color: var(--grey-400);
  margin-left: auto;
}
/* Sort & Tag Bar Ends */

/* ============================================
   Section Head Starts
   ============================================ */
body #shop .shop-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

body #shop .shop-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-dark);
}

body #shop .shop-section-title i {
  color: var(--accent-cyan);
}

body #shop .shop-view-all {
  font-size: 1.2rem;
  color: var(--accent-cyan);
  font-weight: 600;
  transition: color 0.2s ease;
}

body #shop .shop-view-all:hover {
  color: var(--cyan-dark);
}
/* Section Head Ends */

/* ============================================
   Product Grid Starts
   ============================================ */
body #shop .prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
/* Product Grid Ends */

/* ============================================
   Product Card Starts
   ============================================ */
body #shop .prod-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
}

body #shop .prod-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Product Image Starts */
body #shop .prod-img {
  position: relative;
  height: 160px;
  background: var(--grey-100);
  overflow: hidden;
}

body #shop .prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

body #shop .prod-card:hover .prod-img img {
  transform: scale(1.04);
}
/* Product Image Ends */

/* Product Badges Starts */
body #shop .prod-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
}

body #shop .badge-discount {
  background: var(--accent-orange);
}
body #shop .badge-hot {
  background: var(--primary-blue);
}
body #shop .badge-new {
  background: var(--accent-cyan);
}
/* Product Badges Ends */

/* Product Body Starts */
body #shop .prod-body {
  padding: 14px;
}

body #shop .prod-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 5px;
  line-height: 1.4;
}

body #shop .prod-desc {
  font-size: 1.1rem;
  color: var(--grey-400);
  line-height: 1.5;
  margin-bottom: 12px;
}

/* =============================================
    
       BREADCRUMB BAR
    ============================================= */
.bc-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 1.2rem 0;
}

.bc-inner {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.2rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.bc-inner a {
  color: var(--muted);
  transition: color 0.2s;
}

.bc-inner a:hover {
  color: var(--accent-cyan);
}

.bc-inner .sep {
  color: var(--accent-cyan);
  font-size: 0.9rem;
}

.bc-inner .current {
  color: var(--orange);
  font-weight: 600;
}

/* =============================================
       HERO SECTION
    ============================================= */
.pd-hero {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 3.6rem 0 4rem;
}

.pd-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.in-box-card {
  margin-top: 2.4rem;
  background: linear-gradient(135deg, var(--primary-dark), #0d1a3a);
  border: 1px solid var(--border);
  border-radius: var(--radius-msm);
  padding: 1.8rem;
}
.in-box-card .in-box-card-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.in-box-card ul li {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.6;
}

/* ─── LEFT: IMAGE COLUMN ─── */
.pd-gallery {
  position: sticky;
  top: 2rem;
}

.gallery-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--g50);
  /* Changed from gradient to a clean grey background for real images */
  border: 1px solid var(--border);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.4rem;
  cursor: zoom-in;
}

/* REAL IMAGE STYLING */
.gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Change to 'contain' if your product images have white backgrounds you want to keep intact */
  transition:
    transform 0.4s ease,
    opacity 0.2s ease;
}

.gallery-main:hover .gallery-main-img {
  transform: scale(1.06);
  /* Zoom effect on hover */
}

.gallery-badge-overlay {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}

.gal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  backdrop-filter: blur(8px);
}

.gb-new {
  background: rgba(0, 191, 255, 0.85);
  color: var(--primary-dark);
}

.gb-sale {
  background: rgba(249, 115, 22, 0.85);
}

.gb-stock {
  background: rgba(22, 163, 74, 0.85);
}

.gallery-zoom-hint {
  position: absolute;
  bottom: 1.4rem;
  right: 1.4rem;
  background: rgba(10, 15, 28, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 1.1rem;
  color: var(--white);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Thumbnail Strip */
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.thumb-item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--g50);
  /* Changed from gradient */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--border);
  transition: all 0.2s;
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Change to contain if needed */
}

.thumb-item.active,
.thumb-item:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 191, 255, 0.25);
}

/* ─── RIGHT: INFO COLUMN ─── */
.pd-info {
  padding: 2.65rem;
  background: var(--grey-50);
  border-radius: var(--radius-lg);
}
.btn-buy-now {
  background: linear-gradient(135deg, var(--orange), var(--orange-dk));
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 1.4rem 2.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  transition: all 0.22s;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pd-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(
    135deg,
    rgba(30, 58, 138, 0.1),
    rgba(0, 191, 255, 0.1)
  );
  border: 1px solid rgba(0, 191, 255, 0.25);
  color: var(--cyan-dark);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-lg);
  margin-bottom: 1.4rem;
}

.pd-name {
  font-family: var(--font-family);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 1.2rem;
}

.pd-name span {
  color: var(--accent-cyan);
}

/* Rating row */
.pd-rating-row {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.stars-big {
  color: var(--yellow);
  font-size: 1.6rem;
  letter-spacing: 2px;
}

.rating-score {
  font-family: var(--font-family);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-dark);
}

.rating-count {
  font-size: 1.3rem;
  color: var(--muted);
}

.rating-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
}

.review-link {
  font-size: 1.3rem;
  color: var(--cyan-dark);
  font-weight: 600;
  transition: color 0.2s;
}

.review-link:hover {
  color: var(--orange);
}

/* Price block */
.pd-price-block {
  background: linear-gradient(135deg, #f8fafc, #f0f9ff);
  border: 1px solid rgba(0, 191, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 2rem 2.2rem;
  margin-bottom: 2.2rem;
  position: relative;
  overflow: hidden;
}

.pd-price-block::before {
  content: "";
  position: absolute;
  right: -20px;
  top: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 191, 255, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 0.6rem;
}

.price-now {
  font-family: var(--font-family);
  font-size: 4rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.5px;
}

.price-was {
  font-size: 1.8rem;
  color: var(--muted-lt);
  text-decoration: line-through;
}

.price-save-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef9c3;
  border: 1px solid #fde047;
  color: #854d0e;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-lg);
}

.price-meta {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.price-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1.2rem;
  color: var(--muted);
}

.price-meta-item i {
  color: var(---accent-cyan);
  font-size: 1.1rem;
}

/* Stock status */
.pd-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

.stock-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
  animation: stockPulse 2s ease-in-out infinite;
}

@keyframes stockPulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.08);
  }
}

/* Variant picker */
.pd-section-label {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--g600);
  margin-bottom: 1rem;
}

.variant-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.variant-chip {
  padding: 7px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--g700);
  background: var(--white);
  cursor: pointer;
  transition: all 0.18s;
}

.variant-chip:hover {
  border-color: var(--accent-cyan);
  color: var(--cyan-dark);
}

.variant-chip.active {
  border-color: var(--accent-cyan);
  background: var(--cyan-pale);
  color: var(--cyan-dark);
  font-weight: 700;
}

.variant-chip.sold-out {
  opacity: 0.45;
  pointer-events: none;
  text-decoration: line-through;
}

/* Color dots */
.color-picker {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 2rem;
}

.color-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
}

.color-dot:hover,
.color-dot.active {
  border-color: var(--accent-cyan);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.color-dot.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: white;
  font-weight: 700;
}

/* Qty + Actions */
.pd-actions {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}

.qty-control {
  display: flex;
  align-items: center;
  border: 2px solid var(--border);
  border-radius: var(--radius-msm);
  overflow: hidden;
  background: var(--white);
}

.qty-btn {
  width: 42px;
  height: 48px;
  background: var(--g50);
  border: none;
  font-size: 1.6rem;
  color: var(--g600);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}

.qty-btn:hover {
  background: var(--cyan-pale);
  color: var(--cyan-dark);
}

.qty-input {
  width: 56px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-dark);
  font-family: var(--font-family);
  background: var(--white);
  outline: none;
}

.btn-add-cart {
  /* flex: 1; */
  /* min-width: 200px; */
  background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 1.4rem 2.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: all 0.22s;
  letter-spacing: 0.3px;
}

.btn-add-cart:hover {
  background: linear-gradient(135deg, var(--orange-dk), var(--orange));
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.35);
}

.btn-add-cart.added {
  background: linear-gradient(135deg, #16a34a, #15803d);
}

.btn-buy-now {
  background: linear-gradient(135deg, var(--orange), var(--orange-dk));
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 1.4rem 2.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  transition: all 0.22s;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-buy-now:hover {
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.4);
  transform: translateY(-2px);
}

.btn-wishlist-lg {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--g500);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  flex-shrink: 0;
}

.btn-wishlist-lg:hover,
.btn-wishlist-lg.active {
  border-color: #ef4444;
  color: #ef4444;
  background: #fef2f2;
}

.btn-share-lg {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--g500);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  flex-shrink: 0;
}

.btn-share-lg:hover {
  border-color: var(--accent-cyan);
  color: var(--cyan-dark);
}

/* Trust badges inline */
.pd-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.pd-trust-item {
  background: var(--g50);
  border: 1px solid var(--border);
  border-radius: var(--radius-msm);
  padding: 1.2rem 1rem;
  text-align: center;
  transition: all 0.2s;
}

.pd-trust-item:hover {
  background: var(--cyan-pale);
  border-color: rgba(0, 191, 255, 0.25);
}

.pd-trust-item i {
  font-size: 1.8rem;
  color: var(--accent-cyan);
  display: block;
  margin-bottom: 5px;
}

.pd-trust-item strong {
  font-size: 1.15rem;
  color: var(--text-dark);
  display: block;
  font-weight: 700;
  line-height: 1.3;
}

.pd-trust-item span {
  font-size: 1.05rem;
  color: var(--muted);
}

/* Delivery estimate */
.pd-delivery {
  background: linear-gradient(135deg, var(--primary-dark), #0d1a3a);
  border-radius: var(--radius-md);
  padding: 1.8rem 2rem;
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
}

.delivery-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 191, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.8rem;
  color: var(--accent-cyan);
}

.delivery-text .dlv-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}

.delivery-text p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.6;
}

.delivery-text .dlv-pin {
  color: var(--accent-cyan);
  font-weight: 600;
  cursor: pointer;
}

/* =============================================
       TABS SECTION (Styles omitted for brevity, but they remain intact)
    ============================================= */
.pd-tabs-section {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
  margin-top: 2.8rem;
}

.tabs-nav {
  display: flex;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs-nav::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  padding: 1.8rem 2.6rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: all 0.2s;
  position: relative;
}

.tab-btn:hover {
  color: var(--cyan-dark);
}

.tab-btn.active {
  color: var(--primary-dark);
  border-bottom-color: var(--accent-cyan);
}

.tab-btn .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: var(--g100);
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--g500);
  margin-left: 6px;
  padding: 0 6px;
  transition: all 0.2s;
}

.tab-btn.active .tab-count {
  background: var(--accent-cyan);
  color: var(--primary-dark);
}

.tabs-body {
  padding: 3.6rem 0;
}

/* Layout Grids */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.overview-desc p {
  font-size: var(--text-base);
  color: var(--g700);
  line-height: 1.85;
  margin-bottom: 1.6rem;
}
.overview-desc h3 {
  font-size: var(--text-paragraph);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
.overview-desc li {
  list-style: inside;
  list-style-position: inside;
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
  line-height: var(--line-height-normal);
}
.quick-specs-card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 2.65rem;
}
.quick-specs-card h3 {
  font-family: var(--font-family);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.8rem;
  color: var(--primary-dark);
}
.quick-specs-card li {
  font-size: 1.2rem;
  color: var(--g600);
  display: flex;
  gap: 8px;
  align-items: center;
}
.quick-specs-card li .fa-solid {
  color: var(--green);
  width: 14px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  background: var(--grey-100);
  border-radius: var(--radius-msm);
  border: 1px solid var(--border);
  transition: all 0.2s;
}

.feature-item:hover {
  background: var(--cyan-pale);
  border-color: rgba(0, 191, 255, 0.2);
}

.fi-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--cyan-pale), #e0f2fe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--cyan-dark);
  flex-shrink: 0;
}

.fi-text strong {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
}

.fi-text span {
  font-size: 1.2rem;
  color: var(--muted);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table tr:first-child td {
  padding-top: 0;
}

.spec-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--border);
}

.spec-table td {
  padding: 1.2rem 0;
  font-size: 1.3rem;
  vertical-align: top;
}

.spec-table td:first-child {
  color: var(--muted);
  font-weight: 500;
  width: 40%;
  padding-right: 1.6rem;
}

.spec-table td:last-child {
  color: var(--text-dark);
  font-weight: 600;
}

.specs-full-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.spec-group {
  margin-bottom: 2.4rem;
}

.spec-group-title {
  font-family: var(--font-family);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.spec-group-title i {
  color: var(--accent-cyan);
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--g100);
  gap: 1rem;
}

.spec-key {
  font-size: 1.25rem;
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 120px;
}

.spec-val {
  font-size: 1.25rem;
  color: var(--text-dark);
  font-weight: 600;
  text-align: right;
}

.reviews-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 4rem;
}

.rating-overview {
  background: linear-gradient(145deg, var(--primary-dark), #0d1a3a);
  border-radius: var(--radius-lg);
  padding: 3rem 2.4rem;
  text-align: center;
  position: sticky;
  top: 2rem;
}

.rating-big {
  font-family: var(--font-family);
  font-size: 7rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.rating-big span {
  font-size: 3rem;
  color: var(--muted);
}

.rating-stars-big {
  color: var(--yellow);
  font-size: 2rem;
  letter-spacing: 3px;
  margin-bottom: 0.8rem;
}

.rating-total {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2.4rem;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bar-label {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.6);
  min-width: 20px;
  text-align: right;
}

.bar-stars {
  color: var(--yellow);
  font-size: 1rem;
}

.bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  border-radius: 10px;
  transition: width 1s ease;
}

.bar-pct {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.45);
  min-width: 28px;
}

.btn-write-review {
  width: 100%;
  background: var(--accent-cyan);
  color: var(--primary-dark);
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 2rem;
  transition: all 0.2s;
}

.btn-write-review:hover {
  background: var(--white);
}

.review-card {
  background: var(--g50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2.2rem 2.4rem;
  margin-bottom: 1.4rem;
  transition: all 0.2s;
}

.review-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 191, 255, 0.2);
}

.review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.reviewer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}

.reviewer-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
}

.reviewer-meta {
  font-size: 1.1rem;
  color: var(--muted);
}

.review-stars {
  color: var(--yellow);
  font-size: 1.3rem;
  letter-spacing: 1px;
}

.review-date {
  font-size: 1.15rem;
  color: var(--muted-lt);
}

.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
}

.review-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.6rem;
}

.review-body {
  font-size: 1.3rem;
  color: var(--g700);
  line-height: 1.75;
  margin-bottom: 1.2rem;
}

.review-helpful {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  color: var(--muted);
}

.helpful-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 1.2rem;
  color: var(--g600);
  cursor: pointer;
  transition: all 0.18s;
}

.helpful-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--cyan-dark);
}

.shipping-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
}

.shipping-card {
  background: var(--g50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2.4rem;
}

.sc-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(0, 191, 255, 0.12),
    rgba(30, 58, 138, 0.12)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--accent-cyan);
  margin-bottom: 1.4rem;
}

.sc-title {
  font-family: var(--font-family);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.8rem;
}

.sc-body {
  font-size: 1.3rem;
  color: var(--g600);
  line-height: 1.7;
}

.sc-body strong {
  color: var(--text-dark);
}

/* =============================================
       RELATED PRODUCTS
    ============================================= */
.related-section {
  padding: 5rem 0;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.8rem;
}

.section-title {
  font-family: var(--font-family);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.3px;
}

.section-title span {
  color: var(--accent-cyan);
}

.view-all-link {
  font-size: 1.3rem;
  color: var(--cyan-dark);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  transition:
    gap 0.2s,
    color 0.2s;
}

.view-all-link:hover {
  gap: 9px;
  color: var(--orange);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

.rel-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.22s;
}

.rel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 191, 255, 0.3);
}

.rel-img {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  position: relative;
}

.rel-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: brightness(0.85);
  opacity: 0;
  transition: opacity 0.2s;
}

.rel-card:hover .rel-img::after {
  opacity: 1;
}

.rel-body {
  padding: 1.4rem;
}

.rel-cat {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cyan-dark);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.rel-name {
  font-family: var(--font-family);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rel-price {
  font-family: var(--font-family);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--orange);
}

.rel-stars {
  color: var(--yellow);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.rel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-rel-cart {
  width: 34px;
  height: 34px;
  background: var(--primary-dark);
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.3rem;
  transition: background 0.18s;
}

.btn-rel-cart:hover {
  background: var(--orange);
}

/* =============================================
       STICKY ADD TO CART (mobile)
    ============================================= */
.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 2px solid var(--border);
  padding: 1.2rem 2rem;
  display: none;
  align-items: center;
  gap: 1.4rem;
  z-index: 500;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
}

.sticky-bar .sticky-name {
  flex: 1;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--primary-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-bar .sticky-price {
  font-family: var(--font-family);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--orange);
  flex-shrink: 0;
}

.sticky-bar .btn-sticky-cart {
  background: var(--blue-deep);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s;
}

.sticky-bar .btn-sticky-cart:hover {
  background: var(--orange);
}

@media (max-width: 768px) {
  .sticky-bar {
    display: flex;
  }
}

/* =============================================
       TOAST
    ============================================= */
#toast-wrap {
  position: fixed;
  bottom: 8rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast-pill {
  background: var(--primary-dark);
  color: var(--white);
  border-left: 4px solid var(--accent-cyan);
  border-radius: 12px;
  padding: 1.2rem 1.8rem;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-xl);
  animation: toastIn 0.3s ease;
  min-width: 240px;
}

.toast-pill.toast-green {
  border-left-color: var(--green);
}

.toast-pill i {
  font-size: 1.5rem;
  color: var(--accent-cyan);
}

.toast-pill.toast-green i {
  color: var(--green);
}

@keyframes toastIn {
  from {
    transform: translateX(110%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastOut {
  to {
    transform: translateX(110%);
    opacity: 0;
  }
}

.toast-pill.bye {
  animation: toastOut 0.35s ease forwards;
}

/* =============================================
       ZOOM MODAL WITH REAL IMAGE
    ============================================= */
.zoom-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 28, 0.92);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(8px);
}

.zoom-modal.open {
  opacity: 1;
  pointer-events: all;
}

.zoom-inner {
  background: var(--white);
  border-radius: var(--radius-xlg);
  width: min(90vw, 800px);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.3s;
  padding: 2rem;
}

.zoom-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Ensures the whole image is visible when zoomed */
}

.zoom-modal.open .zoom-inner {
  transform: scale(1);
}

.zoom-close {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  color: var(--primary-dark);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.zoom-close:hover {
  background: rgba(0, 0, 0, 0.25);
  color: var(--white);
}

/* =============================================
       ANIMATIONS
    ============================================= */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pd-gallery {
  animation: fadeUp 0.6s ease 0.05s both;
}

.pd-info {
  animation: fadeUp 0.6s ease 0.15s both;
}

.tabs-body {
  animation: fadeUp 0.5s ease both;
}

.related-grid .rel-card:nth-child(1) {
  animation: fadeUp 0.5s ease 0.05s both;
}

.related-grid .rel-card:nth-child(2) {
  animation: fadeUp 0.5s ease 0.1s both;
}

.related-grid .rel-card:nth-child(3) {
  animation: fadeUp 0.5s ease 0.15s both;
}

.related-grid .rel-card:nth-child(4) {
  animation: fadeUp 0.5s ease 0.2s both;
}

/* =============================================
       RESPONSIVE
    ============================================= */
@media (max-width: 1100px) {
  .pd-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.2rem;
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }

  .specs-full-grid {
    grid-template-columns: 1fr;
  }

  .reviews-layout {
    grid-template-columns: 1fr;
  }

  .rating-overview {
    position: static;
  }

  .shipping-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .pd-hero-grid {
    grid-template-columns: 1fr;
  }

  .pd-gallery {
    position: static;
  }

  .pd-name {
    font-size: 2.4rem;
  }

  .price-now {
    font-size: 3rem;
  }

  .pd-trust-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .pd-trust-row {
    grid-template-columns: 1fr 1fr;
  }

  .pd-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .qty-control {
    align-self: flex-start;
  }

  .btn-add-cart,
  .btn-buy-now {
    justify-content: center;
  }

  .related-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

body #shop .prod-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body #shop .prod-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body #shop .price-current {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-orange);
}

body #shop .price-old {
  font-size: 1.1rem;
  color: var(--grey-400);
  text-decoration: line-through;
}

body #shop .btn-add-cart {
  width: 34px;
  height: 34px;
  background: var(--text-dark);
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  color: var(--white);
  font-size: 1.3rem;
}

body #shop .btn-add-cart:hover {
  background: var(--accent-orange);
}
/* Product Body Ends */

/* ============================================
   Product Card Ends
   ============================================ */

/* ============================================
   Right Sidebar Arrivals Starts
   ============================================ */
body #shop .arrivals-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body #shop .arrival-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--grey-100);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

body #shop .arrival-item:hover {
  border-color: rgba(0, 191, 255, 0.3);
  background: var(--blue-50);
}

body #shop .arrival-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body #shop .arrival-icon i {
  font-size: 1.8rem;
  color: var(--accent-cyan);
}

body #shop .arrival-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2px;
}

body #shop .arrival-tags {
  font-size: 1.1rem;
  color: var(--grey-400);
  margin-bottom: 4px;
}

body #shop .arrival-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-orange);
}

body #shop .stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 4px;
}

body #shop .in-stock {
  background: #dcfce7;
  color: #16a34a;
}

body #shop .pre-order {
  background: #fff7ed;
  color: #c2410c;
}

body #shop .in-stock::before,
body #shop .pre-order::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
/* Right Sidebar Arrivals Ends */

/* ============================================
   Promo CTA Box Starts
   ============================================ */
body #shop .aside-promo {
  background: linear-gradient(135deg, var(--primary-blue), #0e1f4d) !important;
  border: none !important;
}

body #shop .promo-title {
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px;
}

body #shop .promo-desc {
  color: #93c5fd;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

body #shop .btn-promo {
  display: block;
  width: 100%;
  background: var(--accent-orange);
  color: var(--white);
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  transition: background 0.2s ease;
}

body #shop .btn-promo:hover {
  background: var(--orange-dark);
  color: var(--white);
}
/* Promo CTA Box Ends */

/* ============================================
   Shop Responsive Starts
   ============================================ */

/* Tablet Starts */
@media (max-width: 1024px) {
  body #shop .shop-layout {
    grid-template-columns: 200px 1fr 200px;
    gap: 12px;
  }
}
/* Tablet Ends */

/* Small Tablet Starts */
@media (max-width: 820px) {
  body #shop .shop-layout {
    grid-template-columns: 200px 1fr;
  }

  body #shop .sidebar-right {
    display: none;
  }

  body #shop .prod-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* Small Tablet Ends */

/* Mobile Starts */
@media (max-width: 640px) {
  body #shop .shop-layout {
    grid-template-columns: 1fr;
  }

  body #shop .sidebar-left {
    display: none;
  }

  body #shop .prod-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body #shop .sort-tag-bar {
    flex-wrap: wrap;
  }
}
/* Mobile Ends */

/* Extra Small Starts */
@media (max-width: 420px) {
  body #shop .prod-grid {
    grid-template-columns: 1fr;
  }
}
/* Extra Small Ends */

/* ============================================
   Shop Responsive Ends
   ============================================ */
/* ============================================
   Mobile Filter Bar Starts
   ============================================ */
body #shop .mobile-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

body #shop .btn-mobile-filter {
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
}

body #shop .btn-mobile-filter:hover {
  background: var(--accent-orange);
}
/* Mobile Filter Bar Ends */

/* ============================================
   Mobile Tag Filters Starts
   ============================================ */
body #shop .mobile-tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 14px;
  scrollbar-width: none;
}

body #shop .mobile-tags::-webkit-scrollbar {
  display: none;
}
/* Mobile Tag Filters Ends */

/* ============================================
   Mobile Filter Drawer Starts
   ============================================ */
body #shop .mobile-filter-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--grey-200);
  padding: 20px;
  z-index: 2000;
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

body #shop .mobile-filter-drawer.open {
  transform: translateY(0);
}
/* Mobile Filter Drawer Ends */

/* ============================================
   Drawer Overlay Starts
   ============================================ */
body #shop .drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

body #shop .drawer-overlay.open {
  opacity: 1;
  pointer-events: all;
}
/* Drawer Overlay Ends */

/* ============================================
   Drawer Header Starts
   ============================================ */
body #shop .drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

body #shop .drawer-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
}

body #shop .drawer-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--grey-200);
  background: transparent;
  color: var(--grey-600);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

body #shop .drawer-close:hover {
  background: var(--grey-100);
}
header {
  position: sticky;
  top: -36px; /* Hides the top dark bar on scroll, but sticks the white navbar */
  z-index: 1030;
}
/* Drawer Header Ends */

/* ============================================
   Drawer Sections Starts
   ============================================ */
body #shop .drawer-section {
  margin-bottom: 4px;
}

body #shop .drawer-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}
/* Drawer Sections Ends */
/*
============================================
   Contact styles

   ============================================ */
.contact-hero {
  background: linear-gradient(
    135deg,
    var(--primary-dark) 0%,
    #0d1a3a 55%,
    #0a2040 100%
  );
  padding: 5.6rem 0 4.8rem;
  position: relative;
  overflow: hidden;
}
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 191, 255, 0.04) 0,
      transparent 1px,
      transparent 48px,
      rgba(0, 191, 255, 0.04) 49px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 191, 255, 0.04) 0,
      transparent 1px,
      transparent 48px,
      rgba(0, 191, 255, 0.04) 49px
    );
  pointer-events: none;
}
        .contact-hero::after {
            content: "";
            position: absolute;
            right: -10%;
            top: -30%;
            width: 70vw;
            height: 70vw;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0, 191, 255, .07) 0%, transparent 65%);
            pointer-events: none;
        }

        /* Bottom accent line */
        .hero-line {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-orange), transparent);
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3.2rem;
            flex-wrap: wrap;
        }

        .hero-left {
            flex: 1;
            min-width: 260px
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(0, 191, 255, .1);
            border: 1px solid rgba(0, 191, 255, .3);
            color: var(--accent-cyan);
            font-size: 1.15rem;
            font-weight: 600;
            letter-spacing: .6px;
            text-transform: uppercase;
            padding: 5px 14px;
            border-radius: 50px;
            margin-bottom: 1.8rem;
            backdrop-filter: blur(6px);
        }

        .hero-badge .dot {
            width: 7px;
            height: 7px;
            background: var(--accent-cyan);
            border-radius: 50%;
            display: inline-block;
            animation: pulseDot 1.8s ease-in-out infinite;
        }

        .contact-hero h1 {
            font-family: var(--font-family);
            font-size: 5rem;
            font-weight: 800;
            color: var(--white);
            line-height: 1.1;
            letter-spacing: -.5px;
            margin-bottom: 1.4rem;
        }

        .contact-hero h1 span {
            color: var(--accent-cyan)
        }

        .contact-hero .hero-desc {
            font-size: 1.55rem;
            color: rgba(248, 250, 252, .7);
            line-height: 1.75;
            margin-bottom: 0;
            max-width: 520px;
        }

        /* Hero right — quick-contact chips */
        .hero-chips {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            flex-shrink: 0;
        }

        .hero-chip {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--radius-md);
            padding: 1.4rem 2rem;
            backdrop-filter: blur(8px);
            transition: background .2s, border-color .2s, transform .2s;
        }

        .hero-chip:hover {
            background: rgba(0, 191, 255, .1);
            border-color: rgba(0, 191, 255, .35);
            transform: translateX(-4px);
        }

        .chip-icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(0, 191, 255, .2), rgba(30, 58, 138, .2));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.7rem;
            color: var(--accent-cyan);
            flex-shrink: 0;
        }

        .chip-label {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, .5);
            margin-bottom: 2px;
            text-transform: uppercase;
            letter-spacing: .6px
        }

        .chip-val {
            font-size: 1.35rem;
            font-weight: 600;
            color: var(--white)
        }

        /* Breadcrumb */
        .bc-strip {
            background: var(--white);
            border-bottom: 1px solid var(--border);
            padding: 1.1rem 0;
        }

        .bc-inner {
            display: flex;
            align-items: center;
            gap: .8rem;
            font-size: 1.2rem;
            color: var(--muted);
            flex-wrap: wrap;
        }

        .bc-inner a {
            color: var(--muted);
            transition: color .2s
        }

        .bc-inner a:hover {
            color: var(--accent-cyan)
        }

        .bc-inner .sep {
            color: var(--accent-cyan);
            font-size: .9rem
        }

        .bc-inner .current {
            color: var(--accent-orange);
            font-weight: 600
        }

        /* ══════════════════════════════════════════
       MAIN CONTENT AREA
    ══════════════════════════════════════════ */
        .contact-body {
            padding: 5rem 0 6rem;
            background: var(--bg)
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 420px;
            gap: 3rem;
            align-items: start;
        }

        /* ── LEFT: FORM CARD ── */
        .form-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 4rem 4.4rem;
            box-shadow: var(--shadow-md);
        }

        .form-card-head {
            margin-bottom: 3.2rem
        }

        .form-card-head .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--accent-cyan);
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 1rem;
        }

        .form-card-head h2 {
            font-family: var(--font-family);
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--primary-dark);
            line-height: 1.2;
            letter-spacing: -.3px;
            margin-bottom: .8rem;
        }

        .form-card-head p {
            font-size: 1.35rem;
            color: var(--muted);
            line-height: 1.7
        }

        /* Form rows */
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-bottom: 2rem
        }

        .form-row.full {
            grid-template-columns: 1fr
        }

        .field-group {
            display: flex;
            flex-direction: column;
            gap: .7rem
        }

        .field-group label {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--grey-700);
            text-transform: uppercase;
            letter-spacing: .6px;
        }

        .field-group label .req {
            color: var(--accent-orange);
            margin-left: 2px
        }

        .field-input {
            width: 100%;
            padding: 1.3rem 1.6rem;
            border: 1.5px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 1.35rem;
            font-family: var(--font-family);
            color: var(--text-dark);
            background: var(--white);
            transition: border-color .2s, box-shadow .2s, background .2s;
            outline: none;
        }

        .field-input::placeholder {
            color: var(--grey-400)
        }

        .field-input:focus {
            border-color: var(--accent-cyan);
            box-shadow: 0 0 0 3px rgba(0, 191, 255, .12);
            background: var(--cyan-50);
        }

        .field-input:hover:not(:focus) {
            border-color: var(--grey-300)
        }

        .field-input.invalid {
            border-color: var(--red);
            box-shadow: 0 0 0 3px rgba(220, 38, 38, .1)
        }

        .field-error {
            font-size: 1.1rem;
            color: var(--red);
            display: none;
            align-items: center;
            gap: 4px
        }

        .field-error.show {
            display: flex
        }

        textarea.field-input {
            resize: vertical;
            min-height: 140px;
            line-height: 1.6
        }

        /* Select */
        select.field-input {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22292.4%22 height%3D%22292.4%22%3E%3Cpath fill%3D%22%234b5563%22 d%3D%22M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 10px;
            padding-right: 40px;
            cursor: pointer;
        }

        /* File upload */
        .file-upload-wrap {
            position: relative;
            border: 2px dashed var(--border);
            border-radius: var(--radius-sm);
            padding: 2.4rem;
            text-align: center;
            cursor: pointer;
            transition: border-color .2s, background .2s;
        }

        .file-upload-wrap:hover,
        .file-upload-wrap.dragging {
            border-color: var(--accent-cyan);
            background: var(--cyan-50);
        }

        .file-upload-wrap input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            width: 100%;
        }

        .file-icon {
            font-size: 2.8rem;
            color: var(--accent-cyan);
            margin-bottom: .8rem
        }

        .file-label {
            font-size: 1.25rem;
            color: var(--grey-600);
            line-height: 1.6
        }

        .file-label strong {
            color: var(--primary-blue)
        }

        .file-label span {
            font-size: 1.1rem;
            color: var(--grey-400);
            display: block;
            margin-top: 3px
        }

        /* Checkboxes */
        .check-group {
            display: flex;
            flex-direction: column;
            gap: .8rem
        }

        .check-row {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: .8rem 1.2rem;
            border-radius: var(--radius-sm);
            border: 1.5px solid var(--border);
            cursor: pointer;
            transition: border-color .2s, background .2s;
        }

        .check-row:hover {
            border-color: rgba(0, 191, 255, .3);
            background: var(--cyan-50)
        }

        .check-row input[type="checkbox"] {
            accent-color: var(--accent-cyan);
            width: 16px;
            height: 16px;
            cursor: pointer
        }

        .check-row .check-label {
            font-size: 1.25rem;
            color: var(--grey-700);
            font-weight: 500
        }

        .check-row .check-sub {
            font-size: 1.1rem;
            color: var(--grey-400);
            margin-left: auto
        }

        /* Rating stars input */
        .star-rating {
            display: flex;
            gap: .6rem;
            flex-direction: row-reverse;
            justify-content: flex-end
        }

        .star-rating input {
            display: none
        }

        .star-rating label {
            font-size: 2.4rem;
            color: var(--grey-300);
            cursor: pointer;
            transition: color .15s
        }

        .star-rating input:checked~label,
        .star-rating label:hover,
        .star-rating label:hover~label {
            color: var(--yellow)
        }

        /* Submit button */
        .btn-submit {
            width: 100%;
            background: linear-gradient(135deg, var(--primary-blue), var(--blue-mid));
            color: var(--white);
            border: none;
            border-radius: var(--radius-msm);
            padding: 1.6rem 2.8rem;
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: .3px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            transition: background .25s, transform .2s, box-shadow .2s;
            margin-top: 2.8rem;
        }

        .btn-submit:hover {
            background: linear-gradient(135deg, var(--accent-orange), var(--orange-dark));
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(249, 115, 22, .35);
        }

        .btn-submit .spinner {
            display: none;
            width: 18px;
            height: 18px;
            border: 3px solid rgba(255, 255, 255, .3);
            border-top-color: var(--white);
            border-radius: 50%;
            animation: spin .7s linear infinite;
        }

        .btn-submit.loading .btn-text {
            display: none
        }

        .btn-submit.loading .spinner {
            display: block
        }

        /* Success / Error banners */
        .form-feedback {
            display: none;
            align-items: flex-start;
            gap: 1.4rem;
            padding: 2rem 2.4rem;
            border-radius: var(--radius-md);
            margin-bottom: 2.4rem;
        }

        .form-feedback.show {
            display: flex
        }

        .form-feedback.success {
            background: var(--green-bg);
            border: 1px solid rgba(22, 163, 74, .25)
        }

        .form-feedback.error-msg {
            background: #fef2f2;
            border: 1px solid rgba(220, 38, 38, .2)
        }

        .feedback-icon {
            font-size: 2.2rem;
            flex-shrink: 0
        }

        .form-feedback.success .feedback-icon {
            color: var(--green)
        }

        .form-feedback.error-msg .feedback-icon {
            color: var(--red)
        }

        .feedback-text strong {
            font-size: 1.4rem;
            font-weight: 700;
            display: block;
            margin-bottom: 3px
        }

        .feedback-text p {
            font-size: 1.3rem;
            color: var(--grey-600);
            margin: 0;
            line-height: 1.6
        }

        .form-feedback.success .feedback-text strong {
            color: var(--green)
        }

        .form-feedback.error-msg .feedback-text strong {
            color: var(--red)
        }

        /* Character counter */
        .char-counter {
            font-size: 1.1rem;
            color: var(--grey-400);
            text-align: right;
            margin-top: .4rem
        }

        .char-counter.warn {
            color: var(--accent-orange)
        }

        /* ── RIGHT: SIDEBAR ── */
        .contact-sidebar {
            display: flex;
            flex-direction: column;
            gap: 2rem
        }

        /* Info card */
        .info-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .info-card-header {
            background: linear-gradient(135deg, var(--primary-dark), #0d1a3a);
            padding: 2.4rem 2.8rem 2rem;
            position: relative;
            overflow: hidden;
        }

        .info-card-header::before {
            content: "";
            position: absolute;
            right: -20px;
            top: -20px;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: rgba(0, 191, 255, .06);
            pointer-events: none;
        }

        .info-card-header h3 {
            font-family: var(--font-family);
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--white);
            margin-bottom: .5rem;
        }

        .info-card-header p {
            font-size: 1.25rem;
            color: rgba(255, 255, 255, .5);
            margin: 0;
            line-height: 1.6
        }

        .info-card-body {
            padding: 2.4rem 2.8rem
        }

        .contact-detail {
            display: flex;
            align-items: flex-start;
            gap: 1.4rem;
            padding: 1.4rem 0;
            border-bottom: 1px solid var(--border);
            transition: all .2s;
        }

        .contact-detail:last-child {
            border-bottom: none;
            padding-bottom: 0
        }

        .contact-detail:first-child {
            padding-top: 0
        }

        .contact-detail:hover .detail-icon {
            background: linear-gradient(135deg, var(--accent-cyan), var(--cyan-dark));
            color: var(--white)
        }

        .detail-icon {
            width: 44px;
            height: 44px;
            flex-shrink: 0;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(0, 191, 255, .1), rgba(30, 58, 138, .1));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.7rem;
            color: var(--accent-cyan);
            transition: background .2s, color .2s;
        }

        .detail-label {
            font-size: 1.1rem;
            color: var(--muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .6px;
            margin-bottom: 3px
        }

        .detail-val {
            font-size: 1.35rem;
            font-weight: 600;
            color: var(--text-dark);
            line-height: 1.5
        }

        .detail-val a {
            color: var(--text-dark);
            transition: color .2s
        }

        .detail-val a:hover {
            color: var(--accent-cyan)
        }

        /* Hours card */
        .hours-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 2.4rem 2.8rem;
            box-shadow: var(--shadow-sm);
        }

        .hours-card h4 {
            font-family: var(--font-family);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1.6rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .hours-card h4 i {
            color: var(--accent-cyan)
        }

        .hours-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .9rem 0;
            border-bottom: 1px solid var(--grey-100);
            font-size: 1.3rem;
        }

        .hours-row:last-child {
            border-bottom: none;
            padding-bottom: 0
        }

        .hours-row:first-child {
            padding-top: 0
        }

        .hours-row .day {
            font-weight: 600;
            color: var(--grey-700)
        }

        .hours-row .time {
            color: var(--muted);
            font-size: 1.25rem
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 1.1rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            margin-top: 1.4rem;
        }

        .status-pill.open {
            background: var(--green-bg);
            color: var(--green)
        }

        .status-pill.closed {
            background: #fef2f2;
            color: var(--red)
        }

        .status-pill::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
            display: block
        }

        /* Social card */
        .social-card {
            background: linear-gradient(135deg, var(--primary-dark) 0%, #0d2040 100%);
            border-radius: var(--radius-md);
            padding: 2.4rem 2.8rem;
            position: relative;
            overflow: hidden;
        }

        .social-card::before {
            content: "";
            position: absolute;
            right: -30px;
            bottom: -30px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(249, 115, 22, .06);
            pointer-events: none;
        }

        .social-card h4 {
            font-family: var(--font-family);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: .5rem;
        }

        .social-card p {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, .45);
            margin-bottom: 1.8rem;
            line-height: 1.6
        }

        .social-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: .8rem
        }

        .social-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: .8rem 1.4rem;
            border-radius: var(--radius-sm);
            border: 1.5px solid rgba(255, 255, 255, .12);
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--white);
            background: rgba(255, 255, 255, .06);
            backdrop-filter: blur(6px);
            transition: background .2s, border-color .2s, transform .2s;
        }

        .social-btn:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, .14);
            border-color: rgba(255, 255, 255, .25)
        }

        .social-btn.wa {
            background: rgba(37, 211, 102, .15);
            border-color: rgba(37, 211, 102, .3)
        }

        .social-btn.wa:hover {
            background: rgba(37, 211, 102, .25)
        }

        .social-btn.fb {
            background: rgba(24, 119, 242, .15);
            border-color: rgba(24, 119, 242, .3)
        }

        .social-btn.li {
            background: rgba(0, 119, 181, .15);
            border-color: rgba(0, 119, 181, .3)
        }

        .social-btn.ig:hover {
            background: rgba(228, 64, 95, .2)
        }

        /* FAQ Strip */
        .faq-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 2.4rem 2.8rem;
            box-shadow: var(--shadow-sm);
        }

        .faq-card h4 {
            font-family: var(--font-family);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1.6rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .faq-card h4 i {
            color: var(--accent-orange)
        }

        .faq-item {
            border-bottom: 1px solid var(--grey-100);
        }

        .faq-item:last-child {
            border-bottom: none
        }

        .faq-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.2rem 0;
            background: none;
            border: none;
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-dark);
            text-align: left;
            cursor: pointer;
            transition: color .2s;
        }

        .faq-btn:hover {
            color: var(--accent-cyan)
        }

        .faq-btn .faq-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            border-radius: 50%;
            border: 1.5px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: var(--muted);
            transition: background .2s, border-color .2s, color .2s, transform .2s;
        }

        .faq-btn.open .faq-icon {
            background: var(--accent-cyan);
            border-color: var(--accent-cyan);
            color: var(--primary-dark);
            transform: rotate(45deg)
        }

        .faq-answer {
            font-size: 1.25rem;
            color: var(--grey-600);
            line-height: 1.75;
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease, padding .35s ease;
            padding-bottom: 0;
        }

        .faq-answer.open {
            max-height: 200px;
            padding-bottom: 1.2rem
        }

        /* ══════════════════════════════════════════
       MAP SECTION
    ══════════════════════════════════════════ */
        .map-section {
            background: var(--primary-dark);
            padding: 5rem 0;
            position: relative;
        }

        .map-section::before {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(0deg, rgba(0, 191, 255, .03) 0, transparent 1px, transparent 56px, rgba(0, 191, 255, .03) 57px),
                repeating-linear-gradient(90deg, rgba(0, 191, 255, .03) 0, transparent 1px, transparent 56px, rgba(0, 191, 255, .03) 57px);
            pointer-events: none;
        }

        .map-head {
            text-align: center;
            margin-bottom: 3.6rem;
            position: relative;
            z-index: 1;
        }

        .map-head .tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--accent-cyan);
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 1rem;
        }

        .map-head h2 {
            font-family: var(--font-family);
            font-size: 3.4rem;
            font-weight: 800;
            color: var(--white);
            letter-spacing: -.3px;
            margin-bottom: .8rem;
        }

        .map-head h2 span {
            color: var(--accent-cyan)
        }

        .map-head p {
            font-size: 1.4rem;
            color: rgba(255, 255, 255, .5);
            max-width: 500px;
            margin: 0 auto
        }

        .map-wrapper {
            position: relative;
            z-index: 1;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 2px solid rgba(0, 191, 255, .15);
            box-shadow: var(--shadow-xl);
        }

        .map-wrapper iframe {
            width: 100%;
            height: 420px;
            border: none;
            display: block;
            filter: grayscale(20%) contrast(1.1)
        }

        /* overlay info card on the map */
        .map-overlay-card {
            position: absolute;
            top: 2rem;
            right: 2rem;
            background: rgba(10, 15, 28, .88);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 191, 255, .2);
            border-radius: var(--radius-md);
            padding: 2rem 2.4rem;
            max-width: 280px;
            z-index: 10;
        }

        .map-overlay-card h5 {
            font-family: var(--font-family);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .map-overlay-card h5 i {
            color: var(--accent-cyan)
        }

        .map-detail {
            display: flex;
            align-items: flex-start;
            gap: .8rem;
            margin-bottom: .8rem;
            font-size: 1.2rem;
            color: rgba(255, 255, 255, .6)
        }

        .map-detail:last-child {
            margin-bottom: 0
        }

        .map-detail i {
            color: var(--accent-cyan);
            font-size: 1.2rem;
            margin-top: 1px;
            flex-shrink: 0
        }

        .map-detail strong {
            color: var(--white)
        }

        .btn-directions {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin-top: 1.4rem;
            background: var(--accent-cyan);
            color: var(--primary-dark);
            border: none;
            border-radius: var(--radius-sm);
            padding: .9rem 1.6rem;
            font-size: 1.25rem;
            font-weight: 700;
            transition: background .2s, transform .2s;
        }

        .btn-directions:hover {
            background: var(--white);
            transform: translateY(-1px)
        }

        /* ══════════════════════════════════════════
       TEAM / WHO TO CONTACT SECTION
    ══════════════════════════════════════════ */
        .team-section {
            padding: 5.6rem 0;
            background: var(--bg-light)
        }

        .section-header {
            text-align: center;
            margin-bottom: 4rem
        }

        .section-tag-line {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--accent-cyan);
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 1rem
        }

        .section-header h2 {
            font-family: var(--font-family);
            font-size: 3.2rem;
            font-weight: 800;
            color: var(--primary-dark);
            letter-spacing: -.3px;
            margin-bottom: .8rem
        }

        .section-header h2 span {
            color: var(--accent-cyan)
        }

        .section-header p {
            font-size: 1.4rem;
            color: var(--muted);
            max-width: 520px;
            margin: 0 auto;
            line-height: 1.7
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem
        }

        .team-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 3rem 2.4rem;
            text-align: center;
            transition: transform .22s, box-shadow .22s, border-color .22s;
            position: relative;
            overflow: hidden;
        }

        .team-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .3s;
        }

        .team-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(0, 191, 255, .25)
        }

        .team-card:hover::before {
            transform: scaleX(1)
        }

        .team-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto 1.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-family);
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--white);
            position: relative;
        }

        .team-avatar .status-ring {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2.5px solid var(--white);
        }

        .team-name {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: .3rem
        }

        .team-role {
            font-size: 1.2rem;
            color: var(--accent-cyan);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .6px;
            margin-bottom: 1.2rem
        }

        .team-dept {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 10px;
            background: var(--blue-50);
            color: var(--primary-blue);
            border-radius: 20px;
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 2rem
        }

        .team-contacts {
            display: flex;
            flex-direction: column;
            gap: .6rem
        }

        .team-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: .8rem 1.4rem;
            border-radius: var(--radius-sm);
            border: 1.5px solid var(--border);
            font-size: 1.2rem;
            font-weight: 500;
            color: var(--grey-700);
            transition: background .2s, border-color .2s, color .2s;
        }

        .team-link:hover {
            background: var(--cyan-50);
            border-color: var(--accent-cyan);
            color: var(--cyan-dark)
        }

        .team-link i {
            color: var(--accent-cyan);
            font-size: 1.3rem
        }

        /* ══════════════════════════════════════════
       TOAST
    ══════════════════════════════════════════ */
        #toast-wrap {
            position: fixed;
            bottom: 2.4rem;
            right: 2.4rem;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .toast-pill {
            background: var(--primary-dark);
            color: var(--white);
            border-left: 4px solid var(--accent-cyan);
            border-radius: var(--radius-msm);
            padding: 1.2rem 1.8rem;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: var(--shadow-xl);
            animation: toastIn .3s ease;
            min-width: 240px;
        }

        .toast-pill.toast-green {
            border-left-color: var(--green)
        }

        .toast-pill i {
            font-size: 1.5rem;
            color: var(--accent-cyan)
        }

        .toast-pill.toast-green i {
            color: var(--green)
        }

        .toast-pill.bye {
            animation: toastOut .35s ease forwards
        }

        /* ══════════════════════════════════════════
       ANIMATIONS
    ══════════════════════════════════════════ */
        @keyframes pulseDot {

            0%,
            100% {
                transform: scale(1);
                opacity: 1
            }

            50% {
                transform: scale(1.5);
                opacity: .5
            }
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        @keyframes toastIn {
            from {
                transform: translateX(110%);
                opacity: 0
            }

            to {
                transform: translateX(0);
                opacity: 1
            }
        }

        @keyframes toastOut {
            to {
                transform: translateX(110%);
                opacity: 0
            }
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(24px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        /* Staggered entrance */
        .form-card {
            animation: fadeUp .6s ease .05s both
        }

        .contact-sidebar>*:nth-child(1) {
            animation: fadeUp .6s ease .1s both
        }

        .contact-sidebar>*:nth-child(2) {
            animation: fadeUp .6s ease .18s both
        }

        .contact-sidebar>*:nth-child(3) {
            animation: fadeUp .6s ease .26s both
        }

        .contact-sidebar>*:nth-child(4) {
            animation: fadeUp .6s ease .34s both
        }

        .team-card:nth-child(1) {
            animation: fadeUp .5s ease .05s both
        }

        .team-card:nth-child(2) {
            animation: fadeUp .5s ease .12s both
        }

        .team-card:nth-child(3) {
            animation: fadeUp .5s ease .19s both
        }

        /* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
        @media(max-width:1100px) {
            .contact-grid {
                grid-template-columns: 1fr 380px
            }
        }

        @media(max-width:960px) {
            .contact-grid {
                grid-template-columns: 1fr
            }

            .contact-sidebar {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 2rem
            }

            .info-card {
                grid-column: 1/-1
            }

            .team-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:768px) {
            .contact-hero h1 {
                font-size: 3.6rem
            }

            .hero-chips {
                display: none
            }

            /* hide chips on very small, shown inline in body */
            .form-card {
                padding: 2.8rem 2.4rem
            }

            .form-row {
                grid-template-columns: 1fr
            }

            .contact-sidebar {
                grid-template-columns: 1fr
            }

            .map-overlay-card {
                position: static;
                max-width: 100%;
                border-radius: 0 0 var(--radius-lg) var(--radius-lg);
                background: var(--primary-dark)
            }

            .map-wrapper {
                border-radius: var(--radius-lg) var(--radius-lg) 0 0
            }

            .map-wrapper iframe {
                height: 300px
            }

            .team-grid {
                grid-template-columns: 1fr
            }
        }

        @media(max-width:576px) {
            .contact-hero {
                padding: 4rem 0 3.6rem
            }

            .contact-hero h1 {
                font-size: 2.8rem
            }

            .form-card {
                padding: 2.2rem 1.8rem
            }

            .info-card-body,
            .hours-card,
            .faq-card,
            .social-card {
                padding: 2rem
            }

            .map-head h2 {
                font-size: 2.6rem
            }

            .section-header h2 {
                font-size: 2.4rem
            }

            .team-card {
                padding: 2.2rem 1.8rem
            }

            #toast-wrap {
                bottom: 1.6rem;
                right: 1.2rem;
                left: 1.2rem
            }

            .toast-pill {
                min-width: unset
            }
        }
/* ============================================
   Drawer Footer Starts
   ============================================ */
body #shop .drawer-footer {
  display: flex;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--grey-100);
  margin-top: 16px;
}

body #shop .btn-drawer-reset {
  flex: 1;
  background: transparent;
  border: 1px solid var(--grey-300);
  border-radius: 10px;
  padding: 11px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--grey-600);
  cursor: pointer;
  transition: all 0.2s ease;
}

body #shop .btn-drawer-reset:hover {
  background: var(--grey-100);
}

body #shop .drawer-footer .btn-apply-filter {
  flex: 2;
}
/* Drawer Footer Ends */
/* ============================================
   Section Header Starts
   ============================================ */
body #why-us .section-header {
  margin-bottom: 56px;
}

/* Section Label Starts */
body #why-us .section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-cyan);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body #why-us .section-label i {
  font-size: 1.1rem;
  color: var(--accent-cyan);
}
/* Section Label Ends */

/* Section Title Starts */
body #why-us .section-title {
  font-size: 4.2rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

body #why-us .text-cyan {
  color: var(--accent-cyan) !important;
}
/* Section Title Ends */

/* Section Subtitle Starts */
body #why-us .section-subtitle {
  font-size: 1.5rem;
  color: var(--grey-400);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto;
}
/* Section Subtitle Ends */

/* ============================================
   Section Header Ends
   ============================================ */

/* ============================================
   Why Grid Starts
   ============================================ */
body #why-us .why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Why Grid Ends */

/* ============================================
   Why Card Starts
   ============================================ */
body #why-us .why-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 32px 28px;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

body #why-us .why-card:hover {
  border-color: rgba(0, 191, 255, 0.3);
  transform: translateY(-4px);
}
/* Why Card Ends */

/* ============================================
   Why Icon Box Starts
   ============================================ */
body #why-us .why-icon-box {
  width: 52px;
  height: 52px;
  background: rgba(201, 218, 223, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: background 0.25s ease;
}

body #why-us .why-card:hover .why-icon-box {
  background: rgba(0, 191, 255, 0.18);
}

body #why-us .why-icon-box i {
  font-size: 2rem;
  color: var(--accent-cyan);
}
/* Why Icon Box Ends */

/* ============================================
   Why Card Typography Starts
   ============================================ */
body #why-us .why-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  letter-spacing: 0.2px;
}

body #why-us .why-card p {
  font-size: 1.3rem;
  color: var(--grey-500);
  line-height: 1.75;
  margin: 0;
}
/* Why Card Typography Ends */

/* ============================================
   Why Us Responsive Starts
   ============================================ */

/* Tablet Starts */
@media (max-width: 991px) {
  body #why-us {
    padding: 60px 0;
  }

  body #why-us .section-title {
    font-size: 3.4rem;
  }

  body #why-us .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
/* Tablet Ends */

/* Mobile Starts */
@media (max-width: 576px) {
  body #why-us {
    padding: 48px 0;
  }

  body #why-us .section-title {
    font-size: 2.6rem;
  }

  body #why-us .why-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body #why-us .why-card {
    padding: 24px 20px;
  }
}
/* Mobile Ends */

/* ============================================
   Why Us Responsive Ends
   ============================================ */

/* ============================================
   FOOTER Starts
   ============================================ */
body #footer {
  background: var(--primary-dark);
  color: var(--grey-400);
  font-size: 1.3rem;
}
/* FOOTER Ends */

/* ============================================
   Footer Main Starts
   ============================================ */
body #footer .footer-main {
  padding: 60px 0 40px;
}
/* Footer Main Ends */

/* ============================================
   Footer Logo Starts
   ============================================ */
body #footer .footer-logo {
  display: inline-block;
  margin-bottom: 1.6rem;
  transition: opacity 0.2s ease;
}

body #footer .footer-logo:hover {
  opacity: 0.8;
}
/* Footer Logo Ends */

/* ============================================
   Footer About Starts
   ============================================ */
body #footer .footer-about {
  font-size: 1.3rem;
  color: var(--grey-400);
  line-height: 1.7;
  margin-bottom: 2rem;
}
/* Footer About Ends */

/* ============================================
   Footer Socials Starts
   ============================================ */
body #footer .social-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--grey-700);
  background: transparent;
  color: var(--grey-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition: all 0.2s ease;
}

body #footer .social-btn:hover {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: var(--white);
  transform: translateY(-2px);
}
/* Footer Socials Ends */

/* ============================================
   Footer Headings Starts
   ============================================ */
body #footer .footer-heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: 1rem;
}

body #footer .footer-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--accent-cyan);
  border-radius: 2px;
}
/* Footer Headings Ends */

/* ============================================
   Footer Links Starts
   ============================================ */
body #footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body #footer .footer-links li a {
  color: var(--grey-400);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    color 0.2s ease,
    gap 0.2s ease;
}

body #footer .footer-links li a::before {
  content: "›";
  color: var(--accent-cyan);
  font-size: 1.6rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

body #footer .footer-links li a:hover {
  color: var(--accent-cyan);
  gap: 12px;
}
/* Footer Links Ends */

/* ============================================
   Footer Contact Starts
   ============================================ */
body #footer .footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body #footer .footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--grey-400);
}

body #footer .footer-contact li i {
  color: var(--accent-cyan);
  font-size: 1.4rem;
  margin-top: 2px;
  flex-shrink: 0;
}

body #footer .footer-contact li a,
body #footer .footer-contact li span {
  color: var(--grey-400);
  font-size: 1.3rem;
  transition: color 0.2s ease;
}

body #footer .footer-contact li a:hover {
  color: var(--accent-cyan);
}
/* Footer Contact Ends */

/* ============================================
   Footer Newsletter Starts
   ============================================ */
body #footer .footer-newsletter-text {
  font-size: 1.3rem;
  color: var(--grey-400);
  line-height: 1.6;
  margin-bottom: 1.6rem;
}

/* Newsletter Input Group Starts */
body #footer .newsletter-input-group {
  display: flex;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--grey-700);
  border-radius: 8px;
  padding: 0 14px;
  margin-bottom: 10px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body #footer .newsletter-input-group:focus-within {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1);
}

body #footer .newsletter-icon {
  color: var(--grey-500);
  font-size: 1.3rem;
  flex-shrink: 0;
}

body #footer .newsletter-input {
  flex: 1;
  background: transparent;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 11px 10px;
  font-size: 1.3rem;
  color: var(--white);
}

body #footer .newsletter-input::placeholder {
  color: var(--grey-600);
}
/* Newsletter Input Group Ends */

/* Newsletter Submit Starts */
body #footer .btn-newsletter-submit {
  width: 100%;
  background: var(--accent-cyan);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

body #footer .btn-newsletter-submit:hover {
  background: var(--cyan-dark);
  transform: translateY(-1px);
}
/* Newsletter Submit Ends */

/* Newsletter Privacy Starts */
body #footer .newsletter-privacy {
  font-size: 1.1rem;
  color: var(--grey-600);
  margin-top: 8px;
  margin-bottom: 0;
}
/* Newsletter Privacy Ends */

/* ============================================
   Footer Newsletter Ends
   ============================================ */

/* ============================================
   Footer Divider Starts
   ============================================ */
body #footer .footer-divider {
  height: 1px;
  background: var(--grey-800);
  margin: 0 auto;
  width: 92%;
  max-width: 1280px;
}
/* Footer Divider Ends */

/* ============================================
   Footer Bottom Starts
   ============================================ */
body #footer .footer-bottom {
  padding: 18px 0;
}

body #footer .footer-copy {
  font-size: 1.2rem;
  color: var(--grey-500);
}

body #footer .footer-copy a {
  color: var(--accent-cyan);
  font-weight: 600;
  transition: color 0.2s ease;
}

body #footer .footer-copy a:hover {
  color: var(--white);
}

body #footer .footer-legal {
  list-style: none;
  padding: 0;
}

body #footer .footer-legal li a {
  font-size: 1.2rem;
  color: var(--grey-500);
  transition: color 0.2s ease;
}

body #footer .footer-legal li a:hover {
  color: var(--accent-cyan);
}

body #footer .footer-legal li + li::before {
  content: "·";
  margin-right: 12px;
  color: var(--grey-700);
}
/* ============================================
   Footer Bottom Ends
   ============================================ */

/* ============================================
   Footer Mobile Responsive Starts
   ============================================ */
@media (max-width: 768px) {
  body #footer .footer-main {
    padding: 40px 0 30px;
  }

  body #footer .footer-heading {
    margin-top: 1rem;
  }

  body #footer .footer-bottom {
    text-align: center;
  }

  body #footer .footer-legal {
    justify-content: center;
  }
}
/* ============================================
   Footer Mobile Responsive Ends
   ============================================ */

/* ============================================
   Shop Page 3-Column Specific Styling
   ============================================ */

/* Utility colors to match your variables */
.text-cyan {
  color: var(--accent-cyan) !important;
}
.text-orange {
  color: var(--accent-orange) !important;
}
.btn-cyan {
  background-color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}
.btn-cyan:hover {
  background-color: var(--cyan-dark);
  color: white;
}

/* Left Sidebar Widgets */
.filter-widget {
  background: var(--white);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--grey-200);
}

.widget-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
}

/* Custom form elements for the sidebar */
.custom-select-shop {
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
}
.custom-select-shop:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 0.25rem rgba(0, 191, 255, 0.25);
}

.category-list li {
  margin-bottom: 12px;
}
.category-list .form-check-input:checked {
  background-color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

/* Product Cards */
.product-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border-radius: 12px;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg) !important;
}

.product-image-wrapper {
  height: 220px;
  background: var(--grey-50);
  border-radius: 12px 12px 0 0;
}
.product-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.product-card:hover .product-image-wrapper img {
  transform: scale(1.08);
}

/* Quick Add Button Reveal on Hover */
.quick-add-btn {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.product-card:hover .quick-add-btn {
  transform: translateY(0);
}

/* Pagination Styling */
.custom-pagination .page-link {
  color: var(--text-dark);
  border: none;
  margin: 0 4px;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.2s ease;
}
.custom-pagination .page-item.active .page-link,
.custom-pagination .page-link:hover {
  background-color: var(--accent-cyan);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Right Sidebar Blog Links */
.news-item {
  transition: transform 0.2s ease;
}
.news-item:hover {
  transform: translateX(5px);
}
.news-link:hover {
  color: var(--accent-cyan) !important;
}
/* =============================================
       PAGE HEADER / BREADCRUMB
    ============================================= */
.shop-header {
  background: linear-gradient(
    135deg,
    var(--primary-dark) 0%,
    #0d1a3a 60%,
    #0a2040 100%
  );
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}

.shop-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 80% at 80% 50%,
    rgba(0, 191, 255, 0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.shop-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-cyan),
    var(--accent-orange),
    transparent
  );
}

.header-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem;
}

.header-left h1 {
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}

.header-left h1 span {
  color: var(--accent-cyan);
}

.breadcrumb-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.25rem;
  color: var(--grey-400);
}

.breadcrumb-row a {
  color: var(--grey-400);
  transition: color 0.2s;
}

.breadcrumb-row a:hover {
  color: var(--accent-cyan);
}

.breadcrumb-row .sep {
  color: var(--accent-cyan);
  font-size: 1rem;
}

.breadcrumb-row .current {
  color: var(--accent-orange);
  font-weight: 600;
}

.header-stats {
  display: flex;
  gap: 2.4rem;
}

.stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.stat-chip .num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--accent-cyan);
  line-height: 1;
}

.stat-chip .lbl {
  font-size: 1.1rem;
  color: var(--grey-400);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* =============================================
       MAIN SHOP LAYOUT
    ============================================= */
.shop-page-wrapper {
  padding: 2.8rem 0 5rem;
}

.shop-3col {
  display: grid;
  grid-template-columns: 270px 1fr 270px;
  gap: 2rem;
  align-items: start;
}

/* =============================================
       SHARED ASIDE BOX
    ============================================= */
.aside-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 2rem;
  margin-bottom: 1.6rem;
  transition: box-shadow 0.2s;
}

.aside-card:hover {
  box-shadow: var(--shadow-md);
}

.aside-card-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--grey-100);
  display: flex;
  align-items: center;
  gap: 8px;
}

.aside-card-title i {
  color: var(--accent-cyan);
  font-size: 1.3rem;
}

.aside-card-title .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-orange);
  flex-shrink: 0;
}

/* =============================================
       LEFT SIDEBAR — SORT & FILTER
    ============================================= */

/* Sort Options */
.sort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--grey-700);
  transition: all 0.18s ease;
  margin-bottom: 3px;
  border: 1.5px solid transparent;
  user-select: none;
}

.sort-option:hover {
  background: #eff6ff;
  color: var(--primary-blue);
}

.sort-option.active {
  background: linear-gradient(135deg, #eff6ff, #e0f2fe);
  color: var(--primary-blue);
  border-color: rgba(0, 191, 255, 0.25);
  font-weight: 600;
}

.sort-option .sort-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-option .sort-left i {
  font-size: 1.3rem;
  color: var(--accent-cyan);
  width: 16px;
  text-align: center;
}

.sort-option.active .sort-left i {
  color: var(--primary-blue);
}

.sort-option .sort-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--grey-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
}

.sort-option.active .sort-check {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.sort-option.active .sort-check::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
  display: block;
}

/* Price Range */
.price-range-wrap {
  margin: 1rem 0;
}

.price-labels {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.price-labels .max-val {
  color: var(--accent-orange);
}

.range-slider {
  position: relative;
  height: 6px;
  background: var(--grey-200);
  border-radius: 10px;
  margin: 1.2rem 0 1.6rem;
}

.range-track {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--primary-blue));
  border-radius: 10px;
  left: 0;
  width: 60%;
  transition: width 0.1s;
}

input[type="range"].price-input {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: transparent;
  position: absolute;
  top: -1px;
  left: 0;
  cursor: pointer;
}

input[type="range"].price-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--accent-cyan);
  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.3);
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

input[type="range"].price-input::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 16px rgba(0, 191, 255, 0.4);
}

.price-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 0.8rem;
}

.price-preset-btn {
  padding: 7px 4px;
  border: 1.5px solid var(--grey-200);
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--grey-600);
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: all 0.18s;
  font-family: var(--font-body);
}

.price-preset-btn:hover,
.price-preset-btn.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: #ecfeff;
}

/* Category Filter */
.cat-filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--grey-700);
  transition: all 0.18s;
  margin-bottom: 3px;
}

.cat-filter-item:hover {
  background: #eff6ff;
  color: var(--accent-cyan);
}

.cat-filter-item.active {
  background: #fff7ed;
  color: var(--accent-orange);
  font-weight: 600;
}

.cat-filter-item i {
  font-size: 1.2rem;
  color: var(--accent-cyan);
  width: 18px;
  flex-shrink: 0;
}

.cat-filter-item.active i {
  color: var(--accent-orange);
}

.cat-count-badge {
  margin-left: auto;
  background: var(--grey-100);
  color: var(--grey-500);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  min-width: 28px;
  text-align: center;
}

.cat-filter-item.active .cat-count-badge {
  background: #fed7aa;
  color: #c2410c;
}

/* Rating Filter */
.rating-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--grey-600);
}

.rating-check-row input[type="checkbox"] {
  accent-color: var(--accent-cyan);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.stars-display {
  color: #f59e0b;
  font-size: 1.3rem;
  letter-spacing: 1px;
}

.stars-count {
  color: var(--grey-400);
  font-size: 1.1rem;
  margin-left: auto;
}

/* Brand Filter */
.brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--grey-200);
  border-radius: 20px;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--grey-600);
  cursor: pointer;
  transition: all 0.18s;
  margin: 0 4px 6px 0;
}

.brand-tag:hover,
.brand-tag.active {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: #eff6ff;
}

/* Availability */
.avail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--grey-600);
}

.avail-row input[type="checkbox"] {
  accent-color: var(--accent-cyan);
  width: 15px;
  height: 15px;
}

/* Apply Filter Btn */
.btn-apply-filter-left {
  width: 100%;
  background: linear-gradient(135deg, var(--primary-blue), #1d4ed8);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0.8rem;
}

.btn-apply-filter-left:hover {
  background: linear-gradient(135deg, var(--accent-orange), var(--orange-dark));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.3);
}

/* Reset Filter */
.btn-reset-filter {
  width: 100%;
  background: transparent;
  color: var(--grey-500);
  border: 1.5px solid var(--grey-200);
  border-radius: 10px;
  padding: 10px;
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
  margin-top: 0.6rem;
}

.btn-reset-filter:hover {
  background: var(--grey-50);
  color: var(--grey-700);
}

/* =============================================
       CENTER — PRODUCT GRID
    ============================================= */

/* Toolbar */
.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.6rem;
  margin-bottom: 1.8rem;
}

.toolbar-result {
  font-size: 1.3rem;
  color: var(--grey-500);
  font-weight: 500;
}

.toolbar-result strong {
  color: var(--text-dark);
}

.toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--grey-200);
}

.toolbar-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

.toolbar-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: var(--primary-blue);
  font-size: 1.15rem;
  font-weight: 600;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.18s;
}

.toolbar-tag:hover,
.toolbar-tag.active {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: var(--white);
}

.toolbar-tag i {
  font-size: 1rem;
}

.view-toggle {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.view-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--grey-200);
  background: transparent;
  color: var(--grey-500);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s;
  font-size: 1.3rem;
}

.view-btn.active,
.view-btn:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
}

/* Product Grid */
.prod-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-bottom: 2.8rem;
}

/* Product Card */
.prod-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
  cursor: pointer;
  position: relative;
}

.prod-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 191, 255, 0.3);
}

/* Card Wishlist */
.card-wishlist {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-size: 1.2rem;
  color: var(--grey-400);
  backdrop-filter: blur(6px);
}

.card-wishlist:hover,
.card-wishlist.active {
  color: #ef4444;
  transform: scale(1.1);
}

/* Card Image */
.card-img-wrap {
  position: relative;
  height: 190px;
  background: var(--grey-50);
  overflow: hidden;
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.32s ease;
}

.prod-card:hover .card-img-wrap img {
  transform: scale(1.07);
}

/* Image Placeholder (gradient) */
.card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.card-img-placeholder i {
  font-size: 3.6rem;
  opacity: 0.5;
}

.card-img-placeholder span {
  font-size: 1.1rem;
  opacity: 0.5;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Card Badges */
.card-badges {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 3;
}

.card-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  text-align: right;
}

.badge-sale {
  background: var(--accent-orange);
}

.badge-new {
  background: var(--accent-cyan);
  color: var(--primary-dark);
}

.badge-hot {
  background: #dc2626;
}

.badge-featured {
  background: var(--primary-blue);
}

/* Quick Add Overlay */
.card-quick-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(10, 15, 28, 0.9) 0%, transparent 100%);
  padding: 2rem 1.4rem 1.2rem;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  z-index: 2;
}

.prod-card:hover .card-quick-overlay {
  transform: translateY(0);
}

.btn-quick-add {
  width: 100%;
  background: var(--accent-cyan);
  color: var(--primary-dark);
  border: none;
  border-radius: 8px;
  padding: 9px;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.btn-quick-add:hover {
  background: var(--white);
}

/* Card Body */
.card-body-wrap {
  padding: 1.4rem;
}

.card-category {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 0.5rem;
}

.card-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
  margin-bottom: 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-specs {
  font-size: 1.1rem;
  color: var(--grey-400);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1rem;
}

.card-rating .stars {
  color: #f59e0b;
  font-size: 1.2rem;
  letter-spacing: 1px;
}

.card-rating .count {
  font-size: 1.1rem;
  color: var(--grey-400);
}

.card-rating .score {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
}

.card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.price-now {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--accent-orange);
  line-height: 1;
}

.price-was {
  font-size: 1.1rem;
  color: var(--grey-400);
  text-decoration: line-through;
}

.price-save {
  font-size: 1.05rem;
  font-weight: 700;
  color: #16a34a;
}

.btn-cart-round {
  width: 38px;
  height: 38px;
  background: var(--primary-dark);
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--white);
  font-size: 1.4rem;
  flex-shrink: 0;
}

.btn-cart-round:hover {
  background: var(--accent-orange);
  transform: scale(1.1);
}

/* Stock indicator */
.stock-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 0.6rem;
}

.stock-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}

.stock-in {
  color: #16a34a;
}

.stock-low {
  color: #d97706;
}

.stock-out {
  color: #dc2626;
}

/* =============================================
       FEATURED BANNER (between rows)
    ============================================= */
.featured-banner {
  background: linear-gradient(
    135deg,
    var(--primary-dark) 0%,
    var(--primary-blue) 100%
  );
  border-radius: var(--radius-md);
  padding: 2.4rem 2.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.4rem;
  position: relative;
  overflow: hidden;
}

.featured-banner::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(0, 191, 255, 0.08);
  pointer-events: none;
}

.featured-banner::after {
  content: "";
  position: absolute;
  right: 40px;
  bottom: -60px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(249, 115, 22, 0.08);
  pointer-events: none;
}

.banner-text .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 191, 255, 0.15);
  border: 1px solid rgba(0, 191, 255, 0.3);
  color: var(--accent-cyan);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.banner-text h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.6rem;
  line-height: 1.2;
}

.banner-text p {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.banner-cta {
  background: var(--accent-orange);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 1.1rem 2.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: var(--font-body);
  flex-shrink: 0;
}

.banner-cta:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.35);
  color: var(--white);
}

/* =============================================
       PAGINATION
    ============================================= */
.pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.8rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.pagination-info {
  font-size: 1.25rem;
  color: var(--grey-500);
}

.pagination-info strong {
  color: var(--text-dark);
}

.pagination-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pg-btn {
  min-width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1.5px solid var(--grey-200);
  background: transparent;
  color: var(--grey-600);
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  padding: 0 10px;
  font-family: var(--font-body);
}

.pg-btn:hover {
  background: var(--grey-50);
  border-color: var(--grey-300);
  color: var(--text-dark);
}

.pg-btn.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25);
}

.pg-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pg-dots {
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--grey-400);
}

.per-page-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  color: var(--grey-500);
}

.per-page-select select {
  border: 1.5px solid var(--grey-200);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 1.2rem;
  color: var(--text-dark);
  background: var(--white);
  cursor: pointer;
  font-family: var(--font-body);
}

/* =============================================
       RIGHT SIDEBAR — TECH BLOG / NEWS
    ============================================= */

/* News Card */
.news-item {
  display: flex;
  gap: 12px;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--grey-100);
  cursor: pointer;
  transition: all 0.2s;
}

.news-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.news-item:first-child {
  padding-top: 0;
}

.news-item:hover .news-title {
  color: var(--accent-cyan);
}

.news-thumb {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0a0f1c, #1e3a8a);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  overflow: hidden;
}

.news-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.news-cat {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent-cyan);
}

.news-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
  transition: color 0.2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-date {
  font-size: 1.05rem;
  color: var(--grey-400);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Featured News */
.news-featured {
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 1.4rem;
  cursor: pointer;
  position: relative;
}

.news-featured-img {
  height: 130px;
  background: linear-gradient(135deg, #0a0f1c 0%, #1e3a8a 50%, #0891b2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  position: relative;
  overflow: hidden;
}

.news-featured-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 15, 28, 0.7) 0%, transparent 60%);
}

.news-featured-body {
  padding: 1rem 0 0;
}

.news-featured-body .news-cat {
  margin-bottom: 4px;
}

.news-featured-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 0.5rem;
  transition: color 0.2s;
}

.news-featured:hover .news-featured-title {
  color: var(--accent-cyan);
}

.news-featured-excerpt {
  font-size: 1.15rem;
  color: var(--grey-500);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes the image fill the box perfectly without squashing */
}

/* Upcoming Products */
.upcoming-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1.5px solid var(--grey-100);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
}

.upcoming-item:last-child {
  margin-bottom: 0;
}

.upcoming-item:hover {
  border-color: rgba(0, 191, 255, 0.3);
  background: #f0f9ff;
}

.upcoming-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eff6ff, #e0f2fe);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.8rem;
  color: var(--accent-cyan);
}

.upcoming-info {
  flex: 1;
}

.upcoming-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.upcoming-date {
  font-size: 1.05rem;
  color: var(--grey-400);
}

.upcoming-badge {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.badge-soon {
  background: #fef3c7;
  color: #d97706;
}

.badge-pre {
  background: #ede9fe;
  color: #7c3aed;
}

/* Newsletter in sidebar */
.sidebar-newsletter {
  background: linear-gradient(135deg, var(--primary-dark), #0d1a3a);
  border-radius: var(--radius-md);
  padding: 2rem;
  margin-bottom: 1.6rem;
  position: relative;
  overflow: hidden;
}

.sidebar-newsletter::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(0, 191, 255, 0.06);
  pointer-events: none;
}

.sidebar-newsletter .nl-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.6rem;
}

.sidebar-newsletter .nl-desc {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1.4rem;
  line-height: 1.6;
}

.nl-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nl-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 1.25rem;
  color: var(--white);
  width: 100%;
  transition: border-color 0.2s;
  font-family: var(--font-body);
}

.nl-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.nl-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.nl-submit {
  width: 100%;
  background: var(--accent-cyan);
  color: var(--primary-dark);
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}

.nl-submit:hover {
  background: var(--white);
}

/* Trending Tags */
.trending-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trend-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1.5px solid var(--grey-200);
  border-radius: 20px;
  font-size: 1.15rem;
  color: var(--grey-600);
  cursor: pointer;
  transition: all 0.18s;
}

.trend-tag:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: #ecfeff;
}

.trend-tag .count {
  font-size: 1rem;
  color: var(--grey-400);
}

/* Promo countdown */
.promo-countdown {
  background: linear-gradient(135deg, #7c2d12, #9a3412);
  border-radius: var(--radius-md);
  padding: 1.8rem 2rem;
  margin-bottom: 1.6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.promo-countdown::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(249, 115, 22, 0.12) 0%,
    transparent 70%
  );
}

.promo-countdown .deal-label {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent-orange);
  margin-bottom: 0.4rem;
}

.promo-countdown .deal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1.2rem;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 1.4rem;
}

.cd-box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 8px 4px;
}

.cd-box .num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  display: block;
}

.cd-box .unit {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-grab-deal {
  width: 100%;
  background: var(--accent-orange);
  color: var(--white);
  border: none;
  border-radius: 9px;
  padding: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}

.btn-grab-deal:hover {
  background: var(--orange-dark);
  transform: translateY(-1px);
}

/* =============================================
       EMPTY STATE
    ============================================= */
.empty-state {
  text-align: center;
  padding: 5rem 2rem;
  display: none;
}

.empty-state i {
  font-size: 5rem;
  color: var(--grey-300);
  margin-bottom: 1.6rem;
  display: block;
}

.empty-state h3 {
  font-size: 2rem;
  color: var(--grey-500);
  margin-bottom: 0.8rem;
}

.empty-state p {
  font-size: 1.4rem;
  color: var(--grey-400);
}

/* =============================================
       SKELETON LOADER
    ============================================= */
@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--grey-100) 0%,
    var(--grey-200) 50%,
    var(--grey-100) 100%
  );
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 6px;
}

/* =============================================
       TOAST NOTIFICATION
    ============================================= */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast-msg {
  background: var(--primary-dark);
  color: var(--white);
  border-left: 4px solid var(--accent-cyan);
  border-radius: 10px;
  padding: 1.2rem 1.8rem;
  font-size: 1.3rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  animation: toastSlideIn 0.3s ease;
  min-width: 260px;
}

@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-msg.fade-out {
  animation: toastFadeOut 0.4s ease forwards;
}

@keyframes toastFadeOut {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast-msg i {
  color: var(--accent-cyan);
  font-size: 1.5rem;
}

.toast-msg.toast-cart {
  border-left-color: var(--accent-orange);
}

.toast-msg.toast-cart i {
  color: var(--accent-orange);
}

/* =============================================
       STICKY SIDEBAR
    ============================================= */
.sidebar-sticky {
  position: sticky;
  top: 20px;
}

/* =============================================
       CONTAINER
    ============================================= */
.container {
  width: 92%;
  max-width: 1320px;
  margin: 0 auto;
}

/* =============================================
       RESPONSIVE
    ============================================= */
@media (max-width: 1200px) {
  .shop-3col {
    /* Drop the right sidebar to a new row below the main products */
    grid-template-columns: 240px 1fr;
    gap: 1.6rem;
  }

  .sidebar-right.sidebar-sticky {
    position: static;
  }

  .sidebar-right {
    grid-column: 1 / -1;
    /* Make it span full width at the bottom */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Align its widgets in a row */
    gap: 1.6rem;
    margin-top: 1rem;
  }

  .sidebar-right .aside-card,
  .sidebar-right .promo-countdown,
  .sidebar-right .sidebar-newsletter {
    margin-bottom: 0;
  }
}

@media (max-width: 992px) {
  .shop-3col {
    grid-template-columns: 220px 1fr;
  }

  .sidebar-right {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns for widgets on tablets */
  }

  .prod-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================
           FIX: CLEANER TOOLBAR ON SMALL SCREENS
        ============================================= */
@media (max-width: 850px) {
  .shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    /* Allows internal elements to drop down */
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
  }

  .toolbar-result {
    grid-column: 1;
    grid-row: 1;
    order: 1;
  }

  .view-toggle {
    /* grid-column: 2;
                grid-row: 1; */
    order: 2;
    margin-left: 0;
    margin: auto;
    /* Reset the auto margin */
  }

  .toolbar-divider {
    display: none;
    /* Hide the vertical line on small screens */
  }

  .toolbar-tags {
    order: 3;
    /* Pushes tags to their own row at the bottom */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* Lets the tags drop to the next line naturally */
    gap: 8px;
    overflow-x: visible;
    /* Completely kills the horizontal scrollbar */
    padding-bottom: 0;
  }

  /* Hide the scrollbar for a cleaner, app-like UI */
  .toolbar-tags::-webkit-scrollbar {
    display: none;
  }

  .toolbar-tags {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
}

@media (max-width: 768px) {
  .shop-3col {
    display: flex;
    flex-direction: column;
    /* Stack everything vertically on mobile */
  }

  .sidebar-sticky {
    position: static;
  }

  .sidebar-left {
    width: 100%;
    margin-bottom: 1rem;
  }

  .sidebar-right {
    display: flex;
    flex-direction: column;
    /* Stack widgets vertically again */
    width: 100%;
    margin-top: 1rem;
  }

  .sidebar-right .aside-card,
  .sidebar-right .promo-countdown,
  .sidebar-right .sidebar-newsletter {
    margin-bottom: 1.6rem;
  }
}

@media (max-width: 640px) {
  .prod-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .header-stats {
    display: none;
    /* Keeping this hidden to save header space */
  }

  .header-left h1 {
    font-size: 2.8rem;
  }

  .pagination-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
}

@media (max-width: 480px) {
  .prod-grid-3 {
    grid-template-columns: 1fr;
    /* 1 product per row on tiny phones */
  }

  .countdown-grid {
    grid-template-columns: repeat(2, 1fr);
    /* Fix countdown overflow */
    gap: 8px;
  }

  .featured-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
  }

  .banner-text h3 {
    font-size: 1.7rem;
  }
}

@media (max-width: 420px) {
  .prod-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* =============================================
       DIVIDER
    ============================================= */
.filter-divider {
  height: 1px;
  background: var(--grey-100);
  margin: 1.4rem 0;
}

/* Page-load animation */
.prod-card {
  animation: cardFadeUp 0.5s ease both;
}

@keyframes cardFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.prod-card:nth-child(1) {
  animation-delay: 0.05s;
}

.prod-card:nth-child(2) {
  animation-delay: 0.1s;
}

.prod-card:nth-child(3) {
  animation-delay: 0.15s;
}

.prod-card:nth-child(4) {
  animation-delay: 0.2s;
}

.prod-card:nth-child(5) {
  animation-delay: 0.25s;
}

.prod-card:nth-child(6) {
  animation-delay: 0.3s;
}

/* =============================================
           FIX: CARD TEXT SCALING ON MOBILE
        ============================================= */
.prod-card {
  min-width: 0;
  /* Prevents the card from stubbornly expanding past the screen width */
}

@media (max-width: 480px) {
  .price-now {
    font-size: 1.4rem;
    /* Shrinks the huge price text slightly on phones */
  }

  .card-footer-row {
    gap: 8px;
    /* Ensures breathing room between the price and the cart button */
  }
}
/* =============================================
           MAKE WHOLE CARD CLICKABLE (Without breaking the cart button)
        ============================================= */
.prod-card {
  position: relative; /* Keeps the invisible link trapped inside the card */
}

.card-click-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Lays the link over the image and text */
}

.btn-add-cart {
  position: relative;
  z-index: 2; /* Pops the button ABOVE the invisible link so it works independently */
}