/* =====================================================
   ARRZONE - MAIN.CSS v1.0 (COMPLETE MERGE)
   ✅ Components + Pages + Responsive = ONE FILE
   ✅ Desktop + Mobile Together | ✅ No Conflicts
   ✅ Production Ready | ✅ Easy Maintenance
   
   📋 TABLE OF CONTENTS
   ===================================================== */

/*╔══════════════════════════════════════════════════════╗
  ║  ARRZONE MAIN.CSS - ALL COMPONENTS & PAGES          ║
  ╚══════════════════════════════════════════════════════╝

  🏠 HOMEPAGE COMPONENTS (Lines 50-1200)
  ────────────────────────────────────────────────────
  0. Homepage Section Wrappers (CRITICAL!)
  1. Mega Dropdown
  2. Hero Slider
  3. Trust Stats Ticker
  4. Deal Cards (270px)
  5. Store Cards (240×90px)
  6. Category Cards (240×90px)
  7. Hub Sections (Hero, Stats, Filters, Cross-Links)
  8. Newsletter & Offer Cards
  9. How It Works

  📄 PAGES (Lines 1200-2500)
  ────────────────────────────────────────────────────
  10. Single Deal Page (Premium Design)
  11. Archive Page (Sidebar + Grid)
  12. Search Results Page
  
  🔧 UTILITIES (Lines 2500-END)
  ────────────────────────────────────────────────────
  13. Helper Classes
  14. Responsive Utilities

*/


/* =====================================================
   0️⃣ HOMEPAGE SECTION WRAPPERS (CRITICAL - DO NOT REMOVE!)
   ===================================================== */

/* Section Containers - ALL Homepage Sections */
.homepage-section,
.featured-deals-section,
.hot-deals-section,
.trending-deals-section,
.stores-section,
.categories-section,
.verified-deals-section,
.expiring-deals-section,
.latest-deals-section,
.special-offers-section,
.how-it-works-section {
  padding: 10px 0;
  margin-bottom: 24px;
}

/* Section Headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-20);
  padding: 0 var(--space-4);
}

.section-title {
  font-size: 24px;
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.section-icon {
  font-size: 28px;
}

.view-all-link {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--accent-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  transition: all var(--transition-base);
}

.view-all-link:hover {
  gap: var(--space-10);
  color: var(--accent-hover);
}

/* ⚡ CRITICAL: Carousel Base Styles - Makes Horizontal Scrolling Work */
.deals-carousel,
.deals-grid,
.homepage-section .deals-carousel,
.homepage-section .deals-grid,
.homepage-section .featured-deals-grid,
.featured-deals-section .deals-carousel,
.featured-deals-section .deals-grid,
.hot-deals-section .deals-carousel,
.hot-deals-section .deals-grid,
.trending-deals-section .deals-carousel,
.trending-deals-section .deals-grid,
.verified-deals-section .deals-carousel,
.expiring-deals-section .deals-carousel,
.latest-deals-section .deals-carousel,
.stores-section .deals-carousel,
.categories-section .deals-carousel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--space-16);
  padding: var(--space-4) var(--space-4) var(--space-16);
  margin: 0 calc(var(--space-4) * -1);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) var(--bg-section);
}

/* Scrollbar Styling */
.deals-carousel::-webkit-scrollbar {
  height: 6px;
}

.deals-carousel::-webkit-scrollbar-track {
  background: var(--bg-section);
  border-radius: 3px;
}

.deals-carousel::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 3px;
}

.deals-carousel::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

/* Mobile Responsive - Homepage Section Wrappers */
@media (max-width: 479px) {
  .homepage-section,
  .featured-deals-section,
  .hot-deals-section,
  .trending-deals-section,
  .stores-section,
  .categories-section {
    padding: 10px 0;
    margin-bottom: 10px;
  }
  
  .section-header {
    margin-bottom: var(--space-12);
    padding: 0;
  }
  
  .section-title {
    font-size: 18px;
    gap: var(--space-8);
  }
  
  .section-icon {
    font-size: 20px;
  }
  
  .view-all-link {
    font-size: 12px;
  }
  
  .deals-carousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 10px !important;
    padding: 0 12px 10px !important;
    margin: 0 !important;
  }
}

/* ============================================
   🎯 MINIMAL FIX: Just Add Padding to Container
   ============================================ */

/* Add breathing room on left/right only */
.deals-grid {
  padding-left: 20px !important;  /* Was: 4px */
  padding-right: 20px !important; /* Was: 4px */
}

/* Section - Add a bit more top/bottom space */
.homepage-section {
  padding-top: 40px !important;   /* Was: 10px */
  padding-bottom: 40px !important; /* Was: 0px */
}

/* =====================================================
   1️⃣ MEGA DROPDOWN
   ===================================================== */

.dropdown-arrow {
  font-size: 10px;
  transition: transform var(--transition-base);
  display: inline-block;
}

.has-dropdown:hover .dropdown-arrow {
  transform: rotate(-180deg);
}

.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--bg-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-12);
  margin-top: var(--space-8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: var(--z-dropdown);
}

.has-dropdown:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.mega-dropdown-item {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  transition: background var(--transition-base);
  color: var(--text-dark);
  text-decoration: none;
  display: block;
}

.mega-dropdown-item:hover {
  background: var(--bg-section);
}

.mega-dropdown-item .menu-icon {
  font-size: 18px;
  margin-right: var(--space-6);
  opacity: 0.7;
}

/* Mobile Responsive - Mega Dropdown */
@media (max-width: 767px) {
  .mega-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* =====================================================
   2️⃣ HERO SLIDER - COMPLETE & PRODUCTION READY ✨
   Front Page Hero Banner
   ===================================================== */

.hero-slider-container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 400px;
  margin: -8px auto var(--space-24);
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  background: var(--bg-dark);
}

.hero-slider-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), visibility 0.8s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.hero-slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
  pointer-events: none;
  z-index: 2;
}

.hero-slide-content {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 600px;
  color: var(--text-white);
}

.hero-content-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.hero-title {
  font-size: 48px;
  font-weight: var(--weight-black);
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-subtitle {
  font-size: var(--font-h3);
  line-height: 1.5;
  opacity: 0.95;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hero-cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-14) var(--space-28);
  background: var(--color-primary);
  color: var(--text-white);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
  align-self: flex-start;
  box-shadow: 0 4px 12px rgba(255,107,53,0.3);
}

.hero-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,107,53,0.4);
  color: var(--text-white);
}

.cta-arrow {
  font-size: 20px;
  line-height: 1;
  transition: transform var(--transition-base);
}

.hero-cta-button:hover .cta-arrow {
  transform: translateX(4px);
}

/* Dots Navigation */
.hero-dots-container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
  background: rgba(0,0,0,0.4);
  padding: 10px 16px;
  border-radius: 30px;
  backdrop-filter: blur(10px);
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: 2px solid rgba(255,255,255,0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  outline: none;
}

.hero-dot:hover {
  background: rgba(255,255,255,0.8);
  transform: scale(1.2);
}

.hero-dot.active {
  background: var(--text-white);
  width: 28px;
  border-radius: 10px;
}

.dot-progress {
  display: none;
}

/* Navigation Buttons */
.hero-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  color: var(--text-white);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.hero-nav-btn:hover {
  background: rgba(0,0,0,0.8);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-50%) scale(1.1);
}

.hero-prev {
  left: 20px;
}

.hero-next {
  right: 20px;
}

.hero-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

/* Mobile Responsive */
@media (max-width: 479px) {
  .hero-slider-container {
    height: 280px;
    margin: 0 auto var(--space-20);
    border-radius: var(--radius-sm);
  }
  
  .hero-slide-content {
    left: 5%;
    right: 5%;
    max-width: 90%;
  }
  
  .hero-content-inner {
    gap: var(--space-12);
  }
  
  .hero-title {
    font-size: 24px;
    line-height: 1.2;
  }
  
  .hero-subtitle {
    font-size: 14px;
    line-height: 1.4;
  }
  
  .hero-cta-button {
    padding: var(--space-10) var(--space-20);
    font-size: var(--font-small);
  }
  
  .hero-dots-container {
    bottom: 12px;
    padding: 8px 12px;
    gap: 8px;
  }
  
  .hero-dot {
    width: 8px;
    height: 8px;
  }
  
  .hero-dot.active {
    width: 20px;
  }
  
  .hero-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .hero-prev {
    left: 10px;
  }
  
  .hero-next {
    right: 10px;
  }
}

@media (max-width: 767px) and (min-width: 480px) {
  .hero-slider-container {
    height: 320px;
  }
  
  .hero-title {
    font-size: 32px;
  }
  
  .hero-subtitle {
    font-size: 16px;
  }
  
  .hero-cta-button {
    padding: var(--space-12) var(--space-24);
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .hero-slider-container {
    height: 360px;
  }
  
  .hero-title {
    font-size: 40px;
  }
}



/* =====================================================
   3️⃣ TRUST STATS TICKER - COMPLETE & PRODUCTION READY ✨
   Animated stats banner with golden hero box + scrolling ticker
   Speed controlled by WordPress Customizer
   ===================================================== */

.trust-stats-ticker-section {
  width: 100%;
  max-width: 1300px; /* ✅ Fixed width */
  margin: 0 auto var(--space-32);
  padding: 0 var(--space-16);
}


.trust-stats-container {
  display: flex;
  gap: 0;
  background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-section) 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  border: 1px solid var(--border-color);
  overflow: hidden;
  position: relative;
}

/* ✅ HERO STAT BOX - Golden Animated Box (30% width) */
.hero-stat-box {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32);
  background: linear-gradient(135deg, rgba(255,215,0,0.95) 0%, rgba(255,140,0,0.95) 50%, rgba(255,69,0,0.95) 100%);
  border-right: 3px solid rgba(255,215,0,0.4);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(255,215,0,0.3);
}

/* Animated shine sweep effect */
.hero-stat-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  animation: shine-sweep 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine-sweep {
  0% { transform: translate(-100%, -100%) rotate(45deg); }
  100% { transform: translate(100%, 100%) rotate(45deg); }
}

/* Glowing border pulse */
.hero-stat-box::after {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(135deg, #ffd700, #ff8c00, #ff4500);
  border-radius: inherit;
  z-index: -1;
  opacity: 0.6;
  filter: blur(10px);
  animation: pulse-glow-border 2s ease-in-out infinite;
}

@keyframes pulse-glow-border {
  0%, 100% { 
    filter: blur(8px); 
    opacity: 0.5; 
  }
  50% { 
    filter: blur(15px); 
    opacity: 0.8; 
  }
}

.hero-stat-content {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  position: relative;
  z-index: 1;
}

.hero-stat-icon {
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.9));
  animation: icon-bounce 2s ease-in-out infinite;
}

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.08); }
}

.hero-stat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-stat-number {
  font-size: 40px;
  font-weight: var(--weight-black);
  color: var(--text-white);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 
    0 2px 6px rgba(0,0,0,0.6),
    0 0 20px rgba(255,215,0,0.8),
    0 0 30px rgba(255,140,0,0.6);
  animation: number-glow 2s ease-in-out infinite;
}

@keyframes number-glow {
  0%, 100% {
    text-shadow: 
      0 2px 6px rgba(0,0,0,0.6),
      0 0 20px rgba(255,215,0,0.8),
      0 0 30px rgba(255,140,0,0.6);
  }
  50% {
    text-shadow: 
      0 2px 6px rgba(0,0,0,0.6),
      0 0 30px rgba(255,215,0,1),
      0 0 50px rgba(255,140,0,0.9),
      0 0 70px rgba(255,69,0,0.7);
  }
}

.hero-stat-label {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.95);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ✅ SCROLLING TICKER (70% width) - Speed controlled by Customizer */
.stats-ticker-wrapper {
  flex: 0 0 70%;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: var(--space-20) 0;
  background: var(--bg-white);
  position: relative;
}

/* Gradient fade on edges */
.stats-ticker-wrapper::before,
.stats-ticker-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 2;
}

.stats-ticker-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-white), transparent);
}

.stats-ticker-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-white), transparent);
}

.stats-ticker-track {
  display: flex;
  gap: var(--space-32);
  animation: scroll-stats var(--ticker-speed, 25s) linear infinite;
  white-space: nowrap;
}

@keyframes scroll-stats {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.33%); }
}

/* Pause animation on hover */
.stats-ticker-wrapper:hover .stats-ticker-track {
  animation-play-state: paused;
}

.ticker-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--space-24);
  border-right: 2px solid var(--border-color);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.ticker-stat-item:hover {
  transform: scale(1.05);
}

.ticker-stat-item:last-child {
  border-right: none;
}

.ticker-stat-icon {
  font-size: 32px;
  line-height: 1;
  filter: grayscale(0.3);
  transition: filter var(--transition-base);
}

.ticker-stat-item:hover .ticker-stat-icon {
  filter: grayscale(0);
}

.ticker-stat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ticker-stat-number {
  font-size: 28px;
  font-weight: var(--weight-black);
  color: var(--text-dark);
  line-height: 1;
}

.ticker-stat-label {
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile Responsive - FULL WIDTH */
@media (max-width: 479px) {
  .trust-stats-ticker-section {
    margin-bottom: var(--space-20);
    padding: 0; /* ✅ Remove side padding for full width */
    max-width: 100%; /* ✅ Full width on mobile */
  }
  
  .trust-stats-container {
    flex-direction: column;
    border-radius: 0; /* ✅ Remove border radius for edge-to-edge */
  }
  
  .hero-stat-box {
    flex: 1;
    padding: var(--space-20);
    border-right: none;
    border-bottom: 3px solid rgba(255,215,0,0.4);
  }
  
  .hero-stat-content {
    gap: var(--space-12);
  }
  
  .hero-stat-icon {
    font-size: 36px;
  }
  
  .hero-stat-number {
    font-size: 32px;
  }
  
  .hero-stat-label {
    font-size: var(--font-small);
    letter-spacing: 1px;
  }
  
  .stats-ticker-wrapper {
    flex: 1;
    padding: var(--space-16) 0;
  }
  
  .stats-ticker-wrapper::before,
  .stats-ticker-wrapper::after {
    width: 40px;
  }
  
  .stats-ticker-track {
    gap: var(--space-20);
  }
  
  .ticker-stat-item {
    padding: 0 var(--space-16);
    gap: 10px;
  }
  
  .ticker-stat-icon {
    font-size: 24px;
  }
  
  .ticker-stat-number {
    font-size: 20px;
  }
  
  .ticker-stat-label {
    font-size: 10px;
    letter-spacing: 0.3px;
  }
}


@media (max-width: 767px) and (min-width: 480px) {
  .trust-stats-ticker-section {
    padding: 0; /* ✅ Full width for tablets too */
  }
  
  .trust-stats-container {
    border-radius: 0; /* ✅ Edge-to-edge */
  }
  
  .hero-stat-icon {
    font-size: 40px;
  }
  
  .hero-stat-number {
    font-size: 36px;
  }
  
  .ticker-stat-icon {
    font-size: 28px;
  }
  
  .ticker-stat-number {
    font-size: 24px;
  }
}


@media (max-width: 1024px) and (min-width: 768px) {
  .hero-stat-icon {
    font-size: 44px;
  }
  
  .hero-stat-number {
    font-size: 38px;
  }
}


/* =====================================================
   4️⃣ PREMIUM DEAL CARDS - UI/UX PERFECT ✨
   Fixed height for consistency, adjusted for alignment v5.4 (Revert margin-top: auto to Stats)
   ===================================================== */

.deal-card {
  flex: 0 0 270px;
  width: 270px;
  min-width: 270px;
  max-width: 270px;
  height: 390px;           /* Height adjusted previously */
  min-height: 390px;
  max-height: 390px;
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}

.deal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(255,107,53,0.15);
  border-color: var(--color-primary);
}

.deal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  opacity: 0;
  box-shadow: 0 0 0 3px var(--color-primary-light);
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.deal-card:hover::after {
  opacity: 1;
}

/* Image Section - 160px fixed */
.deal-card-image-wrapper,
.deal-card-image {
  width: 100%; /* Use 100% width */
  height: 160px;
  background: linear-gradient(135deg, var(--bg-gray-light) 0%, var(--border-color) 100%);
  overflow: hidden;
  position: relative;
  flex-shrink: 0; /* Prevent image from shrinking */
}

.deal-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.deal-card:hover .deal-card-image img {
  transform: scale(1.08);
}

.no-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(135deg, var(--bg-section) 0%, var(--border-color) 100%);
}

.placeholder-icon {
  font-size: 52px;
  margin-bottom: var(--space-8);
  opacity: 0.4;
  filter: grayscale(1);
}

/* Badges */
.deal-badges,
.deal-badge-container {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 10;
}

.badge,
.featured-badge,
.hot-badge,
.expiring-badge,
.deal-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 20px;
  backdrop-filter: blur(12px);
  color: var(--text-white);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform var(--transition-base);
}

/* ... (rest of badge styles remain the same) ... */
.badge:hover, .featured-badge:hover, .hot-badge:hover { transform: scale(1.05); }
.badge-icon, .badge-text { line-height: 1; }
.badge-featured, .featured-badge { background: linear-gradient(135deg, var(--color-featured) 0%, #7c3aed 100%); }
.badge-discount { background: linear-gradient(135deg, #f43f5e 0%, var(--color-danger) 100%); }
.badge-coupon, .deal-type-badge { background: linear-gradient(135deg, #ff9933 0%, var(--color-warning) 100%); }
.badge-expired { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }
.badge-hot, .hot-badge { background: linear-gradient(135deg, var(--color-hot) 0%, var(--color-danger) 100%); animation: pulse-badge 2s ease-in-out infinite; }
.badge-verified { background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%); }
.badge-expiry, .expiring-badge { background: linear-gradient(135deg, var(--color-warning) 0%, #d97706 100%); }
@keyframes pulse-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }


/* Store Logo Badge */
.store-logo-badge,
.deal-store-logo {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 52px;
  height: 52px;
  background: var(--bg-white);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  z-index: 5;
  transition: all var(--transition-base);
}
/* ... (rest of store logo styles remain the same) ... */
.deal-card:hover .store-logo-badge, .deal-card:hover .deal-store-logo { transform: scale(1.1); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.store-logo-badge img, .deal-store-logo img { width: 100%; height: 100%; object-fit: contain; }


/* COUPON BANNER */
.deal-coupon-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
  border-top: 2px dashed #ff9933;
  border-bottom: 2px dashed #ff9933;
  flex-shrink: 0; /* Prevent banner shrinking */
  height: 34px;
  position: relative;
  overflow: hidden;
}
/* ... (rest of coupon banner styles remain the same) ... */
.deal-coupon-banner::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 3s infinite; }
@keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }
.coupon-icon { font-size: 16px; line-height: 1; flex-shrink: 0; animation: wiggle 2s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.coupon-code { flex: 1; text-align: center; font-size: var(--font-body); font-weight: var(--weight-extrabold); color: #92400e; font-family: 'Courier New', monospace; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(255,255,255,0.5); }
.btn-copy-coupon { background: rgba(146,64,14,0.1); border: 1px solid rgba(146,64,14,0.2); border-radius: 6px; font-size: 14px; cursor: pointer; padding: 4px 6px; line-height: 1; transition: all var(--transition-base); flex-shrink: 0; }
.btn-copy-coupon:hover { background: rgba(146,64,14,0.2); transform: scale(1.1); }


/* Content Area - Flexible */
.deal-card-content {
  padding: 10px 10px 6px 10px; /* Adjusted Padding */
  display: flex;
  flex-direction: column;
  flex: 1;              /* Grow to fill space */
  min-height: 0;        /* Allow shrinking */
  overflow: hidden;     /* Prevent internal overflow */
}

/* Meta Row */
.deal-meta-row,
.deal-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--text-gray);
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-bottom: 6px; /* Consistent margin */
}
/* ... (rest of meta styles remain the same) ... */
.meta-store, .deal-store, .meta-category, .deal-category { display: flex; align-items: center; gap: 4px; transition: color var(--transition-base); text-decoration: none; color: var(--text-gray); }
.deal-card:hover .meta-store, .deal-card:hover .deal-store, .deal-card:hover .meta-category, .deal-card:hover .deal-category { color: var(--color-primary); }
.meta-icon { font-size: 12px; line-height: 1; }
.meta-text { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }


/* Title */
.deal-card-title,
.deal-title {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  flex-shrink: 0;
  margin-bottom: 6px; /* Default small margin */
}

/* Conditional larger margin for non-coupon cards */
.deal-card:not(.has-coupon-banner) .deal-card-title {
  margin-bottom: var(--space-10); /* 10px margin only if no coupon banner */
}

/* ... (rest of title styles remain the same) ... */
.deal-card-title a, .deal-title a { color: var(--text-dark); text-decoration: none; transition: color var(--transition-base); display: block; background: linear-gradient(to right, var(--color-primary), var(--color-primary)) no-repeat; background-size: 0% 2px; background-position: left bottom; padding-bottom: 1px; }
.deal-card:hover .deal-card-title a, .deal-card:hover .deal-title a { color: var(--color-primary); background-size: 100% 2px; }


/* Pricing */
.deal-pricing-row,
.deal-prices {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: 6px; /* Consistent margin */
  flex-shrink: 0;
  min-height: 22px; /* Prevent collapse */
}
/* ... (rest of pricing styles remain the same) ... */
.price-sale, .price-current { font-size: 20px; font-weight: var(--weight-black); color: var(--color-primary); line-height: 1; text-shadow: 0 2px 4px rgba(255,107,53,0.1); }
.price-original { font-size: var(--font-small); font-weight: var(--weight-semibold); color: var(--text-light); text-decoration: line-through; line-height: 1; opacity: 0.8; }
.price-discount, .deal-discount-badge { font-size: 10px; font-weight: var(--weight-extrabold); color: var(--color-danger); line-height: 1; margin-left: auto; padding: 2px 6px; background: rgba(239,68,68,0.1); border-radius: 4px; }


/* STATS ROW */
.deal-card-stats,
.deal-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--text-gray);
  padding: 6px 10px;
  border-top: 1px solid var(--border-color);
  margin-top: auto; /* ✅ margin-top: auto RE-ADDED here */
  flex-shrink: 0;
  justify-content: space-around;
}
/* ... (rest of stats styles remain the same) ... */
.stat, .stat-item { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; font-size: 10px; }
.stat:hover { transform: scale(1.05); transition: transform 0.2s ease; }
.deal-card-stats .stat-icon, .deal-stats .stat-icon { font-size: 11px; line-height: 1; display: inline-block; vertical-align: baseline; flex-shrink: 0; }
.deal-card-stats .stat-value { font-size: 10px; line-height: 1; font-weight: var(--weight-bold); display: inline-block; vertical-align: baseline; flex-shrink: 0; }
.deal-card-stats .stat-label { font-size: 8px; line-height: 1; font-weight: var(--weight-medium); color: var(--text-light); display: inline-block; vertical-align: baseline; text-transform: uppercase; letter-spacing: 0.3px; margin-left: 2px; }
.stat-success { color: var(--color-success); }
.stat-success .stat-icon { color: var(--color-success); }


/* Buttons Footer (Inside Content Area) */
.deal-card-footer,
.deal-footer {
  display: flex;
  gap: 6px;
  /* margin-top: auto; */ /* ❌ REMOVED margin-top: auto from here */
  margin-top: 6px; /* ✅ ADDED fixed small margin */
  padding-top: 0; /* ✅ REMOVED padding-top */
  flex-shrink: 0;
}

/* ... (Button styles remain the same) ... */
.btn-view-deal, .deal-button { flex: 0 0 82px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 10px 6px; background: var(--bg-white); color: var(--color-primary); font-size: var(--font-tiny); font-weight: var(--weight-bold); border: 2px solid var(--color-primary); border-radius: var(--radius-sm); text-decoration: none; transition: all var(--transition-base); line-height: 1; white-space: nowrap; position: relative; overflow: hidden; }
.btn-view-deal::before, .deal-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,107,53,0.1), transparent); transition: left 0.5s ease; }
.btn-view-deal:hover::before, .deal-button:hover::before { left: 100%; }
.btn-view-deal:hover, .deal-button:hover { background: var(--color-primary); color: var(--text-white); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,107,53,0.3); }
.btn-get-deal { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 10px 6px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); color: var(--text-white); font-size: var(--font-tiny); font-weight: var(--weight-bold); border: 2px solid var(--color-primary); border-radius: var(--radius-sm); text-decoration: none; transition: all var(--transition-base); line-height: 1; white-space: nowrap; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(255,107,53,0.2); }
.btn-get-deal::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; }
.btn-get-deal:hover::before { left: 100%; }
.btn-get-deal:hover { background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255,107,53,0.35); }
.btn-get-deal:active { transform: translateY(0); }
.btn-icon, .btn-text, .deal-button-text { line-height: 1; position: relative; z-index: 1; }


/* Expired State */
.deal-card.deal-expired { opacity: 0.7; filter: grayscale(70%); }
.deal-card.deal-expired:hover { transform: translateY(-2px); }
.btn-expired { width: 100%; padding: 10px; background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); color: var(--text-white); font-size: var(--font-tiny); font-weight: var(--weight-bold); border: 2px solid #6b7280; border-radius: var(--radius-sm); cursor: not-allowed; opacity: 0.7; text-align: center; }
.btn-expired:hover { transform: none; box-shadow: none; }


/* Mobile Responsive */
@media (max-width: 479px) {
  .featured-deals-section .deal-card,
  .hot-deals-section .deal-card,
  .trending-deals-section .deal-card,
  .verified-deals-section .deal-card,
  .expiring-deals-section .deal-card,
  .latest-deals-section .deal-card,
  .archive-deals-grid .deal-card,
  .deals-grid .deal-card {
    flex: 0 0 221px !important;
    width: 221px !important;
    min-width: 221px !important;
    height: 380px !important;      /* Mobile height */
    min-height: 380px !important;
    max-height: 380px !important;
  }

  .deal-card-image-wrapper,
  .deal-card-image {
    width: 100%;
    height: 144px;
  }

  .deal-card-content {
    padding: 8px 8px 4px 8px;
  }

  .deal-card-title {
    font-size: 13px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    margin-bottom: 4px; /* Default small margin */
  }

  /* Conditional larger margin below title only if NO coupon banner on mobile */
  .deal-card:not(.has-coupon-banner) .deal-card-title {
     margin-bottom: 8px; /* Slightly larger margin (8px) on mobile */
  }

  .deal-pricing-row {
     margin-bottom: 4px;
     min-height: 20px;
  }

  .price-sale,
  .price-current {
    font-size: 18px;
  }

  .deal-card-stats {
      padding: 4px 8px;
      /* margin-top: auto; */ /* ✅ Ensure auto margin is here for mobile too */
      margin-top: auto; /* Re-added specifically for mobile if needed */
  }

  .deal-card-footer {
      /* margin-top: auto; */ /* ❌ Ensure auto margin is NOT here */
      margin-top: 4px; /* ✅ ADDED fixed small margin */
      padding-top: 0; /* Reset padding */
  }

   .btn-view-deal, .deal-button, .btn-get-deal {
       padding: 8px 4px;
       font-size: 9px;
   }
   .btn-view-deal {
       flex-basis: 70px;
   }
}

/* =====================================================
   5️⃣ PREMIUM STORE CARDS (240×90px) ✨
   With gradient hover effects & enhanced interactivity
   ===================================================== */

.store-card {
  flex: 0 0 240px;
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  height: 90px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--bg-white);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-base);
  overflow: hidden;
  position: relative;
}

/* Gradient overlay effect */
.store-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 0;
}

.store-card:hover {
  color: var(--text-white);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255,107,53,0.3);
  border-color: var(--color-primary);
}

.store-card:hover::before {
  opacity: 1;
}

/* Store Logo */
.store-logo-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  padding: 6px;
  flex-shrink: 0;
  transition: all var(--transition-base);
  position: relative;
  z-index: 1;
}

.store-card:hover .store-logo-img {
  background: rgba(255,255,255,0.95);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Store Icon (for stores without logo) */
.store-icon {
  width: 40px;
  height: 40px;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: all var(--transition-base);
  position: relative;
  z-index: 1;
}

.store-card:hover .store-icon {
  background: rgba(255,255,255,0.95);
  transform: scale(1.1);
}

/* Store Info */
.store-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.store-name {
  font-size: var(--font-body-md);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dark);
  transition: color var(--transition-base);
}

.store-card:hover .store-name {
  color: var(--text-white);
}

.store-count {
  font-size: var(--font-tiny);
  font-weight: var(--weight-semibold);
  color: var(--text-gray);
  line-height: 1.3;
  display: block;
  transition: color var(--transition-base);
}

.store-card:hover .store-count {
  color: rgba(255,255,255,0.9);
}

/* Mobile Responsive - Store Cards */
@media (max-width: 479px) {
  .store-card {
    flex: 0 0 180px !important;
    width: 180px !important;
    min-width: 180px !important;
    height: 75px;
    padding: 12px;
    gap: 10px;
  }
  
  .store-logo-img {
    width: 50px;
    height: 50px;
    padding: 4px;
  }
  
  .store-name {
    font-size: 13px;
  }
  
  .store-count {
    font-size: 9px;
  }
}

/* =====================================================
   6️⃣ PREMIUM CATEGORY CARDS (240×90px) ✨
   With icon animation & gradient hover effects
   ===================================================== */

.category-card {
  flex: 0 0 240px;
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  height: 90px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--bg-white);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-base);
  overflow: hidden;
  position: relative;
}

/* Gradient overlay effect */
.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 0;
}

.category-card:hover {
  color: var(--text-white);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255,107,53,0.3);
  border-color: var(--color-primary);
}

.category-card:hover::before {
  opacity: 1;
}

/* Category Icon */
.category-icon {
  font-size: 36px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  transition: transform var(--transition-base);
  line-height: 1;
  position: relative;
  z-index: 1;
}

.category-card:hover .category-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Category Info */
.category-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.category-name {
  font-size: var(--font-body-md);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dark);
  transition: color var(--transition-base);
}

.category-card:hover .category-name {
  color: var(--text-white);
}

.category-count {
  font-size: var(--font-tiny);
  font-weight: var(--weight-semibold);
  color: var(--text-gray);
  line-height: 1.3;
  display: block;
  transition: color var(--transition-base);
}

.category-card:hover .category-count {
  color: rgba(255,255,255,0.9);
}

/* Mobile Responsive - Category Cards */
@media (max-width: 479px) {
  .category-card {
    flex: 0 0 180px !important;
    width: 180px !important;
    min-width: 180px !important;
    height: 75px;
    padding: 12px;
    gap: 10px;
  }
  
  .category-icon {
    font-size: 28px;
    width: 32px;
    height: 32px;
  }
  
  .category-name {
    font-size: 13px;
  }
  
  .category-count {
    font-size: 9px;
  }
}


/* =====================================================
   🏪 HUB PAGES - COMPLETE PREMIUM v11.0 FINAL
   Matches PHP v5.0.0 exactly
   No overlay, taller banner, premium look
   ===================================================== */

.store-archive-page,
.category-archive-page {
  background: var(--bg-section);
}

/* ============ 1. PREMIUM HERO BANNER - NO OVERLAY ============ */
.hub-hero {
  position: relative;
  background: var(--bg-white);
  padding: var(--space-56) 0; /* 10% taller - Premium */
  margin-bottom: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background-size: cover;
  background-position: center;
}

/* NO OVERLAY */

.hub-hero .container {
  position: relative;
  z-index: 2;
}

.hero-content {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  max-width: 900px;
  margin: 0 auto;
}

.hub-logo,
.hub-icon {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 3px solid var(--color-primary);
}

.hub-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-12);
}

.hub-icon .category-icon-large {
  font-size: 70px;
}

.hub-title {
  font-size: 42px;
  font-weight: var(--weight-black);
  color: var(--text-dark);
  margin-bottom: var(--space-12);
  line-height: 1.1;
}

.hub-description {
  font-size: var(--font-h4);
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: var(--space-16);
}

.btn-visit-store {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  background: var(--color-primary);
  color: var(--text-white);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
}

.btn-visit-store:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ============ STATS BAR - PREMIUM ============ */
.hub-stats-bar {
  background: var(--bg-white);
  padding: var(--space-24) 0;
  margin-bottom: var(--space-24);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-color);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-20);
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-32);
}

.stat-item {
  text-align: center;
  padding: var(--space-16);
  border-right: 2px solid var(--border-color);
}

.stat-item:last-child {
  border-right: none;
}

.stat-value {
  display: block;
  font-size: 32px;
  font-weight: var(--weight-black);
  color: var(--color-primary);
  margin-bottom: var(--space-6);
  line-height: 1;
}

.stat-label {
  display: block;
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============ SECTION TITLE - SHARED ============ */
.hub-section-title,
.cross-links-title {
  font-size: var(--font-h3);
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  margin-bottom: var(--space-16);
  padding: 0 var(--space-32);
  text-align: center;
}

/* ============ SCROLLBAR STYLES - SHARED ============ */
.stores-scroll-container,
.categories-scroll-container,
.cross-links-scroll-container,
.subcategories-scroll-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--space-8) var(--space-32) var(--space-12) var(--space-32);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-light) transparent;
}

.stores-scroll-container::-webkit-scrollbar,
.categories-scroll-container::-webkit-scrollbar,
.cross-links-scroll-container::-webkit-scrollbar,
.subcategories-scroll-container::-webkit-scrollbar {
  height: 4px;
}

.stores-scroll-container::-webkit-scrollbar-track,
.categories-scroll-container::-webkit-scrollbar-track,
.cross-links-scroll-container::-webkit-scrollbar-track,
.subcategories-scroll-container::-webkit-scrollbar-track {
  background: var(--bg-gray-light);
  border-radius: 2px;
}

.stores-scroll-container::-webkit-scrollbar-thumb,
.categories-scroll-container::-webkit-scrollbar-thumb,
.cross-links-scroll-container::-webkit-scrollbar-thumb,
.subcategories-scroll-container::-webkit-scrollbar-thumb {
  background: var(--color-primary-light);
  border-radius: 2px;
}

.stores-scroll-container::-webkit-scrollbar-thumb:hover,
.categories-scroll-container::-webkit-scrollbar-thumb:hover,
.cross-links-scroll-container::-webkit-scrollbar-thumb:hover,
.subcategories-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* ============ 2. POPULAR STORES ============ */
.hub-popular-stores,
.related-stores {
  padding: var(--space-24) 0;
  margin-bottom: var(--space-24);
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.hub-store-card {
  flex: 0 0 160px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-12);
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
}

.hub-store-card:hover {
  background: var(--bg-white);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255,107,53,0.15);
}

.hub-store-logo-small {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: 24px;
}

.hub-store-logo-small img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hub-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hub-card-name {
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.hub-card-count {
  font-size: 11px;
  color: var(--text-gray);
  line-height: 1;
}

/* ============ 3. POPULAR CATEGORIES ============ */
.hub-popular-categories,
.related-categories {
  padding: var(--space-24) 0;
  margin-bottom: var(--space-24);
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.hub-category-card {
  flex: 0 0 160px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-12);
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
}

.hub-category-card:hover {
  background: var(--bg-white);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255,107,53,0.15);
}

.hub-category-icon-large {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

/* ============ 4. CROSS-LINKS (Browse by Category/Store) ============ */
.hub-cross-links {
  padding: var(--space-24) 0;
  margin-bottom: var(--space-24);
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* SAME STYLE AS STORES */
.cross-link-item {
  flex: 0 0 160px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-12);
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
}

.cross-link-item:hover {
  background: var(--bg-white);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255,107,53,0.15);
}

.cross-link-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.cross-link-logo {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  object-fit: contain;
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.cross-link-text {
  flex: 1;
  min-width: 0;
  display: block;
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.cross-link-count {
  display: block;
  font-size: 11px;
  color: var(--text-gray);
  line-height: 1;
}

/* ============ 5. SUBCATEGORIES ============ */
.hub-subcategories {
  padding: var(--space-24) 0;
  margin-bottom: var(--space-24);
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.subcategory-card {
  flex: 0 0 140px;
  min-width: 140px;
  padding: var(--space-12);
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-align: center;
  text-decoration: none;
  transition: all var(--transition-base);
}

.subcategory-card:hover {
  background: var(--bg-white);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255,107,53,0.15);
}

.subcat-icon {
  font-size: 32px;
  margin-bottom: var(--space-6);
  display: block;
}

.subcat-name {
  display: block;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  margin-bottom: var(--space-4);
}

.subcat-count {
  display: block;
  font-size: 10px;
  color: var(--text-gray);
}

/* ============ DEALS SECTION ============ */
.store-deals-section,
.category-deals-section {
  padding: var(--space-32) var(--space-32);
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-24);
  box-shadow: var(--shadow-card);
}

.deals-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12);
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-20);
  gap: var(--space-12);
}

.results-info {
  font-size: var(--font-small);
  color: var(--text-gray);
  font-weight: var(--weight-medium);
}

.results-info strong {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.sort-options select {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  background: var(--bg-white);
  color: var(--text-dark);
  cursor: pointer;
  transition: all var(--transition-base);
}

.sort-options select:hover {
  border-color: var(--color-primary);
}

.sort-options select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* Deals Grid */
.archive-deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 14px;
  margin-bottom: var(--space-20);
}

@media (min-width: 1200px) {
  .archive-deals-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .archive-deals-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .archive-deals-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* No Deals */
.no-deals-message {
  text-align: center;
  padding: var(--space-32);
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: 2px dashed var(--border-color);
}

.no-deals-message p {
  font-size: var(--font-body);
  color: var(--text-gray);
  margin-bottom: var(--space-12);
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 767px) {
  .hub-hero {
    padding: var(--space-28) 0;
  }

  .hero-content {
    flex-direction: column;
    text-align: center;
    gap: var(--space-16);
  }

  .hub-logo,
  .hub-icon {
    width: 100px;
    height: 100px;
  }

  .hub-icon .category-icon-large {
    font-size: 60px;
  }

  .hub-title {
    font-size: 28px;
  }

  .hub-description {
    font-size: var(--font-body);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
    padding: 0 var(--space-16);
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .stat-item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .stat-value {
    font-size: 24px;
  }

  .hub-section-title,
  .cross-links-title {
    font-size: 16px;
    padding: 0 var(--space-16);
  }

  .stores-scroll-container,
  .categories-scroll-container,
  .cross-links-scroll-container,
  .subcategories-scroll-container {
    padding: var(--space-6) var(--space-16) var(--space-10) var(--space-16);
    gap: 8px;
  }

  .hub-store-card,
  .hub-category-card,
  .cross-link-item {
    flex: 0 0 130px;
    min-width: 130px;
  }

  .hub-store-logo-small,
  .hub-category-icon-large,
  .cross-link-icon,
  .cross-link-logo {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .hub-card-name,
  .cross-link-text {
    font-size: 12px;
  }

  .hub-card-count,
  .cross-link-count {
    font-size: 10px;
  }

  /* ✅ FIX: Reduce section padding from 16px to 8px */
  .store-deals-section,
  .category-deals-section {
    padding: var(--space-20) 8px !important; /* Changed from 16px to 8px */
  }

  .deals-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }

  .sort-options select {
    width: 100%;
  }

  /* ✅ Grid - No padding */
  .archive-deals-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 !important;
  }

  /* ✅ Cards - Wider now (192px instead of 180px) */
  .archive-deals-grid .deal-card {
    flex: 1 1 0% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 380px !important;
  }
}

@media (max-width: 480px) {
  .hub-logo,
  .hub-icon {
    width: 80px;
    height: 80px;
  }

  .hub-icon .category-icon-large {
    font-size: 50px;
  }

  .hub-title {
    font-size: 22px;
  }

  .stat-value {
    font-size: 20px;
  }
  
  .archive-deals-grid {
    padding: 0 !important;
  }
  
  /* ✅ Get Deal Button fix */
  .btn-get-deal,
  .deal-button {
    flex: 1 1 auto !important;
    min-width: 90px !important;
    padding: 16px 6px !important;
    font-size: 12px !important;
    white-space: nowrap;
    overflow: visible !important;
  }
  
  .btn-view-deal {
    flex: 0 0 60px !important;
    min-width: 60px !important;
    padding: 8px 4px !important;
  }
  
  .deal-card-footer {
    gap: 4px !important;
  }
}

/* END COMPLETE PREMIUM HUB CSS v11.0 */


/* =====================================================
   📄 PAGINATION - HORIZONTAL ONLY (NO VERTICAL)
   ===================================================== */

/* Hide "Posts pagination" label */
.pagination-label,
.screen-reader-text {
  display: none !important;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Changed from center */
  gap: var(--space-8);
  margin: var(--space-40) auto;
  flex-wrap: nowrap; /* ✅ CRITICAL: No wrapping */
  overflow-x: auto; /* ✅ Enable horizontal scroll */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--bg-section);
  padding: var(--space-12) var(--space-8);
  max-width: 100%;
}

/* Custom Scrollbar */
.pagination::-webkit-scrollbar {
  height: 6px;
}

.pagination::-webkit-scrollbar-track {
  background: var(--bg-section);
  border-radius: var(--radius-full);
}

.pagination::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.pagination::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-hover);
}

/* Pagination Links */
.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-12);
  background: var(--bg-white);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-dark);
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  flex-shrink: 0; /* ✅ Prevent shrinking */
  white-space: nowrap;
}

/* Hover State */
.pagination .page-numbers:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

/* Current/Active Page */
.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-white);
  font-weight: var(--weight-black);
  cursor: default;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
}

/* Dots (...) */
.pagination .dots {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  color: var(--text-gray);
  font-weight: var(--weight-bold);
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
}

/* Previous/Next Buttons */
.pagination .prev,
.pagination .next {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  min-width: auto;
  padding: 0 var(--space-16);
}

.pagination .prev:hover,
.pagination .next:hover {
  background: var(--color-primary);
  color: var(--text-white);
}

/* Disabled State */
.pagination .prev.disabled,
.pagination .next.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 768px) {
  .pagination {
    gap: var(--space-6);
    margin: var(--space-32) auto;
    padding: var(--space-10) var(--space-8);
  }
  
  .pagination .page-numbers {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-10);
    font-size: var(--font-small);
  }
  
  .pagination .dots {
    min-width: 40px;
    height: 40px;
  }
  
  .pagination .prev,
  .pagination .next {
    padding: 0 var(--space-14);
  }
}

/* Mobile */
@media (max-width: 479px) {
  .pagination {
    gap: var(--space-4);
    margin: var(--space-20) auto;
    padding: var(--space-8);
  }
  
  .pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    font-size: var(--font-small);
    border-width: 1px;
  }
  
  .pagination .dots {
    min-width: 36px;
    height: 36px;
    font-size: var(--font-small);
  }
  
  .pagination .prev,
  .pagination .next {
    padding: 0 var(--space-12);
    font-size: var(--font-small);
  }
  
  /* Thinner scrollbar on mobile */
  .pagination::-webkit-scrollbar {
    height: 4px;
  }
}


/* ===================================================== 
   END OF PART 2
   Continue with PART 3 for Pages (Single Deal, Archive, Search)...
   ===================================================== */
/* =====================================================
   9️⃣ NEWSLETTER & SPECIAL OFFERS - FIXED
   ===================================================== */

/* Newsletter Box */
.newsletter-box {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-40);
  text-align: center;
  color: var(--text-white);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-40);
}

.newsletter-icon {
  font-size: 56px;
  margin-bottom: var(--space-20);
}

.newsletter-title {
  font-size: var(--font-h2);
  font-weight: var(--weight-black);
  margin-bottom: var(--space-12);
}

.newsletter-description {
  font-size: var(--font-h4);
  opacity: 0.95;
  margin-bottom: var(--space-28);
  line-height: 1.6;
}

.newsletter-form {
  display: flex;
  gap: var(--space-12);
  max-width: 600px;
  margin: 0 auto;
}

.newsletter-input {
  flex: 1;
  padding: var(--space-14) var(--space-20);
  background: var(--bg-white);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-body);
  color: var(--text-dark);
  transition: all var(--transition-base);
}

.newsletter-input::placeholder {
  color: var(--text-gray);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--color-primary-hover);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.newsletter-button {
  padding: var(--space-14) var(--space-32);
  background: var(--text-dark);
  color: var(--text-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.newsletter-button:hover {
  background: var(--text-black);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.newsletter-button:active {
  transform: translateY(0);
}

/* ===== MOBILE RESPONSIVE - Newsletter ===== */
@media (max-width: 767px) {
  .newsletter-box {
    padding: var(--space-32) var(--space-20);
    margin-bottom: var(--space-24);
  }
  
  .newsletter-icon {
    font-size: 40px;
    margin-bottom: var(--space-16);
  }
  
  .newsletter-title {
    font-size: var(--font-h3);
    margin-bottom: var(--space-10);
  }
  
  .newsletter-description {
    font-size: var(--font-body);
    margin-bottom: var(--space-20);
  }
  
  .newsletter-form {
    flex-direction: column;
    gap: var(--space-10);
    width: 100%;
  }
  
  .newsletter-input {
    width: 100%;
    padding: var(--space-12) var(--space-16);
  }
  
  .newsletter-button {
    width: 100%;
    padding: var(--space-12) var(--space-24);
  }
}

@media (max-width: 480px) {
  .newsletter-box {
    padding: var(--space-24) var(--space-16);
    border-radius: var(--radius-md);
  }
  
  .newsletter-icon {
    font-size: 32px;
  }
  
  .newsletter-title {
    font-size: var(--font-h4);
  }
  
  .newsletter-description {
    font-size: var(--font-small);
  }
}

/* ========================================
   FIX: SPECIAL OFFERS HORIZONTAL SCROLL
   Cards are .offer-card (not .special-offer-card)
   ======================================== */

@media (max-width: 768px) {
  /* Container settings */
  .special-offers-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 16px !important;
    padding: 8px 16px 16px !important;
  }
  
  /* Cards - Force wide (show 1-1.3 cards) */
  .special-offers-grid .offer-card {
    flex: 0 0 calc(90vw - 32px) !important;
    min-width: calc(90vw - 32px) !important;
    max-width: calc(90vw - 32px) !important;
    width: calc(90vw - 32px) !important;
  }
  
  /* How It Works */
  .how-it-works-grid .step-card {
    flex: 0 0 calc(80vw - 32px) !important;
    min-width: calc(80vw - 32px) !important;
    max-width: calc(80vw - 32px) !important;
  }
}

@media (max-width: 480px) {
  .special-offers-grid .offer-card {
    flex: 0 0 calc(95vw - 32px) !important;
    min-width: calc(95vw - 32px) !important;
    max-width: calc(95vw - 32px) !important;
  }
}

/* =====================================================
   📄 SINGLE DEAL PAGE - PREMIUM (PHP Template Match)
   Version: 4.1 - Final Fixed (No Overlaps)
   ===================================================== */

/* =====================================================
   🔹 PAGE WRAPPER
   ===================================================== */
.single-deal-page,
.single-deal-premium {
  background: var(--bg-section);
}

.single-deal-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-20) var(--space-40);
}

/* =====================================================
   🔹 BREADCRUMB
   ===================================================== */
.deal-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-16) 0;
  margin-bottom: var(--space-20);
  font-size: var(--font-small);
  color: var(--text-gray);
}

.deal-breadcrumb a {
  color: var(--text-gray);
  font-weight: var(--weight-medium);
  transition: color var(--transition-base);
  text-decoration: none;
}

.deal-breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb-separator {
  color: var(--text-light);
  user-select: none;
}

.breadcrumb-current {
  color: var(--text-dark);
  font-weight: var(--weight-semibold);
}

/* =====================================================
   🔹 HERO SECTION - SIDE-BY-SIDE LAYOUT
   ===================================================== */
.deal-hero-section {
  position: relative;
  margin-bottom: var(--space-32);
  border-radius: var(--radius-lg);
  overflow: visible;
  background: transparent;
}

/* --- Desktop: Two Column Grid --- */
@media (min-width: 769px) {
  .deal-hero-section {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: var(--space-32);
    align-items: start;
  }
}

/* --- Mobile: Block layout with overflow for image --- */
@media (max-width: 768px) {
  .deal-hero-section {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--bg-white);
    box-shadow: var(--shadow-lg);
  }
}

/* =====================================================
   🔹 IMAGE COLUMN (Left Side)
   ===================================================== */
.deal-hero-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
}

.deal-hero-image img {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Desktop Image Style --- */
@media (min-width: 769px) {
  .deal-hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-height: 450px;
    position: sticky;
    top: calc(var(--header-height) + var(--space-20));
  }
  .deal-hero-image img {
    object-fit: contain;
    object-position: center;
    max-height: 100%;
    width: auto;
    padding: var(--space-20);
  }
}

/* --- Mobile Image Style --- */
@media (max-width: 768px) {
  .deal-hero-image {
    height: 300px;
    margin-bottom: 0; /* No margin, content overlays */
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
  .deal-hero-image img {
    object-fit: contain;
    object-position: center;
    padding: var(--space-16);
  }
}

@media (max-width: 479px) {
  .deal-hero-image {
    height: 280px;
  }
}

/* No Image Placeholder */
.no-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-section) 0%, var(--bg-gray-light) 100%);
  min-height: 250px;
}

.placeholder-icon {
  font-size: 80px;
  opacity: 0.3;
}

/* Floating Badges */
.deal-floating-badges {
  position: absolute;
  top: var(--space-16);
  left: var(--space-16);
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  z-index: 10;
  max-width: calc(100% - 100px);
}

.deal-floating-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  font-size: var(--font-small);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  white-space: nowrap;
}

.badge-discount-hero { background: var(--color-danger); color: var(--text-white); }
.badge-featured { background: var(--color-featured); color: var(--text-white); }
.badge-hot { background: var(--color-hot); color: var(--text-white); }
.badge-verified { background: var(--color-success); color: var(--text-white); }

/* Store Logo Corner Badge */
.deal-store-logo-corner {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  width: 70px;
  height: 70px;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deal-store-logo-corner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 768px) {
  .deal-store-logo-corner {
    width: 60px;
    height: 60px;
    top: var(--space-12);
    right: var(--space-12);
  }
}

/* =====================================================
   🔹 HERO CONTENT COLUMN (Right Side)
   ===================================================== */
.deal-hero-content {
  padding: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* --- Desktop: Static positioning, no overlay --- */
@media (min-width: 769px) {
  .deal-hero-content {
    position: relative;
  }
  .deal-hero-overlay {
    display: none;
  }
}

/* --- Mobile: Absolute positioning with overlay (only title and store) --- */
@media (max-width: 768px) {
  .deal-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-24);
    gap: var(--space-12);
  }
  .deal-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    z-index: 2;
    pointer-events: none;
  }
}

/* Title */
.deal-title-hero {
  font-size: 28px;
  font-weight: var(--weight-black);
  margin-bottom: 0;
  line-height: 1.3;
}

@media (min-width: 769px) {
  .deal-title-hero {
    color: var(--text-dark);
    text-shadow: none;
  }
}

@media (max-width: 768px) {
  .deal-title-hero {
    font-size: 24px;
    color: var(--text-white);
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  }
}

@media (max-width: 479px) {
  .deal-title-hero {
    font-size: 20px;
  }
}

/* Store Meta */
.deal-store-meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.store-label {
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
}

@media (min-width: 769px) {
  .store-label {
    color: var(--text-gray);
  }
}

@media (max-width: 768px) {
  .store-label {
    color: rgba(255,255,255,0.8);
  }
}

.store-link-hero {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  text-decoration: none;
}

@media (min-width: 769px) {
  .store-link-hero {
    color: var(--color-primary);
    background: var(--color-primary-light);
  }
  .store-link-hero:hover {
    background: var(--color-primary);
    color: var(--text-white);
  }
}

@media (max-width: 768px) {
  .store-link-hero {
    color: var(--text-white);
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
  }
  .store-link-hero:hover {
    background: rgba(255,255,255,0.3);
    color: var(--text-white);
  }
}

/* =====================================================
   🔹 TRUST SCORE (Community Verification)
   ===================================================== */
.deal-trust-score {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Desktop: Show in hero as card beside image */
@media (min-width: 769px) {
  .deal-hero-content .deal-trust-score {
    display: flex;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    padding: var(--space-16);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
  }
}

/* Mobile: Show in main content naturally */
@media (max-width: 768px) {
  .deal-hero-section .deal-trust-score {
    background: var(--bg-white);
    padding: var(--space-20);
  }
}

.trust-score-title {
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  margin-bottom: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.trust-meter-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.trust-meter {
  position: relative;
  width: 100%;
  height: 12px;
  background: var(--bg-gray-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.trust-meter-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--color-success) 0%, var(--color-warning) 100%);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.trust-meter-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  font-size: var(--font-small);
  color: var(--text-gray);
}

.label-working {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-success);
  font-weight: var(--weight-semibold);
}

.label-not-working {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-danger);
  font-weight: var(--weight-semibold);
}

.trust-vote-buttons {
  display: flex;
  gap: var(--space-12);
}

.btn-verify,
.vote-btn {
  flex: 1;
  padding: var(--space-10) var(--space-14);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-color);
  background: var(--bg-white);
  color: var(--text-dark);
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.vote-working:hover {
  background: var(--color-success);
  color: var(--text-white);
  border-color: var(--color-success);
}

.vote-not-working:hover {
  background: var(--color-danger);
  color: var(--text-white);
  border-color: var(--color-danger);
}

/* =====================================================
   🔹 MAIN GRID LAYOUT
   ===================================================== */
.deal-main-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-32);
  align-items: start;
}

@media (max-width: 768px) {
  .deal-main-grid {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }
}

.deal-content-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-top: var(--space-24);
}

/* =====================================================
   🔹 SECTION BOX (Reusable)
   ===================================================== */
.section-box {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-color);
}

/* On mobile, the trust score is moved into the content column, so we need to hide the one in the hero */
@media (max-width: 768px) {
    .deal-hero-content .deal-trust-score {
        display: none;
    }
}

@media (max-width: 768px) {
  .section-box {
    padding: var(--space-20);
  }
}

@media (max-width: 479px) {
  .section-box {
    padding: var(--space-16);
    margin-bottom: var(--space-16);
  }
}

.section-title-main {
  font-size: var(--font-h3);
  font-weight: var(--weight-black);
  margin-bottom: var(--space-16);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

@media (max-width: 479px) {
  .section-title-main {
    font-size: 18px;
  }
}

/* =====================================================
   🔹 TIMELINE
   ===================================================== */
.deal-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.timeline-item:hover {
  background: var(--color-primary-light);
}

.timeline-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
}

.timeline-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-label {
  font-size: var(--font-small);
  color: var(--text-gray);
  font-weight: var(--weight-medium);
}

.timeline-value {
  font-size: var(--font-body);
  color: var(--text-dark);
  font-weight: var(--weight-semibold);
}

.timeline-value.expired {
  color: var(--color-danger);
  font-weight: var(--weight-bold);
}

/* =====================================================
   🔹 SOCIAL PROOF (Real Dynamic)
   ===================================================== */
.deal-social-proof {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.social-proof-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}

.social-proof-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.social-proof-text {
  font-size: var(--font-body);
  color: var(--text-dark);
  line-height: 1.5;
}

.social-proof-text strong {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

/* =====================================================
   🔹 DESCRIPTION SECTION
   ===================================================== */
.deal-description-section {
  line-height: 1.7;
}

.deal-content {
  color: var(--text-dark);
}

.deal-content p { margin-bottom: var(--space-16); }
.deal-content h3 { font-size: var(--font-h4); font-weight: var(--weight-bold); margin: var(--space-20) 0 var(--space-12); color: var(--text-dark); }
.deal-content ul, .deal-content ol { padding-left: var(--space-24); margin-bottom: var(--space-16); list-style: disc; }
.deal-content li { margin-bottom: var(--space-8); }

/* =====================================================
   🔹 FAQ SECTION
   ===================================================== */
.deal-faq-section {
  display: flex;
  flex-direction: column;
}

.faq-accordion-premium {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.faq-item-premium {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition-base);
}

.faq-item-premium.active {
  border-color: var(--color-primary);
}

.faq-question-premium {
  width: 100%;
  padding: var(--space-14);
  background: var(--bg-section);
  border: none;
  text-align: left;
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.faq-question-premium:hover {
  background: var(--color-primary-light);
}

.faq-item-premium.active .faq-question-premium {
  background: var(--color-primary);
  color: var(--text-white);
}

.faq-text {
  flex: 1;
  text-align: left;
  padding-right: var(--space-8);
}

.faq-icon-premium {
  font-size: 20px;
  font-weight: var(--weight-bold);
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.faq-item-premium.active .faq-icon-premium {
  transform: rotate(45deg);
}

.faq-answer-premium {
  display: none;
  background: var(--bg-white);
}

.faq-answer-premium p {
  padding: var(--space-14);
  margin: 0;
  color: var(--text-dark);
  line-height: 1.6;
}

/* =====================================================
   🔹 SIDEBAR (Sticky)
   ===================================================== */
.deal-sidebar-sticky {
  position: sticky;
  top: calc(var(--header-height) + var(--space-20));
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

@media (max-width: 768px) {
  .deal-sidebar-sticky {
    position: static;
  }
}

.sticky-element {
  position: relative;
}

/* =====================================================
   🔹 CTA BOX (Sidebar Main)
   ===================================================== */
.deal-cta-box-premium {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--bg-white) 100%);
  border: 2px solid var(--color-primary);
}

/* Pricing */
.deal-pricing-premium { text-align: center; padding: var(--space-16); background: var(--bg-white); border-radius: var(--radius-sm); }
.price-main { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-8); }
.currency { font-size: var(--font-h3); font-weight: var(--weight-bold); color: var(--color-primary); }
.price-number { font-size: 40px; font-weight: var(--weight-black); color: var(--color-primary); line-height: 1; }

@media (max-width: 479px) {
  .price-number { font-size: 32px; }
}

.price-comparison { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.price-original-premium { font-size: var(--font-h4); color: var(--text-gray); text-decoration: line-through; }
.price-savings { font-size: var(--font-small); color: var(--color-success); font-weight: var(--weight-bold); }

/* Trust Badges Row */
.trust-badges-row { display: flex; gap: var(--space-8); flex-wrap: wrap; justify-content: center; }
.trust-badge { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-12); background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-full); font-size: var(--font-small); font-weight: var(--weight-semibold); color: var(--text-dark); }

/* Coupon Box */
.coupon-box-premium { padding: var(--space-20); background: var(--bg-dark); border-radius: var(--radius-md); text-align: center; }
.coupon-header { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin-bottom: var(--space-12); }
.coupon-icon { font-size: 24px; }
.coupon-label { font-size: var(--font-small); color: rgba(255,255,255,0.8); font-weight: var(--weight-semibold); }
.coupon-reveal { margin-bottom: var(--space-12); }
.btn-reveal-coupon { width: 100%; padding: var(--space-12); background: rgba(255,255,255,0.2); color: var(--text-white); font-size: var(--font-body); font-weight: var(--weight-bold); border: 2px dashed rgba(255,255,255,0.4); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-base); display: flex; align-items: center; justify-content: center; gap: var(--space-8); }
.btn-reveal-coupon:hover { background: rgba(255,255,255,0.3); border-style: solid; }
.btn-text { flex: 1; }
.btn-icon { font-size: 20px; }
.coupon-code-revealed { display: flex; flex-direction: column; gap: var(--space-12); }
.coupon-code-text { font-size: var(--font-h3); font-weight: var(--weight-black); color: var(--color-primary); letter-spacing: 2px; padding: var(--space-12); background: rgba(255,255,255,0.15); border-radius: var(--radius-sm); border: 2px dashed rgba(255,255,255,0.4); }
.btn-copy-coupon { padding: var(--space-10); background: rgba(255,255,255,0.2); color: var(--text-white); font-size: var(--font-small); font-weight: var(--weight-bold); border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-base); }
.btn-copy-coupon:hover { background: rgba(255,255,255,0.3); }
.coupon-success-toast { padding: var(--space-10); background: var(--color-success); color: var(--text-white); font-size: var(--font-small); font-weight: var(--weight-bold); border-radius: var(--radius-sm); text-align: center; }

/* CTA Button */
.btn-get-deal-premium, .btn-deal-cta { width: 100%; padding: var(--space-16); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); color: var(--text-white); font-size: var(--font-h4); font-weight: var(--weight-black); border-radius: var(--radius-md); text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: var(--space-8); box-shadow: 0 4px 16px rgba(255,107,53,0.3); transition: all var(--transition-base); border: none; cursor: pointer; }
.btn-get-deal-premium:hover, .btn-deal-cta:hover { background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-dark)); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,53,0.4); color: var(--text-white); }
.btn-expired { background: var(--bg-gray-light); color: var(--text-gray); cursor: not-allowed; }
.btn-expired:hover { background: var(--bg-gray-light); color: var(--text-gray); transform: none; box-shadow: none; }
.btn-pulse { animation: pulse-btn 2s ease-in-out infinite; }
@keyframes pulse-btn { 0%, 100% { box-shadow: 0 4px 16px rgba(255,107,53,0.3); } 50% { box-shadow: 0 4px 24px rgba(255,107,53,0.5); } }
.btn-arrow { font-size: 18px; transition: transform var(--transition-base); }
.btn-get-deal-premium:hover .btn-arrow, .btn-deal-cta:hover .btn-arrow { transform: translateX(4px); }

/* Expiry Info */
.deal-expiry-info-premium { display: flex; align-items: center; justify-content: center; gap: var(--space-8); padding: var(--space-10); background: var(--bg-section); border-radius: var(--radius-sm); font-size: var(--font-small); color: var(--text-gray); }
.expiry-icon { font-size: 16px; }
.expiry-text { font-weight: var(--weight-semibold); }

/* =====================================================
   🔹 STORE BOX (Sidebar)
   ===================================================== */
.deal-store-box-premium { text-align: center; }
.store-box-header { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); margin-bottom: var(--space-16); }
.store-logo { width: 80px; height: 80px; object-fit: contain; padding: var(--space-10); background: var(--bg-white); border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.store-info { display: flex; flex-direction: column; gap: var(--space-4); }
.store-name { font-size: var(--font-h4); font-weight: var(--weight-bold); color: var(--text-dark); margin: 0; }
.store-count { font-size: var(--font-small); color: var(--text-gray); }
.btn-view-store { width: 100%; padding: var(--space-12); background: var(--bg-white); color: var(--color-primary); font-size: var(--font-body); font-weight: var(--weight-bold); border: 2px solid var(--color-primary); border-radius: var(--radius-sm); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); transition: all var(--transition-base); }
.btn-view-store:hover { background: var(--color-primary); color: var(--text-white); }

/* =====================================================
   🔹 RELATED DEALS CAROUSEL
   ===================================================== */
.related-deals-carousel-section { margin-top: var(--space-40); }
.section-header-premium { margin-bottom: var(--space-24); display: flex; align-items: center; justify-content: space-between; }
.carousel-nav { display: flex; gap: var(--space-8); }
.carousel-prev, .carousel-next { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-white); border: 2px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-dark); font-size: 20px; cursor: pointer; transition: all var(--transition-base); }
.carousel-prev:hover, .carousel-next:hover { background: var(--color-primary); color: var(--text-white); border-color: var(--color-primary); }
.deals-carousel-wrapper { position: relative; overflow: hidden; }
.deals-carousel-track { display: flex; gap: var(--space-14); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: var(--space-4) 0 var(--space-16); scrollbar-width: thin; scrollbar-color: var(--color-primary-light) transparent; -webkit-overflow-scrolling: touch; }
.deals-carousel-track::-webkit-scrollbar { height: 6px; }
.deals-carousel-track::-webkit-scrollbar-track { background: var(--bg-gray-light); border-radius: var(--radius-full); }
.deals-carousel-track::-webkit-scrollbar-thumb { background: var(--color-primary-light); border-radius: var(--radius-full); }
.deals-carousel-track::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* =====================================================
   🔹 MOBILE ACTION BAR (Fixed Bottom)
   ===================================================== */
.mobile-action-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-white);
  border-top: 2px solid var(--border-color);
  padding: var(--space-12) var(--space-16);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  z-index: var(--z-sticky);
}

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

.action-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%; /* Make it full width */
  max-width: 100%;
}

.action-bar-price {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  order: 1;
}

.btn-mobile-cta {
  flex-shrink: 0;
  padding: var(--space-12) var(--space-20);
  background: var(--color-primary);
  color: var(--text-white);
  font-size: var(--font-body);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255,107,53,0.3);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  transition: all var(--transition-base);
  order: 2;
}

.mobile-price-original {
  font-size: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--text-gray);
  text-decoration: line-through;
  opacity: 0.8;
}

.mobile-price {
  font-size: var(--font-h3);
  font-weight: var(--weight-black);
  color: var(--color-primary);
  line-height: 1;
}

.mobile-discount {
  display: inline-flex;
  padding: var(--space-4) var(--space-8);
  background: var(--color-danger);
  color: var(--text-white);
  font-size: var(--font-small);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.btn-mobile-cta:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,107,53,0.4);
}

.btn-mobile-cta.btn-expired {
  background: var(--bg-gray-light);
  color: var(--text-gray);
  cursor: not-allowed;
}

.btn-mobile-cta.btn-expired:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@media (max-width: 360px) {
  .action-bar-content { gap: var(--space-8); }
  .action-bar-price { gap: var(--space-6); }
  .mobile-price-original { font-size: var(--font-small); }
  .mobile-price { font-size: var(--font-h4); }
  .mobile-discount { font-size: 10px; padding: var(--space-3) var(--space-6); }
  .btn-mobile-cta { padding: var(--space-10) var(--space-16); font-size: var(--font-small); }
}

/* =====================================================
   🔹 RESPONSIVE - FINAL CLEANUP
   ===================================================== */
@media (max-width: 479px) {
  .single-deal-container { padding: 0 var(--space-12) var(--space-24); }
  .deal-hero-content { padding: var(--space-16); }
  .deal-breadcrumb { font-size: 10px; gap: var(--space-4); padding: var(--space-10) 0; }
  .deal-floating-badges { top: var(--space-12); left: var(--space-12); max-width: calc(100% - 90px); }
  .deal-floating-badges .badge { font-size: 10px; padding: var(--space-6) var(--space-10); }
}

/* END SINGLE DEAL PAGE CSS */


/* =====================================================
   📄 ARCHIVE PAGE - COMPLETE WORKING v9.0
   All CSS variables properly defined + working grid
   ===================================================== */

.archive-page,
.all-deals-page {
  background: var(--bg-section);
}

/* ============ BREADCRUMB ============ */
.archive-breadcrumb {
  padding: var(--space-8) 0;
  font-size: var(--font-small);
  color: var(--text-gray);
}

.archive-breadcrumb a {
  color: var(--text-gray);
  text-decoration: none;
  transition: color var(--transition-base);
}

.archive-breadcrumb a:hover {
  color: var(--color-primary);
}

/* ============ ARCHIVE HEADER ============ */
.archive-header {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--bg-white) 100%);
  padding: var(--space-12) 0;
  margin-bottom: var(--space-12);
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.archive-title {
  font-size: var(--font-h2);
  font-weight: var(--weight-black);
  color: var(--text-dark);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.archive-description {
  font-size: var(--font-small);
  color: var(--text-gray);
  line-height: 1.3;
}

/* ============ COMPACT INLINE FILTERS ============ */
.archive-filters-section {
  padding: 0 0 var(--space-12) 0;
}

.deals-filter-bar,
.complete-filter-bar {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  margin-bottom: var(--space-12);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* Quick Filter Row */
.filter-quick-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--border-color);
}

/* Filter Rows */
.filter-row-compact {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

/* Filter Groups */
.filter-group-inline {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* Labels */
.filter-label-inline {
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  min-width: 50px;
  flex-shrink: 0;
}

/* Filter Buttons */
.filter-btn-inline {
  padding: 6px 12px;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--text-dark);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  line-height: 1;
  height: 28px;
}

.filter-btn-inline:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.filter-btn-inline.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-white);
}

/* Dropdown */
.filter-dropdown {
  padding: 6px 12px;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--text-dark);
  cursor: pointer;
  transition: all var(--transition-base);
  min-width: 140px;
  height: 28px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.filter-dropdown:hover {
  border-color: var(--color-primary);
  background-color: var(--bg-white);
}

.filter-dropdown:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* ============ ACTIVE FILTERS ============ */
.active-filters {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-8);
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-10);
  border: 1px solid var(--color-primary);
}

.filters-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  flex-shrink: 0;
}

.filter-tags {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  flex: 1;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 3px 8px;
  background: var(--bg-white);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-base);
}

.filter-tag:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--text-white);
}

.filter-tag span {
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.btn-clear-filters {
  padding: 3px 8px;
  background: var(--color-danger);
  color: var(--text-white);
  font-size: 10px;
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-base);
  border: 1px solid var(--color-danger);
}

.btn-clear-filters:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* ============ DEALS TOOLBAR ============ */
.deals-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8);
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-12);
  gap: var(--space-10);
}

.results-info {
  font-size: var(--font-small);
  color: var(--text-gray);
  font-weight: var(--weight-medium);
}

.results-info strong {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.sort-options select {
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  background: var(--bg-white);
  color: var(--text-dark);
  cursor: pointer;
  transition: all var(--transition-base);
}

.sort-options select:hover {
  border-color: var(--color-primary);
}

.sort-options select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* ============ ARCHIVE CONTENT ============ */
.archive-content {
  padding: 0 0 var(--space-32) 0;
}

.archive-main {
  width: 100%;
}

/* ============ ARCHIVE DEALS GRID - FIXED ============ */
.archive-deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 12px;
  margin-bottom: var(--space-20);
}

/* Desktop: 4 columns */
@media (min-width: 1200px) {
  .archive-deals-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Laptop: 3 columns */
@media (min-width: 992px) and (max-width: 1199px) {
  .archive-deals-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 991px) {
  .archive-deals-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============ NO DEALS MESSAGE ============ */
.no-deals-message {
  text-align: center;
  padding: var(--space-32);
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: 2px dashed var(--border-color);
}

.no-deals-message p {
  font-size: var(--font-body);
  color: var(--text-gray);
  margin-bottom: var(--space-12);
}

/* ============ SECTIONS BELOW DEALS ============ */
.section-below-deals {
  padding: var(--space-24) 0;
  margin-top: var(--space-32);
  background: var(--bg-white);
  border-top: 2px solid var(--border-color);
}

.section-below-deals .section-title {
  font-size: var(--font-h3);
  font-weight: var(--weight-black);
  color: var(--text-dark);
  margin-bottom: var(--space-6);
  padding: 0 var(--space-20);
  text-align: center;
}

.section-below-deals .section-subtitle {
  font-size: var(--font-body);
  color: var(--text-gray);
  margin-bottom: var(--space-16);
  padding: 0 var(--space-20);
  text-align: center;
}

/* ============ POPULAR STORES ============ */
.popular-stores-section {
  padding: var(--space-12) 0;
  margin-bottom: var(--space-10);
  background: var(--bg-white);
}

.popular-stores-section .section-title {
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  margin-bottom: var(--space-8);
  padding: 0 var(--space-20);
}

.stores-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--space-6) var(--space-20) var(--space-10) var(--space-20);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-light) transparent;
}

.stores-grid::-webkit-scrollbar {
  height: 4px;
}

.stores-grid::-webkit-scrollbar-track {
  background: var(--bg-gray-light);
  border-radius: 2px;
}

.stores-grid::-webkit-scrollbar-thumb {
  background: var(--color-primary-light);
  border-radius: 2px;
}

.stores-grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

.store-card {
  flex: 0 0 160px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition-base);
}

.store-card:hover {
  background: var(--bg-white);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255,107,53,0.15);
}

.store-logo-img,
.store-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  padding: 3px;
}

.store-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.store-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.store-name {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.store-count {
  font-size: 9px;
  color: var(--text-gray);
  line-height: 1;
}

/* ============ POPULAR CATEGORIES ============ */
.popular-categories-section {
  padding: var(--space-12) 0;
  margin-bottom: var(--space-10);
  background: var(--bg-white);
}

.popular-categories-section .section-title {
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  margin-bottom: var(--space-8);
  padding: 0 var(--space-20);
}

.categories-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--space-6) var(--space-20) var(--space-10) var(--space-20);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-light) transparent;
}

.categories-grid::-webkit-scrollbar {
  height: 4px;
}

.categories-grid::-webkit-scrollbar-track {
  background: var(--bg-gray-light);
  border-radius: 2px;
}

.categories-grid::-webkit-scrollbar-thumb {
  background: var(--color-primary-light);
  border-radius: 2px;
}

.categories-grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

.category-card {
  flex: 0 0 160px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition-base);
}

.category-card:hover {
  background: var(--bg-white);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255,107,53,0.15);
}

.category-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.category-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.category-name {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.category-count {
  font-size: 9px;
  color: var(--text-gray);
  line-height: 1;
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 767px) {
  .archive-header {
    padding: var(--space-10) 0;
    margin-bottom: var(--space-10);
  }

  .archive-title {
    font-size: var(--font-h3);
  }

  .archive-description {
    font-size: 11px;
  }

  .deals-filter-bar,
  .complete-filter-bar {
    padding: var(--space-10);
    gap: var(--space-8);
  }

  .filter-quick-row {
    gap: var(--space-6);
    padding-bottom: var(--space-8);
  }

  .filter-row-compact {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }

  .filter-group-inline {
    width: 100%;
  }

  .filter-label-inline {
    min-width: 60px;
    font-size: 9px;
  }

  .filter-btn-inline {
    font-size: 9px;
    padding: 5px 10px;
    height: 26px;
  }

  .filter-dropdown {
    width: 100%;
    font-size: 9px;
    height: 26px;
  }

  .deals-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .sort-options select {
    width: 100%;
  }

  .archive-deals-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .archive-deals-grid .deal-card {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 320px !important;
  }

  .archive-deals-grid .deal-card-image-wrapper,
  .archive-deals-grid .deal-card-image {
    height: 110px;
  }

  .section-below-deals {
    padding: var(--space-16) 0;
    margin-top: var(--space-20);
  }

  .section-below-deals .section-title {
    font-size: 16px;
  }

  .section-below-deals .section-subtitle {
    font-size: 12px;
  }

  .popular-stores-section,
  .popular-categories-section {
    padding: var(--space-10) 0;
    margin-bottom: var(--space-8);
  }

  .popular-stores-section .section-title,
  .popular-categories-section .section-title {
    font-size: 14px;
    padding: 0 var(--space-12);
  }

  .stores-grid,
  .categories-grid {
    padding: var(--space-4) var(--space-12) var(--space-8) var(--space-12);
    gap: 8px;
  }

  .store-card,
  .category-card {
    flex: 0 0 140px;
    min-width: 140px;
    padding: 6px 8px;
  }
}

@media (max-width: 480px) {
  .archive-breadcrumb {
    font-size: 10px;
    padding: var(--space-6) 0;
  }

  .archive-title {
    font-size: 16px;
  }

  .filter-label-inline {
    font-size: 8px;
    min-width: 50px;
  }

  .filter-btn-inline {
    font-size: 8px;
    padding: 4px 8px;
    height: 24px;
  }

  .filter-dropdown {
    font-size: 8px;
    height: 24px;
  }

  .results-info {
    font-size: 11px;
  }
}

/* END ARCHIVE PAGE CSS v9.0 FINAL */


/* =====================================================
   📱 TELEGRAM POPUP MODAL
   ===================================================== */

/* Overlay (Background) */
.telegram-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 99999;
  padding: var(--space-20);
  animation: fadeIn 0.3s ease;
}

/* Show when active */
.telegram-popup-overlay[style*="display: flex"] {
  display: flex !important;
}

/* Prevent body scroll when popup is open */
body.telegram-popup-open {
  overflow: hidden;
}

/* Modal Container */
.telegram-popup-modal {
  position: relative;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 450px;
  width: 100%;
  padding: var(--space-40) var(--space-32);
  text-align: center;
  animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 479px) {
  .telegram-popup-modal {
    padding: var(--space-32) var(--space-24);
    max-width: 90%;
  }
}

/* Close Button */
.telegram-popup-close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  width: 36px;
  height: 36px;
  background: var(--bg-section);
  border: none;
  border-radius: 50%;
  color: var(--text-gray);
  font-size: 24px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  z-index: 10;
}

.telegram-popup-close:hover {
  background: var(--color-danger);
  color: var(--text-white);
  transform: rotate(90deg);
}

/* Telegram Icon */
.telegram-popup-icon {
  margin: 0 auto var(--space-20);
  animation: bounce 1s ease infinite;
}

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

/* Title */
.telegram-popup-title {
  font-size: var(--font-h2);
  font-weight: var(--weight-black);
  color: var(--text-dark);
  margin-bottom: var(--space-12);
  line-height: 1.2;
}

@media (max-width: 479px) {
  .telegram-popup-title {
    font-size: var(--font-h3);
  }
}

/* Message */
.telegram-popup-message {
  font-size: var(--font-body);
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: var(--space-24);
}

/* Join Button */
.telegram-popup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: var(--space-16) var(--space-32);
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  color: var(--text-white);
  font-size: var(--font-h4);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(42, 171, 238, 0.4);
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
}

.telegram-popup-button:hover {
  background: linear-gradient(135deg, #229ED9 0%, #1E88C5 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 171, 238, 0.5);
  color: var(--text-white);
}

.telegram-popup-button svg {
  flex-shrink: 0;
}

/* Channel Name */
.telegram-popup-channel-name {
  margin-top: var(--space-16);
  font-size: var(--font-small);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

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

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

/* Responsive */
@media (max-width: 360px) {
  .telegram-popup-modal {
    padding: var(--space-24) var(--space-16);
  }
  
  .telegram-popup-title {
    font-size: 20px;
  }
  
  .telegram-popup-message {
    font-size: var(--font-small);
  }
  
  .telegram-popup-button {
    padding: var(--space-14) var(--space-24);
    font-size: var(--font-body);
  }
}



/* =====================================================
   1️⃣2️⃣ SEARCH PAGE (SCOPED - Won't Affect Homepage)
   ===================================================== */

.search-results-page {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-24) var(--space-20);
}

.search-results-page .search-header {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: var(--space-32);
  margin-bottom: var(--space-24);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.search-results-page .search-title {
  font-size: 32px;
  font-weight: var(--weight-black);
  color: var(--text-dark);
  margin-bottom: var(--space-12);
}

.search-results-page .search-query {
  color: var(--color-primary);
}

.search-results-page .search-count {
  font-size: var(--font-h3);
  color: var(--text-gray);
}

.search-results-page .search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--space-16);
}

.search-results-page .no-results {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: var(--space-48);
  text-align: center;
  box-shadow: var(--shadow-card);
}

/* Mobile Responsive - Search Page */
@media (max-width: 479px) {
  .search-results-page .search-header {
    padding: var(--space-20);
  }
  
  .search-results-page .search-title {
    font-size: 20px;
  }
  
  .search-results-page .search-results-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-12);
  }
}


/* =====================================================
   1️⃣3️⃣ UTILITIES (Helper Classes)
   ===================================================== */

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Display Utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flex Utilities */
.flex-wrap { flex-wrap: wrap; }
.gap-12 { gap: var(--space-12); }

/* Margin Utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }

.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }
.mt-24 { margin-top: var(--space-24); }

/* Padding Utilities */
.p-0 { padding: 0 !important; }
.p-8 { padding: var(--space-8); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none !important; }

/* Border Radius Utilities */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-full { border-radius: 9999px; }

/* Color Utilities */
.text-primary { color: var(--color-primary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }

.bg-primary { background: var(--color-primary) !important; }
.bg-success { background: var(--color-success) !important; }
.bg-danger { background: var(--color-danger) !important; }

/* Responsive Visibility */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}

/* Mobile Responsive Utilities */
@media (max-width: 479px) {
}


/* =====================================================
   📄 STATIC PAGES (About, Privacy, Contact, etc.)
   ===================================================== */

/* Page Container */
.static-page {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-20) var(--space-40);
}

/* Breadcrumb */
.page-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-16) 0;
  margin-bottom: var(--space-24);
  font-size: var(--font-small);
  color: var(--text-gray);
}

.page-breadcrumb a {
  color: var(--text-gray);
  font-weight: var(--weight-medium);
  transition: color var(--transition-base);
}

.page-breadcrumb a:hover {
  color: var(--color-primary);
}

/* Page Header */
.page-header {
  max-width: 900px;
  margin: 0 auto var(--space-40);
  padding: var(--space-40) var(--space-24);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--bg-white) 100%);
  border-radius: var(--radius-lg);
  text-align: center;
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-card);
}

.page-title {
  font-size: var(--font-h1);
  font-weight: var(--weight-black);
  margin-bottom: var(--space-16);
  color: var(--text-dark);
  line-height: 1.2;
}

.page-excerpt {
  font-size: var(--font-body-md);
  color: var(--text-gray);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* Page Content */
.page-content {
  max-width: 900px;
  margin: 0 auto;
}

.page-featured-image {
  margin-bottom: var(--space-32);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.page-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.page-content-main {
  background: var(--bg-white);
  padding: var(--space-40) var(--space-32);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-color);
}

/* Content Typography */
.page-content-main h1 {
  font-size: var(--font-h2);
  margin-bottom: var(--space-20);
  color: var(--text-dark);
  font-weight: var(--weight-black);
}

.page-content-main h2 {
  font-size: var(--font-h3);
  margin-top: var(--space-32);
  margin-bottom: var(--space-16);
  color: var(--text-dark);
  font-weight: var(--weight-bold);
  padding-bottom: var(--space-12);
  border-bottom: 2px solid var(--color-primary-light);
}

.page-content-main h3 {
  font-size: var(--font-h4);
  margin-top: var(--space-24);
  margin-bottom: var(--space-12);
  color: var(--text-dark);
  font-weight: var(--weight-bold);
}

.page-content-main p {
  font-size: var(--font-body-md);
  line-height: 1.8;
  color: var(--text-dark);
  margin-bottom: var(--space-20);
}

.page-content-main ul,
.page-content-main ol {
  padding-left: var(--space-32);
  margin-bottom: var(--space-20);
  list-style: disc;
}

.page-content-main ol {
  list-style: decimal;
}

.page-content-main li {
  font-size: var(--font-body-md);
  line-height: 1.8;
  color: var(--text-dark);
  margin-bottom: var(--space-12);
}

.page-content-main a {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  transition: color var(--transition-base);
}

.page-content-main a:hover {
  color: var(--color-primary-hover);
}

.page-content-main blockquote {
  padding: var(--space-20) var(--space-24);
  margin: var(--space-24) 0;
  background: var(--bg-section);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-style: italic;
  color: var(--text-gray);
}

.page-content-main img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-24) 0;
}

/* Page Links (for paginated content) */
.page-links {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.page-links .post-page-numbers {
  padding: var(--space-8) var(--space-16);
  background: var(--bg-white);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-dark);
  transition: all var(--transition-base);
}

.page-links .post-page-numbers:hover,
.page-links .post-page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-white);
}

/* Page Comments */
.page-comments {
  margin-top: var(--space-40);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .page-header {
    padding: var(--space-32) var(--space-20);
    margin-bottom: var(--space-32);
  }
  
  .page-title {
    font-size: var(--font-h2);
  }
  
  .page-content-main {
    padding: var(--space-24) var(--space-20);
  }
  
  .page-content-main h2 {
    margin-top: var(--space-24);
  }
}

@media (max-width: 479px) {
  .static-page {
    padding: 0 var(--space-12) var(--space-24);
  }
  
  .page-header {
    padding: var(--space-24) var(--space-16);
    margin-bottom: var(--space-24);
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .page-content-main {
    padding: var(--space-20) var(--space-16);
  }
  
  .page-content-main ul,
  .page-content-main ol {
    padding-left: var(--space-20);
  }
}


/* =====================================================
   🎉 END OF MAIN.CSS v1.0 - COMPLETE ✅
   
   Total Sections: 13
   Total Lines: ~2,500
   
   🔑 Key Features:
   ✅ Components + Pages + Responsive = ONE FILE
   ✅ Desktop + Mobile together for each component
   ✅ Pages.css scoped to avoid homepage conflicts
   ✅ Critical carousel styles included
   ✅ Production ready
   ✅ Zero breaking changes
   ===================================================== */

/* ============================================
   📱 MOBILE OPTIMIZATIONS - COMPLETE
   ============================================ */

@media (max-width: 767px) {
  
  /* ========================================
     STORES SECTION - 2 COLUMN GRID
     ======================================== */
  
  .store-card {
    padding: 12px !important;
    font-size: 13px !important;
  }
  
  .store-logo-img {
    width: 50px !important;
    height: 50px !important;
  }
  
  .store-name {
    font-size: 14px !important;
  }
  
  .store-count {
    font-size: 12px !important;
  }
  
  /* ========================================
     CATEGORIES SECTION - 2 COLUMN GRID
     ======================================== */
  
  .category-card {
    padding: 12px !important;
    font-size: 13px !important;
  }
  
  .category-icon {
    font-size: 32px !important; /* Slightly smaller icon */
  }
  
  .category-name {
    font-size: 14px !important;
  }
  
  .category-count {
    font-size: 12px !important;
  }
  
  /* ========================================
     DEAL CARDS - HORIZONTAL SCROLL FIX
     ======================================== */
  
  .deals-grid {
    padding-left: 16px !important;  /* Add breathing room */
    padding-right: 16px !important;
    gap: 16px !important;
  }
  
  /* ========================================
     FOOTER - COMPACT LAYOUT
     ======================================== */
  
  /* Footer Columns - 2 COLUMNS */
  .footer-columns {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 20px 12px !important;
  }
  
  /* Footer Column - Reduce sizes */
  .footer-column {
    font-size: 14px !important;
  }
  
  .footer-column h4,
  .footer-column h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  
  /* Footer Links - Compact */
  .footer-menu li,
  .footer-column ul li {
    margin-bottom: 6px !important;
  }
  
  .footer-menu a,
  .footer-column a {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  
  /* Newsletter - Reduce padding */
  .newsletter-section-footer {
    padding: 24px 16px !important;
  }
  
  /* Footer Bottom */
  .footer-bottom {
    padding: 16px !important;
    font-size: 12px !important;
  }
  
  /* Hide 4th column (optional) */
  .footer-column:nth-child(4) {
    display: none !important;
  }
  
  /* ========================================
     HOMEPAGE SECTIONS - SPACING
     ======================================== */
  
  .homepage-section {
    padding: 32px 0 !important; /* Reduce vertical spacing */
  }
  
  .section-header {
    padding: 0 16px !important;
    margin-bottom: 16px !important;
  }
  
  .section-title {
    font-size: 20px !important;
  }
  
}