/* ===== SVG ICON SYSTEM ===== */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  flex-shrink: 0;
}
/* Use svg.icon for higher specificity — ensures SVG elements respect the
   CSS dimensions even when the <use> href doesn't resolve immediately.
   Without explicit width/height attributes on the SVG element, some browsers
   fall back to the default SVG size of 300×150. */
svg.icon { width: 1em; height: 1em; }
.icon-sm, svg.icon-sm { width: 16px; height: 16px; }
.icon-md, svg.icon-md { width: 20px; height: 20px; }
.icon-lg, svg.icon-lg { width: 24px; height: 24px; }
.icon-xl, svg.icon-xl { width: 32px; height: 32px; }
.icon-xxl, svg.icon-xxl { width: 48px; height: 48px; }

/* ===== SunTrade - Global Marketplace CSS ===== */
:root {
  --primary: #FF6B00;
  --primary-dark: #E05E00;
  --primary-light: #FF8533;
  --secondary: #1A1A2E;
  --accent: #16213E;
  --bg: #FAFAFA;
  --bg-white: #FFFFFF;
  --text: #1A1A2E;
  --text-light: #6B7280;
  --text-muted: #9CA3AF;
  --border: #E5E7EB;
  --success: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 40px -5px rgba(0,0,0,0.15);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --transition: all 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ===== HEADER / NAVBAR ===== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0.75) 0%,
    rgba(30, 41, 59, 0.7) 50%,
    rgba(51, 65, 85, 0.65) 100%
  );
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 6px 30px rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.navbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 104px;
}

/* Desktop-only Favorites heart icon in navbar (hidden on mobile) */
.nav-fav-desktop {
  display: flex;
  align-items: center;
  padding: 8px;
  color: rgba(255,255,255,0.85);
  transition: var(--transition);
  text-decoration: none;
}
.nav-fav-desktop:hover { color: #FF6B00; }
@media (max-width: 768px) {
  .nav-fav-desktop { display: none !important; }
}
.logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.5px;
}
.logo span { color: rgba(255,255,255,0.95); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  transition: var(--transition);
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
/* Ensure navbar text is always visible on non-home pages */
.navbar .logo span { color: rgba(255,255,255,0.95); }
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lang-wrapper {
  position: relative;
}
#lang-toggle {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}
#lang-toggle:hover { border-color: var(--primary); }
#lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  max-height: 400px;
  overflow-y: auto;
  display: none;
  z-index: 1001;
}
#lang-dropdown.show { display: block; }
.lang-option {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  font-size: 0.9rem;
  color: var(--text);
  transition: var(--transition);
}
.lang-option:hover { background: var(--bg); }
.lang-option.active { color: var(--primary); font-weight: 600; }
.cart-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;
  color: rgba(255,255,255,0.85);
  transition: var(--transition);
}
.cart-link:hover { color: var(--primary); }
#cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn {
  display: none;
  background: none;
  padding: 8px;
  color: rgba(255,255,255,0.85);
  transition: color 0.2s ease, transform 0.2s ease;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:active {
  transform: scale(0.92);
  opacity: 0.7;
}

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
  color: white;
  padding: 80px 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,107,0,0.15) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-content { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
.hero h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.hero p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}
.hero-cta {
  display: inline-block;
  background: var(--primary);
  color: white;
  padding: 14px 36px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: var(--transition);
}
.hero-cta:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,107,0,0.3);
}
.hero-search {
  display: flex;
  max-width: 600px;
  margin: 1.5rem auto 0;
  background: white;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  align-items: center;
  padding: 0.4rem 0.4rem 0.4rem 1.25rem;
  gap: 0.5rem;
}
.hero-search svg { flex-shrink: 0; color: var(--text-muted); }
.hero-search input {
  flex: 1;
  border: none;
  padding: 1rem 0.75rem;
  font-size: 1rem;
  outline: none;
  background: transparent;
}
.hero-search-btn {
  background: var(--primary);
  color: white;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.hero-search-btn svg { margin: 0; }
.hero-search-btn span { display: none; }
.hero-search-btn:hover { background: var(--primary-dark); }
.hero-search-results {
  max-width: 600px;
  margin: 0.5rem auto 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  max-height: 400px;
  overflow-y: auto;
}
.hero-search-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.hero-search-item:hover { background: var(--bg-light); }
.hero-search-item img { width: 50px; height: 50px; object-fit: cover; object-position: center; border-radius: 8px; }
@media (max-width: 600px) {
  .hero-search { border-radius: 50px; padding: 0.4rem 0.4rem 0.4rem 1rem; }
  .hero-search input { width: 100%; }
  .hero-search-btn { width: 44px; height: 44px; border-radius: 50%; }
}

/* Testimonials Header */
.testimonials-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.testimonials-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Reviews Carousel */
.reviews-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.reviews-carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.5rem 0;
  flex: 1;
}
.reviews-carousel::-webkit-scrollbar { display: none; }
.reviews-carousel > div {
  min-width: 320px;
  max-width: 320px;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.carousel-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
/* ===== Mobile Reviews Wheel Indicator Dots ===== */
.reviews-wheel-dots {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.reviews-wheel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.35s ease;
  cursor: pointer;
}
.reviews-wheel-dot.active {
  background: var(--primary);
  width: 24px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .carousel-btn { display: none; }

  /* Mobile: vertical lock-wheel style — one review per screen, stacked */
  .reviews-carousel-wrapper {
    height: 240px;
    overflow: hidden;
    border: 1px solid rgba(255, 107, 0, 0.12);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 50%, #FAFAFA 100%);
    position: relative;
    touch-action: pan-y;
    perspective: 1200px;
    box-shadow: inset 0 8px 16px -8px rgba(0,0,0,0.08), inset 0 -8px 16px -8px rgba(0,0,0,0.08);
  }
  .reviews-carousel {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    gap: 0;
    padding: 0;
    transition: none;
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    transform-style: preserve-3d;
  }
  .reviews-carousel > div {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    padding: 0.75rem 0.85rem !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    background: transparent !important;
    transform-style: preserve-3d;
  }
  .reviews-carousel > div:last-child {
    border-bottom: none;
  }
  /* Compact product link */
  .reviews-carousel > div a {
    display: flex !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.7rem;
    padding: 6px 10px !important;
  }
  .reviews-carousel > div a img {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
  }
  .reviews-carousel > div a .pd-arrow {
    display: inline-block !important;
  }
  /* Hide standalone review images on home page mobile (reviews.html keeps them) */
  #homepage-reviews > div > div:last-child > img {
    display: none !important;
  }
  /* Compact header */
  #homepage-reviews > div > div:nth-child(2) {
    margin-bottom: 0.5rem !important;
  }
  #homepage-reviews > div > div:nth-child(2) > div:first-child {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.95rem !important;
  }
  #homepage-reviews > div > div:nth-child(2) > div:nth-child(2) strong {
    font-size: 0.85rem;
  }
  #homepage-reviews > div > div:nth-child(2) > div:nth-child(2) div {
    font-size: 0.75rem !important;
  }
  /* Comment text — shorter, all visible */
  #homepage-reviews > div > p {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: italic;
  }
  .reviews-carousel > div span[style*="background:#D1FAE5"] {
    font-size: 0.6rem !important;
    padding: 1px 5px !important;
  }

  /* Show indicator dots on mobile */
  .reviews-wheel-dots {
    display: flex;
  }
}

/* ===== SECTION ===== */
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 1rem;
}
.section-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2.5rem;
  color: var(--text);
}

/* ===== CATEGORIES ===== */
.categories-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  overflow-x: auto;
}
.category-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 0.75rem;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
}
.category-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.category-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.2em;
}
.category-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

/* ===== PRODUCTS GRID ===== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
/* ===== PRODUCT CARD — image always centered, buttons always aligned ===== */
.product-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
/* Stretched-link pattern: an invisible <a> covers the whole card so the
   entire card is clickable. The Add-to-Cart button sits on top with a higher
   z-index and uses stopPropagation in JS, so tapping it only adds to cart
   while tapping anywhere else follows the product link. Fixes the mobile
   issue where the button swallowed the whole tap target. */
.product-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}
.product-card-btn { position: relative; z-index: 2; }
/* Square image frame, image content perfectly centered inside it */
.product-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  line-height: 0;
  margin: 0 auto;
  padding: 8px;
  box-sizing: border-box;
}
.product-card-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  display: block;
  margin: auto;
  flex-shrink: 0;
}
/* Body grows to fill card; button pinned to the bottom so all cards align */
.product-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.product-card-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em; /* reserve space for 2 lines so all cards start evenly */
  line-height: 1.3;
}
.product-card-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.product-card-btn {
  width: 100%;
  padding: 10px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition);
  margin-top: auto; /* push button to bottom of card */
  align-self: flex-end;
}
.product-card-btn:hover { background: var(--primary-dark); }
/* ===== Wishlist / Favorite Heart Button ===== */
.wishlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 0;
  color: #9CA3AF;
}
.wishlist-btn svg {
  width: 18px;
  height: 18px;
  transition: all 0.25s ease;
}
.wishlist-btn:hover {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(255,107,0,0.15);
  color: #EF4444;
  border-color: rgba(239,68,68,0.2);
}
.wishlist-btn:active {
  transform: scale(0.95);
}
.wishlist-btn.favorited {
  color: #EF4444;
  background: white;
  border-color: rgba(239,68,68,0.2);
}
.wishlist-btn.favorited svg {
  fill: #EF4444;
  stroke: #EF4444;
}
/* Product page favorite button */
.btn-fav {
  color: var(--text-muted, #9CA3AF);
  transition: all 0.25s ease;
}
.btn-fav:hover {
  color: #EF4444;
  border-color: rgba(239,68,68,0.3);
}
.btn-fav.favorited {
  color: #EF4444;
  border-color: rgba(239,68,68,0.3);
}
.btn-fav.favorited svg {
  fill: #EF4444;
  stroke: #EF4444;
}
.wishlist-btn.animate {
  animation: heartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes heartPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@media (max-width: 768px) {
  .wishlist-btn {
    width: 32px;
    height: 32px;
    top: 8px;
    right: 8px;
  }
  .wishlist-btn svg {
    width: 16px;
    height: 16px;
  }
}

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--danger);
  color: white;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ===== PRODUCT DETAIL ===== */
/* Desktop: 2-column grid — gallery + info side by side.
   product-desc spans full width below. On mobile @media collapses to single column. */
.product-detail {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  box-sizing: border-box;
  width: 100%;
  align-items: start;
}
.product-gallery {
  position: relative;
  min-width: 0;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  padding: 14px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  box-sizing: border-box;
  align-self: start;
}
.gallery-main {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-white);
  border: 2px solid #D1D5DB;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.gallery-main:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.08);
  border-color: #FF6B00;
  transform: translateY(-2px);
}
.gallery-main img {
  max-width: 100%;
  max-height: 500px;
  height: auto;
  width: auto;
  object-fit: contain;
  object-position: center center;
  cursor: zoom-in;
  display: block;
  margin: auto;
}
.gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
}
.gallery-thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--border);
  background: var(--bg-white);
  flex-shrink: 0;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.gallery-thumb.active, .gallery-thumb:hover {
  border-color: var(--primary);
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.product-info {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.product-info h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  word-wrap: break-word;
}
.product-price-detail {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1.5rem;
}
.product-stock {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.in-stock { background: #D1FAE5; color: #065F46; }
.out-of-stock { background: #FEE2E2; color: #991B1B; }
.product-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.product-qty label { font-weight: 600; }
.qty-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qty-control button {
  width: 40px;
  height: 40px;
  background: var(--bg);
  font-size: 1.2rem;
  color: var(--text);
  transition: var(--transition);
}
.qty-control button:hover { background: var(--border); }
.qty-control input {
  width: 50px;
  height: 40px;
  text-align: center;
  border: none;
  font-size: 1rem;
  font-weight: 600;
}
/* Product action buttons — side by side: [Add to Cart] [Buy Now].
   Both equal width, sharing one row. Share button moved to qty row. */
.product-actions {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.btn-add-cart {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 24px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  transition: var(--transition);
}
.btn-add-cart:hover { background: var(--primary-dark); }
.btn-buy-now {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 24px;
  background: var(--secondary);
  color: white;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  transition: var(--transition);
}
.btn-buy-now:hover { background: #2A2A4E; }
.btn-share {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-share:hover { border-color: var(--primary); color: var(--primary); }
.product-desc {
  grid-column: 1 / -1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto 1rem;
  padding: 2rem 2.5rem 1.5rem;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  justify-self: center;
  position: relative;
}
.product-desc h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--text);
  letter-spacing: -0.3px;
  position: relative;
}
.product-desc h3::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary), var(--primary-light));
  border-radius: 3px;
  margin: 10px auto 0;
}
.product-desc p, .product-desc-content p {
  color: var(--text-light);
  line-height: 1.85;
  margin-bottom: 0.85rem;
}
.product-desc-content {
  color: var(--text-light);
  line-height: 1.85;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 0.95rem;
}
.product-desc-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 12px auto;
  box-shadow: 0 3px 12px rgba(0,0,0,0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
}
.product-desc-content img:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}
/* ===== Product Description — Beautiful Colorful Layout ===== */

/* First text block — styled like a beautiful intro banner with gradient */
.product-desc-content > :first-child:not(img) {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text);
  padding: 2rem 2rem;
  background: linear-gradient(135deg, #FFF5ED 0%, #FFF0E6 30%, #FFE8D6 100%);
  border-radius: 12px;
  border-left: 5px solid var(--primary);
  margin-bottom: 2rem;
  box-shadow: 0 2px 12px rgba(255,107,0,0.08);
  position: relative;
  overflow: hidden;
}
.product-desc-content > :first-child:not(img)::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255,107,0,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.product-desc-content > :first-child:not(img)::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -20px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255,107,0,0.05) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.product-desc-content > :first-child:not(img) strong {
  color: var(--primary-dark);
}
.product-desc-content > :first-child:not(img) em {
  color: var(--primary);
  font-style: italic;
}

/* Alternating image floats — first right, then left, repeating */
.product-desc-content img.desc-img-float-left {
  float: left;
  margin: 8px 28px 16px 0 !important;
  max-width: 48%;
  display: block !important;
  shape-outside: margin-box;
}
.product-desc-content img.desc-img-float-right {
  float: right;
  margin: 8px 0 16px 28px !important;
  max-width: 48%;
  display: block !important;
  shape-outside: margin-box;
}
/* Clearfix so the description container properly contains floated images */
.product-desc-content::after {
  content: '';
  display: table;
  clear: both;
}
.product-desc-content ul, .product-desc-content ol {
  padding-left: 1.5rem;
  margin: 14px 0;
}
.product-desc-content li {
  margin-bottom: 8px;
  color: var(--text-light);
  line-height: 1.65;
  padding-left: 4px;
}
.product-desc-content li::marker {
  color: var(--primary);
  font-size: 1.1em;
}
/* Feature highlight: li > strong first child = feature name */
.product-desc-content li > strong:first-child {
  color: var(--text);
}
.product-desc-content h1, .product-desc-content h2, .product-desc-content h3, .product-desc-content h4 {
  color: var(--text);
  margin: 24px 0 10px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3;
}
.product-desc-content h1 {
  font-size: 1.5rem;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--primary);
}
.product-desc-content h2 {
  font-size: 1.3rem;
  padding: 8px 0 8px 16px;
  border-left: 4px solid var(--primary);
  background: linear-gradient(90deg, rgba(255,107,0,0.09) 0%, transparent 100%);
  border-radius: 0 8px 8px 0;
  margin-top: 28px;
}
.product-desc-content h3 {
  font-size: 1.15rem;
  color: var(--primary-dark);
}
.product-desc-content h4 { font-size: 1rem; }
.product-desc-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.product-desc-content table td, .product-desc-content table th {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
  font-size: 0.9rem;
}
.product-desc-content table th {
  background: var(--bg);
  font-weight: 600;
  color: var(--text);
}
.product-desc-content table tr:nth-child(even) td {
  background: #FAFAFA;
}
.product-desc-content blockquote {
  border-left: 4px solid var(--primary);
  margin: 20px 0;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(255,107,0,0.06) 0%, rgba(255,107,0,0.02) 100%);
  border-radius: 0 12px 12px 0;
  color: var(--text);
  font-style: italic;
  line-height: 1.7;
  font-size: 1.02rem;
  position: relative;
}
.product-desc-content blockquote::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  left: 14px;
  font-size: 2.5rem;
  color: var(--primary);
  opacity: 0.25;
  font-style: normal;
  line-height: 1;
}
.product-desc-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.product-desc-content a:hover {
  color: var(--primary-dark);
}
.product-desc-content hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
  margin: 28px 0;
  opacity: 0.4;
}
/* Callout / highlight box: wrap content in <div class="desc-callout"> */
.desc-callout {
  background: linear-gradient(135deg, #FFF5ED 0%, #FFF0E6 50%, #FFE8D6 100%);
  border: 1px solid rgba(255,107,0,0.15);
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 0.95rem;
  line-height: 1.7;
}
.desc-callout strong { color: var(--primary-dark); }
@media (max-width: 768px) {
  .desc-callout { padding: 12px 14px; margin: 12px 0; font-size: 0.88rem; }
}

/* ===== CART PAGE ===== */
.cart-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.cart-page h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.cart-item-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.cart-item-info { flex: 1; }
.cart-item-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.cart-item-price {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: inline-flex;
}
.cart-item-qty button {
  width: 32px;
  height: 32px;
  background: var(--bg);
  font-size: 1rem;
  color: var(--text);
}
.cart-item-qty span {
  width: 36px;
  text-align: center;
  font-weight: 600;
}
.cart-item-right {
  text-align: right;
  flex-shrink: 0;
}
.cart-item-subtotal {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.cart-remove-btn {
  background: none;
  color: var(--text-muted);
  transition: var(--transition);
  padding: 4px;
}
.cart-remove-btn:hover { color: var(--danger); }
.cart-summary {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  margin-top: 1.5rem;
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.cart-summary-total {
  font-size: 1.3rem;
  font-weight: 700;
  padding-top: 1rem;
  border-top: 2px solid var(--border);
}
.btn-checkout {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  transition: var(--transition);
  margin-top: 1.5rem;
}
.btn-checkout:hover { background: var(--primary-dark); }
.cart-empty {
  text-align: center;
  padding: 4rem 1rem;
}
.cart-empty-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; }
.cart-empty h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.cart-empty p { color: var(--text-light); margin-bottom: 2rem; }

/* ===== CHECKOUT ===== */
.checkout-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.checkout-page h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.form-group {
  margin-bottom: 1.25rem;
}
.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.form-group input, .form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: var(--transition);
  background: var(--bg-white);
}
.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.btn-pay {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius);
  font-size: 1.1rem;
  font-weight: 600;
  transition: var(--transition);
  margin-top: 1.5rem;
}
.btn-pay:hover { background: var(--primary-dark); }
.btn-pay:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
}
.payment-success {
  text-align: center;
  padding: 4rem 1rem;
}
.payment-success-icon { font-size: 5rem; margin-bottom: 1rem; }

/* ===== FOOTER ===== */
.footer {
  background: var(--secondary);
  color: white;
  padding: 60px 1rem 30px;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
}
.footer-brand .logo { color: white; margin-bottom: 1rem; }
.footer-brand p { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.footer-col h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  transition: var(--transition);
}
.footer-col a:hover { color: var(--primary); }
.footer-bottom {
  max-width: 1280px;
  margin: 2rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
}

/* ===== WHATSAPP BUTTON ===== */
.whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(37,211,102,0.4);
  z-index: 1002;
  transition: var(--transition);
}
.whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37,211,102,0.5);
}
.whatsapp-btn svg { fill: white; width: 30px; height: 30px; }

/* ===== ORDERS PAGE — beautified mobile layout ===== */
.orders-wrap { display: flex; flex-direction: column; gap: 0.85rem; }
.order-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.order-card:hover { box-shadow: var(--shadow); }
.order-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-bottom: 0.7rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px dashed var(--border);
}
.order-card-head .order-meta {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.order-card-head .order-id {
  font-size: 0.72rem; color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.2px;
}
.order-card-head .order-date { font-size: 0.72rem; color: var(--text-muted); }
.order-card-head .order-total {
  font-weight: 800; color: var(--primary);
  font-size: 1.15rem; margin-left: auto;
}
.order-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.75rem; align-items: center;
  padding: 0.55rem 0;
}
.order-item + .order-item { border-top: 1px solid var(--border); }
.order-item-img {
  width: 64px; height: 64px; border-radius: 10px;
  object-fit: cover; object-position: center;
  background: var(--bg-light);
  border: 1px solid var(--border);
}
.order-item-info { min-width: 0; }
.order-item-name {
  font-weight: 600; font-size: 0.85rem; line-height: 1.3;
  color: var(--text); margin: 0 0 0.2rem;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.order-item-meta { font-size: 0.72rem; color: var(--text-muted); }
.order-item-price {
  font-weight: 700; color: var(--text); font-size: 0.9rem;
  white-space: nowrap;
}
/* Vertical stepper (compact for mobile) */
.order-stepper {
  margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  position: relative;
}
.order-stepper-track {
  position: absolute; left: 11px; top: calc(0.85rem + 24px);
  bottom: 0.5rem; width: 2px;
  background: var(--border); border-radius: 2px;
}
.order-stepper-fill {
  position: absolute; left: 11px; top: calc(0.85rem + 24px);
  width: 2px; background: var(--primary);
  border-radius: 2px;
  transition: height 0.5s ease;
}
.order-step {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.3rem 0; position: relative;
}
.order-step-dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.7rem; font-weight: 700;
  background: var(--bg-white); color: var(--text-muted);
  border: 2px solid var(--border); z-index: 1;
  transition: all 0.25s ease;
}
.order-step.done .order-step-dot,
.order-step.current .order-step-dot {
  background: var(--primary); border-color: var(--primary); color: white;
}
.order-step.current .order-step-dot {
  box-shadow: 0 0 0 4px rgba(255,107,53,0.18);
  animation: order-step-pulse 1.8s ease-in-out infinite;
}
@keyframes order-step-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,107,53,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(255,107,53,0.05); }
}
.order-step-label {
  font-size: 0.8rem; color: var(--text-muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.order-step.done .order-step-label { color: var(--text); }
.order-step.current .order-step-label {
  color: var(--primary); font-weight: 700;
}
.order-shipping {
  margin-top: 0.85rem; padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem; color: var(--text-muted);
  display: flex; align-items: flex-start; gap: 0.5rem;
  line-height: 1.4;
}
.order-shipping strong { color: var(--text); }
.order-shipping svg { color: var(--primary); flex-shrink: 0; margin-top: 2px; }

/* Desktop: keep horizontal stepper */
@media (min-width: 769px) {
  .order-card { padding: 1.25rem 1.5rem; }
  .order-item { grid-template-columns: 72px 1fr auto; }
  .order-item-img { width: 72px; height: 72px; }
  .order-stepper {
    display: flex; align-items: center; gap: 0.5rem;
    flex-wrap: wrap; padding-top: 1rem;
  }
  .order-stepper-track, .order-stepper-fill { display: none; }
  .order-step { padding: 0; gap: 0.5rem; }
  .order-step::after {
    content: ''; display: block;
    width: 28px; height: 2px; margin: 0 0.1rem;
    background: var(--border); border-radius: 2px;
  }
  .order-step:last-child::after { display: none; }
  .order-step.done::after { background: var(--primary); }
  .order-step-label { white-space: normal; }
}

/* ===== REVIEW CARDS ===== */
.review-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: box-shadow 0.2s;
}
.review-card:hover {
  box-shadow: var(--shadow-sm);
}
.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}
.review-card-stars { color: var(--primary); font-size: 1.1rem; flex-shrink: 0; }
.review-verified,
.review-verified-badge {
  background: #D1FAE5; color: #065F46;
  padding: 2px 8px; border-radius: 50px;
  font-size: 0.75rem; font-weight: 600; margin-left: 8px;
  white-space: nowrap;
  display: inline-block;
}
.review-card-comment {
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.review-card-images {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.review-card-images img {
  width: 80px; height: 80px; object-fit: cover;
  object-position: center;
  border-radius: 8px; cursor: zoom-in;
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
  pointer-events: auto !important;
  z-index: 1;
  position: relative;
}
.review-card-images img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.review-card-date { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.75rem; }

/* Mobile-responsive review cards */
@media (max-width: 768px) {
  .review-card {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }
  .review-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .review-card-stars {
    font-size: 0.95rem;
  }
  .review-card-comment {
    font-size: 0.85rem;
    line-height: 1.6;
  }
  .review-card-images img {
    width: 60px;
    height: 60px;
  }
  .review-verified,
  .review-verified-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
  }
  .review-card-date {
    font-size: 0.7rem;
  }
  /* Rating summary on mobile */
  #rating-summary {
    font-size: 0.9rem;
  }
  #rating-summary div:first-child {
    font-size: 2rem !important;
  }
  #rating-summary div:nth-child(2) {
    font-size: 1.5rem !important;
  }
}

/* ===== Reviews Page — Constrain card width & prevent overflow ===== */
#reviews-grid {
  max-width: 100%;
  width: 100%;
}
#reviews-grid > div {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
}
@media (max-width: 480px) {
  .catalog-page { padding: 1rem 0.5rem; }
  #reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  #reviews-grid > div {
    padding: 1rem !important;
  }
}

/* ===== Review Image Lightbox ===== */
.review-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: zoom-out;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.review-lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: default;
}
.review-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: rgba(255,255,255,0.15);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.review-lightbox-close:hover { background: rgba(255,255,255,0.3); }

@media (max-width: 480px) {
  .review-card {
    padding: 0.85rem;
    border-radius: 10px;
  }
  .review-card-comment {
    font-size: 0.82rem;
  }
  .review-card-header strong {
    font-size: 0.85rem;
  }
  .review-card-images img {
    width: 50px;
    height: 50px;
  }
}

/* ===== NOTIFICATION ===== */
.notification {
  position: fixed;
  bottom: 100px;
  right: 24px;
  background: var(--secondary);
  color: white;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  transform: translateX(120%);
  transition: transform 0.3s ease;
  z-index: 2000;
}
.notification.show { transform: translateX(0); }

/* ===== SEARCH BAR ===== */
.search-bar {
  max-width: 500px;
  margin: 0 auto 2rem;
  position: relative;
}
.search-bar input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  border: 2px solid var(--border);
  border-radius: 50px;
  font-size: 1rem;
  transition: var(--transition);
  background: var(--bg-white);
}
.search-bar input:focus {
  outline: none;
  border-color: var(--primary);
}
.search-bar svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

/* ===== FILTER BAR ===== */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.filter-bar select {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: var(--bg-white);
  cursor: pointer;
}

/* ===== ADMIN PANEL ===== */
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.admin-sidebar {
  background: var(--secondary);
  color: white;
  padding: 2rem 0;
}
.admin-sidebar .logo {
  padding: 0 1.5rem;
  margin-bottom: 2rem;
  color: white;
}
.admin-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 12px 1.5rem;
  color: rgba(255,255,255,0.7);
  transition: var(--transition);
}
.admin-nav a:hover, .admin-nav a.active {
  background: rgba(255,255,255,0.1);
  color: white;
}
.admin-main {
  padding: 2rem;
  background: var(--bg);
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.admin-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.stat-card .stat-icon { font-size: 2rem; margin-bottom: 0.5rem; color: var(--primary); }
.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
}
.stat-card .stat-label {
  font-size: 0.9rem;
  color: var(--text-light);
}
.admin-table {
  width: 100%;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-table th, .admin-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.admin-table th {
  background: var(--bg);
  font-weight: 600;
  color: var(--text-light);
}
.admin-table tr:hover td { background: var(--bg); }
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
}
.status-pending { background: #FEF3C7; color: #92400E; }
.status-paid { background: #D1FAE5; color: #065F46; }
.status-shipped { background: #DBEAFE; color: #1E40AF; }
.status-delivered { background: #E0E7FF; color: #3730A3; }
.btn-sm {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #DC2626; }
.btn-outline {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

/* ===== ADMIN MODAL ===== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}
.modal {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
}
.modal h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* ===== LOGIN PAGE ===== */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}
.login-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem;
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.login-card .logo { font-size: 2rem; margin-bottom: 0.5rem; }
.login-card p { color: var(--text-light); margin-bottom: 2rem; }

/* ===== LOADING ===== */
.loading-spinner {
  display: flex;
  justify-content: center;
  padding: 3rem;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== VIEW ALL BTN ===== */
.view-all-btn {
  display: block;
  text-align: center;
  margin-top: 1rem;
}
.view-all-btn a {
  display: inline-block;
  padding: 12px 32px;
  background: var(--bg-white);
  border: 2px solid var(--primary);
  color: var(--primary);
  border-radius: 50px;
  font-weight: 600;
  transition: var(--transition);
}
.view-all-btn a:hover {
  background: var(--primary);
  color: white;
}

/* ===== CATALOG PAGE ===== */
.catalog-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.catalog-page h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
}

/* ===== Touch-Optimized Interactions (Emil Koval) ===== */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices — use :active instead */
  .product-card:hover { transform: none; box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
  .product-card:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
  .category-card:hover { transform: none; box-shadow: none; }
  .category-card:active { transform: scale(0.96); }
  .btn-add-cart:hover, .btn-buy-now:hover { transform: none; }
  .btn-add-cart:active, .btn-buy-now:active { transform: scale(0.96); opacity: 0.9; }
  .btn-checkout:hover { transform: none; }
  .btn-checkout:active { transform: scale(0.97); }
  .view-all-btn a:hover { transform: none; }
  .view-all-btn a:active { transform: scale(0.97); }
  /* Disable tilt effects on touch devices */
  .product-card, .category-card {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ===== Impeccable: Consistent Section Rhythm ===== */
.section {
  position: relative;
}
.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0.15;
  border-radius: 2px;
}

/* ===== Taste Scale: Premium Loading States ===== */
.loading-spinner {
  min-height: 200px;
}
.spinner {
  border-width: 3px;
  border-style: solid;
  border-color: var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ===== Impeccable: Selection Color ===== */
::selection {
  background: rgba(255, 107, 0, 0.15);
  color: var(--text);
}

/* ===== Smooth Focus States (Accessibility) ===== */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===== Impeccable: Typography Refinements ===== */
h1, h2, h3, h4 {
  letter-spacing: -0.02em;
}

/* ===== Mobile Safe Area ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .footer-bottom {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
  .whatsapp-btn {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 768px) {
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
  .hero { padding: 40px 1rem; min-height: auto; }

  .navbar-inner { height: 76px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--bg-white);
    flex-direction: column;
    padding: 0.5rem 1rem 1rem;
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--border);
    z-index: 1000;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.show { display: flex; }
  .nav-links a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
    color: var(--text) !important;
  }
  .nav-links a:hover, .nav-links a.active {
    color: var(--primary) !important;
  }
  .nav-links a:active {
    color: var(--primary);
    padding-left: 0.5rem;
  }
  .nav-links li:last-child a { border-bottom: none; }
  .mobile-menu-btn { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; }
  .nav-right { gap: 0.4rem; margin-left: auto; padding-right: 0.25rem; flex-shrink: 0; }
  /* Lang toggle moved inside hamburger via JS */
  .nav-links .lang-wrapper { padding: 0.85rem 0; border-bottom: 1px solid var(--border); list-style: none; }
  .nav-links .lang-wrapper #lang-toggle { width: 100%; justify-content: center; font-size: 0.95rem; padding: 10px; border-radius: var(--radius-sm); background: var(--bg) !important; border-color: var(--border) !important; color: var(--text) !important; }
  /* When lang-wrapper is inside nav-links, position dropdown as fixed to avoid overflow clipping */
  .nav-links .lang-wrapper #lang-dropdown { position: fixed; top: auto; left: 1rem; right: 1rem; max-height: 60vh; }

  .product-detail {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 1rem 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }
  /* Mobile: gallery scrolls naturally with the page (no sticky).
     The image stays at the top and the user scrolls down to see
     description and reviews without any freezing. */
  .product-gallery {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    max-width: none;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .gallery-main {
    margin-bottom: 0.4rem !important;
    position: relative;
    aspect-ratio: auto;
    max-height: none;
    min-height: 200px;
  }
  .gallery-main img { max-height: none; width: 100%; height: auto; object-fit: contain; }
  .gallery-thumbs { gap: 0.4rem; margin-bottom: 0.75rem !important; padding-bottom: 0.25rem; }
  .gallery-thumb { width: 56px; height: 56px; }
  .product-info { width: 100%; min-width: 0; padding: 0 !important; }
  #product-detail {
    padding: 0.5rem 1rem 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    display: block !important;
    gap: 0 !important;
  }
  #reviews-section { padding: 0 1rem 2rem; }
  .review-card { padding: 1rem; }
  .review-card-header strong { font-size: 0.85rem; }
  .section-title { font-size: 1.15rem !important; margin-bottom: 0.75rem !important; }

  .product-info h1 { font-size: 1.25rem; margin-bottom: 0.5rem; }
  .product-price-detail { font-size: 1.6rem; margin-bottom: 0.6rem; }
  .product-stock { font-size: 0.8rem; margin-bottom: 0.75rem; }
  .product-qty { margin-bottom: 0.75rem; }
  .product-qty label { font-size: 0.85rem; }
  .qty-control button { width: 36px; height: 36px; font-size: 1rem; }
  .qty-control input { width: 48px; height: 36px; font-size: 0.9rem; }
  .product-actions { flex-direction: column; gap: 0.5rem; margin-bottom: 0.85rem; }
  .btn-add-cart, .btn-buy-now { padding: 10px 14px; font-size: 0.85rem; flex: 1 1 auto; width: 100%; }
  .btn-share { width: 36px; height: 36px; }
  .product-desc {
    position: relative;
    margin-top: 1rem;
    padding: 1rem 0.85rem 0.75rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--bg-white);
    grid-column: auto;
    border-radius: var(--radius);
  }
  .product-desc h3 { font-size: 1rem; margin-bottom: 0.85rem; }
  .product-desc h3::after { margin: 8px auto 0; width: 40px; height: 2px; }
  .product-desc p { font-size: 0.85rem; line-height: 1.65; }
  .product-desc-content { font-size: 0.88rem; line-height: 1.65; }
  .product-desc-content img { margin: 10px auto; border-radius: 8px; }
  .product-desc-content img:hover { transform: none; }
  .product-desc-content > :first-child:not(img) {
    font-size: 0.92rem;
    line-height: 1.7;
    padding: 1.25rem 1rem;
    margin-bottom: 1.25rem;
    border-left-width: 4px;
  }
  .product-desc-content img.desc-img-float-left,
  .product-desc-content img.desc-img-float-right {
    float: none !important;
    margin: 10px auto !important;
    max-width: 100% !important;
  }
  .product-desc-content h1 { font-size: 1.25rem; }
  .product-desc-content h2 { font-size: 1.1rem; }
  .product-desc-content h3 { font-size: 1rem; }
  .product-desc-content h4 { font-size: 0.9rem; }
  .product-desc-content table td, 
  .product-desc-content table th { padding: 8px 10px; font-size: 0.82rem; }
  .product-desc-content blockquote { padding: 10px 14px; margin: 12px 0; font-size: 0.88rem; }
  #reviews-section .section-title { font-size: 1.3rem !important; }

  .cart-item { flex-direction: column; text-align: center; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }

  .form-row { grid-template-columns: 1fr; }
  /* Compact lang tabs on mobile */
  .modal .lang-tab {
    font-size: 0.7rem;
    padding: 4px 8px;
  }
  .modal .translate-btn {
    font-size: 0.65rem;
    padding: 4px 8px;
  }
  .modal #lang-fields .desc-editor {
    min-height: 80px;
    font-size: 0.85rem;
  }
  .modal .form-group {
    margin-bottom: 0.75rem;
  }
  .modal .form-group label {
    font-size: 0.8rem;
  }
  .modal .form-group input,
  .modal .form-group select {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
  .modal .form-row { gap: 0.5rem; }
  #image-upload-zone { padding: 1rem !important; }

  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    bottom: 0;
    width: 260px;
    z-index: 1001;
    transition: var(--transition);
  }
  .admin-sidebar.open { left: 0; }
  .admin-sidebar.open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: -1;
  }
  .admin-stats { grid-template-columns: 1fr; }
  .admin-table {
    font-size: 0.8rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .admin-table th, .admin-table td { padding: 8px 10px; }
  .admin-main { padding: 1rem; }
  .admin-header { flex-wrap: wrap; gap: 0.75rem; }
  .admin-header h1 { font-size: 1.2rem; }
  .admin-nav a { font-size: 0.85rem; padding: 10px 1rem; }
  /* Modal mobile fullwidth */
  .modal {
    max-width: 100%;
    padding: 1.25rem;
    margin: 0.5rem;
    max-height: 85vh;
  }
  .modal h2 { font-size: 1.1rem; margin-bottom: 1rem; }
  .modal-actions { flex-direction: column; gap: 0.5rem; }
  .modal-actions button { width: 100%; text-align: center; padding: 12px; }
  /* Reviews container mobile */
  #reviews-container { grid-template-columns: 1fr !important; }
  /* Recent orders */
  #section-dashboard h3 { font-size: 1rem; }

  .section { padding: 16px 1rem; }
  .section-title { font-size: 1.1rem; margin-bottom: 1rem; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .product-card-img { aspect-ratio: 1 / 1; }

  /* Touch feedback on product cards — Emil Koval: micro-interaction */
  .product-card { -webkit-tap-highlight-color: transparent; }
  .product-card:active { transform: scale(0.97); }
  .product-card-btn:active { transform: scale(0.96); opacity: 0.9; }

  .categories-grid { gap: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .categories-grid::-webkit-scrollbar { display: none; }
  .category-card { padding: 0.85rem 0.5rem; flex: 0 0 100px; min-width: 100px; max-width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 85px; overflow: visible; }
  .category-name { font-size: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  .reviews-carousel > div { min-width: 260px; max-width: 260px; }

  /* Testimonials: stack title + button on mobile */
  .testimonials-header {
    flex-direction: column !important;
    text-align: center;
    gap: 0.75rem !important;
  }
  .testimonials-header .section-title {
    font-size: 1.3rem !important;
  }
  .testimonials-actions {
    justify-content: center;
  }

  .hero-search { margin-top: 0.75rem; max-width: 280px; }
  .hero-search input { padding: 0.5rem 0.4rem; font-size: 0.8rem; }
  .hero-search-btn { width: 32px; height: 32px; }
  .hero-search svg { width: 16px; height: 16px; }

  .view-all-btn { margin-top: 0.5rem; }
  .view-all-btn a { font-size: 0.85rem; padding: 10px 24px; }

  .catalog-page { padding: 1rem 0.75rem; }
  .catalog-page h1 { font-size: 1.4rem; margin-bottom: 1rem; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .filter-bar { flex-direction: column; align-items: stretch; gap: 0.5rem; margin-bottom: 1rem; }
  .filter-bar select { width: 100%; padding: 10px 12px; font-size: 0.9rem; }
  .search-bar { margin-bottom: 1rem; }
  .search-bar input { padding: 10px 16px 10px 40px; font-size: 0.9rem; border-radius: var(--radius-sm); }

  .whatsapp-btn { width: 56px; height: 56px; bottom: 20px; right: 20px; }
  .whatsapp-btn svg { width: 28px; height: 28px; }

  /* On mobile, hide the legacy floating WhatsApp button — the chat widget handles WhatsApp */
  .whatsapp-btn { display: none !important; }

  /* Give catalog grid bottom padding so the floating chat button doesn't cover the last product row */
  .catalog-grid { padding-bottom: 80px; }
  .products-grid { padding-bottom: 80px; }
}

/* ===== 480px: tighter mobile ===== */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 0.9rem; margin-bottom: 1.5rem; }
  .hero { padding: 30px 0.75rem; }
  .hero-content { padding: 0; }
  .catalog-grid { padding-bottom: 100px; }
  .products-grid { padding-bottom: 100px; }
  .hero-search { padding: 0.2rem; gap: 0.2rem; border-radius: 30px; }
  .hero-search input { padding: 0.35rem 0.3rem; font-size: 0.75rem; }
  .hero-search-btn { width: 28px; height: 28px; }
  .hero-search-btn svg { width: 14px; height: 14px; margin: 0; }

  .section { padding: 12px 0.75rem; }
  .section-title { font-size: 1rem; margin-bottom: 0.5rem; }

  .products-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .product-card-body { padding: 0.75rem; }
  .product-card-name { font-size: 0.8rem; }
  .product-card-price { font-size: 1rem; }
  .product-card-btn { padding: 8px; font-size: 0.75rem; }
  .product-card-img { aspect-ratio: 1 / 1; }

  .categories-grid { gap: 0.4rem; flex-wrap: nowrap; overflow-x: auto; }
  .categories-grid::-webkit-scrollbar { display: none; }
  .category-card { padding: 0.7rem 0.4rem; flex: 0 0 85px; min-width: 85px; max-width: 85px; min-height: 75px; overflow: visible; }
  .category-name { font-size: 0.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .reviews-carousel > div { min-width: 240px; max-width: 240px; padding: 1.25rem; }

  .product-info h1 { font-size: 1.1rem; }
  .product-price-detail { font-size: 1.4rem; }

  .footer-inner { padding: 0 0.5rem; gap: 1.5rem; }
  .footer-col { padding: 0; }
  .footer-brand p { font-size: 0.85rem; }

  .catalog-page { padding: 0.75rem 0.5rem; }
  .catalog-page h1 { font-size: 1.2rem; margin-bottom: 0.75rem; }
  .catalog-grid { gap: 0.5rem; }
  .filter-bar { gap: 0.4rem; margin-bottom: 0.75rem; }
  .filter-bar select { padding: 8px 10px; font-size: 0.85rem; }
  .search-bar input { padding: 8px 12px 8px 36px; font-size: 0.85rem; }

  .whatsapp-btn { width: 50px; height: 50px; bottom: 16px; right: 16px; }
  .whatsapp-btn svg { width: 24px; height: 24px; }
}

/* ===== Enhanced Card Hover — Glassmorphism variant ===== */
.product-card-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.product-card-glass:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 16px 48px rgba(255, 107, 0, 0.12);
  border-color: rgba(255, 107, 0, 0.2);
}

/* ===== Gradient Border Cards ===== */
.card-gradient-border {
  position: relative;
  background: var(--bg-white);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--primary), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-gradient-border:hover::before { opacity: 1; }

/* ===== 3D Product Ring (Hero Background) ===== */
.hero-3d-scene {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  perspective-origin: center 40%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
}
.hero-3d-scene.loaded { opacity: 1; }

.hero-3d-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-3d-product {
  position: absolute;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.hero-3d-product-inner {
  width: 110px;
  height: 110px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
  pointer-events: auto;
  cursor: pointer;
  position: relative;
}
.hero-3d-product-inner:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 12px 60px rgba(255,107,0,0.25), 0 0 0 2px rgba(255,107,0,0.3);
}
.hero-3d-product-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-3d-product-inner::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(255,107,0,0.08) 0%, transparent 60%);
  z-index: -1;
  animation: productPulse 3s ease-in-out infinite alternate;
}
@keyframes productPulse {
  0% { opacity: 0.4; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.05); }
}

.hero-3d-product-float {
  animation: productFloat var(--float-duration, 4s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
@keyframes productFloat {
  0%, 100% { transform: translateY(0px); }
  25% { transform: translateY(-10px); }
  75% { transform: translateY(8px); }
}

/* ===== Scroll Hint ===== */
.scroll-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.5;
  animation: scrollHintBob 2s ease-in-out infinite;
  pointer-events: none;
}
.scroll-hint svg { color: rgba(255,255,255,0.4); }
@keyframes scrollHintBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ===== Staggered Entrance ===== */
.stagger-enter {
  opacity: 0;
  transform: translateY(30px);
}
.stagger-enter.visible {
  animation: staggerFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.stagger-enter.visible:nth-child(1) { animation-delay: 0.05s; }
.stagger-enter.visible:nth-child(2) { animation-delay: 0.1s; }
.stagger-enter.visible:nth-child(3) { animation-delay: 0.15s; }
.stagger-enter.visible:nth-child(4) { animation-delay: 0.2s; }
.stagger-enter.visible:nth-child(5) { animation-delay: 0.25s; }
.stagger-enter.visible:nth-child(6) { animation-delay: 0.3s; }
.stagger-enter.visible:nth-child(7) { animation-delay: 0.35s; }
.stagger-enter.visible:nth-child(8) { animation-delay: 0.4s; }
@keyframes staggerFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Product Card Premium Effects ===== */
.product-card {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s ease;
  will-change: transform;
}
.product-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 16px 48px rgba(255,107,0,0.1);
}

/* ===== 3D Product Viewer Overlay ===== */
#product-3d-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 10, 26, 0);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: background 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}
#product-3d-viewer-overlay.active {
  background: rgba(10, 10, 26, 0.97);
  opacity: 1;
  pointer-events: auto;
}
#product-3d-canvas {
  flex: 1;
  width: 100%;
  min-height: 0;
  cursor: grab;
  touch-action: none;
}
#product-3d-canvas:active { cursor: grabbing; }
.viewer-3d-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: linear-gradient(180deg, rgba(10,10,26,0.9) 0%, transparent 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.viewer-3d-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.viewer-3d-close:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
  transform: scale(1.05);
}
.viewer-3d-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.9);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
}
.viewer-3d-title svg { color: var(--primary); }
.viewer-3d-controls {
  display: flex;
  gap: 8px;
}
.viewer-3d-controls button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.viewer-3d-controls button:hover {
  background: rgba(255, 107, 0, 0.2);
  border-color: rgba(255, 107, 0, 0.4);
  color: white;
  transform: scale(1.08);
}
.viewer-3d-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 24px;
  background: linear-gradient(0deg, rgba(10,10,26,0.9) 0%, transparent 100%);
  text-align: center;
  z-index: 2;
}
.viewer-3d-hint {
  color: rgba(255,255,255,0.4);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}
.viewer-3d-hint svg { color: rgba(255,255,255,0.3); }
.viewer-3d-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.viewer-3d-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}
.viewer-3d-dot.active {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 12px rgba(255, 107, 0, 0.5);
  transform: scale(1.2);
}
.viewer-3d-dot:hover:not(.active) {
  background: rgba(255,255,255,0.35);
  transform: scale(1.1);
}

/* 3D Viewer Button (on product page) */
.btn-view-3d {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(255, 107, 0, 0.05));
  border: 1px solid rgba(255, 107, 0, 0.25);
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-view-3d:hover {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 107, 0, 0.1));
  border-color: rgba(255, 107, 0, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 107, 0, 0.15);
}
.btn-view-3d:active { transform: scale(0.97); }
.btn-view-3d svg { color: var(--primary); }

@media (max-width: 768px) {
  .viewer-3d-header { padding: 12px 16px; }
  .viewer-3d-close { width: 40px; height: 40px; }
  .viewer-3d-title { font-size: 0.9rem; }
  .viewer-3d-controls button { width: 34px; height: 34px; }
  .viewer-3d-footer { padding: 16px; }
  .viewer-3d-hint { font-size: 0.8rem; }
}

/* ===== Mobile Bottom Navigation (iOS-style Tab Bar) ===== */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: var(--secondary);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 20px rgba(0,0,0,0.18);
}
.bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 56px;
  max-width: 500px;
  margin: 0 auto;
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  border-radius: 12px;
  min-width: 56px;
}
.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bottom-nav-item span {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.bottom-nav-item.active {
  color: var(--primary);
}
.bottom-nav-item.active svg {
  transform: scale(1.15) translateY(-1px);
}
.bottom-nav-item:hover {
  color: rgba(255,255,255,0.9);
}
.bottom-nav-item:active {
  transform: scale(0.92);
}
.bottom-nav-badge {
  position: absolute;
  top: 2px;
  right: 8px;
  background: var(--danger);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--secondary);
}
@media (max-width: 768px) {
  .bottom-nav { display: block; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .footer { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .whatsapp-btn { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 480px) {
  .bottom-nav-item { min-width: 48px; padding: 6px 8px; }
  .bottom-nav-item svg { width: 20px; height: 20px; }
  .bottom-nav-item span { font-size: 0.6rem; }
}

/* ===== Loading Skeletons (Shimmer) ===== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.5) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.skeleton-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.skeleton-card-body {
  padding: 1rem;
}
.skeleton-line {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 7px;
}
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-25 { width: 25%; }
.skeleton-line.h-20 { height: 20px; }
.skeleton-line.h-24 { height: 24px; }
.skeleton-category {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 0.75rem;
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
}
.skeleton-category-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 8px;
}
.skeleton-category-text {
  height: 12px;
  width: 60%;
  margin: 0 auto;
  border-radius: 6px;
}

/* ===== Button Ripple Effect ===== */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleExpand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ===== Page Transition ===== */
.page-transition {
  opacity: 0;
  transform: translateY(12px);
  animation: pageEnter 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes pageEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Enhanced Toast Notifications ===== */
.notification {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.15);
}

/* ===== Cart Drawer (Slide-out) ===== */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 10003;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cart-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 90vw;
  background: var(--bg-white);
  z-index: 10004;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}
.cart-drawer.open {
  transform: translateX(0);
}
.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-drawer-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-drawer-header h3 .cart-drawer-count {
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  min-width: 20px;
  text-align: center;
}
.cart-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cart-drawer-close:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}
.cart-drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  -webkit-overflow-scrolling: touch;
}
.cart-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.cart-drawer-item:last-child { border-bottom: none; }
.cart-drawer-item-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.cart-drawer-item-info { flex: 1; min-width: 0; }
.cart-drawer-item-name {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-drawer-item-price {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
}
.cart-drawer-item-qty {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.cart-drawer-item-remove {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.cart-drawer-item-remove:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}
.cart-drawer-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}
.cart-drawer-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.cart-drawer-total span:first-child {
  font-weight: 600;
  color: var(--text-light);
}
.cart-drawer-total span:last-child {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
}
.cart-drawer-checkout {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  text-decoration: none;
}
.cart-drawer-checkout:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.3);
}
.cart-drawer-view-all {
  display: block;
  text-align: center;
  margin-top: 12px;
  color: var(--primary);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.cart-drawer-view-all:hover { color: var(--primary-dark); }
.cart-drawer-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.cart-drawer-empty svg { opacity: 0.3; margin-bottom: 12px; }
.cart-drawer-empty p { font-size: 0.95rem; margin-bottom: 1rem; }

@media (max-width: 480px) {
  .cart-drawer { width: 100vw; max-width: 100vw; }
  .cart-drawer-header { padding: 16px; }
  .cart-drawer-items { padding: 12px 16px; }
  .cart-drawer-footer { padding: 16px; }
}

/* ===== Particles (Hero) ===== */
.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.hero-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 107, 0, 0.4);
  border-radius: 50%;
  animation: particleFloat var(--duration, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  50% {
    transform: translateY(var(--ty, -200px)) translateX(var(--tx, 50px));
  }
}

/* ===== Enhanced Navbar Dropdown ===== */
.lang-option {
  position: relative;
  overflow: hidden;
}
.lang-option::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}
.lang-option.active::before { transform: scaleY(1); }
.lang-option:hover::before { transform: scaleY(1); }

/* ===== Enhanced Footer Glow ===== */
.footer {
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  bottom: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ===== RTL Support ===== */
[dir="rtl"] .navbar-inner { flex-direction: row-reverse; }
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
[dir="rtl"] .nav-right { flex-direction: row-reverse; }
[dir="rtl"] .search-bar input { padding: 14px 48px 14px 20px; }
[dir="rtl"] .search-bar svg { left: auto; right: 18px; }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }

/* ===== WhatsApp Chat Admin ===== */
.wa-chat-layout {
  display: flex;
  height: calc(100vh - 120px);
  background: var(--bg-white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}
.wa-conv-list {
  width: 340px;
  min-width: 300px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.wa-conv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-white);
}
.wa-conv-header h3 { margin: 0; font-size: 1.1rem; }
#wa-conv-items {
  flex: 1;
  overflow-y: auto;
}
.wa-conv-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  position: relative;
}
.wa-conv-item:hover { background: var(--bg-white); }
.wa-conv-item.active { background: #FFF4EB; border-left: 3px solid var(--primary); }
.wa-conv-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}
.wa-conv-info { flex: 1; min-width: 0; }
.wa-conv-name {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wa-conv-time { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
.wa-conv-preview {
  font-size: 0.8rem;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.wa-conv-phone { font-size: 0.75rem; color: var(--text-muted); }
.wa-unread-badge {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: var(--primary);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.wa-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
}
.wa-status-dot.ai { background: var(--success); }
.wa-status-dot.human { background: var(--primary); }
.wa-status-dot.closed { background: var(--text-muted); }

/* Chat Area */
.wa-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wa-chat-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  gap: 1rem;
}
.wa-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-white);
}
.wa-chat-header-info h4 { margin: 0; font-size: 1rem; }
.wa-chat-header-info small { color: var(--text-light); }
.wa-chat-header-actions { display: flex; gap: 0.5rem; }
.wa-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #F0F2F5;
}
.wa-msg {
  max-width: 75%;
  padding: 0.625rem 0.875rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  position: relative;
}
.wa-msg.customer {
  align-self: flex-start;
  background: white;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.wa-msg.admin, .wa-msg.ai {
  align-self: flex-end;
  background: #DCF8C6;
  border-bottom-right-radius: 4px;
}
.wa-msg.ai { background: #E8F5E9; }
.wa-msg-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.wa-msg-translation {
  font-size: 0.8rem;
  color: var(--text-light);
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 6px;
  padding-top: 6px;
  font-style: italic;
}
.wa-chat-input {
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-white);
}
.wa-chat-input textarea {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.625rem 1rem;
  font-size: 0.9rem;
  resize: none;
  font-family: inherit;
  min-height: 42px;
  max-height: 120px;
}
.wa-chat-input textarea:focus { outline: none; border-color: var(--primary); }
.wa-chat-input button {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background 0.2s;
  flex-shrink: 0;
}
.wa-chat-input button:hover { background: var(--primary-dark); }

@media (max-width: 768px) {
  .wa-chat-layout { flex-direction: column; height: calc(100vh - 100px); }
  .wa-conv-list { width: 100%; min-width: unset; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border); }
  .wa-conv-list.hidden { display: none; }
  .wa-chat-area.hidden { display: none; }
  .wa-chat-area { min-height: 0; }
  .wa-msg { max-width: 90%; }
  .wa-chat-header .btn-back { display: inline-flex; }
}

/* ===== Chat Widget (Floating) ===== */
#chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.cw-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.cw-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
}
.cw-button.active {
  background: #EF4444;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
}
.cw-button.active svg { transform: rotate(0deg); }
.cw-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #EF4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

/* Chat Window */
.cw-window {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 380px;
  height: 560px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 50px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cwSlideUp 0.3s ease;
}
@keyframes cwSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.cw-header {
  background: #075E54;
  color: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.cw-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cw-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}
.cw-header-name {
  font-weight: 600;
  font-size: 15px;
}
.cw-header-status {
  font-size: 12px;
  opacity: 0.85;
  color: #25D366;
}
.cw-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cw-lang-select {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  cursor: pointer;
}
.cw-lang-select option { color: #333; }
.cw-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.8;
  line-height: 1;
}
.cw-close-btn:hover { opacity: 1; }

/* Messages Area */
.cw-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: #ECE5DD;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cw-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  gap: 12px;
}
.cw-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 28px;
  color: white;
}
.cw-welcome h3 {
  margin: 0;
  color: #075E54;
  font-size: 18px;
}
.cw-welcome p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}
.cw-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
.cw-quick-actions button {
  background: white;
  border: 1px solid #25D366;
  color: #075E54;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.cw-quick-actions button:hover {
  background: #25D366;
  color: white;
}

/* Messages */
.cw-msg {
  max-width: 82%;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  position: relative;
  word-wrap: break-word;
}
.cw-msg-out {
  align-self: flex-end;
  background: #DCF8C6;
  border-bottom-right-radius: 2px;
}
.cw-msg-in {
  align-self: flex-start;
  background: white;
  border-bottom-left-radius: 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}
.cw-msg-sender {
  font-size: 11px;
  font-weight: 600;
  color: #075E54;
  margin-bottom: 2px;
}
.cw-msg-text {
  white-space: pre-wrap;
}
.cw-msg-time {
  font-size: 10px;
  color: #999;
  text-align: right;
  margin-top: 4px;
}

/* WhatsApp fallback bubble (AI unavailable) */
.cw-msg-fallback {
  background: #FFF8E1 !important;
  border-left: 3px solid #FFA000;
}
.cw-msg-wa-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 12px;
  background: #25D366;
  color: white !important;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s;
}
.cw-msg-wa-btn:hover {
  background: #1DAB55;
}

/* Typing indicator */
.cw-typing {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  align-items: center;
}
.cw-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #999;
  animation: cwBounce 1.4s infinite both;
}
.cw-typing span:nth-child(2) { animation-delay: 0.2s; }
.cw-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cwBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Input Area */
.cw-input-area {
  background: #F0F2F5;
  padding: 8px 12px;
  flex-shrink: 0;
}
.cw-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.cw-input-row textarea {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  resize: none;
  font-family: inherit;
  min-height: 42px;
  max-height: 100px;
  background: white;
  outline: none;
}
.cw-input-row textarea:focus {
  border-color: #25D366;
}
.cw-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #25D366;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.cw-send-btn:hover { background: #1EB854; }

/* Scrollbar */
.cw-messages::-webkit-scrollbar { width: 5px; }
.cw-messages::-webkit-scrollbar-track { background: transparent; }
.cw-messages::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* Mobile */
@media (max-width: 480px) {
  .cw-window {
    width: calc(100vw - 32px);
    height: calc(100vh - 120px);
    right: -8px;
    bottom: 72px;
    border-radius: 12px;
  }
  #chat-widget { bottom: 16px; right: 16px; }
}

/* ===== Chat Widget — Fullscreen WhatsApp-style on mobile ===== */
.cw-back-btn { display: none; } /* hidden by default; shown only on mobile via media query + JS */
@media (max-width: 768px) {
  /* Lock background scroll while chat is open */
  body.cw-no-scroll { overflow: hidden; position: fixed; width: 100%; }

  /* Anchor the chat-widget container at bottom-right (NOT fullscreen). The
     button is position:fixed so it sticks to the viewport corner regardless
     of any parent container. The fullscreen chat window is a separate
     position:fixed element below. */
  #chat-widget { bottom: 16px; right: 16px; left: auto; top: auto; width: 0; height: 0; }

  /* Floating button — position:fixed is REQUIRED here so bottom/right
     anchor to the viewport, not to a parent.
     bottom: 110px so it sits ABOVE the bottom nav and doesn't block Account button */
  .cw-button { position: fixed; width: 54px; height: 54px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); right: 16px; top: auto; left: auto; z-index: 10001; }
  .cw-button svg { width: 26px; height: 26px; }

  .cw-back-btn { display: inline-flex; }

  .cw-window {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100dvh; /* accounts for mobile browser chrome incl. keyboard */
    max-height: -webkit-fill-available;
    border-radius: 0;
    box-shadow: none;
    z-index: 10002;
    /* respect iOS notch + keyboard safe area */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    flex-direction: column;
    animation: cwSlideUp 0.25s ease;
  }
  .cw-header {
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    flex-shrink: 0;
  }
  .cw-back-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 4px;
    flex-shrink: 0;
  }
  .cw-back-btn:active { background: rgba(255,255,255,0.3); }
  .cw-wa-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: white;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s;
  }
  .cw-wa-link:hover, .cw-wa-link:active { background: #25D366; }
  .cw-header-info { gap: 8px; }
  .cw-avatar { width: 34px; height: 34px; font-size: 14px; }
  .cw-header-name { font-size: 14px; }
  .cw-header-status { font-size: 11px; }
  .cw-lang-select { font-size: 11px; padding: 3px 5px; }
  .cw-close-btn { font-size: 22px; padding: 0 4px; }

  .cw-messages {
    flex: 1 1 auto;
    min-height: 0; /* allow flex shrinking so input stays visible */
    -webkit-overflow-scrolling: touch;
  }
  .cw-input-area {
    flex-shrink: 0;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: #F0F2F5;
  }
  .cw-input-row textarea {
    font-size: 16px; /* iOS: prevents auto-zoom on focus */
    min-height: 44px;
    max-height: 100px;
    padding: 10px 14px;
  }
  .cw-send-btn { width: 44px; height: 44px; }

  .cw-welcome { padding: 24px 16px; }
  .cw-avatar-lg { width: 56px; height: 56px; font-size: 24px; }
  .cw-welcome h3 { font-size: 16px; }
  .cw-welcome p { font-size: 13px; }
  .cw-quick-actions button { font-size: 12px; padding: 7px 12px; }
}

/* Subtle animation for the chat window opening */
@keyframes cwFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== USER MENU (Navbar) ===== */
#user-menu-container {
  position: relative;
}
.nav-auth-link {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
}
.nav-auth-link:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.nav-auth-signup {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.nav-auth-signup:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: white;
}.mobile-auth-item { display: none; }

@media (max-width: 768px) {
  .nav-auth-desktop { display: none !important; }

  /* Hide account avatar/menu on mobile — bottom nav handles account access */
  #user-menu-container { display: none !important; }
  .mobile-auth-item {
    display: flex;
    gap: 0.5rem;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    align-items: center;
  }
  .mobile-auth-item a {
    flex: 1;
    display: block;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    /* Sign In style - outline */
    color: var(--text);
    border: 1px solid var(--border);
    background: var(--bg);
  }
  .mobile-auth-item .mobile-register-link {
    /* Register style - filled primary */
    background: var(--primary);
    color: white;
    border-color: var(--primary);
  }
}
.user-menu-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}
.user-menu-btn:hover {
  border-color: var(--primary-dark);
  transform: scale(1.05);
}
.user-menu-btn svg {
  width: 20px;
  height: 20px;
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  display: none;
  z-index: 1002;
  overflow: hidden;
}
.user-dropdown.show { display: block; }
.user-dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.user-dropdown-header strong {
  display: block;
  font-size: 0.9rem;
}
.user-dropdown-header small {
  color: var(--text-light);
  font-size: 0.8rem;
}
.user-dropdown a {
  display: block;
  padding: 10px 16px;
  font-size: 0.9rem;
  color: var(--text);
  transition: var(--transition);
}
.user-dropdown a:hover {
  background: var(--bg);
  color: var(--primary);
}

/* ===== AUTH PAGE ===== */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 64px);
  padding: 2rem 1rem;
  background: var(--bg);
}
.auth-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow);
}
.auth-logo {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  text-align: center;
  margin-bottom: 1.5rem;
}
.auth-logo span { color: var(--secondary); }
.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--border);
}
.auth-tab {
  flex: 1;
  padding: 12px;
  background: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
}
.auth-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.auth-error {
  color: var(--danger);
  font-size: 0.9rem;
  margin: 0.5rem 0;
  display: none;
}
.auth-success {
  color: var(--success);
  font-size: 0.9rem;
  margin: 0.5rem 0;
  display: none;
}

/* ===== ACCOUNT PAGE ===== */
.account-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 64px);
}
.account-sidebar {
  background: var(--bg-white);
  border-right: 1px solid var(--border);
  padding: 2rem 0;
  text-align: center;
}
.account-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2rem;
  margin: 0 auto 1rem;
  overflow: hidden;
}
.avatar-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.account-avatar:hover .avatar-overlay { opacity: 1; }
.account-sidebar h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.account-nav {
  margin-top: 2rem;
}
.account-nav a {
  display: block;
  padding: 12px 2rem;
  color: var(--text-light);
  font-weight: 500;
  transition: var(--transition);
  text-align: left;
}
.account-nav a:hover, .account-nav a.active {
  color: var(--primary);
  background: rgba(255,107,0,0.05);
  border-right: 3px solid var(--primary);
}
.account-main {
  padding: 2rem;
  background: var(--bg);
}
.account-main h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* ===== RESPONSIVE - AUTH & ACCOUNT ===== */
@media (max-width: 768px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1.5rem;
  }
  .account-nav { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; margin-top: 1rem; }
  .account-nav a { padding: 8px 16px; font-size: 0.85rem; border-right: none !important; }
  .account-nav a.active { border-bottom: 3px solid var(--primary); border-right: none !important; }
  .account-main { padding: 1.5rem 1rem; }

  /* Compact forms on mobile */
  .checkout-page { padding: 1rem 0.75rem; }
  .checkout-page h1 { font-size: 1.4rem; margin-bottom: 1rem; }
  .form-group { margin-bottom: 0.75rem; }
  .form-group label { font-size: 0.85rem; margin-bottom: 0.3rem; }
  .form-group input, .form-group select { padding: 10px 12px; font-size: 0.9rem; }
  .form-row { gap: 0.5rem; }
  .btn-pay { padding: 12px; font-size: 1rem; margin-top: 1rem; }
  .cart-summary { padding: 1.25rem; }
  .auth-page { padding: 1rem 0.75rem; min-height: calc(100vh - 56px); }
  .auth-card { padding: 1.5rem; }
  .auth-logo { font-size: 1.5rem; margin-bottom: 1rem; }
  .auth-tabs { margin-bottom: 1.25rem; }
  .auth-tab { padding: 10px; font-size: 0.9rem; }
}

/* ===== Trust badges (below Buy Now) ===== */
.trust-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin: 0.25rem 0 1.5rem;
  padding: 0.85rem;
  background: linear-gradient(135deg, #F0F9FF 0%, #FFFFFF 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.trust-badge { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.trust-badge-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 0; }
.trust-badge-icon svg { width: 16px; height: 16px; }
.trust-badge-text-block { min-width: 0; line-height: 1.2; }
.trust-badge-text { font-weight: 600; font-size: 0.78rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trust-badge-sub { font-size: 0.66rem; color: var(--text-light); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .trust-badges { gap: 0.45rem; padding: 0.6rem; }
  .trust-badge-icon { width: 28px; height: 28px; }
  .trust-badge-icon svg { width: 14px; height: 14px; }
  .trust-badge-text { font-size: 0.7rem; }
  .trust-badge-sub { font-size: 0.6rem; }
}