/* ════════════════════════════════════════════════════════════
   JANOSCI — PREMIUM MOBILE UI v2
   Color: Deep Navy (#0A2540) + Emerald (#10B981) + Clean White
   Typography: Inter / Plus Jakarta Sans
   ════════════════════════════════════════════════════════════ */

:root {
  --jp-navy: #0A2540;
  --jp-navy-light: #1E3A5F;
  --jp-navy-dark: #051A30;
  --jp-emerald: #10B981;
  --jp-emerald-light: #34D399;
  --jp-emerald-dark: #059669;
  --jp-amber: #F59E0B;
  --jp-amber-light: #FBBF24;
  --jp-bg: #F8FAFC;
  --jp-card: #FFFFFF;
  --jp-text: #0A2540;
  --jp-muted: #64748B;
  --jp-border: #E2E8F0;
  --jp-soft: #F1F5F9;
}

/* ── BASELINE: Hide off-canvas sidebar & overlay until toggled (works without main CSS) ── */
.mobile-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: -360px !important;
  right: auto !important;
  width: 320px !important;
  max-width: 92vw !important;
  height: 100vh !important;
  background: linear-gradient(180deg, #0A2540 0%, #051A30 100%) !important;
  color: #fff !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transition: left 0.3s cubic-bezier(.22,.61,.36,1) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.2) !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  flex-direction: column !important;
  transform: none !important;
  padding-top: 0 !important;
  pointer-events: auto !important;
}
.mobile-sidebar.open {
  left: 0 !important;
  transform: none !important;
}
.mobile-sidebar * { box-sizing: border-box; }
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  display: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto !important;
}
.sidebar-overlay.open { display: block; }
.mobile-sidebar .sidebar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.1rem 1rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
  flex-shrink: 0 !important;
}
.mobile-sidebar .sidebar-header .brand-text {
  min-width: 0 !important;
  flex: 1 1 0 !important;
  overflow: hidden !important;
}
.mobile-sidebar .sidebar-header .brand-main {
  display: block !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.mobile-sidebar .sidebar-header .brand-sub {
  display: block !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.mobile-sidebar .sidebar-close-btn {
  background: rgba(255,255,255,0.08) !important;
  border: none !important;
  color: #fff !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  flex-shrink: 0 !important;
}
.mobile-sidebar .sidebar-close-btn:active {
  background: rgba(239,68,68,0.25) !important;
}
.mobile-sidebar .sidebar-user-section {
  padding: 1rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  flex-shrink: 0 !important;
}
.mobile-sidebar .sidebar-nav-section {
  padding: 0.4rem 0 1.5rem !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.mobile-sidebar .sidebar-nav-label {
  padding: 0.85rem 1rem 0.35rem !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.45) !important;
}
.mobile-sidebar .sidebar-nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.7rem 1rem !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  /* CRITICAL: allow text to wrap onto 2 lines instead of clipping */
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
  -webkit-tap-highlight-color: rgba(16,185,129,0.18) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.mobile-sidebar .sidebar-nav-link i {
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  text-align: center !important;
  font-size: 0.95rem !important;
  color: rgba(255,255,255,0.55) !important;
  align-self: center !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  line-height: 1 !important;
  display: inline-block !important;
}
.mobile-sidebar .sidebar-nav-link i.fab,
.mobile-sidebar .sidebar-nav-link i.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}
.mobile-sidebar .sidebar-nav-link i.fas,
.mobile-sidebar .sidebar-nav-link i.far,
.mobile-sidebar .sidebar-nav-link i.fa-solid,
.mobile-sidebar .sidebar-nav-link i.fa-regular {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
.mobile-sidebar .sidebar-nav-link i.far,
.mobile-sidebar .sidebar-nav-link i.fa-regular {
  font-weight: 400 !important;
}
.mobile-sidebar .sidebar-nav-link:hover,
.mobile-sidebar .sidebar-nav-link.active {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}
.mobile-sidebar .sidebar-nav-link.active {
  background: linear-gradient(90deg, rgba(16,185,129,0.18), rgba(16,185,129,0)) !important;
  color: #fff !important;
}
.mobile-sidebar .sidebar-nav-link.active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  background: var(--jp-emerald, #10B981) !important;
  border-radius: 0 4px 4px 0 !important;
}
.mobile-sidebar .sidebar-nav-link.active i {
  color: var(--jp-emerald-light, #34D399) !important;
}
.mobile-sidebar .sidebar-nav-link:active {
  background: rgba(16,185,129,0.12) !important;
}
.mobile-sidebar .sidebar-nav-link.text-danger {
  color: #FCA5A5 !important;
}
.mobile-sidebar .sidebar-nav-link.text-danger i { color: #EF4444 !important; }
.mobile-sidebar .sidebar-divider {
  height: 1px !important;
  background: rgba(255,255,255,0.08) !important;
  margin: 0.6rem 0 !important;
}
.mobile-sidebar .sidebar-user-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--jp-emerald), var(--jp-amber)) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}
.mobile-sidebar .sidebar-user-name {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.mobile-sidebar .sidebar-user-email {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* "Login / Register" buttons inside sidebar (logged out) */
.mobile-sidebar .btn-outline-white,
.mobile-sidebar .btn-gold {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.55rem 0.75rem !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.mobile-sidebar .btn-outline-white {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
.mobile-sidebar .btn-gold {
  background: linear-gradient(135deg, var(--jp-amber, #F59E0B), var(--jp-amber-light, #FBBF24)) !important;
  color: var(--jp-navy, #0A2540) !important;
  border: none !important;
}

/* Custom thin scrollbar for sidebar */
.mobile-sidebar::-webkit-scrollbar { width: 4px; }
.mobile-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; }
.mobile-sidebar::-webkit-scrollbar-track { background: transparent; }

/* Override conflicting rules from mobile-final.css and components.css */
@media (max-width: 991px) {
  .site-footer .mobile-sidebar,
  body .mobile-sidebar {
    max-width: 92vw !important;
    width: 320px !important;
    transform: none !important;
  }
  body .mobile-sidebar.open {
    transform: none !important;
    left: 0 !important;
  }
  /* Disable any white sidebar from components.css */
  .mobile-sidebar.open .mobile-sidebar-body { background: transparent; }
}

/* ── Hide bottom nav on desktop ── */
@media (min-width: 992px) {
  .bottom-nav { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE-ONLY OVERRIDES (≤991px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

/* ── PREVENT HORIZONTAL OVERFLOW ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  margin: 0 !important;
}
body > * { max-width: 100vw !important; }
.container, .container-fluid {
  max-width: 100% !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
img, video, iframe { max-width: 100% !important; height: auto; }

/* ── BODY PADDING for bottom nav ── */
body {
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--jp-bg) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── STICKY TOP NAVBAR (Premium) ── */
.navbar {
  background: rgba(10, 37, 64, 0.97) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  height: 56px !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05) !important;
}
.navbar-inner {
  height: 100% !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.navbar-logo-wrap {
  background: #fff !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
}
.navbar-brand-logo { height: 24px !important; width: auto !important; }
.navbar-mobile-actions {
  display: flex !important;
  gap: 6px !important;
  margin-left: auto !important;
}
.navbar-mobile-actions .navbar-icon-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.navbar-mobile-actions .navbar-icon-btn i { font-size: 0.95rem !important; }
.navbar-mobile-actions .badge-dot {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  background: #EF4444 !important;
  color: #fff !important;
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 9999px !important;
  padding: 0 4px !important;
  border: 1.5px solid var(--jp-navy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide desktop-only navbar elements */
.site-nav, .navbar-search-wrap, .navbar-actions {
  display: none !important;
}

/* ── ANNOUNCEMENT BAR ── */
.ann-bar {
  background: var(--jp-navy-dark) !important;
  font-size: 0.66rem !important;
  padding: 4px 0 !important;
  height: auto !important;
}
.ann-item i, .ann-item strong { color: var(--jp-amber) !important; }

/* ── HERO SWIPER ── */
.hero-swiper, .hero-slider-section .swiper {
  height: 360px !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.hero-slider-section { padding: 0 !important; margin-bottom: 1rem; }

.swiper-slide {
  border-radius: 0 !important;
}
.slide-img-fallback,
.slide-img {
  border-radius: 0 !important;
}
.slide-overlay {
  background: linear-gradient(180deg, rgba(10,37,64,0.4) 0%, rgba(10,37,64,0.85) 100%) !important;
}
.slide-content {
  padding: 1rem 14px !important;
  max-width: 100% !important;
}
.slide-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  background: linear-gradient(135deg, var(--jp-emerald), var(--jp-emerald-light)) !important;
  color: #fff !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.85rem !important;
  box-shadow: 0 4px 12px rgba(16,185,129,0.3) !important;
  border: none !important;
}
.slide-tag::before { display: none !important; content: none !important; }
.slide-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #fff !important;
  margin-bottom: 0.6rem !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  animation: none !important;
}
.slide-subtitle {
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1.5 !important;
  margin-bottom: 1rem !important;
  max-width: 100% !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
}
.slide-actions { display: flex !important; gap: 0.5rem !important; flex-wrap: nowrap !important; }
.slide-actions .btn {
  padding: 0.6rem 1.1rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
  white-space: nowrap !important;
}
.slide-actions .btn-gold {
  background: linear-gradient(135deg, var(--jp-amber), var(--jp-amber-light)) !important;
  color: var(--jp-navy) !important;
  border: none !important;
}
.slide-actions .btn-outline-white {
  background: rgba(255,255,255,0.15) !important;
  border: 1.5px solid rgba(255,255,255,0.5) !important;
  color: #fff !important;
  backdrop-filter: blur(10px);
}
.swiper-pagination-bullet {
  background: rgba(255,255,255,0.5) !important;
  width: 6px !important;
  height: 6px !important;
}
.swiper-pagination-bullet-active {
  background: var(--jp-emerald) !important;
  width: 18px !important;
  border-radius: 99px !important;
}
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev { display: none !important; }

/* ── SECTION SPACING & HEADERS ── */
.section, .section-sm {
  padding: 1.25rem 0 !important;
}
.section-header {
  margin-bottom: 1rem !important;
  text-align: center !important;
}
.section-tag {
  display: inline-block !important;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
  color: #92400E !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  padding: 4px 14px !important;
  border-radius: 99px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border: none !important;
  margin-bottom: 0.5rem !important;
}
.section-header h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--jp-navy) !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.5rem !important;
}
.section-header p {
  font-size: 0.78rem !important;
  color: var(--jp-muted) !important;
  margin: 0 0.5rem 0.5rem !important;
}
.section-divider {
  width: 40px !important;
  height: 3px !important;
  margin: 0.5rem auto 0 !important;
  background: linear-gradient(90deg, var(--jp-emerald), var(--jp-amber)) !important;
  border-radius: 99px !important;
}

/* ── QUICK CATEGORIES (Circle grid / Horizontal scroll) ── */
.category-tiles {
  display: flex !important;
  overflow-x: auto !important;
  gap: 12px !important;
  padding: 4px 14px 8px !important;
  margin: 0 -14px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
}
.category-tiles::-webkit-scrollbar { display: none !important; }
.cat-tile {
  flex-shrink: 0 !important;
  width: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 6px !important;
  scroll-snap-align: start !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.cat-tile::before { display: none !important; }
.cat-tile:hover { box-shadow: none !important; border: none !important; }
.cat-tile-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #fff, #F8FAFC) !important;
  border: 1px solid var(--jp-border) !important;
  color: var(--jp-navy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  margin: 0 auto !important;
  box-shadow: 0 4px 12px rgba(10,37,64,0.06) !important;
  overflow: hidden !important;
  padding: 8px !important;
  transition: all 0.2s ease !important;
}
.cat-tile-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.cat-tile:active .cat-tile-icon {
  background: var(--jp-emerald) !important;
  color: #fff !important;
  border-color: var(--jp-emerald) !important;
  transform: scale(0.95);
}
.cat-tile-info {
  width: 100% !important;
}
.cat-tile-info h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--jp-text) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.cat-tile-info p, .cat-tile-arrow { display: none !important; }

/* ── PRODUCT CARDS (Premium 2-col) ── */
.products-grid, .product-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.janosci-product-card {
  background: var(--jp-card) !important;
  border: 1px solid var(--jp-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.2s ease !important;
}
.janosci-product-card:active {
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(10,37,64,0.08) !important;
}
.janosci-product-card .card-img-wrap {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%) !important;
  aspect-ratio: 1 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px 14px 0 0 !important;
}
.janosci-product-card .card-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
}
.janosci-product-card .sale-badge {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  background: linear-gradient(135deg, #EF4444, #F87171) !important;
  color: #fff !important;
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 2px 6px rgba(239,68,68,0.3) !important;
  border: none !important;
  text-transform: uppercase !important;
}
.janosci-product-card .wishlist-btn {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid var(--jp-border) !important;
  color: #94A3B8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.7rem !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}
.janosci-product-card .wishlist-btn.active {
  color: #EF4444 !important;
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
}
.janosci-product-card .card-body {
  padding: 8px 10px 10px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.janosci-product-card .card-brand {
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  color: var(--jp-emerald) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 2px !important;
}
.janosci-product-card .card-title {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--jp-text) !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2em !important;
  letter-spacing: 0 !important;
}
.janosci-product-card .card-price {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: var(--jp-navy) !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.janosci-product-card .card-price del {
  font-size: 0.66rem !important;
  color: #94A3B8 !important;
  font-weight: 400 !important;
  margin-left: 0 !important;
}
.janosci-product-card .card-actions {
  margin-top: auto !important;
  display: flex !important;
  gap: 4px !important;
}
.janosci-product-card .btn-add-cart {
  width: 100% !important;
  background: var(--jp-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 6px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  transition: all 0.15s ease !important;
}
.janosci-product-card .btn-add-cart.added {
  background: #10b981 !important;
  color: #fff !important;
}
.janosci-product-card .btn-add-cart:active {
  background: var(--jp-emerald) !important;
  transform: scale(0.97);
}
.janosci-product-card .btn-add-cart i { font-size: 0.7rem !important; }

/* ── TRUST BADGES (2x3 grid) ── */
.trust-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow: visible !important;
}
.trust-divider { display: none !important; }
.trust-badge {
  flex-shrink: 0 !important;
  background: var(--jp-card) !important;
  border: 1px solid var(--jp-border) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}
.trust-badge-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05)) !important;
  color: var(--jp-emerald) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(16,185,129,0.15) !important;
}
.trust-badge-text { min-width: 0 !important; }
.trust-badge-text strong {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--jp-text) !important;
  line-height: 1.2 !important;
}
.trust-badge-text span {
  display: block !important;
  font-size: 0.58rem !important;
  color: var(--jp-muted) !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
}

/* ── FEATURES STRIP ── */
.features-strip {
  background: var(--jp-navy) !important;
  border-bottom: none !important;
  padding: 12px 0 !important;
}
.features-grid {
  display: flex !important;
  overflow-x: auto !important;
  gap: 0 !important;
  padding: 0 14px !important;
  scrollbar-width: none !important;
}
.features-grid::-webkit-scrollbar { display: none; }
.feature-item {
  flex-shrink: 0 !important;
  min-width: 180px !important;
  padding: 6px 12px !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.feature-item:last-child { border-right: none !important; }
.feature-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(16,185,129,0.15) !important;
  border: none !important;
}
.feature-icon i {
  color: var(--jp-emerald-light) !important;
  font-size: 0.9rem !important;
}
.feature-item h4 {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 !important;
}
.feature-item p {
  font-size: 0.6rem !important;
  color: rgba(255,255,255,0.6) !important;
  margin: 0 !important;
}

/* ── BUTTONS ── */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--jp-navy) !important;
  border-color: var(--jp-navy) !important;
  color: #fff !important;
}
.btn-primary:active { background: var(--jp-navy-dark) !important; }
.btn-gold {
  background: linear-gradient(135deg, var(--jp-amber), var(--jp-amber-light)) !important;
  color: var(--jp-navy) !important;
  border: none !important;
}
.btn-success, .btn-emerald {
  background: var(--jp-emerald) !important;
  color: #fff !important;
  border: none !important;
}

/* ── BOTTOM NAV (Floating Pill, 5 items) ── */
.bottom-nav {
  display: flex !important;
  position: fixed !important;
  bottom: 8px !important;
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  max-width: calc(100vw - 16px) !important;
  background: #fff !important;
  border: 1px solid var(--jp-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 28px rgba(10,37,64,0.12), 0 2px 6px rgba(10,37,64,0.06) !important;
  padding: 8px 4px !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1000 !important;
  height: auto !important;
  align-items: stretch !important;
  justify-content: space-around !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  margin: 0 !important;
  backdrop-filter: none !important;
}
.bottom-nav-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 20% !important;
  max-width: 20% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px 2px !important;
  color: #94A3B8 !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  border-radius: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
  box-sizing: border-box !important;
}
.bottom-nav-item::before, .bottom-nav-item::after {
  display: none !important; content: none !important;
}
.bottom-nav-item i {
  font-size: 1.05rem !important;
  color: inherit !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.bottom-nav-item span {
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}
.bottom-nav-item.active {
  color: var(--jp-navy) !important;
}
.bottom-nav-item.active i {
  color: var(--jp-navy) !important;
}
.bottom-nav-item.active span {
  color: var(--jp-navy) !important;
  font-weight: 700 !important;
}
.bottom-nav-item.bottom-nav-support {
  color: #25D366 !important;
}
.bottom-nav-item.bottom-nav-support i {
  color: #25D366 !important;
}
.bottom-nav-item.bottom-nav-support:active {
  transform: scale(0.96);
}

.bottom-nav-cart-count {
  position: absolute !important;
  top: 2px !important;
  right: calc(50% - 18px) !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: var(--jp-emerald) !important;
  color: #fff !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.bottom-nav-item.active::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 28px !important;
  height: 3px !important;
  background: var(--jp-emerald) !important;
  border-radius: 0 0 4px 4px !important;
  display: block !important;
}

/* ── FOOTER ── */
.footer {
  background: var(--jp-navy-dark) !important;
  padding: 1.5rem 0 1rem !important;
  margin-top: 1rem !important;
  border-radius: 20px 20px 0 0 !important;
}
.footer-grid {
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
}
.footer h4 {
  color: #fff !important;
  font-size: 0.78rem !important;
  margin-bottom: 0.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.footer-links li a { font-size: 0.78rem !important; color: rgba(255,255,255,0.65) !important; }
.footer-links li a:hover { color: var(--jp-emerald-light) !important; }
.footer-contact-item {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.7) !important;
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.footer-contact-item i { color: var(--jp-emerald) !important; }
.social-link {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.social-link:hover {
  background: var(--jp-emerald) !important;
}

/* ── HIDE FLOATING ELEMENTS ── */
.hero-float-card, .hero-orb, .hero-grid-lines { display: none !important; }
.hero-img-side { display: none !important; }

/* ── PAGE HERO ── */
.page-hero {
  background: linear-gradient(135deg, var(--jp-navy), var(--jp-navy-light)) !important;
  padding: 1rem 0 0.85rem !important;
  border-radius: 0 0 20px 20px !important;
}
.page-hero-title {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #fff !important;
}
.page-hero-desc { font-size: 0.78rem !important; }
.breadcrumb { font-size: 0.7rem !important; }

/* ── CART SUMMARY ── */
.cart-summary { position: static !important; margin-top: 1rem !important; }
.checkout-grid, .pdp-grid { grid-template-columns: 1fr !important; }
.form-grid, .field-grid-2, .field-grid-3 { grid-template-columns: 1fr !important; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }

/* ── FORM ── */
.form-control {
  font-size: 16px !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--jp-border) !important;
}
.form-control:focus {
  border-color: var(--jp-emerald) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.1) !important;
}

/* ── TESTIMONIAL CARDS ── */
.testimonial-card {
  background: var(--jp-card) !important;
  border: 1px solid var(--jp-border) !important;
  border-radius: 14px !important;
  padding: 1rem !important;
}
.testimonial-stars { color: var(--jp-amber) !important; }
.testimonial-avatar {
  background: linear-gradient(135deg, var(--jp-navy), var(--jp-navy-light)) !important;
  width: 36px !important;
  height: 36px !important;
}

/* ── NEWSLETTER ── */
.newsletter-section {
  background: linear-gradient(135deg, var(--jp-navy), var(--jp-navy-light)) !important;
  border-radius: 16px !important;
  margin: 0 14px !important;
  padding: 1.5rem 1.25rem !important;
}
.newsletter-section h2 {
  color: #fff !important;
  font-size: 1.1rem !important;
}
.newsletter-section p { color: rgba(255,255,255,0.7) !important; font-size: 0.82rem !important; }
.newsletter-form { flex-direction: column !important; gap: 0.5rem !important; }
.newsletter-form input, .newsletter-form button {
  width: 100% !important;
  border-radius: 10px !important;
}

/* ── REMOVE ZOOM/HOVER EFFECTS ── */
.btn:hover, .cat-tile:hover, .janosci-product-card:hover,
.testimonial-card:hover, .trust-badge:hover {
  transform: none !important;
}

}  /* end @media (max-width: 991px) */


/* ══════════════════════════════════════════════
   FIX: Offer Cards stack on mobile
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Offer cards section — force single column with proper layout */
  .container > [style*="grid-template-columns:1fr 1fr 1fr"],
  .container > [style*="grid-template-columns: 1fr 1fr 1fr"],
  .offer-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  /* Each offer card */
  .offer-grid > div,
  .container > [style*="grid-template-columns:1fr 1fr 1fr"] > div {
    padding: 1.1rem !important;
    border-radius: 14px !important;
    min-height: auto !important;
  }
  
  /* Title inside card */
  .offer-grid h3,
  .container > [style*="grid-template-columns:1fr 1fr 1fr"] h3 {
    font-size: 1.4rem !important;
    margin-bottom: 0.35rem !important;
  }
  
  /* Description */
  .offer-grid p,
  .container > [style*="grid-template-columns:1fr 1fr 1fr"] p {
    font-size: 0.82rem !important;
    margin-bottom: 0.85rem !important;
  }
  
  /* Coupon code box */
  .container > [style*="grid-template-columns:1fr 1fr 1fr"] [onclick*="clipboard"] {
    padding: 0.5rem 1rem !important;
  }
  .container > [style*="grid-template-columns:1fr 1fr 1fr"] [onclick*="clipboard"] span {
    font-size: 1rem !important;
  }
  
  /* Tag/Label inside */
  .offer-grid [style*="text-transform:uppercase"] {
    font-size: 0.7rem !important;
  }
}

/* ══════════════════════════════════════════════
   FIX: Topbar/Navbar mobile overflow
   ══════════════════════════════════════════════ */
@media (max-width: 991px) {
  .navbar {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }
  .navbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  .navbar-brand {
    flex-shrink: 0 !important;
    margin-right: auto !important;
  }
  .navbar-mobile-actions {
    flex-shrink: 0 !important;
    gap: 4px !important;
  }
  .navbar-mobile-actions .navbar-icon-btn {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }
  
  /* Search bar trigger */
  .mobile-search-bar {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
  }
  .mobile-search-bar input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Extra small phones */
@media (max-width: 360px) {
  .navbar-inner { padding-left: 8px !important; padding-right: 8px !important; gap: 4px !important; }
  .navbar-mobile-actions .navbar-icon-btn { width: 32px !important; height: 32px !important; }
  .navbar-brand-logo { height: 22px !important; }
}


/* ══════════════════════════════════════════════
   AUTO-SCROLL CATEGORIES + Premium Polish
   ══════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* Category tiles wrapper - enable auto-scroll animation */
  .category-tiles {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 12px !important;
    position: relative;
  }

  /* Visual hint that tiles are scrollable - fade right edge */
  .category-tiles::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(248,250,252,0.95));
    pointer-events: none;
    flex-shrink: 0;
  }

  /* Cleaner category labels - no truncation */
  .cat-tile-info h3 {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    padding: 0 2px !important;
    word-break: keep-all !important;
  }

  /* Wider category tiles to prevent text truncation */
  .cat-tile {
    width: 90px !important;
    flex-shrink: 0 !important;
  }

  /* Make label more readable */
  .cat-tile-info h3 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 1.6em;
  }
}

/* ══════════════════════════════════════════════
   LOGIN/REGISTER PAGE — Mobile polish
   ══════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Bottom nav on auth pages */
  .login-container,
  .reg-container,
  .setup-container {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Auth card adjustments */
  .auth-card,
  .login-card,
  .reg-card,
  .setup-card {
    margin-bottom: 0 !important;
  }
  
  /* Body for auth pages */
  body.auth-body,
  body[class*="login"],
  body[class*="register"] {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: flex-start !important;
    padding-top: 1.5rem !important;
  }
  
  /* If auth body uses display:flex with items-center */
  body[style*="display:flex"][style*="align-items:center"],
  body[style*="display: flex"][style*="align-items: center"] {
    align-items: flex-start !important;
    padding-top: 2rem !important;
    padding-bottom: 100px !important;
  }
}

/* ══════════════════════════════════════════════
   PREVENT ALL HORIZONTAL OVERFLOW (final pass)
   ══════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Universal overflow protection */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  
  /* All sections respect viewport */
  section, header, footer, nav, main, article, aside {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  /* Containers */
  .container, .container-fluid, .container-sm, .container-md, .container-lg {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Prevent grids/flex from causing overflow */
  .row { margin-left: 0 !important; margin-right: 0 !important; }
  
  /* Tables - always scrollable inside wrapper */
  table { max-width: 100%; }
  .table-responsive, .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  
  /* Pre/code - wrap */
  pre, code { white-space: pre-wrap !important; word-break: break-word !important; }
  
  /* Long text - break properly */
  h1, h2, h3, h4, p, span, div, a {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
  
  /* Prevent modals from overflowing */
  .modal-dialog, .modal-content { max-width: 100vw !important; }
  
  /* Forms inside modals */
  .modal .form-control { max-width: 100% !important; }
}

/* ══════════════════════════════════════════════
   PREMIUM POLISH FOR MOBILE
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Smooth scroll for entire page */
  html { scroll-behavior: smooth; }
  
  /* Touch-friendly tap highlights */
  a, button, .btn {
    -webkit-tap-highlight-color: rgba(16,185,129,0.1);
  }
  
  /* Better section spacing */
  section + section { margin-top: 0; }
  
  /* Improved readable text */
  body {
    font-size: 14px;
    line-height: 1.5;
  }
  
  /* Premium card shadow on press */
  .janosci-product-card:active,
  .cat-tile:active,
  .trust-badge:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  /* Better disabled states */
  button:disabled, .btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
  }
  
  /* Sticky elements work properly */
  .sticky-top, .sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
  }
}


/* ══════════════════════════════════════════════
   PRODUCT DETAIL PAGE (PDP) — Mobile Polish
   ══════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Page wrapper — prevent any horizontal bleed */
  body main, body .container { max-width: 100vw !important; overflow-x: hidden !important; }

  /* PDP grid: stack vertically with no internal positioning */
  .pdp-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    grid-template-columns: 1fr !important;
  }

  /* Gallery: no sticky on mobile, stack thumbs below image */
  .pdp-gallery-grid {
    position: static !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Main image first, thumbs second */
  .pdp-gallery-grid .main-image-wrap { order: 1 !important; width: 100% !important; max-width: 100% !important; }
  .pdp-gallery-grid .thumb-sidebar    { order: 2 !important; }

  .zoom-wrap {
    border-radius: 14px !important;
    cursor: default !important;
    background: #fff !important;
  }
  .zoom-wrap img {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 14px !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Thumb strip — horizontal scroll, no overflow */
  .thumb-sidebar {
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 2px !important;
    gap: 8px !important;
    scrollbar-width: none !important;
  }
  .thumb-sidebar::-webkit-scrollbar { display: none !important; }
  .thumb-item {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    padding: 4px !important;
    border-radius: 10px !important;
    background: #fff !important;
  }
  .thumb-item img { width: 100% !important; height: 100% !important; object-fit: contain !important; }

  /* Right column: no sticky, full width */
  .sticky-cart {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Breadcrumb: wrap nicely, truncate long current */
  .breadcrumb {
    flex-wrap: wrap !important;
    font-size: 0.72rem !important;
    gap: 0.25rem !important;
    margin-bottom: 0.85rem !important;
  }
  .breadcrumb .current {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--jp-muted, #64748B) !important;
    font-size: 0.7rem !important;
  }

  /* Product title smaller on mobile */
  .pdp-grid h1 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.6rem !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Countdown bar — fit on small screens */
  .countdown-bar {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.6rem 0.85rem !important;
    border-radius: 10px !important;
    margin-bottom: 1rem !important;
  }
  .countdown-bar > div { font-size: 0.78rem !important; }
  .countdown-timer { font-size: 0.95rem !important; gap: 0.35rem !important; }
  .countdown-unit { min-width: 28px !important; padding: 0.15rem 0.3rem !important; font-size: 0.85rem !important; }

  /* Price block */
  .pdp-grid [style*="background:#f8fafc"][style*="border-radius:10px"]:has(span[style*="font-size:1.75rem"]) {
    padding: 0.85rem 1rem !important;
  }
  .pdp-grid span[style*="font-size:1.75rem"] { font-size: 1.4rem !important; }

  /* Variants: ensure buttons wrap and don't overflow */
  .variant-btn {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Add-to-cart row — full width buttons */
  .add-to-cart-form > div {
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
  }
  .add-to-cart-form button[type="submit"] {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  /* Buy Now / WhatsApp / Quote buttons — readable size */
  .pdp-grid .btn-gold,
  .pdp-grid a.btn,
  .pdp-grid button.btn {
    font-size: 0.85rem !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 10px !important;
  }

  /* Trust badges row */
  .pdp-grid [style*="grid-template-columns:1fr 1fr 1fr"] {
    gap: 0.4rem !important;
  }

  /* Payment icons row — no overflow, smaller chips */
  .pdp-grid [style*="border:1px solid #e2e8f0"][style*="border-radius:10px"] {
    padding: 0.75rem !important;
  }
  .pdp-grid [style*="border:1px solid #e2e8f0"][style*="min-width:60px"] {
    min-width: 50px !important;
    height: 32px !important;
    padding: 0.3rem 0.45rem !important;
  }

  /* Specs table */
  .pdp-grid [style*="border:1px solid #f1f5f9"][style*="border-radius:10px"][style*="overflow:hidden"] {
    margin-bottom: 1rem !important;
  }
  .pdp-grid [style*="border-bottom:1px solid #f8fafc"] {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }
  .pdp-grid [style*="border-bottom:1px solid #f8fafc"] span {
    word-break: break-word !important;
  }

  /* Description / Reviews sections — full width, padded */
  #reviews { padding: 0 !important; }
  #reviews h2 { font-size: 1rem !important; margin-bottom: 0.85rem !important; }

  /* Modal — fit screen */
  .modal-card {
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
  }

  /* Stock + urgency chips wrap */
  .pdp-grid [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:0.5rem"] {
    gap: 0.4rem !important;
  }

  /* Container padding */
  body > .container[style*="padding-top:1.5rem"] {
    padding-top: 0.85rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  .pdp-grid h1 { font-size: 1.05rem !important; }
  .pdp-grid span[style*="font-size:1.75rem"] { font-size: 1.25rem !important; }
  .thumb-item { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; }
  .countdown-timer { font-size: 0.85rem !important; }
  .pdp-grid .btn-gold { font-size: 0.82rem !important; padding: 0.6rem !important; }
}


/* ══════════════════════════════════════════════
   "WHY JANOSCI" + Trust Badges + Footer + Products listing — Mobile polish
   ══════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* "Why Janosci?" section — stack heading + trust badges */
  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Trust badge cards inside Why section: 2 columns, no overflow */
  .why-grid > div:last-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .why-grid > div:last-child > div {
    padding: 0.65rem 0.6rem !important;
    gap: 0.5rem !important;
    min-width: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .why-grid > div:last-child > div > i {
    flex-shrink: 0 !important;
    font-size: 0.85rem !important;
    width: 14px !important;
  }
  .why-grid > div:last-child > div > div {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }
  .why-grid > div:last-child > div > div > div:first-child {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  .why-grid > div:last-child > div > div > div:last-child {
    font-size: 0.6rem !important;
    line-height: 1.3 !important;
    color: #94a3b8 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .why-grid h2 { font-size: 1.15rem !important; line-height: 1.3 !important; margin-bottom: 0.5rem !important; }
  .why-grid p { font-size: 0.85rem !important; line-height: 1.6 !important; }
  .why-grid .btn { width: 100%; justify-content: center; }

  /* Footer — fix odd left/right whitespace and column layout */
  .footer { margin-top: 1rem !important; padding: 1.5rem 14px 1rem !important; border-radius: 18px 18px 0 0 !important; }
  .footer .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    text-align: left !important;
  }
  .footer-grid > div:first-child { grid-column: 1 / -1 !important; }
  .footer h4, .footer-col-title { font-size: 0.78rem !important; margin-bottom: 0.6rem !important; }
  .footer ul, .footer-links { padding-left: 0 !important; list-style: none; margin: 0; }
  .footer-links li { margin-bottom: 0.35rem !important; }

  /* Newsletter row — stack and full width */
  .footer-newsletter,
  .footer-grid > div:has(input[type="email"]) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .footer-newsletter form, .newsletter-form {
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .footer-newsletter input, .footer-newsletter button,
  .newsletter-form input, .newsletter-form button {
    width: 100% !important;
    min-width: 0 !important;
  }
  .footer .payment-icons,
  .footer [class*="payment"],
  .footer [class*="secure-payment"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.4rem !important;
    margin-top: 0.75rem !important;
  }
  .footer .payment-icons img,
  .footer [class*="payment"] img,
  .footer [class*="payment"] svg { max-height: 22px !important; flex-shrink: 0; }

  .footer-bottom, .footer-copyright {
    text-align: center !important;
    padding-top: 1rem !important;
    margin-top: 1rem !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 0.72rem !important;
  }

  .scroll-top-btn { right: 14px !important; bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; width: 40px !important; height: 40px !important; }

  /* Products listing — page-hero refinement */
  .page-hero {
    padding: 1rem 0 1.25rem !important;
    border-radius: 0 0 16px 16px !important;
    margin-bottom: 0 !important;
  }
  .page-hero-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
  }
  .page-hero-title { font-size: 1.15rem !important; line-height: 1.2 !important; }
  .page-hero-desc { font-size: 0.8rem !important; line-height: 1.5 !important; opacity: 0.85 !important; }
  .page-hero .btn,
  .page-hero button[onclick*="filter"],
  .page-hero a[href*="filter"] {
    width: 100% !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--jp-amber), var(--jp-amber-light)) !important;
    color: var(--jp-navy) !important;
    border: none !important;
    font-weight: 800 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
  }

  /* Search bar block above product grid */
  .products-search-card,
  .product-search,
  .products-toolbar {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 0.85rem !important;
    margin: 0.85rem 0 !important;
    box-shadow: 0 2px 8px rgba(10,37,64,0.04);
    border: 1px solid var(--jp-border, #e2e8f0) !important;
  }
  .products-search-card input[type="search"],
  .products-search-card input[type="text"] {
    width: 100% !important;
    padding: 0.7rem 0.9rem !important;
    border-radius: 10px !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* "Showing X of Y" + sort row */
  .products-count-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
    margin: 0.85rem 0 !important;
  }
  .products-sort-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }
  .products-sort-row select {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
    font-size: 0.85rem !important;
  }

  /* Mobile filter toggle button (the one above the grid) */
  button[onclick*="filter"], a[onclick*="filter"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Hide all dev OTP / debug strong tags accidentally printed in alerts */
.alert strong[data-dev-otp],
.alert .dev-otp,
.dev-otp { display: none !important; }


/* ══════════════════════════════════════════════
   FOOTER — Real markup classes (.site-footer, .footer-top, etc.)
   ══════════════════════════════════════════════ */
@media (max-width: 991px) {
  .site-footer {
    background: var(--jp-navy-dark, #051A30) !important;
    margin-top: 1rem !important;
    padding: 1.5rem 0 1rem !important;
    border-radius: 18px 18px 0 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .site-footer .container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }

  .footer-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    margin-bottom: 1.25rem !important;
  }
  .footer-brand { padding-bottom: 0.5rem; }
  .footer-logo img { height: 40px !important; width: auto !important; }
  .footer-about {
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,0.7) !important;
    margin: 0.75rem 0 !important;
  }
  .footer-social {
    display: flex !important;
    gap: 0.5rem !important;
    margin-top: 0.85rem !important;
  }
  .footer-social .social-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    text-decoration: none;
  }
  .footer-social .social-btn:hover { background: var(--jp-emerald, #10B981) !important; }

  .footer-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }
  .footer-col h6 {
    color: #fff !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    margin: 0 0 0.65rem !important;
    text-transform: none !important;
  }
  .footer-col ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer-col ul li {
    margin: 0 0 0.4rem !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  .footer-col ul li a {
    color: rgba(255,255,255,0.65) !important;
    text-decoration: none !important;
  }
  .footer-col ul li a:hover { color: var(--jp-emerald-light, #34D399) !important; }
  .footer-col .contact-info li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.78rem !important;
  }
  .footer-col .contact-info i {
    color: var(--jp-emerald, #10B981) !important;
    margin-top: 0.2rem !important;
    flex-shrink: 0;
  }

  /* Span the "Contact Info" column across both columns so it doesn't get squished */
  .footer-nav .footer-col:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  /* Newsletter box */
  .footer-middle {
    padding: 1.25rem 0 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    margin: 0.5rem 0 1rem !important;
  }
  .newsletter-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    align-items: stretch !important;
    text-align: left !important;
  }
  .newsletter-text h5 {
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    margin: 0 0 0.2rem !important;
    line-height: 1.3 !important;
  }
  .newsletter-text p {
    color: rgba(255,255,255,0.65) !important;
    font-size: 0.78rem !important;
    margin: 0 !important;
    line-height: 1.5 !important;
  }
  .newsletter-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .newsletter-form input {
    width: 100% !important;
    padding: 0.7rem 1rem !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
    font-size: 0.85rem !important;
    box-sizing: border-box !important;
  }
  .newsletter-form input::placeholder { color: rgba(255,255,255,0.45) !important; }
  .newsletter-form button {
    width: 100% !important;
    padding: 0.7rem 1rem !important;
    border-radius: 10px !important;
    border: none !important;
    background: linear-gradient(135deg, var(--jp-emerald, #10B981), var(--jp-emerald-light, #34D399)) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16,185,129,0.25) !important;
  }

  /* Payment methods row */
  .payment-methods {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
  }
  .payment-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }
  .payment-icons {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    flex-wrap: wrap !important;
    color: rgba(255,255,255,0.7) !important;
  }
  .payment-icons i { font-size: 1.6rem !important; }
  .payment-icons .upi-badge {
    background: rgba(16,185,129,0.15) !important;
    color: var(--jp-emerald-light, #34D399) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
  }

  /* Footer bottom */
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.6rem !important;
    text-align: center !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 0.72rem !important;
    color: rgba(255,255,255,0.5) !important;
  }
  .footer-bottom .copyright { font-size: 0.72rem !important; line-height: 1.5 !important; }
  .footer-bottom .copyright strong { color: rgba(255,255,255,0.85) !important; }
  .footer-badges {
    display: flex !important;
    gap: 0.85rem !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-badges .badge-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem !important;
    color: rgba(255,255,255,0.55) !important;
  }
  .footer-badges .badge-item i { color: var(--jp-emerald, #10B981) !important; }
}


/* ══════════════════════════════════════════════
   PRODUCTS LISTING — real classes (.search-bar, .products-header, .filter-toggle-btn)
   ══════════════════════════════════════════════ */
@media (max-width: 991px) {
  .filter-toggle-btn {
    width: 100% !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--jp-amber, #F59E0B), var(--jp-amber-light, #FBBF24)) !important;
    color: var(--jp-navy, #0A2540) !important;
    border: none !important;
    font-weight: 800 !important;
    padding: 0.7rem 1rem !important;
    border-radius: 10px !important;
    margin-top: 0.85rem !important;
  }

  .search-bar {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 0.85rem !important;
    margin-bottom: 1rem !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
  }
  .search-bar form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .search-bar .input-group {
    width: 100% !important;
    position: relative;
  }
  .search-bar .form-control,
  .search-bar input[type="text"],
  .search-bar input[type="search"] {
    width: 100% !important;
    padding: 0.7rem 0.9rem 0.7rem 2.4rem !important;
    border-radius: 10px !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
    font-size: 0.9rem !important;
    box-sizing: border-box !important;
  }
  .search-bar .input-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jp-muted, #64748B);
    font-size: 0.85rem;
    z-index: 2;
    pointer-events: none;
  }
  .search-bar .btn {
    width: 100% !important;
    justify-content: center !important;
    background: var(--jp-navy, #0A2540) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.7rem 1rem !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
  }

  .products-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    margin-bottom: 0.85rem !important;
  }
  .products-count {
    font-size: 0.85rem !important;
    color: var(--jp-muted, #64748B) !important;
    text-align: left !important;
  }
  .products-count strong { color: var(--jp-navy, #0A2540) !important; font-weight: 800 !important; }
  .sort-select {
    width: 100% !important;
    padding: 0.6rem 0.85rem !important;
    border-radius: 10px !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
    background: #fff !important;
    font-size: 0.85rem !important;
  }

  .active-filters { gap: 0.4rem !important; margin-bottom: 0.85rem !important; }
  .filter-tag { font-size: 0.72rem !important; padding: 0.25rem 0.65rem !important; }

  /* Mobile sidebar (filters) — show as overlay when open */
  .products-layout .sidebar.mobile-open {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #fff !important;
    z-index: 100 !important;
    overflow-y: auto !important;
    padding: 1rem !important;
    box-shadow: 0 8px 24px rgba(10,37,64,0.12) !important;
    border-radius: 18px 18px 0 0 !important;
  }
}


/* ════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE — Premium Mobile Redesign (v2)
   Sticky bottom action bar, swipeable gallery, clean sections
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* Container — no excess padding, no overflow */
  body > .container[style*="padding-top:1.5rem"],
  body main > .container[style*="padding-top:1.5rem"] {
    padding: 0.5rem 14px calc(180px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Breadcrumb — minimal, no truncation chaos */
  .pdp-grid + *, body > .container > .breadcrumb,
  body main > .container > .breadcrumb {
    font-size: 0.7rem !important;
    padding: 0.25rem 0 !important;
    margin-bottom: 0.5rem !important;
    color: var(--jp-muted, #64748B) !important;
  }
  .breadcrumb a { color: var(--jp-muted, #64748B) !important; opacity: 0.85; }
  .breadcrumb .sep { color: var(--jp-border, #cbd5e1) !important; margin: 0 0.3rem; }
  .breadcrumb .current {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: var(--jp-text, #0A2540) !important;
    font-weight: 600 !important;
    max-width: 100% !important;
  }

  /* PDP grid — pure flex column on mobile */
  .pdp-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    grid-template-columns: 1fr !important;
  }

  /* ── GALLERY: swipeable + dots indicator ── */
  .pdp-gallery-grid {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .pdp-gallery-grid .main-image-wrap {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 -14px !important;
    width: calc(100% + 28px) !important;
  }
  .pdp-gallery-grid .thumb-sidebar {
    order: 2 !important;
    margin: 0 !important;
    padding: 4px 0 8px !important;
  }

  .zoom-wrap {
    background: linear-gradient(180deg, #fff 0%, #F8FAFC 100%) !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--jp-border, #e2e8f0) !important;
    cursor: default !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden !important;
  }
  .zoom-wrap img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 18px !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Floating image counter pill */
  .zoom-wrap::after {
    content: attr(data-count);
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(10,37,64,0.78);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: 0.04em;
    pointer-events: none;
    backdrop-filter: blur(8px);
  }

  /* Floating wishlist heart over hero image */
  .pdp-grid .pdp-mobile-fav {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 5 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(10,37,64,0.06) !important;
    box-shadow: 0 4px 12px rgba(10,37,64,0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94A3B8 !important;
    font-size: 0.85rem !important;
  }

  /* Thumbs — horizontal scroll strip */
  .thumb-sidebar {
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100vw !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 14px 8px !important;
    margin: 0 -14px !important;
    gap: 8px !important;
    scrollbar-width: none !important;
    scroll-snap-type: x mandatory !important;
  }
  .thumb-sidebar::-webkit-scrollbar { display: none !important; }
  .thumb-item {
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 60px !important;
    padding: 4px !important;
    border-radius: 10px !important;
    background: #fff !important;
    border: 2px solid var(--jp-border, #e2e8f0) !important;
    box-shadow: 0 1px 3px rgba(10,37,64,0.04) !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }
  .thumb-item.active {
    border-color: var(--jp-emerald, #10B981) !important;
    box-shadow: 0 4px 10px rgba(16,185,129,0.2) !important;
  }
  .thumb-item img { width: 100% !important; height: 100% !important; object-fit: contain !important; }

  /* ── RIGHT COLUMN ── */
  .sticky-cart {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Category + brand chips */
  .sticky-cart > div:first-of-type[style*="display:flex"][style*="margin-bottom:0.5rem"] {
    margin-bottom: 0.4rem !important;
  }
  .sticky-cart > div:first-of-type[style*="display:flex"] span {
    font-size: 0.6rem !important;
    padding: 0.18rem 0.5rem !important;
  }

  /* Title — fits cleanly */
  .sticky-cart h1,
  .pdp-grid h1 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    margin: 0.25rem 0 0.6rem !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    color: var(--jp-text, #0A2540) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: -0.01em !important;
  }

  /* Rating row — wrap + smaller */
  .sticky-cart > div[style*="align-items:center"][style*="margin-bottom:1rem"] {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    font-size: 0.75rem !important;
  }

  /* Price card — premium emerald accent */
  .sticky-cart > div[style*="background:#f8fafc"][style*="border-radius:10px"]:has(span[style*="font-size:1.75rem"]) {
    background: linear-gradient(135deg, #fff 0%, #F8FAFC 100%) !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
    border-left: 3px solid var(--jp-emerald, #10B981) !important;
    border-radius: 12px !important;
    padding: 0.85rem 1rem !important;
    margin-bottom: 0.85rem !important;
  }
  .sticky-cart span[style*="font-size:1.75rem"] {
    font-size: 1.5rem !important;
    color: var(--jp-navy, #0A2540) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
  }
  .sticky-cart span[style*="background:#dcfce7"] {
    background: var(--jp-emerald, #10B981) !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 99px !important;
    letter-spacing: 0.04em;
  }

  /* Stock + urgency line */
  .sticky-cart > div[style*="margin-bottom:1rem"] span[style*="font-weight:700"] {
    font-size: 0.78rem !important;
  }

  /* Urgency chips */
  .sticky-cart > div[style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:0.5rem"] {
    gap: 0.4rem !important;
    margin-bottom: 0.85rem !important;
  }
  .sticky-cart > div[style*="display:flex"][style*="flex-wrap:wrap"] > div {
    font-size: 0.65rem !important;
    padding: 0.3rem 0.55rem !important;
    border-radius: 99px !important;
  }

  /* Variant buttons */
  .variant-btn {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
  }

  /* Add to cart row — full width buttons stack nicely */
  .add-to-cart-form > div {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }
  .add-to-cart-form > div > div:first-child {
    flex: 0 0 auto !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1.5px solid var(--jp-border, #e2e8f0) !important;
  }
  .add-to-cart-form > div > div:first-child button {
    width: 36px !important;
    height: 42px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
  }
  .add-to-cart-form > div > div:first-child input {
    width: 38px !important;
    height: 42px !important;
    font-size: 0.9rem !important;
  }
  .add-to-cart-form button[type="submit"] {
    flex: 1 !important;
    min-height: 42px !important;
    background: var(--jp-navy, #0A2540) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
  }

  /* Buy Now — premium amber */
  .pdp-grid .btn-gold[style*="width:100%"],
  .sticky-cart .btn-gold[href*="buy_now"] {
    background: linear-gradient(135deg, var(--jp-amber, #F59E0B), var(--jp-amber-light, #FBBF24)) !important;
    color: var(--jp-navy, #0A2540) !important;
    border-radius: 10px !important;
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 14px rgba(245,158,11,0.25) !important;
  }

  /* WhatsApp / Get Quote row */
  .sticky-cart > div[style*="grid-template-columns:1fr 1fr"][style*="gap:0.75rem"] {
    gap: 0.5rem !important;
  }
  .sticky-cart > div[style*="grid-template-columns:1fr 1fr"] a,
  .sticky-cart > div[style*="grid-template-columns:1fr 1fr"] button {
    font-size: 0.78rem !important;
    padding: 0.6rem !important;
    min-height: 40px !important;
  }

  /* Save / WhatsApp / Share row */
  .sticky-cart > div[style*="display:flex;gap:0.5rem;margin-bottom:1.5rem"] {
    margin-bottom: 1rem !important;
  }
  .sticky-cart > div[style*="display:flex;gap:0.5rem;margin-bottom:1.5rem"] button,
  .sticky-cart > div[style*="display:flex;gap:0.5rem;margin-bottom:1.5rem"] a {
    font-size: 0.75rem !important;
    padding: 0.55rem 0.5rem !important;
  }

  /* Trust badges row — emerald icons */
  .sticky-cart > div[style*="grid-template-columns:1fr 1fr 1fr"][style*="margin-bottom:1.5rem"] {
    gap: 0.4rem !important;
    margin-bottom: 1rem !important;
  }
  .sticky-cart > div[style*="grid-template-columns:1fr 1fr 1fr"] > div {
    background: linear-gradient(180deg, #fff, #F8FAFC) !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
    padding: 0.55rem 0.4rem !important;
    border-radius: 10px !important;
  }
  .sticky-cart > div[style*="grid-template-columns:1fr 1fr 1fr"] > div i {
    color: var(--jp-emerald, #10B981) !important;
    font-size: 0.95rem !important;
    margin-bottom: 0.3rem !important;
  }
  .sticky-cart > div[style*="grid-template-columns:1fr 1fr 1fr"] > div span {
    font-size: 0.6rem !important;
    line-height: 1.3 !important;
    display: block !important;
  }

  /* Secure checkout payment chips block */
  .sticky-cart > div[style*="border:1px solid #e2e8f0"][style*="border-radius:10px"][style*="margin-bottom:1.5rem"]:has([style*="Guaranteed Safe"]) {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
  }
  .sticky-cart [style*="Guaranteed Safe"] {
    font-size: 0.6rem !important;
    letter-spacing: 0.04em !important;
  }
  .sticky-cart [style*="Guaranteed Safe"] ~ * div[style*="min-width:60px"],
  .sticky-cart [style*="border:1px solid #e2e8f0"][style*="border-radius:10px"][style*="text-align:center"] div[style*="min-width:60px"] {
    min-width: 0 !important;
    height: 30px !important;
    padding: 0.25rem 0.4rem !important;
    border-radius: 6px !important;
    flex: 1 1 auto !important;
  }

  /* Specs table — cleaner */
  .sticky-cart > div[style*="border:1px solid #f1f5f9"][style*="border-radius:10px"][style*="overflow:hidden"]:has([style*="Specifications"]) {
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
  }
  .sticky-cart [style*="Specifications"] {
    background: var(--jp-navy, #0A2540) !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    padding: 0.65rem 1rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .sticky-cart [style*="border-bottom:1px solid #f8fafc"] {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    font-size: 0.78rem !important;
    padding: 0.5rem 0 !important;
  }
  .sticky-cart [style*="border-bottom:1px solid #f8fafc"] span {
    word-break: break-word !important;
  }

  /* Description card */
  body > .container > div[style*="margin-top:2rem"][style*="background:#fff"][style*="border-radius:12px"] {
    margin-top: 1.25rem !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
  }
  body > .container > div[style*="margin-top:2rem"][style*="background:#fff"] h2 {
    font-size: 0.95rem !important;
    margin-bottom: 0.6rem !important;
    color: var(--jp-text, #0A2540) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
  }
  body > .container > div[style*="margin-top:2rem"][style*="background:#fff"] div {
    font-size: 0.82rem !important;
    line-height: 1.65 !important;
  }

  /* Reviews block */
  #reviews { margin-top: 1.25rem !important; }
  #reviews h2 {
    font-size: 0.95rem !important;
    margin-bottom: 0.85rem !important;
    color: var(--jp-text, #0A2540) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
  }
  #reviews > div[style*="background:#fff"][style*="margin-bottom:0.75rem"] {
    padding: 0.85rem !important;
    border-radius: 12px !important;
    border-color: var(--jp-border, #e2e8f0) !important;
    margin-bottom: 0.6rem !important;
  }
  #reviews > div[style*="margin-top:1rem"] { /* "Write a Review" card */
    padding: 1rem !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(16,185,129,0.04), rgba(245,158,11,0.02)) !important;
  }
  #reviews textarea, #reviews input {
    font-size: 0.85rem !important;
    border-radius: 10px !important;
  }

  /* Related products */
  body > .container > div[style*="margin-top:2.5rem"]:has(.products-grid) {
    margin-top: 1.25rem !important;
  }
  body > .container > div[style*="margin-top:2.5rem"] h2 {
    font-size: 0.95rem !important;
    margin-bottom: 0.85rem !important;
    color: var(--jp-text, #0A2540) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
  }

  /* Modal — fits viewport */
  .modal .modal-card {
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
    border-radius: 16px !important;
  }
  .modal .modal-head { padding: 1rem !important; }
  .modal .modal-head h3 { font-size: 0.95rem !important; }
  .modal .modal-body { padding: 0 1rem 1rem !important; }
  .modal .modal-foot { padding: 0.75rem 1rem !important; gap: 0.5rem !important; }
  .modal .modal-foot button { flex: 1; padding: 0.6rem; font-size: 0.85rem; }
  .modal input, .modal textarea {
    font-size: 0.88rem !important;
    padding: 0.6rem 0.85rem !important;
    border-radius: 10px !important;
  }

  /* Countdown bar */
  .countdown-bar {
    padding: 0.5rem 0.75rem !important;
    border-radius: 10px !important;
    margin-bottom: 0.75rem !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
  }
  .countdown-bar > div:first-child { font-size: 0.7rem !important; }
  .countdown-timer { font-size: 0.85rem !important; gap: 0.25rem !important; }
  .countdown-unit { min-width: 24px !important; padding: 0.1rem 0.25rem !important; font-size: 0.75rem !important; }
}

/* ════════════════════════════════════════════════════════════
   STICKY MOBILE BUY BAR — bottom of screen above bottom-nav
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .pdp-mobile-buy-bar {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px) + 8px) !important;
    z-index: 999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: #fff !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(10,37,64,0.15), 0 2px 6px rgba(10,37,64,0.06) !important;
    padding: 8px !important;
    backdrop-filter: blur(8px);
  }
  .pdp-mobile-buy-bar .price-mini {
    flex: 0 0 auto;
    padding: 0 0.6rem 0 0.5rem;
    text-align: left;
    line-height: 1.1;
  }
  .pdp-mobile-buy-bar .price-mini small {
    display: block;
    font-size: 0.6rem;
    color: var(--jp-muted, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
  }
  .pdp-mobile-buy-bar .price-mini strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--jp-navy, #0A2540);
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .pdp-mobile-buy-bar .btn-bar {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 42px !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  .pdp-mobile-buy-bar .btn-bar.btn-cart {
    background: var(--jp-navy, #0A2540) !important;
    color: #fff !important;
  }
  .pdp-mobile-buy-bar .btn-bar.btn-buy {
    background: linear-gradient(135deg, var(--jp-amber, #F59E0B), var(--jp-amber-light, #FBBF24)) !important;
    color: var(--jp-navy, #0A2540) !important;
    box-shadow: 0 4px 12px rgba(245,158,11,0.3) !important;
  }
  .pdp-mobile-buy-bar .btn-bar i { font-size: 0.8rem !important; }

  /* Body padding so bar doesn't cover content */
  body.pdp-page {
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 992px) {
  .pdp-mobile-buy-bar { display: none !important; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE TOP BAR — App-style header (clickable, accessible)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Make header sticky and isolated above content */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    background: #fff !important;
    border-bottom: 1px solid var(--jp-border, #e2e8f0) !important;
    box-shadow: 0 1px 0 rgba(10,37,64,0.04) !important;
  }
  .site-header .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
  }
  .site-header .header-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    height: 56px !important;
    width: 100% !important;
  }

  /* Logo: tap-friendly, fixed left */
  .site-header .header-logo {
    flex: 0 0 auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    -webkit-tap-highlight-color: rgba(10,37,64,0.06);
  }
  .site-header .header-logo img {
    height: 30px !important;
    width: auto !important;
    display: block !important;
  }

  /* Hide desktop nav + desktop-only items */
  .site-header .header-nav,
  .site-header .header-search,
  .site-header .login-link,
  .site-header .register-btn,
  .site-header .user-info { display: none !important; }

  /* Action group */
  .site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
  }
  .site-header .action-item { position: relative; }

  /* All action buttons (search, wishlist, cart, hamburger) — fully clickable */
  .site-header .action-btn,
  .site-header .cart-btn,
  .site-header .user-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    color: var(--jp-navy, #0A2540) !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: rgba(16,185,129,0.18) !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
  }
  .site-header .action-btn i,
  .site-header .cart-btn i {
    pointer-events: none !important; /* Click goes to button, not icon */
    font-size: 1rem !important;
    line-height: 1 !important;
  }
  .site-header .action-btn:active,
  .site-header .cart-btn:active,
  .site-header .user-btn:active {
    background: rgba(16,185,129,0.12) !important;
    transform: scale(0.93) !important;
  }
  .site-header .action-btn:hover,
  .site-header .cart-btn:hover {
    background: rgba(10,37,64,0.06) !important;
    color: var(--jp-emerald-dark, #059669) !important;
  }

  /* Cart count badge */
  .site-header .cart-btn .cart-count {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: #EF4444 !important;
    color: #fff !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 99px !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #fff !important;
    box-shadow: 0 2px 4px rgba(239,68,68,0.3) !important;
    pointer-events: none !important;
  }

  /* User avatar button shrinks too */
  .site-header .user-btn {
    width: 38px !important;
    height: 38px !important;
  }
  .site-header .user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    background: linear-gradient(135deg, var(--jp-navy, #0A2540), var(--jp-navy-light, #1E3A5F)) !important;
    color: #fff !important;
  }

  /* Highlight the cart with a subtle background to look like the screenshot */
  .site-header .action-item:has(.cart-btn) {
    background: rgba(10,37,64,0.04);
    border-radius: 10px;
  }

  /* Hamburger gets emerald accent so it stands out */
  .site-header .mobile-menu-trigger {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.04)) !important;
    color: var(--jp-emerald-dark, #059669) !important;
  }
  .site-header .mobile-menu-trigger:active {
    background: var(--jp-emerald, #10B981) !important;
    color: #fff !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE SEARCH SHEET (slide-down)
   ════════════════════════════════════════════════════════════ */
.mobile-search-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 1100;
  box-shadow: 0 8px 24px rgba(10,37,64,0.12);
  border-bottom: 1px solid var(--jp-border, #e2e8f0);
  padding: 14px 14px 12px;
  display: none;
  animation: slideDownSheet 0.25s ease;
}
.mobile-search-sheet[hidden] { display: none !important; }
.mobile-search-sheet.open { display: block; }

@keyframes slideDownSheet {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-search-field {
  position: relative;
  display: flex;
  align-items: center;
  background: #F1F5F9;
  border-radius: 12px;
  padding: 0 0.5rem 0 2.4rem;
  margin-bottom: 0.6rem;
}
.mobile-search-field > i {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748B;
  font-size: 0.9rem;
  pointer-events: none;
}
.mobile-search-field input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  height: 44px;
  font-size: 0.95rem;
  color: var(--jp-text, #0A2540);
  width: 100%;
  min-width: 0;
}
.mobile-search-field input::placeholder { color: #94A3B8; }
.mobile-search-close {
  background: rgba(10,37,64,0.06);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #64748B;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.mobile-search-submit {
  width: 100%;
  height: 44px;
  background: var(--jp-navy, #0A2540);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(10,37,64,0.15);
}
.mobile-search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
  align-items: center;
}
.mobile-search-tags-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.2rem;
}
.mobile-search-tags a {
  background: #F1F5F9;
  color: var(--jp-navy, #0A2540);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  text-decoration: none;
  border: 1px solid var(--jp-border, #e2e8f0);
  transition: all 0.15s ease;
}
.mobile-search-tags a:active {
  background: var(--jp-emerald, #10B981);
  color: #fff;
  border-color: var(--jp-emerald, #10B981);
}

/* Backdrop when sheet is open */
.mobile-search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,37,64,0.4);
  z-index: 1095;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.mobile-search-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 992px) {
  .mobile-search-sheet { display: none !important; }
  .mobile-search-backdrop { display: none !important; }
}


/* ════════════════════════════════════════════════════════════
   CART PAGE — Premium mobile redesign
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Page hero */
  body main > .container > .page-hero,
  body > .page-hero { /* covers either nesting */
    padding: 1rem 0 1.25rem !important;
    margin-bottom: 0 !important;
    border-radius: 0 0 16px 16px !important;
  }
  .page-hero .breadcrumb {
    font-size: 0.7rem !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }
  .page-hero-title {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    margin: 0.4rem 0 0.3rem !important;
  }
  .page-hero-desc { font-size: 0.78rem !important; opacity: 0.85 !important; }

  /* Cart layout */
  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    margin-bottom: 1rem !important;
  }

  /* "X items in cart" + Clear row */
  .cart-layout > div > .flex.items-center.justify-between {
    margin-bottom: 0.85rem !important;
    padding: 0 0.25rem !important;
  }
  .cart-layout h3.text-lg { font-size: 0.95rem !important; }
  .cart-layout .text-xs.font-bold.text-danger { font-size: 0.7rem !important; }

  /* Cart items list — clean card */
  .cart-layout form .bg-white.rounded-xl {
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(10,37,64,0.04) !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
  }

  /* Each cart item — vertical layout */
  .cart-layout form .bg-white > div {
    padding: 0.85rem !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0.85rem !important;
  }
  .cart-layout form .bg-white > div > .w-20.h-20 {
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    padding: 4px !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
  }
  .cart-layout form .bg-white > div > .flex-1 {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  .cart-layout form .bg-white > div > .flex-1 a {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: var(--jp-navy, #0A2540) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
  }
  .cart-layout form .bg-white > div > .flex-1 .text-base {
    font-size: 0.95rem !important;
    color: var(--jp-navy, #0A2540) !important;
  }

  /* Quantity + Remove row */
  .cart-layout form .bg-white > div .flex.items-center.gap-3 {
    margin-top: 0.6rem !important;
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
  }
  .cart-layout form .bg-white > div .flex.items-center.bg-slate-50 {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
    flex-shrink: 0 !important;
    background: #F8FAFC !important;
  }
  .cart-layout form .bg-white .qty-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 1rem !important;
    color: var(--jp-navy, #0A2540) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }
  .cart-layout form .bg-white .qty-input {
    width: 36px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    color: var(--jp-text, #0A2540) !important;
    -moz-appearance: textfield !important;
  }
  .cart-layout form .bg-white .qty-input::-webkit-outer-spin-button,
  .cart-layout form .bg-white .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }

  /* Item total — full width on its own row */
  .cart-layout form .bg-white > div > .text-right {
    width: 100% !important;
    flex: 1 1 100% !important;
    text-align: right !important;
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px dashed var(--jp-border, #e2e8f0) !important;
  }
  .cart-layout form .bg-white > div > .text-right .text-lg {
    font-size: 1.05rem !important;
    color: var(--jp-emerald-dark, #059669) !important;
  }

  /* Update / Continue Shopping buttons */
  .cart-layout form > .flex.flex-wrap {
    margin-top: 0.85rem !important;
    gap: 0.5rem !important;
  }
  .cart-layout form > .flex.flex-wrap button,
  .cart-layout form > .flex.flex-wrap a {
    flex: 1 1 0 !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.7rem 0.85rem !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
    min-height: 44px !important;
  }

  /* Order Summary sidebar — full width on mobile */
  .cart-summary {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    padding: 1.1rem !important;
    border-radius: 14px !important;
    margin-top: 0.85rem !important;
    margin-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .cart-summary h3 { font-size: 1rem !important; margin-bottom: 0.85rem !important; }
  .cart-summary .text-sm { font-size: 0.82rem !important; }
  .cart-summary .text-2xl { font-size: 1.35rem !important; }
  .cart-summary .text-lg { font-size: 0.95rem !important; }
  .cart-summary .border-t {
    border-top: 1px solid var(--jp-border, #e2e8f0) !important;
    margin-top: 0.6rem !important;
    padding-top: 0.85rem !important;
  }

  /* Free shipping progress */
  .cart-summary [class*="bg-primary/5"] {
    padding: 0.7rem !important;
    border-radius: 10px !important;
  }

  /* Coupon row */
  .cart-summary .flex.gap-2 {
    gap: 0.4rem !important;
  }
  .cart-summary input[type="text"] {
    font-size: 0.82rem !important;
    padding: 0.6rem 0.85rem !important;
    border-radius: 10px !important;
  }
  .cart-summary .flex.gap-2 button {
    padding: 0 0.85rem !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
  }

  /* Checkout button */
  .cart-summary a[href*="checkout"],
  .cart-summary a[href*="login"] {
    padding: 0.85rem !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
    background: var(--jp-navy, #0A2540) !important;
    box-shadow: 0 6px 14px rgba(10,37,64,0.18) !important;
  }

  /* Trust mini icons */
  .cart-summary .flex.justify-center.gap-6 { gap: 1.25rem !important; margin-top: 1.25rem !important; }
  .cart-summary .flex.justify-center.gap-6 .w-10.h-10 { width: 36px !important; height: 36px !important; }

  /* Empty cart */
  .empty-state {
    padding: 2.5rem 1.25rem !important;
    border-radius: 16px !important;
    margin: 0.85rem 0 !important;
  }
  .empty-state i {
    font-size: 3.5rem !important;
    margin-bottom: 1rem !important;
  }
  .empty-state h2 { font-size: 1.05rem !important; margin-bottom: 0.4rem !important; }
  .empty-state p { font-size: 0.85rem !important; margin-bottom: 1.25rem !important; }
  .empty-state .btn { padding: 0.7rem 1.5rem !important; font-size: 0.85rem !important; }
}

/* ════════════════════════════════════════════════════════════
   CHECKOUT PAGE — Premium mobile redesign
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .checkout-container {
    margin: 0 !important;
    padding: 0.5rem 14px calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: 100vw !important;
  }

  /* Steps header — clean horizontal */
  .checkout-container .steps-header {
    margin: 1rem 0 1.5rem !important;
    padding: 0 0.5rem !important;
  }
  .checkout-container .steps-header::before {
    top: 14px !important;
    left: 30px !important;
    right: 30px !important;
  }
  .checkout-container .step-item {
    padding: 0 0.4rem !important;
    background: transparent !important;
    flex: 1 !important;
    text-align: center !important;
  }
  .checkout-container .step-dot {
    width: 28px !important;
    height: 28px !important;
    margin: 0 auto 0.3rem !important;
    font-size: 0.78rem !important;
    border-width: 2px !important;
  }
  .checkout-container .step-item.active .step-dot {
    background: var(--jp-emerald, #10B981) !important;
    border-color: var(--jp-emerald, #10B981) !important;
    box-shadow: 0 4px 10px rgba(16,185,129,0.3) !important;
  }
  .checkout-container .step-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
  }
  .checkout-container .step-item.active .step-label { color: var(--jp-navy, #0A2540) !important; }

  /* Form cards */
  .checkout-container .card {
    padding: 1rem !important;
    border-radius: 14px !important;
    border: 1px solid var(--jp-border, #e2e8f0) !important;
    box-shadow: 0 2px 8px rgba(10,37,64,0.04) !important;
    margin-bottom: 1rem !important;
  }
  .checkout-container .card h3 {
    font-size: 1rem !important;
    margin-bottom: 0.85rem !important;
    font-weight: 800 !important;
    color: var(--jp-navy, #0A2540) !important;
  }
  .checkout-container .card h4 { font-size: 0.95rem !important; margin-bottom: 0.65rem !important; font-weight: 800 !important; }

  /* Bootstrap row/col — convert to 1-column on mobile */
  .checkout-container .row.g-3,
  .checkout-container .row.g-4 {
    --bs-gutter-x: 0.75rem !important;
    --bs-gutter-y: 0.75rem !important;
    margin: 0 !important;
  }
  .checkout-container .row.g-3 > .col-md-6,
  .checkout-container .row.g-3 > .col-md-4,
  .checkout-container .row.g-3 > .col-12,
  .checkout-container .row.g-4 > .col-lg-7,
  .checkout-container .row.g-4 > .col-lg-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  /* Form fields */
  .checkout-container .form-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--jp-muted, #64748B) !important;
    margin-bottom: 0.3rem !important;
  }
  .checkout-container .form-control {
    font-size: 0.92rem !important;
    padding: 0.7rem 0.9rem !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--jp-border, #e2e8f0) !important;
    background: #F8FAFC !important;
  }
  .checkout-container .form-control:focus {
    border-color: var(--jp-emerald, #10B981) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.12) !important;
  }
  .checkout-container textarea.form-control { min-height: 70px !important; }

  /* Continue/Back/Review buttons — full width on mobile */
  .checkout-container .text-end,
  .checkout-container .d-flex.justify-content-between {
    margin-top: 1rem !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
  }
  .checkout-container .text-end .btn,
  .checkout-container .d-flex.justify-content-between .btn {
    width: 100% !important;
    padding: 0.85rem !important;
    font-size: 0.9rem !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
  }
  .checkout-container .btn-primary {
    background: var(--jp-navy, #0A2540) !important;
    border-color: var(--jp-navy, #0A2540) !important;
    box-shadow: 0 6px 14px rgba(10,37,64,0.18) !important;
  }
  .checkout-container .btn-outline-secondary {
    border: 1.5px solid var(--jp-border, #e2e8f0) !important;
    color: var(--jp-muted, #64748B) !important;
    background: #fff !important;
  }

  /* Payment radio cards */
  .checkout-container .payment-label {
    padding: 0.85rem 1rem !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--jp-border, #e2e8f0) !important;
    margin-bottom: 0.5rem !important;
    gap: 0.75rem !important;
    background: #fff !important;
  }
  .checkout-container .payment-label i {
    color: var(--jp-emerald, #10B981) !important;
    font-size: 1.1rem !important;
  }
  .checkout-container .payment-label .fw-bold {
    font-size: 0.88rem !important;
    color: var(--jp-navy, #0A2540) !important;
  }
  .checkout-container .payment-label .small {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
  }
  .checkout-container .payment-radio:checked + .payment-label {
    border-color: var(--jp-emerald, #10B981) !important;
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02)) !important;
    box-shadow: 0 4px 12px rgba(16,185,129,0.15) !important;
  }

  /* Review step — order summary */
  .checkout-container .cart-items-review > div {
    font-size: 0.85rem !important;
    padding: 0.4rem 0 !important;
    border-bottom: 1px dashed var(--jp-border, #e2e8f0) !important;
  }
  .checkout-container .cart-items-review > div:last-child { border-bottom: none !important; }
  .checkout-container hr { margin: 0.85rem 0 !important; opacity: 0.4 !important; }
  .checkout-container .h5.fw-bold {
    font-size: 1.1rem !important;
    color: var(--jp-emerald-dark, #059669) !important;
    margin-top: 0.5rem !important;
  }

  /* Confirm details card */
  .checkout-container .summary-card {
    background: linear-gradient(135deg, rgba(16,185,129,0.04), rgba(245,158,11,0.02)) !important;
    border: 1px solid rgba(16,185,129,0.15) !important;
    border-radius: 14px !important;
    padding: 1rem !important;
  }
  .checkout-container .summary-card h4 {
    font-size: 0.95rem !important;
    color: var(--jp-navy, #0A2540) !important;
  }
  .checkout-container .summary-card .small.text-muted {
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 700 !important;
  }
  .checkout-container .summary-card #review-name { font-size: 0.95rem !important; color: var(--jp-navy, #0A2540) !important; }
  .checkout-container .summary-card #review-address {
    font-size: 0.8rem !important;
    color: var(--jp-muted, #64748B) !important;
    line-height: 1.45 !important;
    margin-top: 0.2rem !important;
  }
  .checkout-container .summary-card #review-payment { font-size: 0.9rem !important; color: var(--jp-emerald-dark, #059669) !important; }

  .checkout-container .summary-card button[name="place_order"] {
    padding: 1rem !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--jp-emerald, #10B981), var(--jp-emerald-dark, #059669)) !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(16,185,129,0.3) !important;
  }
  .checkout-container .btn-link {
    font-size: 0.78rem !important;
    color: var(--jp-muted, #64748B) !important;
    text-decoration: none !important;
    padding: 0.5rem !important;
  }

  /* Flash messages */
  .checkout-container .flash-message {
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    margin-bottom: 0.85rem !important;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  .checkout-container .step-label { font-size: 0.62rem !important; }
  .cart-layout form .bg-white > div > .w-20.h-20 { width: 60px !important; height: 60px !important; }
  .cart-layout form .bg-white > div > .flex-1 a { font-size: 0.8rem !important; }
}