/* ==========================================================================
   KIWISTRONICS — COMPLETE MOBILE-FIRST & ALL-DEVICE RESPONSIVE SYSTEM
   Strictly optimized for: 320px, 360px, 375px, 390px (Main Ref), 412px, 430px up to 768px Tablet & 1440px+ Desktop.
   Preserves 100% Desktop Layout (>= 1024px) while delivering a native app-like mobile experience.
   ========================================================================== */

/* ── 1. GLOBAL ROOT SAFETY & OVERFLOW PREVENTION ── */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: clip;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Fluid Container Sizing */
.container,
.featured-container,
.brands-container,
.latest-container,
.blog-container,
.shop-container,
.cart-container,
.checkout-container,
.kits-container,
.product-detail-container {
  width: min(94%, 1680px) !important;
  max-width: 1680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
  .container,
  .featured-container,
  .brands-container,
  .latest-container,
  .blog-container,
  .shop-container,
  .cart-container,
  .checkout-container,
  .kits-container,
  .product-detail-container {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── 2. MOBILE HEADER & NAVIGATION BAR (<= 860px) ── */
@media screen and (max-width: 860px) {
  .topbar {
    display: none !important; /* Hide contact topbar on mobile to save vertical height */
  }

  .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0 !important;
  }

  .header-main {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px 10px 12px !important;
    gap: 8px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Logo (Left - Row 1) */
  .logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    flex: 0 0 auto !important;
    order: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .logo-img:not(.logo-img--full) {
    height: 28px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  .logo-img--full {
    height: 34px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Actions Right (Row 1): User/Admin Shield, Wishlist, Cart, Hamburger */
  .header-right-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    order: 2 !important;
    margin: 0 !important;
  }

  .header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  /* Hamburger Menu Button */
  .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
    cursor: pointer !important;
    margin: 0 0 0 2px !important;
    flex-shrink: 0 !important;
  }

  .header-action-item {
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .header-action-circle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .header-action-label {
    display: none !important; /* Hide text label on mobile */
  }

  .header-action-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    font-size: 9px !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
  }

  /* Account & Admin Dropdown Popup on Mobile */
  .account-dropdown-wrapper {
    position: static !important;
  }

  .account-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 12px !important;
    left: auto !important;
    width: min(275px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    z-index: 9999999 !important;
    transform: none !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
  }

  .account-dropdown-menu::before {
    right: 135px !important;
  }

  .account-dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Search Bar (Full Width Row 2) */
  .search-wrap {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    order: 3 !important;
    margin: 6px 0 0 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .search {
    width: 100% !important;
    height: 42px !important;
    border-radius: 9999px !important;
    padding: 0 4px 0 14px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
  }

  .search-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    z-index: 100002 !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  }

  .search:focus-within {
    border-color: #0066ff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3.5px rgba(0, 102, 255, 0.14) !important;
  }

  .search input,
  .search input:focus,
  .search input:focus-visible,
  .search input:active,
  #searchInput,
  #searchInput:focus,
  #searchInput:focus-visible,
  .help-search-box input,
  .help-search-box input:focus,
  .help-search-box input:focus-visible,
  .help-search-box input:active,
  #helpMainSearchInput,
  #helpMainSearchInput:focus,
  #helpMainSearchInput:focus-visible,
  #helpMainSearchInput:active {
    font-size: 13.5px !important;
    background: transparent !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    color: #0f172a !important;
    padding: 0 8px 0 0 !important;
    caret-color: #0066ff !important;
  }

  .search-clear-input {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: #64748b !important;
    font-size: 11px !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
  }

  .search button#searchBtn,
  .search #searchBtn,
  #searchBtn {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%) !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 102, 255, 0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: transform .15s ease, background .2s ease !important;
  }

  .search button#searchBtn:active,
  .search #searchBtn:active,
  #searchBtn:active {
    transform: scale(0.95) !important;
  }

  .search button#searchBtn i,
  .search #searchBtn i,
  #searchBtn i {
    font-size: 13px !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide wide desktop navbar bar */
  .nav#mainNav,
  nav#mainNav,
  #mainNav,
  .nav {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
}

/* ── 3. MOBILE CATEGORY SWIPEABLE BAR ── */
.mobile-category-pill-bar {
  display: none;
}

@media screen and (max-width: 860px) {
  .mobile-category-pill-bar {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 8px 12px 10px 12px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    scrollbar-width: none !important;
  }

  .mobile-category-pill-bar::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-cat-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 12px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
  }

  .mobile-cat-pill:hover,
  .mobile-cat-pill:active,
  .mobile-cat-pill.active {
    background: #287BFF !important;
    color: #ffffff !important;
    border-color: #287BFF !important;
    box-shadow: 0 2px 8px rgba(40, 123, 255, 0.25) !important;
  }
}

/* ── 4. MOBILE DRAWER NAVIGATION MENU ── */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.mobile-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 84vw;
  max-width: 290px;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  background: #ffffff;
  z-index: 1000000;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 10px 0 30px rgba(15, 23, 42, 0.2);
  overflow: hidden;
  box-sizing: border-box;
}

.mobile-drawer-overlay.open .mobile-drawer-box {
  transform: translateX(0);
}

.mobile-drawer-header {
  padding: 12px 14px;
  background: linear-gradient(135deg, #287BFF 0%, #0066ff 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.mobile-drawer-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-drawer-links {
  padding: 2px 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-drawer-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #1e293b;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #f8fafc;
  line-height: 1.2;
}

.mobile-drawer-links a:hover,
.mobile-drawer-links a.active {
  background: #eff6ff;
  color: #287BFF;
}

.mobile-drawer-links a i {
  color: #64748b;
  width: 16px;
  text-align: center;
  font-size: 13px;
}

.mobile-drawer-links a:hover i,
.mobile-drawer-links a.active i {
  color: #287BFF;
}

/* ── MOBILE DRAWER ACCORDION (ALL CATEGORIES & STEM KITS) ── */
.mobile-drawer-accordion-group {
  width: 100%;
  border-bottom: 1px solid #f8fafc;
}

.mobile-drawer-accordion-btn {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

.mobile-drawer-accordion-btn:hover,
.mobile-drawer-accordion-btn.active {
  background: #eff6ff !important;
  color: #287BFF !important;
}

.mobile-drawer-accordion-btn span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mobile-drawer-accordion-btn span i {
  color: #287BFF;
  width: 16px;
  text-align: center;
  font-size: 13px;
}

.mobile-drawer-chevron {
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer-accordion-btn.active .mobile-drawer-chevron {
  transform: rotate(180deg);
  color: #287BFF;
}

.mobile-drawer-cat-panel {
  display: none;
  flex-direction: column;
  background: #f8fafc;
  padding: 4px 8px 8px 8px;
  gap: 2px;
  border-top: 1px solid #edf2f7;
}

.mobile-drawer-sublink {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 7px 12px 7px 22px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  border-bottom: none !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}

.mobile-drawer-sublink:hover,
.mobile-drawer-sublink.active {
  background: #ffffff !important;
  color: #287BFF !important;
  box-shadow: 0 1px 4px rgba(40, 123, 255, 0.08) !important;
  transform: translateX(2px) !important;
}

.mobile-drawer-sublink i {
  color: #287BFF !important;
  font-size: 11.5px !important;
  width: 14px !important;
  text-align: center !important;
}

.mobile-drawer-footer {
  padding: 12px 14px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.05) !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ── 4.5. FEATURES STRIP (SYMMETRIC 2x2 GRID ON MOBILE) ── */
@media screen and (max-width: 768px) {
  .features {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 14px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .features article {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 12px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .features article span {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #eff6ff !important;
    color: #287BFF !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
  }

  .features article div {
    min-width: 0 !important;
    text-align: left !important;
  }

  .features article h3 {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .features article p {
    font-size: 10.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ── 4.8. CATEGORIES SHOWCASE MOBILE (2-COL CLEAN GRID) ── */
@media screen and (max-width: 768px) {
  .categories-showcase-section {
    padding: 20px 0 16px 0 !important;
  }

  .cat-header-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    gap: 8px !important;
  }

  .cat-header-wrap div[style*="height:1.5px"] {
    display: none !important;
  }

  .cat-header-wrap h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  .cat-view-all-btn {
    padding: 5px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  .categories-grid-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
    width: 100% !important;
  }

  .category-item-card {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .category-card-box {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: #ffffff !important;
    border: 1.5px solid #dbeafe !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    box-shadow: 0 2px 6px rgba(40, 123, 255, 0.04) !important;
    box-sizing: border-box !important;
  }

  .category-card-box img {
    max-width: 82% !important;
    max-height: 82% !important;
    object-fit: contain !important;
  }

  .category-card-title-wrap {
    width: 100% !important;
    min-height: auto !important;
    margin-top: 6px !important;
    text-align: center !important;
  }

  .category-card-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    display: block !important;
    text-align: center !important;
  }
}

/* ── 5. HERO / OFFER BANNERS (MOBILE OPTIMIZED) ── */
@media screen and (max-width: 900px) {
  /* HIDE absolute hero slider arrows on mobile to prevent overlapping card content */
  .hero-arrow,
  .hero-arrow-prev,
  .hero-arrow-next,
  #heroPrev,
  #heroNext {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .hero-section {
    margin-top: 12px !important;
    margin-bottom: 20px !important;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .hero-image-card {
    border-radius: 18px !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-slide-track {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 100% !important;
    align-items: stretch !important;
    will-change: transform !important;
  }

  .hero-slide {
    height: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: stretch !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  /* ── TABLET HERO VIEW (601px – 900px): Pro Horizontal Layout & Large Product Image ── */
  @media screen and (min-width: 601px) and (max-width: 900px) {
    .hero-image-card {
      height: 380px !important;
      min-height: 380px !important;
    }

    .hero-slide {
      min-height: 380px !important;
    }

    .hero-slide-inner {
      flex: 1 1 auto !important;
      height: 100% !important;
      min-height: 380px !important;
      width: 100% !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      text-align: left !important;
      padding: 28px 36px 36px 36px !important;
      gap: 20px !important;
      box-sizing: border-box !important;
    }

    .hero-overlay-content {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      transform: none !important;
      flex: 0 1 55% !important;
      max-width: 55% !important;
      align-items: flex-start !important;
      text-align: left !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      z-index: 5 !important;
    }

    .hero-overlay-eyebrow,
    .hero-overlay-content .hero-overlay-eyebrow {
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 0.8px !important;
      padding: 4px 12px !important;
      border-radius: 20px !important;
      margin-bottom: 2px !important;
      display: inline-block !important;
    }

    .hero-overlay-title {
      font-size: clamp(22px, 3.4vw, 28px) !important;
      font-weight: 800 !important;
      line-height: 1.25 !important;
      margin: 0 !important;
      color: #0f172a !important;
    }

    .hero-overlay-desc {
      font-size: 13.5px !important;
      line-height: 1.45 !important;
      margin: 0 !important;
      max-width: 100% !important;
      color: #475569 !important;
    }

    .hero-overlay-content button,
    .hero-overlay-content .btn,
    .hero-overlay-content .btn-primary,
    .hero-overlay-content .hero-slide-btn {
      padding: 10px 24px !important;
      font-size: 13.5px !important;
      font-weight: 700 !important;
      border-radius: 999px !important;
      white-space: nowrap !important;
      margin-top: 4px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
    }

    .hero-slide-image {
      position: relative !important;
      width: clamp(220px, 42%, 320px) !important;
      height: 270px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      z-index: 4 !important;
      right: auto !important;
      top: auto !important;
      transform: none !important;
    }

    .hero-image-stage {
      width: 100% !important;
      height: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .hero-slide-image img {
      max-height: 255px !important;
      max-width: 100% !important;
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
      filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.18)) !important;
      transform-origin: center center !important;
      transform: scale(var(--prod-scale, 1)) !important;
    }

    .hero-side-banners {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 14px !important;
      height: auto !important;
      width: 100% !important;
    }
  }

  /* ── MOBILE HERO VIEW (≤ 600px): Clean Stacked Layout & Enhanced Image Size ── */
  @media screen and (max-width: 600px) {
    .hero-image-card {
      height: auto !important;
      min-height: 380px !important;
    }

    .hero-slide {
      min-height: 380px !important;
    }

    .hero-slide-inner {
      flex: 1 1 auto !important;
      height: 100% !important;
      min-height: 380px !important;
      width: 100% !important;
      display: flex !important;
      flex-direction: column-reverse !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      padding: 20px 16px 40px 16px !important;
      gap: 14px !important;
      box-sizing: border-box !important;
    }

    .hero-overlay-content {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      transform: none !important;
      max-width: 100% !important;
      align-items: center !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      width: 100% !important;
      z-index: 5 !important;
    }

    .hero-overlay-eyebrow,
    .hero-overlay-content .hero-overlay-eyebrow {
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 0.8px !important;
      padding: 4px 12px !important;
      border-radius: 20px !important;
      margin-bottom: 2px !important;
      display: inline-block !important;
    }

    .hero-overlay-title {
      font-size: clamp(19px, 5.2vw, 24px) !important;
      font-weight: 800 !important;
      line-height: 1.25 !important;
      margin: 0 !important;
      color: #0f172a !important;
    }

    .hero-overlay-desc {
      font-size: 12.5px !important;
      line-height: 1.45 !important;
      margin: 0 !important;
      max-width: 92% !important;
      color: #475569 !important;
    }

    .hero-overlay-content button,
    .hero-overlay-content .btn,
    .hero-overlay-content .btn-primary,
    .hero-overlay-content .hero-slide-btn {
      padding: 10px 22px !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      border-radius: 999px !important;
      white-space: nowrap !important;
      margin-top: 4px !important;
      margin-bottom: 6px !important;
      position: relative !important;
      z-index: 5 !important;
      box-shadow: 0 4px 14px rgba(40, 123, 255, 0.3) !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
    }

    .hero-slide-image {
      height: 190px !important;
      width: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .hero-image-stage {
      width: 100% !important;
      height: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .hero-slide-image img {
      max-height: 180px !important;
      max-width: 88% !important;
      object-fit: contain !important;
      filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.16)) !important;
      transform-origin: center center !important;
      transform: scale(var(--prod-scale, 1)) !important;
    }

    .hero-side-banners {
      display: block !important;
      width: 100% !important;
      height: auto !important;
      position: relative !important;
    }

    .hero-side-banners.has-side-carousel {
      display: block !important;
      position: relative !important;
      height: auto !important;
      width: 100% !important;
      overflow: hidden !important;
      border-radius: 18px !important;
    }
    .hero-side-banners.has-side-carousel .side-banners-track {
      position: relative !important;
      width: 100% !important;
      height: auto !important;
      overflow: hidden !important;
      border-radius: 18px !important;
    }
    .hero-side-banners.has-side-carousel .side-banners-page {
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: auto !important;
      display: none !important;
      grid-template-columns: 1fr 1fr !important;
      grid-template-rows: none !important;
      gap: 12px !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transform: none !important;
      transition: none !important;
    }
    .hero-side-banners.has-side-carousel .side-banners-page.active {
      display: grid !important;
    }
    .hero-side-banners:not(.has-side-carousel) {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      grid-template-rows: none !important;
      gap: 12px !important;
    }
    .hero-side-banners .side-banner-card,
    .hero-side-banners.has-side-carousel .side-banners-page .side-banner-card {
      height: 100% !important;
      min-height: 130px !important;
      padding: 14px 16px !important;
      border-radius: 16px !important;
      box-sizing: border-box !important;
    }
  }

  /* Safe Placement for Hero Slide Dots (Never Overlap Button) */
  .hero-slide-dots {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
  }

  .hero-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
  }

  .hero-dot.active {
    width: 22px !important;
    border-radius: 10px !important;
    background: #287BFF !important;
  }

  .hero-grid.hero-grid-full .hero-side-banners,
  .hero-grid.no-side-banners .hero-side-banners,
  .hero-grid[data-side-count="0"] .hero-side-banners {
    display: none !important;
  }

  .hero-grid[data-side-count="1"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .hero-grid[data-side-count="1"] .hero-side-banners,
  .hero-side-banners.single-side-banner {
    height: auto !important;
    width: 100% !important;
  }

  .side-banner-card {
    height: 100% !important;
    flex: none !important;
    min-height: 130px !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .side-banner-content h4,
  .side-banner-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }

  .side-banner-content p,
  .side-banner-desc {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }

  .side-banner-image {
    width: 100px !important;
    height: 100px !important;
    flex-shrink: 0 !important;
  }
  .side-banner-subtitle {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .side-banner-image {
    width: 95px !important;
    height: 95px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .side-banner-img-stage {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .side-banner-image img {
    max-height: 85px !important;
    max-width: 85px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.1)) !important;
  }
}

/* ── 5.5. LATEST BANNERS & PROJECT PROMO SLIDERS MOBILE OPTIMIZATION ── */
@media screen and (max-width: 768px) {
  /* HIDE absolute slider arrow buttons on mobile so they do NOT overlap stacked cards */
  .slider-outer-btn,
  .slider-outer-btn.prev-btn,
  .slider-outer-btn.next-btn,
  #syncedBannerPrev,
  #syncedBannerNext {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .latest-banners-wrapper {
    margin-bottom: 24px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .latest-banners {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  .latest-banner {
    height: auto !important;
    min-height: 220px !important;
    border-radius: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .banner-content-grid {
    display: grid !important;
    grid-template-columns: 1fr 100px !important;
    gap: 12px !important;
    padding: 18px 16px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .banner-text-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  .slide-badge {
    font-size: 10px !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
    width: fit-content !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
  }

  .banner-text-content h3 {
    font-size: 15px !important;
    font-weight: 800 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
  }

  .slide-desc {
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .slide-action-btn {
    padding: 7px 14px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .banner-product-showcase {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-img-card {
    width: 90px !important;
    height: 90px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    flex-shrink: 0 !important;
  }

  .slide-product-img {
    max-height: 78px !important;
    max-width: 78px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* ── 6. PRODUCT GRID ON DESKTOP & MOBILE ── */
.products-grid,
.product-grid,
.product-grid-shop,
.shop-product-grid,
.featured-grid,
.show-products-grid,
.category-products-grid,
.other-products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.latest-grid,
.latest-product-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

@media screen and (max-width: 1180px) {
  .products-grid,
  .product-grid,
  .product-grid-shop,
  .shop-product-grid,
  .featured-grid,
  .show-products-grid,
  .category-products-grid,
  .other-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .latest-grid,
  .latest-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media screen and (max-width: 992px) {
  .products-grid,
  .product-grid,
  .product-grid-shop,
  .shop-product-grid,
  .featured-grid,
  .latest-grid,
  .latest-product-grid,
  .show-products-grid,
  .category-products-grid,
  .other-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* 2-COLUMN GRID FOR ALL MOBILE SCREENS (320px - 768px) */
@media screen and (max-width: 768px) {
  .products-grid,
  .product-grid,
  .product-grid-shop,
  .shop-product-grid,
  .featured-grid,
  .latest-grid,
  .latest-product-grid,
  .show-products-grid,
  .category-products-grid,
  .other-products-grid,
  .shop-page-layout .product-grid-shop,
  .shop-page-layout .product-grid,
  .shop-page-layout .shop-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }
}

/* ── 6B. DEDICATED HORIZONTAL PRODUCT SLIDER / CAROUSEL (.sp-track, #latestProductsTrack) ── */
.sp-wrap,
.latest-sp-wrap {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.latest-sp-wrap .sp-arrow {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.sp-track,
#latestProductsTrack,
#featuredProductsGrid,
.latest-sp-wrap .latest-product-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 10px 4px 18px 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

.sp-track::-webkit-scrollbar,
#latestProductsTrack::-webkit-scrollbar,
#featuredProductsGrid::-webkit-scrollbar,
.latest-sp-wrap .latest-product-grid::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

.sp-track > .product-card,
#latestProductsTrack > .product-card,
#featuredProductsGrid > .product-card,
.latest-sp-wrap .latest-product-grid > .product-card {
  scroll-snap-align: start !important;
  flex: 0 0 calc((100% - 16px * 4) / 5) !important;
  min-width: calc((100% - 16px * 4) / 5) !important;
  max-width: calc((100% - 16px * 4) / 5) !important;
  width: calc((100% - 16px * 4) / 5) !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 410px !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
}

.sp-track > .product-card:not(:hover),
#latestProductsTrack > .product-card:not(:hover),
#featuredProductsGrid > .product-card:not(:hover) {
  transform: none !important;
}

.sp-track > .product-card:hover,
#latestProductsTrack > .product-card:hover,
#featuredProductsGrid > .product-card:hover {
  transform: translateY(-3px) !important;
}

/* 1400px+ (Large desktop 1920x1080, 1536x864, 1440x900): All 6 cards fit in ONE normal row, NO arrows, NO scroll */
@media screen and (min-width: 1400px) {
  .latest-sp-wrap .sp-arrow {
    display: none !important;
  }
  #latestProductsTrack,
  #featuredProductsGrid,
  .latest-sp-wrap .sp-track,
  .latest-sp-wrap .latest-product-grid {
    overflow-x: hidden !important;
  }
  .sp-track > .product-card,
  #latestProductsTrack > .product-card,
  #featuredProductsGrid > .product-card,
  .latest-sp-wrap .latest-product-grid > .product-card {
    flex: 0 0 calc((100% - 16px * 5) / 6) !important;
    min-width: calc((100% - 16px * 5) / 6) !important;
    max-width: calc((100% - 16px * 5) / 6) !important;
    width: calc((100% - 16px * 5) / 6) !important;
  }
}

/* 1200px - 1399px (e.g. 1366x768, 1280x800): 5 cards visible, slider enabled for remaining products */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .sp-track > .product-card,
  #latestProductsTrack > .product-card,
  #featuredProductsGrid > .product-card,
  .latest-sp-wrap .latest-product-grid > .product-card {
    flex: 0 0 calc((100% - 16px * 4) / 5) !important;
    min-width: calc((100% - 16px * 4) / 5) !important;
    max-width: calc((100% - 16px * 4) / 5) !important;
    width: calc((100% - 16px * 4) / 5) !important;
  }
}

/* 992px - 1199px (e.g. 1024x768): 4 cards visible, slider enabled */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .sp-track > .product-card,
  #latestProductsTrack > .product-card,
  #featuredProductsGrid > .product-card,
  .latest-sp-wrap .latest-product-grid > .product-card {
    flex: 0 0 calc((100% - 16px * 3) / 4) !important;
    min-width: calc((100% - 16px * 3) / 4) !important;
    max-width: calc((100% - 16px * 3) / 4) !important;
    width: calc((100% - 16px * 3) / 4) !important;
  }
}

/* 769px - 991px (Tablet): 3 cards visible, slider enabled */
@media screen and (min-width: 769px) and (max-width: 991px) {
  .sp-track,
  #latestProductsTrack,
  #featuredProductsGrid,
  .latest-sp-wrap .latest-product-grid {
    gap: 12px !important;
  }
  .sp-track > .product-card,
  #latestProductsTrack > .product-card,
  #featuredProductsGrid > .product-card,
  .latest-sp-wrap .latest-product-grid > .product-card {
    flex: 0 0 calc((100% - 12px * 2) / 3) !important;
    min-width: calc((100% - 12px * 2) / 3) !important;
    max-width: calc((100% - 12px * 2) / 3) !important;
    width: calc((100% - 12px * 2) / 3) !important;
  }
}

/* 481px - 768px (Mobile landscape / large mobile): 2 cards visible, slider enabled */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .sp-track,
  #latestProductsTrack,
  #featuredProductsGrid,
  .latest-sp-wrap .latest-product-grid {
    gap: 10px !important;
    padding: 6px 2px 10px 2px !important;
  }
  .sp-track > .product-card,
  #latestProductsTrack > .product-card,
  #featuredProductsGrid > .product-card,
  .latest-sp-wrap .latest-product-grid > .product-card {
    flex: 0 0 calc((100% - 10px) / 2) !important;
    min-width: calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
    width: calc((100% - 10px) / 2) !important;
  }
}

/* <= 480px (Standard mobile / portrait): 1-2 cards visible (78% peek width), swipeable */
@media screen and (max-width: 480px) {
  .sp-track,
  #latestProductsTrack,
  #featuredProductsGrid,
  .latest-sp-wrap .latest-product-grid {
    gap: 10px !important;
    padding: 6px 2px 10px 2px !important;
  }
  .sp-track > .product-card,
  #latestProductsTrack > .product-card,
  #featuredProductsGrid > .product-card,
  .latest-sp-wrap .latest-product-grid > .product-card {
    flex: 0 0 78% !important;
    min-width: 78% !important;
    max-width: 78% !important;
    width: 78% !important;
  }
}

/* ── 6.0. MOBILE SECTIONS (<= 768px) ── */
@media screen and (max-width: 768px) {
  /* Featured Heading on Mobile */
  .featured-products {
    padding: 24px 0 !important;
  }

  .featured-container {
    padding: 0 16px !important;
  }

  .featured-products .section-heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    gap: 8px !important;
  }

  .featured-products .section-heading h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
  }

  .featured-products .section-subtitle {
    font-size: 10.5px !important;
    margin-bottom: 2px !important;
  }

  .featured-products .view-all-link {
    font-size: 12px !important;
  }

  /* Compact Card Layout (360px min-height on Mobile) */
  .product-card,
  .latest-product-card,
  .shop-card,
  .pc,
  .sp-card {
    min-height: 360px !important;
    max-width: 100% !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    position: relative !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .shop-card-img {
    width: 100% !important;
    height: 160px !important;
    max-height: 160px !important;
    object-fit: contain !important;
    margin-bottom: 6px !important;
  }

  .shop-card-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    min-height: 32px !important;
    height: 32px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
  }

  .price-purple {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #7c3aed !important;
  }

  .price-original {
    font-size: 10px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
  }

  .tax-subtext {
    font-size: 9.5px !important;
    color: #64748b !important;
    margin-bottom: 6px !important;
  }

  .btn-black-add {
    padding: 7px 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    gap: 4px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .save-tag-red {
    top: 6px !important;
    left: 6px !important;
    font-size: 8.5px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
  }

  /* Dedicated Responsive Contain Image Area (160px on Mobile) */
  .product-card .card-img-wrap,
  .product-card .product-img,
  .product-card .product-image-box,
  .latest-product-card .latest-product-image,
  .shop-card-img-wrap,
  .sp-card .card-img-wrap {
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: #ffffff !important;
    border-bottom: 1px solid #edf1f5 !important;
    box-sizing: border-box !important;
  }

  .product-card .product-img img,
  .product-card img,
  .product-card .product-image,
  .latest-product-card img,
  .shop-card-img,
  .sp-card img {
    max-height: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
  }

  .product-content,
  .latest-product-content,
  .product-info {
    padding: 10px 10px 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    box-sizing: border-box !important;
  }

  /* Latest Heading on Mobile */
  .latest-products-section {
    padding: 24px 0 !important;
  }

  .latest-container {
    padding: 0 16px !important;
    width: 100% !important;
  }

  .latest-heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .latest-heading h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    color: #0f172a !important;
  }

  .latest-heading .view-all-link {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #287BFF !important;
    white-space: nowrap !important;
  }

  /* Badges, Wishlist & Share */
  .product-badge,
  .sale-badge,
  .new-badge,
  .out-of-stock-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    font-size: 9px !important;
    padding: 3px 7px !important;
    border-radius: 5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    z-index: 2 !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  }

  .wishlist-btn,
  .product-wishlist,
  .card-wishlist-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    cursor: pointer !important;
    z-index: 3 !important;
    padding: 0 !important;
  }

  .wishlist-btn.active i,
  .wishlist-btn i.fa-solid,
  .product-wishlist.active i,
  .product-wishlist i.fa-solid,
  .card-wishlist-btn.active i,
  .card-wishlist-btn i.fa-solid {
    color: #ef4444 !important;
    font-weight: 900 !important;
  }

  .product-share-btn,
  .card-share-btn {
    position: absolute !important;
    top: 42px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  .product-share-btn i,
  .card-share-btn i {
    font-size: 11px !important;
    color: #287BFF !important;
    line-height: 1 !important;
  }

  /* Title: 2-Line Ellipsis */
  .product-card .product-title,
  .product-card .product-name,
  .product-card h3,
  .product-card h4,
  .latest-product-card h3 {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    min-height: 34px !important;
    max-height: 34px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin: 2px 0 4px 0 !important;
    color: #0f172a !important;
  }

  .product-title a,
  .product-name a,
  .latest-product-card h3 a {
    color: #0f172a !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
  }

  .product-category,
  .card-category {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #287BFF !important;
    margin-bottom: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.2 !important;
  }

  /* Stars & Review Count Single Line */
  .product-rating,
  .card-stars {
    font-size: 10px !important;
    color: #f59e0b !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  .rating-stars {
    font-size: 10.5px !important;
    color: #f59e0b !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  .review-count,
  .product-rating small {
    font-size: 10px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  .product-info-spacer {
    flex-grow: 1 !important;
    min-height: 4px !important;
  }

  /* Price & Cart Button Row - Clean Vertical Stack for 2-Column Mobile UX */
  .product-bottom,
  .product-card-bottom,
  .latest-product-bottom,
  .card-bottom-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px solid #edf2f7 !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .product-price-section,
  .product-price,
  .latest-product-price,
  .price {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 1px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .price-main-row {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    line-height: 1.2 !important;
  }

  .product-price .current-price,
  .price-main-row .current-price,
  .card-price {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    white-space: nowrap !important;
  }

  .price-gst-row {
    display: flex !important;
    align-items: center !important;
    margin-top: 1px !important;
  }

  .price-gst-badge {
    font-size: 9px !important;
    font-weight: 600 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    line-height: 1.25 !important;
    display: inline-block !important;
    white-space: nowrap !important;
  }

  .price-old-row {
    margin-top: 1px !important;
    line-height: 1.2 !important;
  }

  .price-old-row .old-price-placeholder {
    display: none !important;
  }

  .old-price,
  .card-original-price,
  del {
    font-size: 11px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

  .product-card-action {
    width: 100% !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .cart-btn:not(.notify-me-btn):not(.notification-set-btn),
  .add-cart-btn:not(.notify-me-btn):not(.notification-set-btn),
  .card-add-cart-btn:not(.notify-me-btn):not(.notification-set-btn),
  .product-cart-btn:not(.notify-me-btn):not(.notification-set-btn) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: #287BFF !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(40, 123, 255, 0.2) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Responsive Professional Notify Me Button Styles */
  .cart-btn.notify-me-btn,
  .product-cart-btn.notify-me-btn,
  .add-cart-btn.notify-me-btn,
  .notify-me-btn {
    background: #fffbeb !important;
    background-color: #fffbeb !important;
    color: #b45309 !important;
    border: 1.5px solid #fcd34d !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 5px rgba(217, 119, 6, 0.12) !important;
  }

  .cart-btn.notify-me-btn i,
  .product-cart-btn.notify-me-btn i,
  .add-cart-btn.notify-me-btn i,
  .notify-me-btn i {
    color: #d97706 !important;
  }

  .cart-btn.notify-me-btn:hover,
  .product-cart-btn.notify-me-btn:hover,
  .notify-me-btn:hover {
    background: #fef3c7 !important;
    background-color: #fef3c7 !important;
    color: #78350f !important;
    border-color: #f59e0b !important;
  }

  .cart-btn.notify-me-btn:hover i,
  .product-cart-btn.notify-me-btn:hover i,
  .add-cart-btn.notify-me-btn:hover i,
  .notify-me-btn:hover i {
    color: #b45309 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transform: scale(1.15) rotate(-6deg) !important;
  }

  .cart-btn.notification-set-btn:hover i,
  .product-cart-btn.notification-set-btn:hover i,
  .add-cart-btn.notification-set-btn:hover i,
  .notification-set-btn:hover i {
    color: #16a34a !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
  }

  .cart-btn.notification-set-btn,
  .product-cart-btn.notification-set-btn,
  .add-cart-btn.notification-set-btn,
  .notification-set-btn {
    background: #f0fdf4 !important;
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    border: 1.5px solid #86efac !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: default !important;
  }

  .cart-btn.notification-set-btn i,
  .product-cart-btn.notification-set-btn i,
  .add-cart-btn.notification-set-btn i,
  .notification-set-btn i {
    color: #16a34a !important;
  }

  .cart-btn i,
  .add-cart-btn i,
  .card-add-cart-btn i,
  .product-cart-btn i {
    font-size: 11.5px !important;
  }

  .cart-btn:not(.notify-me-btn):not(.notification-set-btn):hover,
  .add-cart-btn:not(.notify-me-btn):not(.notification-set-btn):hover,
  .card-add-cart-btn:not(.notify-me-btn):not(.notification-set-btn):hover,
  .product-cart-btn:not(.notify-me-btn):not(.notification-set-btn):hover {
    background: #ea580c !important;
    background-color: #ea580c !important;
    background-image: linear-gradient(135deg, #ff7a00 0%, #ea580c 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.35) !important;
  }
  .cart-btn:active,
  .add-cart-btn:active,
  .card-add-cart-btn:active,
  .product-cart-btn:active {
    transform: scale(0.98) !important;
  }


  /* ── 6.2. CATEGORY PAGE SHOP HEADER ALIGNMENT (<= 768px) ── */
  .shop-page-layout > div > div:first-child,
  .shop-header-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  .shop-page-layout > div > div:first-child > div:first-child {
    width: 100% !important;
  }

  .shop-page-layout > div > div:first-child h1 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }

  .shop-page-layout > div > div:first-child p {
    font-size: 11.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.35 !important;
  }

  .custom-sort-dropdown,
  #customSortDropdown {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 4px !important;
  }

  .custom-sort-btn,
  #sortDropdownBtn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }
}

/* ── 6.5. BLOG / ARTICLES SECTION MOBILE OPTIMIZATION ── */
@media screen and (max-width: 768px) {
  .blog-section {
    padding: 24px 0 !important;
  }

  .blog-container {
    padding: 0 16px !important;
    width: 100% !important;
  }

  .blog-section .section-heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .blog-section .section-heading h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-family: 'Poppins', sans-serif !important;
  }

  .blog-section .view-all-link {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #287BFF !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  .blog-section .blog-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    width: 100% !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .blog-section .blog-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .blog-section .blog-grid > .blog-card {
    flex: 0 0 260px !important;
    min-width: 260px !important;
    max-width: 270px !important;
    width: 260px !important;
    scroll-snap-align: start !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  .blog-image {
    height: 185px !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .blog-image img {
    height: 100% !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #f8fafc !important;
    display: block !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .blog-content {
    padding: 14px 16px 16px 16px !important;
  }

  .blog-category {
    font-size: 10px !important;
    padding: 4px 10px !important;
    margin-bottom: 8px !important;
  }

  .blog-card h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
    min-height: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .blog-card p {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
    min-height: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .blog-info {
    font-size: 11.5px !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
    gap: 12px !important;
  }

  .blog-content .read-more {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #287BFF !important;
    margin-top: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
  }
}

/* ── 6.8. VIDEO OFFER CARDS & STEM KIT BANNER MOBILE OPTIMIZATION ── */
@media screen and (max-width: 900px) {
  /* 3 Offer Video Boxes stacked cleanly on Mobile */
  .offer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .offer-card {
    width: 100% !important;
    min-height: 200px !important;
    padding: 24px 20px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .offer-main h2,
  .offer-small h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
  }

  .offer-main p {
    font-size: 13px !important;
    margin-bottom: 14px !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .offer-main a,
  .offer-small a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    width: fit-content !important;
    background: var(--blue-gradient) !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  .offer-main span,
  .offer-small span {
    font-size: 10px !important;
    padding: 4px 12px !important;
    margin-bottom: 10px !important;
  }

  /* STEM Learning Kit Banner on Mobile */
  .kit-banner {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
    min-height: auto !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .kit-content {
    width: 100% !important;
    text-align: left !important;
    z-index: 2 !important;
  }

  .kit-content h2,
  #kitTitle {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    line-height: 1.25 !important;
  }

  .kit-content p,
  #kitDesc {
    font-size: 13px !important;
    margin-bottom: 16px !important;
    line-height: 1.4 !important;
  }

  .kit-levels {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    z-index: 2 !important;
  }

  .level-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .level-box.active {
    background: #287BFF !important;
    border-color: #287BFF !important;
  }

  .level-box strong {
    font-size: 13px !important;
  }

  .level-box span {
    font-size: 11px !important;
  }
}

/* ── 7. SHOP ALL FILTERS & SORT (MOBILE FLOATING BAR) ── */
@media screen and (max-width: 900px) {
  .shop-page-layout {
    display: block !important;
    gap: 0 !important;
  }

  /* Hide bulky desktop sidebar on mobile */
  .shop-sidebar {
    display: none !important;
  }

  .results-bar {
    display: none !important;
  }
}

/* ── 8. CART & CHECKOUT MOBILE OPTIMIZATION ── */
@media screen and (max-width: 900px) {
  .cart-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .cart-table-wrap {
    width: 100% !important;
  }

  .cart-summary-box {
    width: 100% !important;
  }

  .checkout-modal-box {
    width: 95vw !important;
    max-width: 480px !important;
    max-height: 90vh !important;
    padding: 20px 14px !important;
    border-radius: 16px !important;
  }
}

/* ── 9. FOOTER RESPONSIVE & HIGH-CONTRAST VISIBILITY SYSTEM ── */
.footer {
  background: #0b1120 !important;
  color: #cbd5e1 !important;
  padding: 50px 0 24px 0 !important;
  border-top: 1px solid #1e293b !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.footer .footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important;
  gap: 36px 24px !important;
  width: 100% !important;
  margin-bottom: 36px !important;
}

.footer h3,
.footer-heading {
  font-family: 'Poppins', 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.footer-col,
.footer-categories-col,
.footer-support-col,
.footer-grid > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.footer a:not(.logo):not(.footer-logo):not(.socials a):not(.kw-brand-logo-link):not(.kw-brand-title-link):not(.kw-brand-logo-wrap) {
  color: #94a3b8 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: fit-content !important;
  margin-bottom: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.footer a:not(.logo):not(.footer-logo):not(.socials a):not(.kw-brand-logo-link):not(.kw-brand-title-link):not(.kw-brand-logo-wrap):hover {
  color: #38bdf8 !important;
  transform: translateX(3px) !important;
}

.footer .footer-powered-by a,
.footer .footer-powered-by a:hover,
.footer-powered-by a,
.footer-powered-by a:hover,
.kw-footer-branding-card a,
.kw-footer-branding-card a:hover,
.kw-brand-logo-link,
.kw-brand-logo-link:hover,
.kw-brand-title-link,
.kw-brand-title-link:hover,
.kw-brand-logo-wrap,
.kw-brand-logo-wrap:hover,
.kw-brand-logo-wrap img,
.kw-brand-logo-wrap:hover img {
  transform: none !important;
  text-decoration: none !important;
  transition: none !important;
}

.footer p {
  color: #94a3b8 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 0 10px 0 !important;
}

.footer-about p {
  color: #94a3b8 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 12px 0 16px 0 !important;
  max-width: 320px !important;
}

.socials {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

.socials a {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.socials a:hover {
  background: #287BFF !important;
  border-color: #287BFF !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 6px 18px rgba(40, 123, 255, 0.45) !important;
}

/* Footer Contact Information Icons */
.footer-grid .footer-contact-col p {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  color: #cbd5e1 !important;
  margin-bottom: 10px !important;
}

.footer-grid .footer-contact-col p i {
  color: #f59e0b !important;
  font-size: 14px !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}

/* Footer Bottom Bar Tokens & Desktop Layout */
@media screen and (min-width: 1025px) {
  .footer .footer-bottom,
  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 24px 0 28px !important;
    margin-top: 36px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer .footer-bottom p,
  .footer-bottom p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex: 1 1 0% !important;
    justify-content: flex-start !important;
  }

  .footer .footer-powered-by,
  .footer-powered-by {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
  }

  .footer .payment-methods,
  .payment-methods {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    white-space: nowrap !important;
    flex: 1 1 0% !important;
  }
}

.footer .footer-powered-by span,
.footer-powered-by span {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: inherit !important;
  vertical-align: baseline !important;
  color: inherit !important;
}

.footer .footer-powered-by a,
.footer-powered-by a {
  color: #f8fafc !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer .footer-powered-by a:hover,
.footer-powered-by a:hover {
  color: #38bdf8 !important;
  text-decoration: none !important;
  transform: none !important;
}

.payment-methods .secure,
.footer-bottom span.secure {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 11px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  margin: 0 4px 0 0 !important;
}

.payment-methods .secure i,
.footer-bottom span.secure i {
  color: #10b981 !important;
  font-size: 13px !important;
}

.payment-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  width: 44px !important;
  padding: 0 4px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18) !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.payment-icon:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28) !important;
}

.payment-icon img {
  height: 16px !important;
  max-height: 16px !important;
  width: auto !important;
  max-width: 36px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ── FOOTER RESPONSIVE ARCHITECTURE ── */
.footer {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

.footer .container {
  box-sizing: border-box !important;
}

/* ── LAPTOPS (992px - 1600px): CHATBOT CLEARANCE SO NO PAYMENT ICONS ARE OVERLAPPED ── */
@media screen and (max-width: 1600px) and (min-width: 992px) {
  .footer-bottom,
  .footer .footer-bottom {
    padding-right: 68px !important;
  }
}

/* ── STANDARD & LARGE LAPTOPS (1200px - 1440px) ── */
@media screen and (max-width: 1440px) and (min-width: 1200px) {
  .footer .container {
    width: min(95%, 1680px) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .footer-grid,
  .footer .footer-grid {
    grid-template-columns: 1.35fr 1.05fr 1fr 1.35fr !important;
    gap: 28px 20px !important;
    padding-bottom: 32px !important;
  }

  .footer-bottom,
  .footer .footer-bottom {
    padding: 20px 0 !important;
    padding-right: 68px !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
  }

  .footer-bottom > p,
  .footer .footer-bottom p {
    font-size: 12.5px !important;
  }

  .kw-footer-branding-card {
    gap: 14px !important;
  }
  .kw-brand-logo-box {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 4px !important;
  }
  .kw-brand-subhead {
    font-size: 9.5px !important;
  }
  .kw-brand-title {
    font-size: 15.5px !important;
    gap: 4px !important;
  }
  .kw-brand-link-icon {
    font-size: 10.5px !important;
  }
  .kw-brand-divider {
    height: 28px !important;
    margin: 0 4px !important;
  }
  .kw-brand-tagline-main {
    font-size: 14.5px !important;
  }
  .kw-brand-tagline-sub {
    font-size: 11px !important;
  }

  .payment-methods .secure,
  .footer-bottom span.secure {
    font-size: 11px !important;
    padding: 4px 9px !important;
    gap: 5px !important;
  }
  .payment-icons-row {
    gap: 5px !important;
  }
  .payment-icon {
    width: 36px !important;
    height: 23px !important;
    min-width: 36px !important;
    padding: 1px 3px !important;
  }
}

/* ── SMALL LAPTOPS & 1024px VIEWPORT (992px - 1199px): FIT PROPORTIONATELY ON 1 ROW ── */
@media screen and (max-width: 1199px) and (min-width: 992px) {
  .footer .container {
    width: min(97%, 1680px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .footer .footer-grid,
  .footer-grid {
    grid-template-columns: 1.3fr 1.05fr 1fr 1.35fr !important;
    gap: 22px 14px !important;
    padding-bottom: 28px !important;
  }

  .footer .footer-bottom,
  .footer-bottom {
    padding: 18px 0 !important;
    padding-right: 68px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .footer .footer-bottom p,
  .footer-bottom p {
    font-size: 11.5px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  .kw-footer-branding-card {
    gap: 10px !important;
  }
  .kw-brand-logo-box {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 3px !important;
  }
  .kw-brand-subhead {
    font-size: 8.5px !important;
  }
  .kw-brand-title {
    font-size: 14px !important;
    gap: 3px !important;
  }
  .kw-brand-link-icon {
    font-size: 9.5px !important;
  }
  .kw-brand-divider {
    height: 26px !important;
    margin: 0 3px !important;
  }
  .kw-brand-tagline-main {
    font-size: 13.5px !important;
    line-height: 1.2 !important;
  }
  .kw-brand-tagline-sub {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .payment-methods .secure,
  .footer-bottom span.secure {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
    gap: 4px !important;
  }
  .payment-icons-row {
    gap: 4px !important;
  }
  .payment-icon {
    width: 33px !important;
    height: 21px !important;
    min-width: 33px !important;
    padding: 1px 2px !important;
  }
  .payment-icon img {
    height: 13px !important;
    max-width: 26px !important;
  }
}

/* ── TABLETS (768px - 991px): 2x2 GRID & CLEAN STACKED BOTTOM BAR ── */
@media screen and (max-width: 991px) and (min-width: 768px) {
  .footer .container {
    width: 94% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .footer .footer-grid,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 20px !important;
    padding-bottom: 28px !important;
  }

  .footer .footer-bottom,
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
    padding: 22px 0 24px !important;
  }

  .footer .footer-powered-by,
  .footer-bottom .kw-footer-branding-wrapper {
    order: 1 !important;
    margin: 0 auto !important;
  }

  .kw-footer-branding-card {
    gap: 12px !important;
  }
  .kw-brand-logo-box {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
  .kw-brand-title {
    font-size: 15px !important;
  }
  .kw-brand-tagline-main {
    font-size: 15px !important;
  }
  .kw-brand-tagline-sub {
    font-size: 11.5px !important;
  }

  .footer .payment-methods,
  .footer-bottom .payment-methods {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 auto !important;
  }

  .footer .footer-bottom p,
  .footer-bottom > p,
  .footer-bottom p {
    order: 3 !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin: 0 auto !important;
  }
}

/* ── MOBILE SCREENS (< 768px): FULLY RESPONSIVE, ZERO CUT-OFF ── */
@media screen and (max-width: 768px) {
  .footer {
    padding: 36px 0 28px !important;
    width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  .footer .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* Footer grid: Clean vertical stacking with balanced sub-grids */
  .footer .footer-grid,
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    padding-bottom: 16px !important;
    box-sizing: border-box !important;
  }

  /* 1. Brand Section */
  .footer-about {
    width: 100% !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .footer-about .footer-logo {
    margin-bottom: 10px !important;
  }

  .footer-about .logo-img {
    height: 34px !important;
  }

  .footer-about .footer-logo-text {
    font-size: 20px !important;
  }

  .footer-about p {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #94a3b8 !important;
    margin: 0 0 14px 0 !important;
  }

  .footer-about .socials {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  .footer-about .socials a {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 14px !important;
    border-radius: 9px !important;
  }

  /* 2. Categories Column (Full width, balanced 2-column grid: 0 blank space) */
  .footer-categories-col {
    width: 100% !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .footer-categories-col h3,
  .footer-support-col h3,
  .footer-contact-col h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin-bottom: 14px !important;
  }

  .footer-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
    width: 100% !important;
  }

  .footer-categories-grid a,
  .footer-categories-col a {
    font-size: 13px !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .footer-categories-grid a:hover,
  .footer-categories-col a:hover {
    color: #38bdf8 !important;
  }

  /* 3. Customer Support Column (Full width, balanced 2-column grid) */
  .footer-support-col {
    width: 100% !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
  }

  .footer-support-col > h3 {
    grid-column: 1 / -1 !important;
    margin-bottom: 4px !important;
  }

  .footer-support-col a {
    font-size: 13px !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
  }

  .footer-support-col a:hover {
    color: #38bdf8 !important;
  }

  /* 4. Get in Touch Column */
  .footer-contact-col,
  .footer .footer-grid > div:last-child {
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 6px !important;
    border-top: none !important;
  }

  .footer-contact-col p {
    font-size: 13px !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
    margin-bottom: 11px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .footer-contact-col p i {
    color: #38bdf8 !important;
    font-size: 14px !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    text-align: center !important;
  }

  .footer-contact-col p span,
  .footer-contact-col p a {
    flex: 1 1 auto !important;
    word-break: break-word !important;
  }

  /* 5. Footer Bottom Bar: Clean Centered Stacking */
  .footer .footer-bottom,
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 18px !important;
    padding: 22px 0 28px !important;
    margin-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Order 1: Kiwistron Branding Card (GRID LAYOUT: 100% RESPONSIVE, ZERO CUT-OFF) */
  .footer .footer-powered-by,
  .footer-bottom .kw-footer-branding-wrapper {
    order: 1 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .kw-footer-branding-card {
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    overflow: visible !important;
  }

  .kw-brand-logo-link {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: inline-flex !important;
  }

  .kw-brand-logo-box {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 5px !important;
    border-radius: 10px !important;
    background: #020617 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }

  .kw-brand-info-col {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 2px !important;
    margin: 0 !important;
  }

  .kw-brand-subhead {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: #38bdf8 !important;
    line-height: 1.1 !important;
  }

  .kw-brand-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    gap: 4px !important;
    line-height: 1.2 !important;
  }

  .kw-brand-link-icon {
    font-size: 11px !important;
    color: #38bdf8 !important;
  }

  /* Hide vertical divider in stacked mobile view */
  .kw-brand-divider {
    display: none !important;
  }

  .kw-brand-tagline-col {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 4px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 2px !important;
  }

  .kw-brand-tagline-main {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.01em !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .kw-brand-tagline-sub {
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    line-height: 1.35 !important;
    white-space: normal !important; /* CRITICAL: Never cut off! */
    word-break: normal !important;
    text-align: center !important;
  }

  /* Order 2: Payment Methods */
  .footer .payment-methods,
  .footer-bottom .payment-methods {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .payment-methods .secure,
  .footer-bottom span.secure {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #34d399 !important;
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(52, 211, 153, 0.25) !important;
    border-radius: 999px !important;
    padding: 5px 14px !important;
    gap: 6px !important;
    margin: 0 auto !important;
  }

  .payment-icons-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .payment-icon {
    width: 42px !important;
    height: 26px !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 4px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  }

  .payment-icon img {
    height: 15px !important;
    max-width: 32px !important;
    object-fit: contain !important;
  }

  /* Order 3: Copyright */
  .footer .footer-bottom p,
  .footer-bottom > p,
  .footer-bottom p {
    order: 3 !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin: 0 auto !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    padding-bottom: 20px !important; /* Clearance for floating chat button */
  }
}

/* ── 10. TOUCH TARGET ACCESSIBILITY & PREVENT ZOOM ON INPUT FOCUS (iOS) ── */
button, a, input, select, textarea {
  touch-action: manipulation;
}

input, select, textarea {
  font-size: 16px; /* Prevents auto-zoom on iPhone / iOS Safari inputs */
}

@media screen and (min-width: 768px) {
  input, select, textarea {
    font-size: 14px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. ULTRA-COMPACT SCREENS (<= 360px, e.g. 320px x 568px iPhone SE / Small Screens)
   ══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 360px) {
  /* Global Container & Breadcrumb */
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .breadcrumb {
    padding: 0 8px !important;
    margin: 8px auto 14px !important;
    font-size: 11px !important;
  }

  /* Compact Mobile Header */
  .header-main {
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  .logo-img:not(.logo-img--full) {
    height: 26px !important;
    max-height: 26px !important;
  }

  .logo-img--full {
    height: 30px !important;
    max-height: 34px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .header-actions {
    gap: 4px !important;
  }

  .header-action-circle {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }

  .header-action-badge {
    top: -2px !important;
    right: -2px !important;
    min-width: 15px !important;
    height: 15px !important;
    font-size: 8.5px !important;
  }

  .search {
    height: 38px !important;
    padding: 0 3px 0 12px !important;
    border-radius: 9999px !important;
  }

  .search input,
  .search input:focus,
  .search input:focus-visible,
  .search input:active,
  #searchInput,
  #searchInput:focus,
  #searchInput:focus-visible,
  .help-search-box input,
  .help-search-box input:focus,
  .help-search-box input:focus-visible,
  .help-search-box input:active,
  #helpMainSearchInput,
  #helpMainSearchInput:focus,
  #helpMainSearchInput:focus-visible,
  #helpMainSearchInput:active {
    font-size: 12.5px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .search button#searchBtn,
  .search #searchBtn,
  #searchBtn {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%) !important;
    box-shadow: 0 1px 4px rgba(0, 102, 255, 0.2) !important;
  }

  .search button#searchBtn i,
  .search #searchBtn i,
  #searchBtn i {
    font-size: 11px !important;
  }

  /* Compact Category Swipe Bar */
  .mobile-category-pill-bar {
    padding: 6px 6px 8px 6px !important;
    gap: 5px !important;
  }

  .mobile-cat-pill {
    padding: 4px 8px !important;
    font-size: 10px !important;
    gap: 4px !important;
    border-radius: 14px !important;
  }

  /* Hero Slider 320px */
  .hero-image-card {
    min-height: 180px !important;
    height: 180px !important;
    border-radius: 12px !important;
  }

  .hero-slide-inner {
    padding: 12px 10px 30px 10px !important;
  }

  .hero-slide-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .hero-slide-subtitle {
    font-size: 9.5px !important;
    margin-bottom: 8px !important;
    line-height: 1.25 !important;
  }

  .hero-cta-btn {
    padding: 5px 10px !important;
    font-size: 10.5px !important;
  }

  /* Features 2x2 Strip on 320px */
  .features {
    gap: 5px !important;
    margin: 10px auto !important;
  }

  .feature-item {
    padding: 6px 4px !important;
    gap: 5px !important;
    border-radius: 8px !important;
  }

  .feature-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }

  .feature-title {
    font-size: 9.5px !important;
  }

  .feature-desc {
    font-size: 8px !important;
  }

  /* Categories Showcase 2-col on 320px */
  .categories-showcase-section {
    padding: 16px 0 !important;
  }

  .categories-showcase-section .category-card {
    padding: 6px 4px 8px 4px !important;
    border-radius: 10px !important;
  }

  .categories-showcase-section .category-image-wrap {
    height: 60px !important;
  }

  .categories-showcase-section .category-image-wrap img {
    max-height: 50px !important;
  }

  .categories-showcase-section .category-name {
    font-size: 9.5px !important;
    min-height: 24px !important;
  }

  /* 2-Column Product Cards on 320px */
  .products-grid,
  .product-grid,
  .product-grid-shop,
  .shop-product-grid,
  .featured-grid,
  .latest-grid,
  .latest-product-grid,
  .show-products-grid,
  .category-products-grid,
  .other-products-grid,
  .shop-page-layout .product-grid-shop,
  .shop-page-layout .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .product-card,
  .latest-product-card,
  .shop-card,
  .pc,
  .sp-card {
    min-height: 320px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  .product-card .card-img-wrap,
  .product-card .product-img,
  .product-card .product-image-box,
  .latest-product-card .latest-product-image,
  .shop-card-img-wrap,
  .shop-card-img,
  .sp-card .card-img-wrap {
    height: 135px !important;
    min-height: 135px !important;
    max-height: 135px !important;
    padding: 0 !important;
  }

  .product-card .product-title,
  .latest-product-card .latest-product-title,
  .shop-card-title {
    font-size: 11px !important;
    height: 28px !important;
    min-height: 28px !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
  }

  .price-main,
  .price-purple {
    font-size: 11.5px !important;
  }

  .price-old,
  .price-original {
    font-size: 9px !important;
  }

  .tax-subtext {
    font-size: 8px !important;
    margin-bottom: 4px !important;
  }

  .btn-black-add,
  .shop-card .btn-black-add {
    width: 100% !important;
    padding: 6px 8px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
    gap: 4px !important;
    height: 30px !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-card .product-cart-btn,
  .latest-product-card .latest-cart-btn,
  .latest-product-card .product-cart-btn {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    gap: 5px !important;
    border-radius: 7px !important;
  }

  .save-tag-red,
  .product-badge {
    top: 4px !important;
    left: 4px !important;
    font-size: 7.5px !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
  }

  .wishlist-btn {
    top: 4px !important;
    right: 4px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
  }

  /* Video Offer Cards on 320px */
  .offer-grid {
    gap: 10px !important;
  }

  .offer-card {
    min-height: 160px !important;
    padding: 16px 12px !important;
    border-radius: 12px !important;
  }

  .offer-title {
    font-size: 15px !important;
  }

  .offer-btn {
    padding: 5px 12px !important;
    font-size: 10.5px !important;
  }

  /* STEM Kit Banner on 320px */
  .kit-banner {
    padding: 14px 10px !important;
    border-radius: 12px !important;
  }

  .kit-banner h2 {
    font-size: 17px !important;
  }

  .level-box {
    padding: 7px 10px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  /* Blog Cards on 320px */
  .blog-card-img {
    height: 130px !important;
  }

  .blog-title {
    font-size: 12px !important;
  }

  /* Mobile Drawer on 320x568 */
  .mobile-drawer-box {
    width: 86vw !important;
    max-width: 260px !important;
  }

  .mobile-drawer-header {
    padding: 10px 12px !important;
  }

  .mobile-drawer-links a {
    padding: 6.5px 12px !important;
    font-size: 11.5px !important;
    gap: 8px !important;
  }

  .mobile-drawer-links a i {
    font-size: 11.5px !important;
    width: 14px !important;
  }

  .mobile-drawer-footer {
    padding: 8px 12px !important;
  }

  .mobile-drawer-footer a,
  .mobile-drawer-footer button {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
  }
}

/* ── TABLET CARD PROPORTIONS (415px Card / 190px Image Area) ── */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .product-card,
  .latest-product-card,
  .shop-card,
  .pc,
  .sp-card {
    min-height: 415px !important;
    max-width: 100% !important;
  }
  .product-image-box,
  .product-image-wrapper,
  .latest-product-image,
  .product-img-wrapper,
  .card-img-wrap,
  .product-img,
  .shop-card-img-wrap {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    padding: 0 !important;
  }
  .product-image-box img,
  .product-image-wrapper img,
  .latest-product-image img,
  .product-img-wrapper img,
  .card-img-wrap img,
  .product-img,
  .shop-card-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   11.5. LAPTOP & MEDIUM SCREENS BREAKPOINT (1024px to 1366px)
   Prevents text/image overlap, balances hero slider and side banners
   ══════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr 280px !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .hero-image-card,
  #heroSlideshow {
    height: 100% !important;
    min-height: 380px !important;
  }
  .hero-side-banners,
  .hero-side-banners.has-side-carousel {
    height: 100% !important;
    min-height: 380px !important;
  }
  .hero-grid[data-side-count="1"] {
    grid-template-columns: 1fr 280px !important;
  }
  .hero-slide-inner {
    padding: 24px 28px !important;
    gap: 16px !important;
  }
  .hero-overlay-content {
    max-width: 52% !important;
    flex: 0 1 52% !important;
    gap: 8px !important;
  }
  .hero-overlay-eyebrow {
    font-size: 10.5px !important;
    padding: 4px 12px !important;
  }
  .hero-overlay-title {
    font-size: clamp(20px, 2.2vw, 28px) !important;
    line-height: 1.2 !important;
  }
  .hero-overlay-desc {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  .hero-overlay-content button,
  .hero-slide-btn {
    padding: 8px 18px !important;
    font-size: 12.5px !important;
  }
  .hero-slide-image {
    position: absolute !important;
    right: 20px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: clamp(180px, 42%, 270px) !important;
    height: 240px !important;
  }
  .hero-slide-image img {
    max-width: 100% !important;
    max-height: 230px !important;
    object-fit: contain !important;
  }
  .side-banner-card {
    padding: 14px 16px !important;
  }
  .side-banner-title {
    font-size: 14.5px !important;
  }
  .side-banner-subtitle {
    font-size: 12px !important;
  }
  .side-banner-image {
    width: 90px !important;
    height: 90px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   12. LARGE LAPTOP & DESKTOP SCREENS BREAKPOINT (>= 1440px, e.g. 1920x1080)
   Optimizes container utilization, hero proportions, spacing and alignment
   ══════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1440px) {
  /* 1. Master fluid containers — centered with balanced, natural gutters */
  .container,
  .featured-container,
  .brands-container,
  .latest-container,
  .blog-container,
  .shop-container,
  .cart-container,
  .checkout-container,
  .kits-container,
  .product-detail-container {
    width: min(94%, 1680px) !important;
    max-width: 1680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* 2. Header & Search Bar */
  .header-main {
    gap: 32px !important;
    padding: 12px 0 !important;
  }

  .search-wrap {
    max-width: 620px !important;
  }

  /* 3. Navigation bar: single line, aligned with container */
  .nav-inner {
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  /* 4. Hero Section: maintain natural proportions and consistent gaps */
  .hero-section {
    margin-top: 24px !important;
    margin-bottom: 28px !important;
  }

  .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  .hero-grid.hero-grid-full,
  .hero-grid.no-side-banners,
  .hero-grid[data-side-count="0"] {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  .hero-grid.hero-grid-full .hero-image-card,
  .hero-grid.no-side-banners .hero-image-card,
  .hero-grid[data-side-count="0"] .hero-image-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-grid.hero-grid-full .hero-side-banners,
  .hero-grid.no-side-banners .hero-side-banners,
  .hero-grid[data-side-count="0"] .hero-side-banners {
    display: none !important;
  }
  .hero-grid[data-side-count="1"] {
    grid-template-columns: 1fr 340px !important;
  }
  .hero-grid[data-side-count="1"] .hero-side-banners,
  .hero-side-banners.single-side-banner {
    display: flex !important;
    flex-direction: column !important;
    height: 380px !important;
  }
  .hero-grid[data-side-count="1"] .hero-side-banners .side-banner-card,
  .hero-side-banners.single-side-banner .side-banner-card {
    height: 100% !important;
    flex: 1 1 100% !important;
    min-height: 100% !important;
    padding: 24px 22px !important;
  }

  .hero-image-card {
    height: 100% !important;
    min-height: 380px !important;
    width: 100% !important;
  }

  .hero-side-banners {
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 14px !important;
    height: 100% !important;
    min-height: 380px !important;
  }

  .hero-side-banners.has-side-carousel {
    display: block !important;
    position: relative !important;
    height: 100% !important;
    min-height: 380px !important;
    overflow: hidden !important;
    border-radius: var(--radius-xl, 20px) !important;
  }
  .hero-side-banners.has-side-carousel .side-banners-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: var(--radius-xl, 20px) !important;
  }
  .hero-side-banners.has-side-carousel .side-banners-page {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 14px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(14px) scale(0.985) !important;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.45s ease !important;
    z-index: 1 !important;
  }
  .hero-side-banners.has-side-carousel .side-banners-page.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    z-index: 2 !important;
  }
  .hero-side-banners.has-side-carousel .side-banners-page .side-banner-card,
  .hero-side-banners .side-banner-card {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    flex: none !important;
  }
  .hero-side-banners.has-side-carousel .side-banners-page .side-banner-card:only-child,
  .hero-side-banners.single-side-banner .side-banner-card {
    height: 100% !important;
    flex: 1 1 100% !important;
  }

  .hero-slide-inner {
    padding: 32px 36px !important;
    gap: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .hero-overlay-content {
    flex: 0 1 54% !important;
    max-width: 54% !important;
  }

  .hero-slide-image {
    position: absolute !important;
    right: 32px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: clamp(220px, 38%, 340px) !important;
    height: 270px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 4 !important;
  }

  .hero-slide-image img {
    max-width: 100% !important;
    max-height: 260px !important;
    object-fit: contain !important;
    transform-origin: center center !important;
    transform: scale(var(--prod-scale, 1)) !important;
    transition: transform 0.3s ease !important;
  }

  .hero-slide:hover .hero-slide-image img {
    transform: scale(calc(var(--prod-scale, 1) * 1.05)) !important;
  }

  .side-banner-card {
    padding: 16px 22px !important;
    overflow: hidden !important;
  }

  .side-banner-image {
    width: 120px !important;
    height: 120px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .side-banner-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform-origin: center center !important;
    transform: scale(var(--banner-scale, 1)) !important;
    transition: transform 0.3s ease !important;
  }

  .side-banner-card:hover .side-banner-image img {
    transform: scale(calc(var(--banner-scale, 1) * 1.05)) !important;
  }

  /* 5. Features Strip: 4 items in 1 row aligned with hero container */
  .features-wrapper {
    margin-top: 20px !important;
    margin-bottom: 24px !important;
  }

  .features {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    width: 100% !important;
  }

  .features article {
    padding: 18px 22px !important;
    gap: 16px !important;
  }

  /* 6. Categories Section: aligned with container edges */
  .categories-grid-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 20px 16px !important;
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   13. RESPONSIVE PRODUCT CARD & CATEGORY CARD COLUMNS SYSTEM
   Maintains consistent visual card dimensions across all screen sizes
   ══════════════════════════════════════════════════════════════════ */

/* Standard / Smaller / Medium Laptops (1281px - 1649px, e.g. 1366x768, 1440x900, 1536x864, 1600x900)
   → Strictly 5 product cards per row, 6 category cards per row */
@media screen and (min-width: 1281px) and (max-width: 1649px) {
  .sp-track > .product-card {
    flex: 0 0 calc((100% - 16px * 4) / 5) !important;
    min-width: calc((100% - 16px * 4) / 5) !important;
    max-width: calc((100% - 16px * 4) / 5) !important;
    width: calc((100% - 16px * 4) / 5) !important;
  }

  .latest-grid,
  .latest-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .categories-grid-container {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 20px 16px !important;
  }
}

/* Medium / Large Laptops & Large Desktops (>= 1650px, e.g. 1680x1050, 1920x1080, 1920x1200)
   → 6 product cards per row (maintaining original ~243px - 260px card size)
   → 7 category cards per row (maintaining original ~206px - 220px card size) */
@media screen and (min-width: 1650px) {
  .sp-track > .product-card {
    flex: 0 0 calc((100% - 16px * 5) / 6) !important;
    min-width: calc((100% - 16px * 5) / 6) !important;
    max-width: calc((100% - 16px * 5) / 6) !important;
    width: calc((100% - 16px * 5) / 6) !important;
  }

  .latest-grid,
  .latest-product-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .categories-grid-container {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 18px 14px !important;
    width: 100% !important;
  }

  .category-card-box {
    max-width: 220px !important;
    margin-inline: auto !important;
  }
}

/* Larger Screens (>= 2560px, e.g. 2560x1440, 2560x1600, 3840x2160)
   → Maintain strict maximum card dimensions; cards NEVER stretch */
@media screen and (min-width: 2560px) {
  .sp-track > .product-card {
    max-width: 280px !important;
  }

  .latest-product-card,
  .product-card {
    max-width: 280px !important;
  }

  .category-card-box {
    max-width: 220px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   14. SHOP ALL / ALL PRODUCTS PAGE RESPONSIVE PRODUCT GRID
   Standard / Medium Laptops: Sidebar + 4 cards
   Large Desktops (1920x1080, 1920x1200): Sidebar + 5 cards
   Ultra-wide Screens: Capped max-width, no card stretching
   ══════════════════════════════════════════════════════════════════ */
.shop-page-layout .shop-product-grid,
.shop-product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

@media screen and (min-width: 1750px) {
  .shop-page-layout .shop-product-grid,
  .shop-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

@media screen and (min-width: 2560px) {
  .shop-page-layout .shop-product-grid .product-card,
  .shop-product-grid .product-card {
    max-width: 280px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   15. LARGE DESKTOP HERO SLIDER (>= 1900px, e.g. 1920x1080, 1920x1200, 2560x1440)
   Increase hero slider & right promotional cards height to 420px
   ══════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1900px) {
  .hero-image-card,
  #heroSlideshow {
    height: 100% !important;
    min-height: 420px !important;
  }

  .hero-side-banners,
  .hero-side-banners.has-side-carousel {
    height: 100% !important;
    min-height: 420px !important;
  }

  .hero-grid[data-side-count="1"] .hero-side-banners,
  .hero-side-banners.single-side-banner {
    height: 100% !important;
    min-height: 420px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   16. MOBILE PRODUCT CARDS: PROFESSIONAL SHOP ICON-ONLY BUTTON
   Hides 'Add to Cart' / 'Notify Me' text on mobile screens (<= 768px)
   and renders a compact, circular shop icon button so the price is
   never overlapped.
   ══════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  .product-card .product-card-footer,
  .product-card .product-card-bottom,
  .product-card .product-bottom,
  .latest-product-card .product-card-bottom,
  .latest-product-card .latest-product-bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    padding-top: 8px !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
  }

  .product-card .product-price-section,
  .latest-product-card .product-price-section {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 44px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  .product-card .product-cart-action,
  .product-card .product-card-action,
  .latest-product-card .product-card-action,
  .latest-product-card .product-cart-action {
    display: flex !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }

  .product-card .product-cart-btn,
  .product-card .cart-btn,
  .product-card .add-cart-btn,
  .latest-product-card .product-cart-btn,
  .latest-product-card .cart-btn,
  .latest-product-card .add-cart-btn,
  .product-cart-btn,
  .cart-btn:not(.desktop-nav-btn) {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    gap: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 8px rgba(40, 123, 255, 0.3) !important;
    background: #287BFF !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    position: static !important;
    margin: 0 !important;
  }

  .cart-btn-label {
    display: none !important;
  }

  .product-card .product-cart-btn i,
  .product-card .cart-btn i,
  .product-card .add-cart-btn i,
  .latest-product-card .product-cart-btn i,
  .latest-product-card .cart-btn i,
  .latest-product-card .add-cart-btn i,
  .product-cart-btn i,
  .cart-btn i {
    font-size: 15px !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .product-card .current-price,
  .latest-product-card .current-price {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .product-card .price-gst-badge,
  .latest-product-card .price-gst-badge {
    font-size: 9.5px !important;
    padding: 1.5px 5px !important;
    white-space: nowrap !important;
  }

  .product-cart-btn.notify-me-btn,
  .cart-btn.notify-me-btn {
    background: #fef2f2 !important;
    border: 1.5px solid #fecaca !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15) !important;
  }
  .product-cart-btn.notify-me-btn i,
  .cart-btn.notify-me-btn i {
    color: #ef4444 !important;
    font-size: 14px !important;
  }
  .product-cart-btn.notification-set-btn,
  .cart-btn.notification-set-btn {
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.15) !important;
  }
  .product-cart-btn.notification-set-btn i,
  .cart-btn.notification-set-btn i {
    color: #16a34a !important;
    font-size: 14px !important;
  }
}

@media screen and (max-width: 480px) {
  .product-card .product-cart-btn,
  .product-card .cart-btn,
  .latest-product-card .product-cart-btn,
  .latest-product-card .cart-btn {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
  .product-card .product-cart-btn i,
  .product-card .cart-btn i,
  .latest-product-card .product-cart-btn i,
  .latest-product-card .cart-btn i {
    font-size: 14px !important;
  }
}