/* ============================================
   Ali Find Me - Main Stylesheet v2.0
   ============================================ */

:root {
  /* Palette "warm sand" — 2026-07-19.
     The old scheme ran seven signal colours and three orange gradients, which is
     why the site read as loud rather than confident. Colour now lives in one
     large calm area (the page head) and one accent (price / primary action);
     everything else is a warm neutral so the products carry the screen. */
  --primary: #C2410C;        /* the brand orange, deepened out of neon */
  --primary-dark: #A5360A;
  --primary-light: #F0A868;
  --accent: #C2410C;
  --accent-dark: #A5360A;
  --deep: #3F3037;           /* head / nav — the big calm block of colour */
  --deep-soft: #574450;
  --success: #2C6E49;
  --warning: #C98A2E;
  --danger: #B4342A;
  --bg: #F6F0E8;             /* sand, not grey — keeps the page warm */
  --card-bg: #FFFFFF;
  --text: #3F3037;
  --text-light: #6B626A;
  --text-muted: #8A7F86;
  --border: #E8DFD6;
  --line: #E8DFD6;
  --shadow: 0 1px 3px rgba(63, 48, 55, 0.07);
  --shadow-hover: 0 8px 24px -12px rgba(63, 48, 55, 0.22);
  /* Flat, not gradient. A gradient reads as decoration; a solid block reads as structure. */
  --gradient: #C2410C;
  --gradient-hero: #3F3037;
  --radius: 10px;            /* 16px rounded corners read as a toy */
  --radius-sm: 8px;
  --radius-xs: 5px;
  --font-heading: 'Heebo', sans-serif;
  --font-body: 'Assistant', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
}

/* ---- Navbar ---- */
.navbar {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 20px;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

[dir="rtl"] .nav-container {
  flex-direction: row-reverse;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--primary);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.4rem;
}

.logo-icon { font-size: 1.6rem; }
.logo-img { height: 48px; width: auto; object-fit: contain; }
.logo-text { display: none; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-icon-btn {
  position: relative;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: background 0.2s;
}

.nav-icon-btn:hover { background: var(--bg); }

.fav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--accent-dark);
  color: #fff;
  font-size: 0.65rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

[dir="rtl"] .fav-badge { right: auto; left: -2px; }

/* Language Dropdown */
.lang-dropdown-wrap {
  position: relative;
}

.lang-flag-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.lang-flag-btn:hover {
  border-color: var(--primary);
  transform: scale(1.1);
}

.lang-dropdown {
  display: none;
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 200;
  min-width: 160px;
  padding: 6px 0;
  animation: dropdownFade 0.2s ease;
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.lang-dropdown.open { display: block; }

.lang-option {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.9rem;
  text-align: right;
  white-space: nowrap;
  transition: background 0.15s;
}

[dir="ltr"] .lang-option { text-align: left; }

.lang-option:hover {
  background: var(--primary-light);
  color: #fff;
}

.admin-link {
  text-decoration: none;
  font-size: 1.2rem;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.admin-link:hover { opacity: 1; }

/* ---- Hero ---- */
.hero {
  background: var(--gradient-hero);
  padding: 30px 20px 46px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: shimmer 15s infinite linear;
}

@keyframes shimmer {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hero-content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }

.hero-title {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
}

.hero-icon { font-size: 1.6rem; vertical-align: middle; }

.hero-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.92);
  font-weight: 300;
}

/* ---- Chat Section ---- */
.chat-section {
  max-width: 800px;
  margin: -30px auto 0;
  padding: 0 20px;
  /* Search follows the page instead of scrolling away — starting a new search used
     to mean scrolling all the way back up. --nav-h is kept in sync with the real
     navbar height in JS, so this stays tucked under it at any breakpoint. */
  position: sticky;
  top: var(--nav-h, 48px);
  z-index: 90;   /* below the navbar's 100 */
}

/* Pinned, the whole block ate 32% of a phone screen. Everything except the input
   itself is only useful before you start scrolling, so once you do, the bar slims
   down to just the search field (18%). Scroll back to the top and it returns. */
body.scrolled #chipsContainer,
body.scrolled #historyContainer,
body.scrolled #chatMessages,
body.scrolled .chat-section .quick-replies {
  display: none !important;
}
body.scrolled .chat-section { margin-top: 0; }

.chat-container {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: visible;
  border: 1px solid var(--border);
}

.chat-messages {
  padding: 24px;
  max-height: 200px;
  overflow-y: auto;
}

.message {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.bot-message { flex-direction: row-reverse; }
[dir="ltr"] .bot-message { flex-direction: row; }

.user-message { flex-direction: row; }
[dir="ltr"] .user-message { flex-direction: row-reverse; }

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  background: var(--bg);
}

.message-bubble {
  max-width: 80%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 1.6;
}

.bot-message .message-bubble {
  background: var(--bg);
  color: var(--text);
}

[dir="ltr"] .bot-message .message-bubble { border-top-left-radius: 4px; }
[dir="rtl"] .bot-message .message-bubble { border-top-right-radius: 4px; }

.user-message .message-bubble {
  background: var(--gradient);
  color: #fff;
}

[dir="ltr"] .user-message .message-bubble { border-top-right-radius: 4px; }
[dir="rtl"] .user-message .message-bubble { border-top-left-radius: 4px; }

/* Typing indicator */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 12px 18px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--primary-light);
  border-radius: 50%;
  animation: bounce 1.4s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
}

/* ---- Search History ---- */
.history-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  background: rgba(255, 107, 0, 0.03);
}

.history-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.history-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.history-chip {
  padding: 4px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 0.78rem;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}

.history-chip:hover {
  background: var(--primary-light);
  color: #fff;
  border-color: var(--primary-light);
}

.history-clear-btn {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 50%;
  transition: all 0.2s;
}

.history-clear-btn:hover { color: var(--danger); background: rgba(214, 48, 49, 0.1); }

/* Chips */
.chips-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 14px 20px 16px;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chips-container::-webkit-scrollbar { display: none; }

.chip {
  padding: 8px 16px;
  background: #f7f7f8;
  border: 1px solid #ececec;
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
  flex-shrink: 0;
  white-space: nowrap;
}

.chip:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* Input area */
.input-area {
  padding: 18px 20px;
  border-top: none;
  background: var(--card-bg);
  border-radius: 0 0 var(--radius) var(--radius);
}

.input-area-top {
  border-radius: var(--radius) var(--radius) 0 0;
}

.input-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

#chatInput {
  flex: 1;
  padding: 16px 22px;
  border: 2px solid #ececec;
  border-radius: 30px;
  font-size: 1.05rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  background: #f7f7f8;
  box-shadow: none;
}

#chatInput::placeholder {
  color: #9a9a9a;
  font-weight: 400;
}

#chatInput:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 4px 18px rgba(255,107,0,0.12);
}

.send-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255,107,0,0.32);
}

.send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
}

/* ---- Image Search Button ---- */
.image-search-wrap { position: relative; flex-shrink: 0; }
.image-search-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ececec;
  background: #f7f7f8;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.image-search-btn:hover {
  border-color: var(--primary);
  transform: scale(1.05);
}
.image-options-dropdown {
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 50;
  min-width: 120px;
}
.image-options-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--text);
  transition: background 0.15s;
}
.image-options-dropdown button:hover {
  background: rgba(255, 107, 0, 0.1);
}

/* ---- Filters Bar ---- */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
}

.filter-group select {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 0.85rem;
  font-family: var(--font-body);
  background: var(--bg);
  cursor: pointer;
  outline: none;
}

.price-input {
  width: 70px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 0.85rem;
  font-family: var(--font-body);
  outline: none;
  text-align: center;
}

.price-input:focus { border-color: var(--primary); }

.filter-apply-btn {
  padding: 6px 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s;
}

.filter-apply-btn:hover { background: var(--primary-dark); }

/* Toggle Filter (Free Shipping) */
.toggle-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.2s;
  user-select: none;
}
.toggle-filter:hover { border-color: var(--primary); }
.toggle-filter.active {
  background: #e8f5e9;
  border-color: #4caf50;
  color: #2e7d32;
}
[data-theme="dark"] .toggle-filter.active {
  background: #1b3b1f;
  border-color: #4caf50;
  color: #81c784;
}

/* Quick Price Filters */
.quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.quick-filter-btn {
  padding: 6px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
  white-space: nowrap;
}
.quick-filter-btn:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.quick-filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.deals-btn.active {
  background: #ff4444;
  border-color: #ff4444;
  color: #fff;
  animation: pulse-deal 1.5s infinite;
}
@keyframes pulse-deal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(255,68,68,0); }
}

/* Category Select */
#categorySelect {
  max-width: 160px;
}

/* ---- Related Searches ---- */
.related-searches {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  margin-bottom: 16px;
}

.related-label {
  font-size: 0.85rem;
  color: var(--text-light);
  font-weight: 600;
  white-space: nowrap;
}

.related-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.related-chip {
  padding: 6px 14px;
  background: rgba(255, 107, 0, 0.06);
  border: 1px solid var(--primary-light);
  border-radius: 16px;
  font-size: 0.82rem;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}

.related-chip:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ---- Results ---- */
.results-section {
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 20px;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.results-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.share-search-btn {
  padding: 4px 12px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  font-family: var(--font-body);
}

.share-search-btn:hover { background: #1DA851; }

.clear-btn {
  padding: 8px 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-light);
  transition: all 0.2s;
  font-family: var(--font-body);
}

.clear-btn:hover { border-color: var(--danger); color: var(--danger); }

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.product-card {
  background: var(--card-bg);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #f1f1f1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.13);
}

.product-img-wrap {
  position: relative;
}

.product-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg);
  display: block;
}

/* Favorite button on product card */
.fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.9);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 2;
}

[dir="rtl"] .fav-btn { right: auto; left: 10px; }

.fav-btn:hover { background: #fff; transform: scale(1.1); }
.fav-btn.active { background: #ffe0e9; }

/* Share button on product card */
.share-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255,255,255,0.9);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 2;
  opacity: 0;
}

[dir="rtl"] .share-btn { left: auto; right: 10px; }
[dir="rtl"] .fav-btn { left: 10px; right: auto; }

.product-card:hover .share-btn { opacity: 1; }
.share-btn:hover { background: #25D366; color: #fff; transform: scale(1.1); }

.product-info { padding: 14px; }

.product-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
  line-height: 1.4;
  min-height: 2.5em;
}

.product-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.product-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-dark);
}

.product-original-price {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.product-discount {
  background: #ff2e4d;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.product-rating { color: #F39C12; }

.product-cta {
  display: block;
  text-align: center;
  padding: 12px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(255,107,0,0.30);
}

.product-cta-enhanced {
  background: var(--primary) !important;
  padding: 13px 10px;
  font-size: 1rem;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(255,107,0,0.35);
}

.product-cta:hover { box-shadow: 0 7px 20px rgba(255,107,0,0.45); }
.product-cta:active { transform: scale(0.97); }

/* Enhanced product badges */
.product-price {
  font-size: 1.2em !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
}

.product-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.savings-badge {
  background: var(--primary);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
}

@media (max-width: 480px) {
  .product-price-row {
    gap: 2px;
  }
  .savings-badge {
    font-size: 0.6rem;
    padding: 1px 4px;
  }
  .product-price {
    font-size: 1rem !important;
  }
}

.hot-deal-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--primary);
  color: #fff;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 0.66rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  z-index: 5;
}

.top-pick-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #191919, #333333);
  color: #fff;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 0.66rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  z-index: 5;
}

@media (max-width: 480px) {
  .hot-deal-badge {
    font-size: 0.58rem;
    padding: 2px 6px;
  }
  .top-pick-badge {
    top: 32px;
    font-size: 0.58rem;
    padding: 2px 6px;
  }
}

.free-ship-badge {
  display: inline-block;
  background: #e8f8f5;
  color: #00966e;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.hot-orders {
  color: #e63946;
  font-weight: 600;
}

.urgency-bar {
  background: var(--bg);
  color: #e65100;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  text-align: center;
  margin-bottom: 6px;
  font-weight: 500;
}

[data-theme="dark"] .free-ship-badge {
  background: rgba(0,184,148,0.15);
}
[data-theme="dark"] .urgency-bar {
  background: rgba(230,81,0,0.15);
}

/* Skeleton loading */
.skeleton-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

.skeleton-img {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200%;
  animation: skeleton-shine 1.5s infinite;
}

.skeleton-text {
  height: 14px;
  margin: 12px 14px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200%;
  animation: skeleton-shine 1.5s infinite;
  border-radius: 4px;
}

.skeleton-text:last-child { width: 60%; }

@keyframes skeleton-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* The trending grid ships with skeleton cards inside the HTML so something paints
   before app.js has downloaded. If app.js never runs at all — blocked, offline,
   a JS error on boot — nothing would ever replace them, and a page that shimmers
   forever reads as more broken than one that is simply empty. Give up after 20s. */
#trendingGrid > .skeleton-card {
  animation: skeleton-giveup .4s ease 20s forwards;
}
@keyframes skeleton-giveup {
  to { opacity: 0; visibility: hidden; }
}

/* Load more */
.load-more {
  text-align: center;
  padding: 24px;
}

.load-more-btn {
  padding: 12px 36px;
  border: 2px solid var(--primary);
  border-radius: 25px;
  background: none;
  color: var(--primary);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}

.load-more-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.05);
}

.load-more-btn:active {
  transform: scale(0.95);
}

.load-more-btn.loading-pulse {
  animation: loadPulse 1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes loadPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.02); }
}

/* ---- Trending Section ---- */
/* Promo Banner */
.promo-banner-section {
  max-width: 1200px;
  margin: 10px auto 20px;
  padding: 0 20px;
}
.promo-banner {
  background: var(--primary);
  border-radius: 16px;
  padding: 12px 14px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.promo-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
}
.promo-banner-header {
  text-align: center;
  margin-bottom: 8px;
}
.promo-badge {
  display: none; /* redundant with the title (both said "דילים חמים") */
}
.promo-title {
  font-size: 1.1em;
  line-height: 1.25;
  margin: 0 0 2px;
  font-weight: 700;
}
.promo-subtitle {
  font-size: 0.78em;
  opacity: 0.9;
  margin: 0;
}
.promo-scroll-wrapper {
  position: relative;
}
.promo-products-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 40px 12px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.promo-products-scroll::-webkit-scrollbar { height: 6px; }
.promo-products-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.15); border-radius: 4px; }
.promo-products-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5); border-radius: 4px; }
.promo-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255,255,255,0.3);
  color: #fff;
  font-size: 1.4em;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  backdrop-filter: blur(4px);
}
.promo-scroll-btn:hover { background: rgba(255,255,255,0.5); transform: translateY(-50%) scale(1.1); }
.promo-scroll-right { right: auto; left: 2px; }
.promo-scroll-left { left: auto; right: 2px; }
.promo-scroll-hint {
  text-align: center;
  color: rgba(255,255,255,0.85);
  font-size: 0.8em;
  margin-top: 2px;
  animation: hintPulse 2s ease-in-out 3;
}
@keyframes hintPulse { 0%,100%{opacity:0.85} 50%{opacity:0.4} }
.promo-card {
  flex: 0 0 140px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
  color: #333;
  transition: transform 0.2s;
}
.promo-card:hover { transform: scale(1.03); }
.promo-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.promo-card-info {
  padding: 8px;
  text-align: center;
}
.promo-card-price {
  font-weight: 700;
  color: var(--primary);
  font-size: 1em;
}
.promo-card-discount {
  font-size: 0.75em;
  color: #fff;
  background: #e53935;
  padding: 1px 6px;
  border-radius: 8px;
  margin-right: 4px;
}
.promo-card-title {
  font-size: 0.7em;
  color: #666;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.promo-see-all {
  display: block;
  margin: 10px auto 0;
  background: rgba(255,255,255,0.25);
  border: 2px solid #fff;
  color: #fff;
  padding: 8px 24px;
  border-radius: 24px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.promo-see-all:hover { background: rgba(255,255,255,0.4); }

/* Similar Products Modal */
.similar-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.similar-modal {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 75vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.similar-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 8px;
  position: sticky;
  top: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 1;
}
.similar-modal-header h3 { font-size: 1em; margin: 0; color: #333; }
.similar-close { background: none; border: none; font-size: 1.5em; cursor: pointer; color: #999; padding: 0 4px; }
.similar-modal-body {
  padding: 8px 16px 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.similar-loading { grid-column: 1 / -1; text-align: center; padding: 30px; color: #999; }
.similar-card {
  background: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #333;
  transition: transform 0.2s, box-shadow 0.2s;
}
.similar-card:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.similar-card img { width: 100%; height: 140px; object-fit: cover; }
.similar-card-info { padding: 8px 10px; }
.similar-card-title { font-size: 0.75em; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.similar-ship { font-size: 0.7em; color: #4CAF50; margin-top: 3px; }
.product-actions-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  justify-content: center;
  align-items: stretch;
}
.similar-btn {
  flex: 1;
  padding: 6px 4px;
  border: 1.5px solid #ff9500;
  background: #fff;
  color: #ff9500;
  border-radius: 8px;
  font-size: 0.7em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.similar-btn:hover { background: var(--bg); }

.trending-section {
  max-width: 1200px;
  margin: 10px auto 40px;
  padding: 0 20px;
}

.trending-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}

/* ---- Daily Deals ---- */
.daily-deals-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.deals-countdown {
  text-align: center;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1rem;
  color: var(--text-light);
}

.countdown-timer {
  background: var(--primary);
  color: #fff;
  padding: 8px 22px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 2px;
  box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}

.deals-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}

/* ---- Categories ---- */
.categories-section {
  max-width: 1200px;
  margin: 48px auto;
  padding: 0 20px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 28px;
  color: var(--text);
}

.section-title span { font-size: 1.4rem; }

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.category-card {
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  padding: 20px 12px;
  text-align: center;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--primary-light);
}

.category-icon { font-size: 2rem; margin-bottom: 8px; }

.category-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

/* ---- How it works ---- */
.how-it-works {
  max-width: 900px;
  margin: 48px auto;
  padding: 0 20px;
}

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

.step {
  text-align: center;
  padding: 24px 16px;
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.step h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--text);
}

.step p {
  font-size: 0.88rem;
  color: var(--text-light);
}

/* ---- Favorites Modal ---- */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: var(--card-bg);
  border-radius: var(--radius);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 1;
}

.modal-header h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: all 0.2s;
}

.modal-close:hover { background: var(--bg); color: var(--text); }

.modal-body {
  padding: 20px 24px;
}

.empty-fav {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 1rem;
}

.fav-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fav-item {
  display: flex;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: box-shadow 0.2s;
}

.fav-item:hover { box-shadow: var(--shadow); }

.fav-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.fav-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.fav-title {
  font-size: 0.85rem;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fav-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-dark);
}

.fav-actions { display: flex; gap: 8px; align-items: center; }

.fav-buy-btn {
  padding: 4px 12px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-xs);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.2s;
}

.fav-buy-btn:hover { background: var(--primary-dark); }

.fav-remove-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
  transition: background 0.2s;
}

.fav-remove-btn:hover { background: rgba(214, 48, 49, 0.1); }

/* ---- Share Modal ---- */
.share-modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 28px 24px;
  max-width: 360px;
  width: 100%;
  position: relative;
  text-align: center;
}

.share-modal-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--text);
}

.share-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-platform-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
  color: #fff;
}

.share-platform-btn:hover { transform: scale(1.02); opacity: 0.9; }
.share-icon { font-size: 1.3rem; }

.whatsapp-btn { background: #25D366; }
.telegram-btn { background: #0088cc; }
.facebook-btn { background: #1877F2; }
.twitter-btn { background: #1DA1F2; }
.copy-btn { background: var(--text-light); }
.native-btn { background: var(--primary); }

/* ---- Newsletter Section ---- */
.newsletter-section {
  background: linear-gradient(135deg, var(--primary) 0%, #E65C00 50%, var(--primary-light) 100%);
  padding: 48px 20px;
  text-align: center;
  margin-top: 40px;
}

.newsletter-content {
  max-width: 560px;
  margin: 0 auto;
}

.newsletter-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  animation: nlBounce 2s ease-in-out infinite;
}

@keyframes nlBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.newsletter-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
}

.newsletter-desc {
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  margin-bottom: 24px;
  line-height: 1.5;
}

.newsletter-form { margin-bottom: 12px; }

.newsletter-input-wrap {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
}

.newsletter-input {
  flex: 1;
  padding: 16px 20px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 30px;
  font-size: 1rem;
  font-family: var(--font-body);
  background: #fff;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.newsletter-input:focus {
  border-color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.newsletter-btn {
  padding: 16px 32px;
  background: #fff;
  color: var(--primary);
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.newsletter-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.newsletter-privacy {
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  margin-top: 8px;
}

.newsletter-success {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 16px 24px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.newsletter-success-icon { font-size: 1.5rem; }

/* ---- Newsletter Popup ---- */
.nl-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s;
}

.nl-popup {
  background: #fff;
  border-radius: var(--radius);
  padding: 36px 28px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.nl-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

[dir="rtl"] .nl-popup-close { right: auto; left: 12px; }

.nl-popup-close:hover { background: var(--bg); }

.nl-popup-icon { font-size: 3rem; margin-bottom: 12px; }

.nl-popup-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

.nl-popup-desc {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.nl-popup-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.nl-popup-form .newsletter-input {
  border-color: var(--border);
}

.nl-popup-btn {
  background: var(--gradient);
  color: #fff;
  width: 100%;
}

.nl-popup-skip {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px;
  font-family: var(--font-body);
}

.nl-popup-skip:hover { color: var(--text); }

/* ---- Footer ---- */
.footer {
  background: var(--text);
  color: rgba(255,255,255,0.7);
  text-align: center;
  padding: 28px 20px;
  margin-top: 48px;
}

.footer-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 8px;
}

.footer-disclaimer {
  font-size: 0.78rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* SEO internal-links footer */
.footer-seo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto 26px;
  text-align: right;
}
.footer-col { min-width: 150px; }
.footer-col h3 {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: #fff;
  margin: 0 0 10px;
  font-weight: 700;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  font-size: 0.82rem;
  padding: 3px 0;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--primary-light); }
.footer-about {
  font-size: 0.8rem;
  max-width: 660px;
  margin: 0 auto 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
}
@media (max-width: 600px) {
  .footer-seo { gap: 22px 28px; text-align: center; }
  .footer-col { min-width: 120px; }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .admin-link { display: none !important; }
  .hero-title { font-size: 1.6rem; }
  .hero-subtitle { font-size: 0.95rem; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .trending-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .deals-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .daily-deals-section { margin: 20px auto; padding: 0 8px; }
  .countdown-timer { font-size: 1rem; padding: 6px 16px; }
  .steps-grid { grid-template-columns: 1fr; gap: 16px; }
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
  .filters-bar { gap: 10px; flex-direction: column; align-items: stretch; }
  .filter-group { flex-wrap: wrap; justify-content: center; }
  .fav-item img { width: 60px; height: 60px; }
  .share-btn { opacity: 1; }
  .alert-btn-card { opacity: 1; }
  .results-header { flex-direction: column; gap: 10px; align-items: flex-start; }
  .modal-content { max-width: 95vw; max-height: 85vh; }
  .modal-header { padding: 16px 18px; }
  .modal-body { padding: 16px 18px; }
}

@media (max-width: 600px) {
  /* ---- Navbar: force single row, no overflow ---- */
  .navbar { padding: 0 8px; }
  .nav-container {
    height: 48px;
    overflow: visible;
    flex-wrap: nowrap;
  }
  .logo {
    font-size: 0.85rem;
    gap: 4px;
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
  }
  .logo-icon { font-size: 1rem; }
  .logo-img { height: 36px; max-width: 140px; }
  .nav-actions {
    gap: 2px;
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
  .nav-icon-btn { font-size: 0.9rem; padding: 4px; }
  .theme-toggle-btn { font-size: 0.9rem; padding: 4px; }
  .lang-flag-btn { width: 28px; height: 28px; font-size: 1rem; }
  .lang-dropdown { min-width: 140px; }
  .lang-option { padding: 6px 12px; font-size: 0.82rem; }
  .admin-link { font-size: 0.85rem; display: none; }

  /* ---- Hero ---- */
  .hero { padding: 20px 12px 28px; }
  .hero-title { font-size: 1.2rem; }
  .hero-icon { font-size: 1.2rem; }
  .hero-subtitle { font-size: 0.8rem; }

  /* ---- Chat Section ---- */
  .chat-section { padding: 0 8px; margin-top: -20px; }
  .chat-messages { padding: 12px; }
  .message { gap: 8px; margin-bottom: 10px; }
  .message-bubble { max-width: 88%; padding: 8px 12px; font-size: 0.8rem; line-height: 1.5; }
  .message-avatar { width: 26px; height: 26px; font-size: 0.95rem; }
  .input-area { padding: 14px 12px; }
  .input-wrapper { gap: 6px; }
  #chatInput { padding: 14px 18px; font-size: 1rem; border-width: 3px; }
  .send-btn { width: 36px; height: 36px; }
  .send-btn svg { width: 16px; height: 16px; }

  /* ---- Chips ---- */
  .chips-container { padding: 0 10px 10px; gap: 5px; }
  .chip { padding: 5px 10px; font-size: 0.7rem; border-radius: 14px; }

  /* ---- History ---- */
  .history-container { padding: 5px 10px; gap: 5px; }
  .history-label { font-size: 0.68rem; }
  .history-chip { padding: 2px 8px; font-size: 0.65rem; }

  /* ---- Products ---- */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .product-info { padding: 8px; }
  .product-title { font-size: 0.75rem; min-height: 2em; line-height: 1.3; }
  .product-price { font-size: 0.9rem; }
  .product-original-price { font-size: 0.68rem; }
  .product-discount { font-size: 0.6rem; padding: 1px 5px; }
  .product-meta { font-size: 0.65rem; }
  .product-cta { padding: 7px; font-size: 0.75rem; border-radius: 4px; }
  .fav-btn { width: 28px; height: 28px; font-size: 0.8rem; }
  .share-btn { width: 28px; height: 28px; font-size: 0.75rem; opacity: 1; }
  .alert-btn-card { width: 26px; height: 26px; font-size: 0.7rem; opacity: 1; }

  /* ---- Categories ---- */
  .categories-section { margin: 24px auto; }
  .categories-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .category-card { padding: 12px 6px; border-radius: 8px; }
  .category-icon { font-size: 1.4rem; margin-bottom: 3px; }
  .category-name { font-size: 0.68rem; }
  .section-title { font-size: 1.05rem; margin-bottom: 14px; }
  .section-title span { font-size: 1rem; }

  /* ---- Filters ---- */
  .filters-bar { padding: 8px; gap: 6px; border-radius: 8px; }
  .price-input { width: 50px; padding: 4px 6px; font-size: 0.78rem; }
  .filter-group label { font-size: 0.75rem; }
  .filter-group select { font-size: 0.75rem; padding: 4px 8px; }
  .filter-apply-btn { font-size: 0.72rem; padding: 5px 10px; }

  /* ---- Results ---- */
  .results-section { margin: 16px auto; padding: 0 8px; }
  .results-title { font-size: 1rem; gap: 6px; }
  .clear-btn { padding: 5px 12px; font-size: 0.72rem; }
  .load-more-btn { padding: 8px 24px; font-size: 0.85rem; }
  .share-search-btn { font-size: 0.68rem; padding: 3px 8px; }

  /* ---- Related searches ---- */
  .related-searches { gap: 5px; padding: 6px 0; }
  .related-label { font-size: 0.72rem; }
  .related-chip { padding: 4px 8px; font-size: 0.68rem; border-radius: 12px; }

  /* ---- Recently Viewed ---- */
  .recently-viewed-section { margin: 20px auto 0; padding: 0 8px; }
  .rv-card { min-width: 110px; max-width: 110px; }
  .rv-card-info { padding: 6px 8px; }
  .rv-card-title { font-size: 0.68rem; }
  .rv-card-price { font-size: 0.78rem; }

  /* ---- Steps ---- */
  .how-it-works { margin: 24px auto; padding: 0 8px; }
  .step { padding: 12px 8px; }
  .step-number { width: 36px; height: 36px; font-size: 1rem; }
  .step h3 { font-size: 0.88rem; }
  .step p { font-size: 0.78rem; }

  /* ---- Modals ---- */
  .modal-overlay { padding: 8px; }
  .modal-content { max-height: 90vh; border-radius: 10px; }
  .modal-header { padding: 12px 14px; }
  .modal-header h2 { font-size: 1rem; }
  .modal-body { padding: 12px 14px; }
  .fav-item { padding: 8px; gap: 10px; }
  .fav-item img { width: 55px; height: 55px; }
  .fav-title { font-size: 0.78rem; }
  .fav-price { font-size: 0.88rem; }
  .fav-buy-btn { font-size: 0.7rem; padding: 3px 8px; }

  /* ---- Alert dialog ---- */
  .alert-dialog { min-width: auto; width: calc(100vw - 32px); max-width: 300px; padding: 16px; }
  .alert-dialog h3 { font-size: 0.95rem; }

  /* ---- Footer ---- */
  .footer { padding: 16px 10px; margin-top: 24px; }
  .footer-brand { font-size: 0.82rem; }
  .footer-disclaimer { font-size: 0.68rem; }

  /* ---- Trending ---- */
  .trending-section { margin: 20px auto; padding: 0 8px; }

  /* ---- Autocomplete ---- */
  .autocomplete-item { padding: 8px 12px; font-size: 0.8rem; }
  .autocomplete-item .ac-type { font-size: 0.6rem; padding: 1px 6px; }

  /* ---- Newsletter Mobile ---- */
  .newsletter-section { padding: 32px 16px; }
  .newsletter-title { font-size: 1.3rem; }
  .newsletter-desc { font-size: 0.9rem; }
  .newsletter-input-wrap { flex-direction: column; }
  .newsletter-btn { width: 100%; }
  .newsletter-input { padding: 14px 18px; }
  .nl-popup { padding: 28px 20px; }
  .nl-popup-title { font-size: 1.2rem; }
}

/* Extra small screens (iPhone SE, Galaxy S8, etc.) */
@media (max-width: 380px) {
  .logo-text { display: none; }
  .nav-actions { gap: 1px; }
  .nav-icon-btn { font-size: 0.85rem; padding: 3px; }
  .theme-toggle-btn { font-size: 0.85rem; padding: 3px; }
  .lang-flag-btn { width: 24px; height: 24px; font-size: 0.85rem; }
  .hero-title { font-size: 1.1rem; }
  .hero-subtitle { font-size: 0.75rem; }
  .chip { font-size: 0.65rem; padding: 4px 8px; }
  .categories-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .category-icon { font-size: 1.2rem; }
  .category-name { font-size: 0.62rem; }
  .product-grid { gap: 6px; }
  .product-info { padding: 6px; }
  .product-title { font-size: 0.7rem; }
  .product-price { font-size: 0.85rem; }
  .product-cta { font-size: 0.7rem; padding: 6px; }
  .section-title { font-size: 0.95rem; }
  .message-bubble { font-size: 0.75rem; padding: 7px 10px; }
  #chatInput { font-size: 0.88rem; padding: 10px 14px; }
  .send-btn { width: 32px; height: 32px; }
}

/* ---- No results message ---- */
.no-results {
  text-align: center;
  padding: 32px;
  color: var(--text-light);
}

.no-results-icon { font-size: 3rem; margin-bottom: 12px; }
.no-results h3 { margin-bottom: 8px; color: var(--text); }

/* ============================================
   Dark Mode
   ============================================ */
[data-theme="dark"] {
  --bg: #1a1a2e;
  --card-bg: #16213e;
  --text: #e0e0e0;
  --text-light: #a0a0a0;
  --text-muted: #707070;
  --border: #2d3e52;
  --shadow: 0 2px 20px rgba(0,0,0,0.3);
  --shadow-hover: 0 8px 30px rgba(0,0,0,0.4);
}

[data-theme="dark"] .navbar {
  background: rgba(22, 33, 62, 0.95);
}

[data-theme="dark"] .skeleton-img,
[data-theme="dark"] .skeleton-text {
  background: linear-gradient(90deg, #1e2a45 25%, #253350 50%, #1e2a45 75%);
  background-size: 200%;
}

[data-theme="dark"] .fav-btn,
[data-theme="dark"] .share-btn {
  background: rgba(22, 33, 62, 0.9);
}

[data-theme="dark"] .footer {
  background: #0f0f23;
}

.theme-toggle-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: background 0.2s, transform 0.3s;
}

.theme-toggle-btn:hover {
  background: var(--bg);
  transform: rotate(30deg);
}

/* ============================================
   Autocomplete Dropdown
   ============================================ */
.input-wrapper {
  position: relative;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 200;
  display: none;
  overflow: hidden;
  margin-top: -4px;
}

.autocomplete-dropdown.show { display: block; }

.autocomplete-item {
  padding: 10px 18px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}

.autocomplete-item:last-child { border-bottom: none; }

.autocomplete-item:hover,
.autocomplete-item.active {
  background: rgba(255, 107, 0, 0.08);
}

.autocomplete-item .ac-icon {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.autocomplete-item .ac-text {
  flex: 1;
}

.autocomplete-item .ac-type {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 10px;
}

/* ============================================
   Recently Viewed Section
   ============================================ */
.recently-viewed-section {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.recently-viewed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.rv-clear-btn {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-muted);
  transition: all 0.2s;
  font-family: var(--font-body);
}

.rv-clear-btn:hover { border-color: var(--danger); color: var(--danger); }

.recently-viewed-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}

.recently-viewed-grid::-webkit-scrollbar { height: 4px; }
.recently-viewed-grid::-webkit-scrollbar-track { background: var(--bg); border-radius: 2px; }
.recently-viewed-grid::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 2px; }

.rv-card {
  min-width: 160px;
  max-width: 160px;
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  scroll-snap-align: start;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.rv-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.rv-card a { text-decoration: none; color: inherit; }

.rv-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.rv-card-info {
  padding: 8px 10px;
}

.rv-card-title {
  font-size: 0.78rem;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  line-height: 1.3;
}

.rv-card-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-dark);
}

/* ============================================
   Price Alerts
   ============================================ */
.alert-nav-btn {
  position: relative;
}

.alert-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--success);
  color: #fff;
  font-size: 0.65rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

[dir="rtl"] .alert-badge { right: auto; left: -2px; }

.alert-btn-card {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255,255,255,0.9);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}

[dir="rtl"] .alert-btn-card { right: auto; left: 10px; }

.product-card:hover .alert-btn-card { opacity: 1; }
.alert-btn-card:hover { transform: scale(1.15); }
.alert-btn-card.has-alert { opacity: 1; background: #e6fff5; }

[data-theme="dark"] .alert-btn-card {
  background: rgba(22, 33, 62, 0.9);
}

/* Alert dialog (small popup) */
.alert-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  z-index: 1100;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  min-width: 300px;
  text-align: center;
}

.alert-dialog h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: var(--text);
}

.alert-dialog .alert-price-input {
  width: 120px;
  padding: 8px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 1rem;
  text-align: center;
  font-family: var(--font-body);
  outline: none;
  margin: 8px 0 16px;
}

.alert-dialog .alert-price-input:focus { border-color: var(--primary); }

.alert-dialog-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.alert-dialog-btns button {
  padding: 8px 20px;
  border-radius: var(--radius-xs);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  transition: background 0.2s;
}

.alert-save-btn { background: var(--success); color: #fff; }
.alert-save-btn:hover { background: #00a884; }
.alert-cancel-btn { background: var(--bg); color: var(--text-light); border: 1px solid var(--border) !important; }
.alert-cancel-btn:hover { background: var(--border); }

.alert-dialog-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1050;
}

/* Price drop highlight in alerts modal */
.price-dropped {
  background: rgba(0, 184, 148, 0.1);
  border-color: var(--success) !important;
}

.price-drop-label {
  color: var(--success);
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .rv-card { min-width: 140px; max-width: 140px; }
  .alert-dialog { min-width: 280px; padding: 20px; }
}

@media (max-width: 480px) {
  .rv-card { min-width: 120px; max-width: 120px; }
  .alert-btn-card { opacity: 1; }
}

/* ============================================
   PWA Install Banner
   ============================================ */
.install-banner {
  display: none; /* disabled — push opt-in banner is the only bottom banner now */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  padding: 12px 16px;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.install-banner-content {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.install-icon { font-size: 1.6rem; flex-shrink: 0; }

.install-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.install-text strong {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: var(--text);
}

.install-text span {
  font-size: 0.78rem;
  color: var(--text-light);
}

.install-btn {
  background: var(--gradient);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
  transition: transform 0.2s;
}

.install-btn:hover { transform: scale(1.05); }

.install-dismiss {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.2s;
}

.install-dismiss:hover { color: var(--text); }

@media (max-width: 600px) {
  .install-banner { padding: 10px 12px; }
  .install-icon { font-size: 1.3rem; }
  .install-text strong { font-size: 0.82rem; }
  .install-text span { font-size: 0.72rem; }
  .install-btn { padding: 6px 16px; font-size: 0.78rem; }
}

/* ============================================
   Quick Replies (Smart Chatbot)
   ============================================ */
.quick-replies {
  display: flex;
  gap: 8px;
  padding: 8px 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: wrap;
  justify-content: center;
}

.quick-reply-btn {
  padding: 6px 14px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-body);
  transition: all 0.2s;
  background-image: linear-gradient(var(--card-bg), var(--card-bg)), var(--gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.quick-reply-btn:hover {
  background: var(--gradient);
  color: #fff;
  border-color: transparent;
  background-clip: border-box;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .quick-replies { padding: 6px 10px; gap: 6px; }
  .quick-reply-btn { font-size: 0.72rem; padding: 5px 10px; }
}

/* ============================================
   Spin & Win
   ============================================ */
.spin-float-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gradient);
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-spin 2s ease-in-out infinite;
  transition: transform 0.2s;
}

[dir="rtl"] .spin-float-btn { left: auto; right: 24px; }

.spin-float-btn:hover { transform: scale(1.1); }

@keyframes pulse-spin {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4); }
  50% { transform: scale(1.08); box-shadow: 0 6px 28px rgba(255, 107, 0, 0.55); }
}

.spin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s;
}

.spin-modal {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 30px 24px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.spin-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  transition: color 0.2s;
}

[dir="rtl"] .spin-modal-close { right: auto; left: 16px; }

.spin-modal-close:hover { color: var(--text); }

.spin-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: 16px;
  color: var(--text);
}

.spin-wheel-wrap {
  position: relative;
  margin: 0 auto 20px;
  width: 300px;
  height: 300px;
}

#spinCanvas {
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--primary), 0 0 0 10px var(--primary-light), 0 8px 30px rgba(255,107,0,0.3);
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

.spin-pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: var(--primary);
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.spin-btn {
  background: var(--gradient);
  color: #fff;
  border: none;
  padding: 12px 40px;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.spin-btn:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4); }
.spin-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.spin-result {
  margin-top: 20px;
  text-align: center;
}

.spin-result-icon { font-size: 2.5rem; margin-bottom: 8px; }

.spin-result-text {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.spin-result-sub {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 14px;
}

.spin-claim-btn {
  display: inline-block;
  background: var(--success);
  color: #fff;
  padding: 10px 28px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background 0.2s, transform 0.2s;
}

.spin-claim-btn:hover { background: #00a884; transform: scale(1.05); }

/* Spin dark mode */
[data-theme="dark"] .spin-modal {
  background: var(--card-bg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

[data-theme="dark"] #spinCanvas {
  box-shadow: 0 0 0 6px var(--primary), 0 0 0 10px var(--primary-dark), 0 8px 30px rgba(0,0,0,0.4);
}

/* Spin responsive */
@media (max-width: 380px) {
  .spin-float-btn { width: 48px; height: 48px; font-size: 1.5rem; bottom: 16px; left: 16px; }
  [dir="rtl"] .spin-float-btn { left: auto; right: 16px; }
  .spin-wheel-wrap { width: 240px; height: 240px; }
  #spinCanvas { width: 240px !important; height: 240px !important; }
  .spin-modal { padding: 20px 16px; }
  .spin-title { font-size: 1.2rem; }
  .spin-btn { padding: 10px 30px; font-size: 1rem; }
}

@media (max-width: 600px) {
  .spin-wheel-wrap { width: 260px; height: 260px; }
  #spinCanvas { width: 260px !important; height: 260px !important; }
}

/* ============================================
   Safe area for notch devices (iPhone X+)
   ============================================ */
@supports (padding-top: env(safe-area-inset-top)) {
  .navbar { padding-top: env(safe-area-inset-top); }
  .footer { padding-bottom: env(safe-area-inset-bottom); }
  .input-area { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ==============================================
   Points Program
   ============================================ */
.points-nav-btn { position: relative; }
.points-badge {
  background: linear-gradient(135deg, #f0c27f, #fc5c7d);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Points Toast */
.points-toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: var(--primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  z-index: 9999;
  box-shadow: 0 8px 25px rgba(255, 107, 0, 0.4);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}
.points-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.points-toast-icon { margin-inline-end: 6px; }

/* Points Modal */
.points-modal { max-width: 420px; }

.points-balance-display {
  text-align: center;
  padding: 24px 0 16px;
}
.points-balance-num {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, #f0c27f, #fc5c7d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1;
}
.points-balance-label {
  font-size: 1.1rem;
  color: #888;
  margin-top: 4px;
  display: block;
}

.points-section-title {
  font-size: 0.95rem;
  color: #666;
  margin: 16px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}
[data-theme="dark"] .points-section-title { color: #aaa; border-color: #444; }

/* Redeem Tiers Grid */
.points-tiers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.points-tier-card {
  background: #f8f9fd;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.points-tier-card:hover:not(.disabled) {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.2);
}
.points-tier-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
[data-theme="dark"] .points-tier-card { background: #2a2a3a; border-color: #444; }
[data-theme="dark"] .points-tier-card:hover:not(.disabled) { border-color: var(--primary-light); }

.tier-icon { font-size: 1.5rem; }
.tier-cost { font-size: 0.85rem; font-weight: 700; color: var(--primary); }
.tier-label { font-size: 0.8rem; color: #666; }
[data-theme="dark"] .tier-label { color: #aaa; }

/* Points History */
.points-history-list { max-height: 200px; overflow-y: auto; }
.points-history-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 8px;
}
[data-theme="dark"] .points-history-item { border-color: #333; }
.ph-pts {
  font-weight: 700;
  min-width: 40px;
  font-size: 0.9rem;
}
.ph-pts.positive { color: #00B894; }
.ph-pts.negative { color: #D63031; }
.ph-reason { flex: 1; font-size: 0.85rem; color: #555; }
[data-theme="dark"] .ph-reason { color: #bbb; }
.ph-date { font-size: 0.75rem; color: #999; }

@media (max-width: 380px) {
  .points-balance-num { font-size: 2.2rem; }
  .points-tiers-grid { gap: 8px; }
  .points-tier-card { padding: 10px 6px; }
}

/* ============================================
   FAQ Section
   ============================================ */
.faq-section {
  max-width: 800px;
  margin: 0 auto 30px;
  padding: 30px 20px;
}
.faq-title {
  text-align: center;
  font-family: 'Heebo', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.faq-item:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.faq-item summary {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '▼';
  font-size: 0.7rem;
  color: var(--primary);
  transition: transform 0.3s;
}
.faq-item[open] summary::after {
  transform: rotate(180deg);
}
.faq-item[open] summary {
  color: var(--primary);
  border-bottom: 1px solid #f0ecff;
}
.faq-item p {
  padding: 16px 20px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #636e72;
}
@media (max-width: 480px) {
  .faq-section { padding: 20px 12px; }
  .faq-title { font-size: 1.3rem; }
  .faq-item summary { padding: 14px 16px; font-size: 0.95rem; }
  .faq-item p { padding: 14px 16px; font-size: 0.9rem; }
}

/* ============================================
   AI Chat (Claude) - FAB + Panel
   ============================================ */
.chat-fab {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 900;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255,107,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
.chat-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(255,107,0,.55); }
.chat-fab.hidden { display: none; }
.chat-fab-label {
  position: absolute;
  bottom: 64px;
  right: 0;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 18px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  animation: fabBounce 2s ease infinite;
}
.chat-fab-label::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--primary);
}
@keyframes fabBounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Chat Panel */
.ai-chat-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 400px;
  height: 520px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 40px rgba(0,0,0,.2);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.ai-chat-panel.open { display: flex; }
.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
}
.ai-chat-header-avatar { font-size: 28px; }
.ai-chat-header-info { flex: 1; }
.ai-chat-header-name { font-weight: 700; font-size: 15px; }
.ai-chat-header-status { font-size: 11px; opacity: .85; }
.ai-chat-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.ai-chat-close:hover { background: rgba(255,255,255,.2); }

/* Messages */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-chat-msg {
  display: flex;
  gap: 8px;
  max-width: 88%;
  animation: chatFadeIn .3s ease;
}
.ai-chat-msg.user { flex-direction: row-reverse; align-self: flex-start; }
.ai-chat-msg-avatar { font-size: 24px; flex-shrink: 0; }
.ai-chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  direction: rtl;
}
.ai-chat-msg:not(.user) .ai-chat-msg-bubble {
  background: #f0f0f0;
  border-bottom-right-radius: 4px;
}
.ai-chat-msg.user .ai-chat-msg-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-left-radius: 4px;
}
@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Typing indicator */
.ai-chat-typing {
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: #f0f0f0;
  border-radius: 16px;
  width: fit-content;
}
.ai-chat-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #999;
  animation: typingDot 1.2s ease infinite;
}
.ai-chat-typing span:nth-child(2) { animation-delay: .2s; }
.ai-chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot {
  0%,100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* Chips */
.ai-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 8px;
}
.ai-chat-chip {
  background: #f0edff;
  color: var(--primary);
  border: 1px solid var(--primary-light);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s;
}
.ai-chat-chip:hover { background: var(--primary); color: #fff; }

/* Products in chat */
.ai-chat-products-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 16px 12px;
  scroll-snap-type: x mandatory;
}
.ai-chat-products-scroll::-webkit-scrollbar { height: 4px; }
.ai-chat-products-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.ai-chat-product-mini {
  flex-shrink: 0;
  width: 130px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition: box-shadow .2s;
}
.ai-chat-product-mini:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.ai-chat-product-mini img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
.ai-chat-product-mini-info {
  padding: 8px;
  font-size: 11px;
  line-height: 1.3;
  direction: rtl;
}
.ai-chat-product-mini-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.ai-chat-product-mini-price {
  font-weight: 700;
  color: var(--primary);
  font-size: 13px;
}

/* Input area */
.ai-chat-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #eee;
  background: #fafafa;
}
.ai-chat-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
  direction: rtl;
}
.ai-chat-input:focus { border-color: var(--primary); }
.ai-chat-send {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  transition: background .2s;
}
.ai-chat-send:hover { background: var(--primary-dark); }

/* Improved Install Banner */
.install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--primary), #8B7CF6);
  color: #fff;
  z-index: 999;
  padding: 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
  animation: slideUp .4s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.install-banner.hiding {
  animation: slideDown .3s ease forwards;
}
@keyframes slideDown {
  to { transform: translateY(100%); }
}
.install-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  max-width: 600px;
  margin: 0 auto;
}
.install-icon { font-size: 32px; }
.install-text { flex: 1; direction: rtl; }
.install-text strong { display: block; font-size: 15px; margin-bottom: 2px; }
.install-text span { font-size: 13px; opacity: .9; }
.install-btn {
  background: #fff;
  color: var(--primary);
  border: none;
  border-radius: 24px;
  padding: 8px 20px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.install-btn:hover { background: #f0edff; }
.install-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
}
.install-dismiss:hover { color: #fff; }

/* Mobile responsive for chat */
@media (max-width: 768px) {
  .ai-chat-panel {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .chat-fab {
    bottom: 20px;
    right: 14px;
    width: auto;
    height: 48px;
    font-size: 20px;
    border-radius: 24px;
    padding: 0 16px;
    gap: 6px;
  }
  .chat-fab-label {
    position: static;
    background: none;
    color: white;
    padding: 0;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    animation: none;
  }
  .chat-fab-label::after { display: none; }
}
@media (min-width: 769px) {
  .install-banner { display: none !important; }
}

/* ============================================================
   Price Comparison Modal
   ============================================================ */
.compare-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  z-index: 10000; cursor: pointer;
}
.compare-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff; border-radius: 20px;
  padding: 24px; max-width: 520px;
  width: calc(100vw - 24px); max-height: 85vh;
  overflow-y: auto; z-index: 10001;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: compareSlideIn 0.3s ease;
}
@keyframes compareSlideIn {
  from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.compare-close {
  position: absolute; top: 12px; right: 12px;
  background: #f0f0f0; border: none; border-radius: 50%;
  width: 32px; height: 32px; font-size: 16px;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; z-index: 2;
}
.compare-close:hover { background: #ddd; }

.compare-section-label {
  font-size: 12px; font-weight: 600; color: #888;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 8px;
}
.compare-original-card {
  display: flex; gap: 12px; align-items: center;
  padding: 12px; background: #f8f9fa; border-radius: 12px;
  border: 2px solid #e8e8e8;
}
.compare-original-card img {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: 8px; flex-shrink: 0;
}
.compare-original-title {
  font-size: 13px; color: #333; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.compare-original-price {
  font-size: 18px; font-weight: 700; color: #e74c3c;
  margin-top: 4px;
}
.compare-divider {
  text-align: center; margin: 16px 0; position: relative;
}
.compare-divider::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: #e0e0e0;
}
.compare-divider span {
  background: #fff; padding: 0 12px; position: relative;
  font-weight: 600; color: #27ae60; font-size: 14px;
}

/* Loading */
.compare-loading {
  text-align: center; padding: 40px 20px;
}
.compare-spinner {
  width: 40px; height: 40px; border: 4px solid #f0f0f0;
  border-top-color: #6c5ce7; border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.compare-loading p { color: #888; font-size: 14px; }

/* Alternative cards */
.compare-alt-card {
  display: flex; gap: 12px; padding: 14px;
  border: 1px solid #eee; border-radius: 14px;
  margin-bottom: 10px; position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.compare-alt-card:hover {
  border-color: #27ae60; box-shadow: 0 4px 12px rgba(39,174,96,0.15);
}
.compare-alt-rank {
  position: absolute; top: -6px; left: -6px;
  background: #27ae60; color: #fff; width: 24px; height: 24px;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.compare-alt-card img {
  width: 80px; height: 80px; object-fit: cover;
  border-radius: 10px; flex-shrink: 0;
}
.compare-alt-info { flex: 1; min-width: 0; }
.compare-alt-title {
  font-size: 12px; color: #333; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 4px;
}
.compare-alt-price-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.compare-alt-price {
  font-size: 18px; font-weight: 700; color: #27ae60;
}
.compare-savings-badge {
  background: #27ae60; color: #fff; padding: 2px 8px;
  border-radius: 10px; font-size: 11px; font-weight: 600;
}
.compare-alt-meta {
  font-size: 11px; color: #999; margin-bottom: 4px;
}
.compare-alt-rating { color: #f39c12; margin-left: 4px; }
.compare-ai-note {
  font-size: 11px; color: #6c5ce7; font-style: italic;
  margin: 4px 0; line-height: 1.3;
}
.compare-alt-cta {
  display: inline-block; background: #27ae60; color: #fff;
  padding: 6px 14px; border-radius: 8px; font-size: 12px;
  font-weight: 600; text-decoration: none; margin-top: 4px;
  transition: background 0.2s;
}
.compare-alt-cta:hover { background: #219a52; }

/* Summary */
.compare-summary {
  background: #f0f7ff; padding: 12px 16px; border-radius: 12px;
  margin-top: 12px; font-size: 13px; color: #333; line-height: 1.4;
}
.compare-summary-label {
  font-weight: 600; color: #6c5ce7;
}

/* Empty / Error states */
.compare-empty, .compare-error {
  text-align: center; padding: 30px; color: #888;
}
.compare-error button {
  background: #6c5ce7; color: #fff; border: none;
  padding: 8px 20px; border-radius: 8px; cursor: pointer;
  margin-top: 10px; font-size: 14px;
}

/* Compare button on product card */
.compare-btn {
  background: var(--primary); border: none;
  border-radius: 8px; padding: 6px 4px;
  font-size: 0.7em; font-weight: 700; font-family: 'Heebo', 'Assistant', sans-serif;
  color: #fff; cursor: pointer; display: flex;
  flex: 1;
  align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s, background 0.2s;
  white-space: nowrap; margin: 0;
}
.compare-btn:hover {
  transform: scale(1.05); background: linear-gradient(135deg, #ffa726, #ef6c00);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .compare-modal {
    width: calc(100vw - 16px); max-height: 90vh;
    padding: 16px; border-radius: 16px;
  }
  .compare-alt-card img { width: 60px; height: 60px; }
  .compare-alt-price { font-size: 16px; }
}

/* ===== 2026-07-04: Compact top — products above the fold, less text ===== */
.hero { padding: 12px 16px 14px !important; }
.hero-title { font-size: 1.25rem !important; margin-bottom: 2px !important; line-height: 1.2 !important; }
.hero-icon { font-size: 1.05rem !important; }
.hero-subtitle { font-size: 0.8rem !important; opacity: .9; }
.chat-section { margin-top: 8px !important; }
.chat-messages { padding: 0 !important; min-height: 0 !important; }
/* deals header: compact so products show sooner */
.daily-deals-section { margin-top: 12px !important; }
.daily-deals-section .section-title { font-size: 1.15rem !important; margin: 4px 0 6px !important; line-height: 1.2 !important; }
.daily-deals-section .section-subtitle, .deals-subtitle { font-size: .78rem !important; margin-bottom: 8px !important; }
@media (max-width: 600px){
  .hero { padding: 10px 12px 12px !important; }
  .hero-title { font-size: 1.15rem !important; }
  .daily-deals-section .section-title { font-size: 1.05rem !important; }
}

/* Instant results: real bestsellers shown while the exact search loads */
.instant-banner{text-align:center;padding:10px 14px;margin:0 0 12px;background:linear-gradient(135deg,#fff5ec,#f0ecff);border:1px solid #ffd9c7;border-radius:12px;color:var(--primary);font-weight:600;font-size:.95rem;animation:instantPulse 1.3s ease-in-out infinite}
@keyframes instantPulse{0%,100%{opacity:1}50%{opacity:.55}}
.instant-loading .product-card{opacity:.62;transition:opacity .25s}

/* ============================================================
   Product card v2 — 2026-07-19
   The old card carried 11 competing elements in a ~180px-wide
   mobile column. This reduces it to six, in the order a shopper
   actually compares on a marketplace: image, price, name, proof.
   Appended last so it wins on cascade order; !important only
   where the rules it replaces already used it.
   ============================================================ */
.product-card {
  position: relative;            /* the favourite button is now a direct child */
  display: flex;
  flex-direction: column;
}
.pc-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
/* 4:5 portrait shows materially more of a garment than a square
   at the same column width. Source images are 1:1, so centre-crop. */
.product-image { aspect-ratio: 4 / 5 !important; object-fit: cover; }

.product-info {
  padding: 9px 10px 10px !important;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
/* Price leads. On a marketplace it's the primary comparison
   attribute, so it outranks the product name — the opposite of
   how a boutique would set it. */
.product-price-row { margin: 0 !important; gap: 5px !important; align-items: baseline; }
.product-card .product-price { font-size: 1.18rem !important; font-weight: 800 !important; letter-spacing: -.02em; }
.product-card .product-original-price { font-size: .72rem; }
.product-card .product-discount {
  background: none; color: var(--text-muted); font-weight: 600;
  font-size: .7rem !important; padding: 0 !important; border-radius: 0;
}
/* Two lines, always. AliExpress titles are keyword-stuffed and read
   as a description rather than a name past that. min-height keeps
   every card the same height so they stay comparable. */
.product-card .product-title {
  font-size: .76rem !important;
  font-weight: 400;
  line-height: 1.3;
  min-height: 2.6em;
  margin: 0;
  color: var(--text-muted);
}
/* Rendered even when the API returns no rating — a collapsing row is
   what makes card heights differ. */
.product-card .product-meta {
  margin: 0 !important;
  min-height: 1.25em;
  justify-content: flex-start;
  gap: 7px;
  font-size: .72rem !important;
}
.pc-rating { font-weight: 700; color: var(--text); white-space: nowrap; }
.pc-rating-none { color: var(--text-muted); font-weight: 400; }
.pc-sold { color: var(--text-muted); white-space: nowrap; }

.pc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: auto; padding-top: 5px; min-height: 1.1em;
}
.pc-ship { font-size: .66rem; color: #1a7f4b; font-weight: 600; }
/* Naming the destination up front removes the surprise of landing on a
   foreign marketplace, which is where trust in a middleman breaks. */
.pc-src { font-size: .62rem; color: var(--text-muted); letter-spacing: .03em; margin-inline-start: auto; }

/* One badge, on roughly a quarter of cards (see assignBadges). A label
   that appears on everything ranks nothing. */
.pc-badge {
  position: absolute; top: 8px; inset-inline-start: 8px;
  font-size: .66rem; font-weight: 800; letter-spacing: .01em;
  padding: 3px 7px; border-radius: 6px; color: #fff;
  backdrop-filter: saturate(1.2);
}
.pc-badge-deal  { background: #d92b1f; }
.pc-badge-proof { background: rgba(20,18,16,.86); }

.product-card .fav-btn { z-index: 2; }

@media (max-width: 600px) {
  .product-info { padding: 7px 8px 8px !important; }
  .product-card .product-price { font-size: 1.05rem !important; }
  .product-card .product-title { font-size: .72rem !important; }
}

/* ============================================================
   Social-familiar shell — 2026-07-19
   The engine competes for a tap against apps people already open
   all day. Borrowing those apps' shapes means nobody has to learn
   this interface: a ringed circle means "tap me", a heart means
   "save", a paper plane means "send to a friend".
   ============================================================ */

/* --- Instagram-style story rail for categories --- */
.categories-grid.story-rail {
  display: flex !important;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.categories-grid.story-rail::-webkit-scrollbar { display: none; }
.story {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 74px;
  scroll-snap-align: start;
}
/* The unread-story gradient ring — the single most recognisable
   shape in the apps this audience already has open. */
.story-ring {
  width: 66px; height: 66px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 200deg, #f9a03f, #f45d5d, #d6249f, #a02fc0, #f9a03f);
  display: grid; place-items: center;
  transition: transform .15s ease;
}
.story:active .story-ring { transform: scale(.94); }
.story-face {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--card-bg);
  display: grid; place-items: center;
  font-size: 27px;
  box-shadow: inset 0 0 0 2px var(--bg);
}
.story-name {
  font-size: .68rem;
  color: var(--text);
  line-height: 1.2;
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Marketplace-style cards --- */
/* Flat, white, hairline-bordered, generous radius: the visual language
   of Facebook Marketplace / Instagram Shop rather than a banner ad. */
.product-card {
  border-radius: 14px !important;
  border: 1px solid var(--line, #e9e9ec) !important;
  box-shadow: none !important;
  transition: transform .14s ease, box-shadow .14s ease;
}
.product-card:active { transform: scale(.985); }
@media (hover: hover) {
  .product-card:hover {
    box-shadow: 0 6px 20px -8px rgba(0,0,0,.18) !important;
    transform: translateY(-2px);
  }
}

/* Save + send, bottom-left of the image, the way a social post carries them. */
.pc-actions {
  position: absolute;
  top: 8px; inset-inline-end: 8px;
  display: flex; flex-direction: column; gap: 7px;
  z-index: 2;
}
.product-card .fav-btn,
.product-card .pc-share {
  position: static !important;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  cursor: pointer;
  color: #262626;
  font-size: .85rem;
  padding: 0;
}
.product-card .pc-share svg { display: block; }
.product-card .fav-btn:active,
.product-card .pc-share:active { transform: scale(.9); }

@media (max-width: 600px) {
  .story-ring { width: 60px; height: 60px; }
  .story-face { font-size: 24px; }
  .story { width: 68px; }
  .categories-grid.story-rail { gap: 13px; }
  .product-card .fav-btn,
  .product-card .pc-share { width: 29px; height: 29px; }
}

/* ============================================================
   Dense results grid — 2026-07-19
   Three across on mobile. A shopper comparing prices wants to see
   as many options per scroll as she can judge from a thumbnail;
   at ~110px a garment is still readable, and the screen holds 50%
   more of them than the two-column layout did.
   Every text size below comes down to match the narrower column —
   left alone they wrap and the cards stop lining up.
   ============================================================ */
@media (max-width: 700px) {
  #productGrid.product-grid, #trendingGrid.product-grid,
  #dealsGrid.product-grid, #recentlyViewedGrid.product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    /* Every row the same height. Without this a row containing a card that
       carries a free-shipping line sits taller than the next, and the grid
       reads as misaligned — the thing that makes shoppers stop comparing. */
    grid-auto-rows: 1fr;
  }
  #productGrid .product-card, #trendingGrid .product-card,
  #dealsGrid .product-card, #recentlyViewedGrid .product-card {
    border-radius: 10px !important;
  }
  #productGrid .product-image, #trendingGrid .product-image,
  #dealsGrid .product-image, #recentlyViewedGrid .product-image {
    aspect-ratio: 4 / 5 !important;
    object-fit: cover;
  }
  #productGrid .product-info, #trendingGrid .product-info,
  #dealsGrid .product-info, #recentlyViewedGrid .product-info {
    padding: 7px 7px 8px !important;
    gap: 2px;
  }
  #productGrid .product-price, #trendingGrid .product-price,
  #dealsGrid .product-price, #recentlyViewedGrid .product-price {
    font-size: .95rem !important;
  }
  #productGrid .product-original-price, #trendingGrid .product-original-price,
  #dealsGrid .product-original-price, #recentlyViewedGrid .product-original-price {
    font-size: .6rem;
  }
  #productGrid .product-discount, #trendingGrid .product-discount,
  #dealsGrid .product-discount, #recentlyViewedGrid .product-discount {
    font-size: .6rem !important;
  }
  #productGrid .product-title, #trendingGrid .product-title,
  #dealsGrid .product-title, #recentlyViewedGrid .product-title {
    font-size: .64rem !important;
    line-height: 1.32;
    min-height: 2.64em;
  }
  /* nowrap so a long rating line clips instead of wrapping and
     pushing this card taller than the two beside it */
  #productGrid .product-meta, #trendingGrid .product-meta,
  #dealsGrid .product-meta, #recentlyViewedGrid .product-meta {
    font-size: .6rem !important;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
  }
  #productGrid .pc-foot, #trendingGrid .pc-foot,
  #dealsGrid .pc-foot, #recentlyViewedGrid .pc-foot { padding-top: 4px; }
  #productGrid .pc-ship, #trendingGrid .pc-ship,
  #dealsGrid .pc-ship, #recentlyViewedGrid .pc-ship { font-size: .55rem; }
  #productGrid .pc-src, #trendingGrid .pc-src,
  #dealsGrid .pc-src, #recentlyViewedGrid .pc-src { font-size: .52rem; }
  #productGrid .pc-badge, #trendingGrid .pc-badge,
  #dealsGrid .pc-badge, #recentlyViewedGrid .pc-badge {
    font-size: .55rem; padding: 2px 5px; top: 5px;
  }
  /* the save/share pair shrinks with the card and stays in the corner */
  #productGrid .pc-actions, #trendingGrid .pc-actions,
  #dealsGrid .pc-actions, #recentlyViewedGrid .pc-actions {
    top: 4px; bottom: auto; inset-inline-end: 4px;
    flex-direction: column; gap: 4px;
  }
  #productGrid .fav-btn, #trendingGrid .fav-btn,
  #dealsGrid .fav-btn, #recentlyViewedGrid .fav-btn,
  #productGrid .pc-share, #trendingGrid .pc-share,
  #dealsGrid .pc-share, #recentlyViewedGrid .pc-share {
    width: 22px !important; height: 22px !important; font-size: .62rem;
  }
  #productGrid .pc-share svg, #trendingGrid .pc-share svg,
  #dealsGrid .pc-share svg, #recentlyViewedGrid .pc-share svg {
    width: 11px; height: 11px;
  }
}

/* Narrow phones get two across, not three. At 375px a third column leaves
   ~114px per card, which is too small to judge a garment from; at two it is
   ~175px. Large phones and small tablets (480px and up) keep three, where
   there is width to spare. The type scales back up because the wider card
   can carry it without wrapping. */
@media (max-width: 479px) {
  #productGrid.product-grid, #trendingGrid.product-grid,
  #dealsGrid.product-grid, #recentlyViewedGrid.product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  #productGrid .product-info, #trendingGrid .product-info,
  #dealsGrid .product-info, #recentlyViewedGrid .product-info {
    padding: 8px 9px 9px !important;
  }
  #productGrid .product-price, #trendingGrid .product-price,
  #dealsGrid .product-price, #recentlyViewedGrid .product-price {
    font-size: 1.12rem !important;
  }
  #productGrid .product-original-price, #trendingGrid .product-original-price,
  #dealsGrid .product-original-price, #recentlyViewedGrid .product-original-price {
    font-size: .72rem;
  }
  #productGrid .product-discount, #trendingGrid .product-discount,
  #dealsGrid .product-discount, #recentlyViewedGrid .product-discount {
    font-size: .7rem !important;
  }
  #productGrid .product-title, #trendingGrid .product-title,
  #dealsGrid .product-title, #recentlyViewedGrid .product-title {
    font-size: .76rem !important;
  }
  #productGrid .product-meta, #trendingGrid .product-meta,
  #dealsGrid .product-meta, #recentlyViewedGrid .product-meta {
    font-size: .7rem !important;
    gap: 6px;
  }
  #productGrid .pc-ship, #trendingGrid .pc-ship,
  #dealsGrid .pc-ship, #recentlyViewedGrid .pc-ship { font-size: .66rem; }
  #productGrid .pc-src, #trendingGrid .pc-src,
  #dealsGrid .pc-src, #recentlyViewedGrid .pc-src { font-size: .62rem; }
  #productGrid .pc-badge, #trendingGrid .pc-badge,
  #dealsGrid .pc-badge, #recentlyViewedGrid .pc-badge {
    font-size: .64rem; padding: 3px 6px;
  }
  #productGrid .fav-btn, #trendingGrid .fav-btn,
  #dealsGrid .fav-btn, #recentlyViewedGrid .fav-btn,
  #productGrid .pc-share, #trendingGrid .pc-share,
  #dealsGrid .pc-share, #recentlyViewedGrid .pc-share {
    width: 27px !important; height: 27px !important; font-size: .78rem;
  }
  #productGrid .pc-share svg, #trendingGrid .pc-share svg,
  #dealsGrid .pc-share svg, #recentlyViewedGrid .pc-share svg {
    width: 13px; height: 13px;
  }
}

/* ============================================================
   Warm-sand shell — 2026-07-19
   Colour lives in one block: the head. Logo, icons and search sit
   on deep taupe, and everything below is quiet sand so the product
   images and prices are the only things competing for attention.
   ============================================================ */
.navbar {
  background: var(--deep) !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
}
/* The wordmark's navy would vanish on the dark bar, so the navbar
   uses a recoloured copy that keeps the orange mark. */
.navbar .logo-img { content: url("../icons/logo-light.png"); }
.navbar .logo-text { color: #fff; }
.navbar .nav-actions,
.navbar .nav-actions * { color: #E4D9DE; }
.navbar .nav-btn,
.navbar .icon-btn { color: #E4D9DE; }

/* The hero carries the search, so it continues the same block of colour
   rather than starting a second one. */
.hero {
  background: var(--deep) !important;
  padding: 18px 20px 26px !important;
}
.hero h1, .hero .hero-title { color: #fff !important; }
.hero p, .hero .hero-subtitle { color: #C9BCC2 !important; }

/* Flat, square-ish input with a solid orange action — the one place
   the accent appears above the fold. */
.chat-input-wrapper, .search-box {
  border-radius: var(--radius-sm) !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(63,48,55,.18) !important;
}
.send-btn, .search-submit {
  background: var(--primary) !important;
  border-radius: var(--radius-xs) !important;
}

/* Suggestion chips read as navigation, not as decoration. */
.chip {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-light) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
.chip:hover, .chip:active {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* The deals block was a full orange panel wrapping the cards; it now reads as
   a section heading with the products on the page ground, like every other row. */
.deals-section, .deals-container {
  background: transparent !important;
  border-radius: 0 !important;
  padding-inline: 0 !important;
}
.deals-section h2, .deals-section h3,
.deals-title { color: var(--text) !important; }
.deals-subtitle { color: var(--text-muted) !important; }

/* Leftovers from the previous palette that still shouted over the new one.
   Found by scanning the rendered page for background colours outside the
   palette rather than by reading the stylesheet. */

/* A 388px-tall orange gradient panel was the loudest thing on the page after
   the head — and two large blocks of colour compete instead of one leading. */
.newsletter-section {
  background: var(--card-bg) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.newsletter-section h2, .newsletter-section h3 { color: var(--text) !important; }
.newsletter-section p { color: var(--text-muted) !important; }
.newsletter-section input { border: 1px solid var(--border) !important; }
.nl-btn, .newsletter-section button {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: var(--radius-xs) !important;
}

/* The story rail came from the earlier "make it feel like Instagram" pass. The
   rainbow conic ring is exactly the kind of ornament this redesign is removing,
   so the ring becomes a quiet hairline that still reads as tappable. */
.story-ring {
  background: var(--border) !important;
  padding: 2px !important;
}
.story:active .story-ring, .story:hover .story-ring {
  background: var(--primary) !important;
}
.story-face { box-shadow: inset 0 0 0 2px var(--card-bg) !important; }

/* Small orange gradients on chrome — flatten to the accent or the neutral. */
.countdown-timer { background: var(--deep) !important; color: #fff !important;
  border-radius: var(--radius-xs) !important; }
.points-toast { background: var(--deep) !important; }
.history-container { background: transparent !important; }
.chat-input, #chatInput, .image-search-btn { background: var(--card-bg) !important; }

/* The "דילים חמים" panel had its orange gradient written directly into the
   rule rather than coming from a token, so the palette swap never reached it.
   It was the second large block of colour on the page, competing with the head.
   Now it reads as a section: heading on the page ground, products below. */
.promo-banner {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
}
.promo-title { color: var(--text) !important; }
.promo-subtitle { color: var(--text-muted) !important; opacity: 1 !important; }

/* Carousel arrows. They were white-on-translucent-white, designed for the old
   orange panel; against the new light panel they disappeared and nobody could
   tell the gallery scrolled. Solid dark disc + white glyph reads as a control
   on both the panel and a product photo underneath. */
.promo-scroll-btn {
  background: var(--deep) !important;
  border: none !important;
  color: #fff !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 1.5em !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(63, 48, 55, .35) !important;
  opacity: .96;
  display: grid !important;
  place-items: center !important;
  padding-bottom: 3px !important;   /* optically centres the ‹ › glyph */
  z-index: 3 !important;
}
.promo-scroll-btn:hover,
.promo-scroll-btn:focus-visible {
  background: var(--primary) !important;
  opacity: 1;
}
.promo-scroll-btn:active { transform: translateY(-50%) scale(.92) !important; }
/* pull them just clear of the cards so they read as chrome, not as a badge */
.promo-scroll-right { left: -4px !important; }
.promo-scroll-left  { right: -4px !important; }

/* The hint under the row was white text on what is now a light panel. */
.promo-scroll-hint { color: var(--text-muted) !important; }

/* ============================================================
   SEARCH MODE — collapse everything that is not a result
   ============================================================
   Measured on a real render: after a search the first product card sat at
   y=2481px, over three phone screens down. Someone who typed a query has
   already said what they want; the browse furniture is in the way.

   Element heights measured live, not guessed:
     .hero 341 · .chat-section 435 · #promoBannerSection 627
     #resultsStoryRail 93 · #filtersBar 306 · #quickFilters 152
     #relatedSearches 211
   Everything returns when the results are cleared.                        */

body.has-results .hero,
body.has-results #promoBannerSection,
body.has-results #trendingSection {
  display: none !important;
}

/* Keep the "found N products" line and the sort chips, drop the panel padding. */
body.has-results .chat-section {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
body.has-results .chat-section .msg-avatar,
body.has-results .chat-section .user-msg {
  display: none !important;
}

/* On a phone these four cost ~760px between the query and the first product.
   They are discovery aids — useful while browsing, an obstacle after a search. */
@media (max-width: 768px) {
  body.has-results #resultsStoryRail,
  body.has-results #quickFilters,
  body.has-results #relatedSearches {
    display: none !important;
  }
  body.has-results #filtersBar {
    max-height: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  body.has-results.filters-open #filtersBar {
    max-height: 500px;
    padding: revert !important;
    margin: revert !important;
  }
}

/* ---------------------------------------------------------------------------
   Trending / Daily-deals product images: show the whole picture, never crop it.

   These rows carry images from three sources with three different shapes —
   AliExpress product photos (square), the collages the seller posts in the
   WhatsApp groups (square, often 2-up), and the occasional portrait shot.
   Forcing all of them into a 4:5 frame with object-fit:cover cut the top off
   models, sliced brand logos in half, and squeezed the 2-up collages.

   A square frame with object-fit:contain matches the dominant 1:1 source, so
   most images fill it exactly with no letterboxing, and anything off-ratio is
   shown whole on the card's own white instead of being cropped. The product is
   the thing being sold — cropping it is the one thing the card must not do.
   --------------------------------------------------------------------------- */
#trendingGrid .product-image,
#dealsGrid .product-image,
#recentlyViewedGrid .product-image {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: var(--card-bg, #fff);
}

/* Professional cleanup (2026-08-08): emoji icons removed → hide any now-empty icon
   containers gracefully, and retire the childish spin-wheel gamification. */
.hero-icon:empty,.message-avatar:empty,.newsletter-icon:empty,.install-icon:empty,
.ai-chat-header-avatar:empty,.ai-chat-msg-avatar:empty,.promo-badge:empty{display:none !important}
.spin-float-btn{display:none !important}

/* Category rail → clean professional text chips (was emoji-circle "stories") */
.story-rail{display:flex !important;gap:9px !important;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.story-rail::-webkit-scrollbar{display:none}
.story-rail .story{flex:0 0 auto !important;flex-direction:row !important;width:auto !important;
  padding:8px 17px !important;border:1px solid #e9e6e1 !important;border-radius:30px !important;
  background:#fff !important;cursor:pointer;transition:border-color .15s,color .15s;gap:0 !important}
.story-rail .story:hover{border-color:#17150f !important}
.story-rail .story .story-ring,.story-rail .story .story-face{display:none !important}
.story-rail .story .story-name{font-size:13px !important;font-weight:600 !important;color:#54504a !important;
  white-space:nowrap !important;margin:0 !important;max-width:none !important}
.story-rail .story:hover .story-name{color:#17150f !important}
[data-theme="dark"] .story-rail .story{background:#1a1a2e !important;border-color:#2a2a40 !important}
[data-theme="dark"] .story-rail .story .story-name{color:#cbd5e1 !important}