[x-cloak] { display: none !important; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
header {
    transition: top 0.3s ease-in-out;
    border-bottom: none;
}

/* Keep announcement bar visible; autoplay is paused/resumed via JS when modals open */
/* .modal-open .marquee-section { display: none !important; } */

.search-popup { transform: translateY(-100%); transition: transform 0.3s ease-in-out; }
.search-popup.show { transform: translateY(0); }
.search-overlay { opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; }
.search-overlay.show { opacity: 1; visibility: visible; }
.transition { transition: opacity 0.3s ease-in-out; }

/* توحيد خط Cairo في المشروع كامل */
body, html, * { 
    font-family: 'Cairo', sans-serif !important; 
}

/* إصلاح المسافات الجانبية للشاشات فوق 1200px */
.container {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 1rem;
}

/* تقليل البادينج الجانبي للكونتينر في كل السكاشن */
.container {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* إزالة المساحة الكبيرة في التليفون */
@media (max-width: 480px) {
  .container {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  
  body {
    overflow-x: hidden;
  }
  
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* إزالة أي margin أو padding زائد */
  section, div, article {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* ضمان أن المحتوى يبدأ من الحافة */
  .container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 1280px) {
  .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (min-width: 640px) {
    .container { padding: 0 1.5rem; }
}

@media (min-width: 768px) {
    .container { padding: 0 2rem; }
}

@media (min-width: 1024px) {
    .container { padding: 0 3rem; }
}

@media (min-width: 1200px) {
    .container { 
        max-width: 1140px; 
        padding: 0 2rem;
    }
}

@media (min-width: 1400px) {
    .container { 
        max-width: 1320px; 
        padding: 0 3rem;
    }
}

@media (min-width: 1600px) {
    .container { 
        max-width: 1520px; 
        padding: 0 4rem;
    }
}

@media (min-width: 1920px) {
    .container { 
        max-width: 1800px; 
        padding: 0 5rem;
    }
}

/* Utilities for consistent card titles */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Custom responsive breakpoints for desktop */
@media (min-width: 1200px) {
    .cart-grid { grid-template-columns: 2fr 1fr; }
    .product-grid { grid-template-columns: repeat(12, 1fr); }
}

@media (min-width: 1400px) {
    .cart-grid { grid-template-columns: 2.5fr 1fr; }
}

@media (min-width: 1600px) {
    .cart-grid { grid-template-columns: 3fr 1fr; }
}

@media (min-width: 1920px) {
    .cart-grid { grid-template-columns: 3.5fr 1fr; }
}

/* Enhanced mobile responsive styles */
@media (max-width: 767px) {
    .container { padding: 0 1rem } 
    /* Revert to desktop-like spacing on mobile */
    .cart-grid { gap: 1.5rem; }
    .product-grid { gap: 1.5rem; }
    /* Remove previously forced gap reductions */
    .gap-3 { gap: 0.75rem !important; }
    .gap-2 { gap: 0.5rem !important; }
    .gap-4 { gap: 1rem !important; }
    /* Shrink offers-section cards and images further on mobile */
    .offer-card { height: 11rem; }
    .offer-card img { height: 6rem !important; }
    .cart-grid { 
        grid-template-columns: 1fr; 
        gap: 1rem;
    }
    .product-grid { 
        grid-template-columns: 1fr; 
        gap: 1rem;
    }
    .product-item-mobile {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        background: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .product-info-mobile {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }
    .product-details-mobile {
        flex: 1;
        min-width: 0;
    }
    .product-details-mobile .font-bold {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .product-actions-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1rem;
        border-top: 1px solid #e5e7eb;
    }
    .quantity-controls-mobile {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .quantity-btn {
        width: 2.5rem;
        height: 2.5rem;
        border: 1px solid #d1d5db;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        cursor: pointer;
        font-weight: bold;
        font-size: 1.125rem;
        transition: all 0.2s;
        color: #374151;
    }
    .quantity-btn:hover {
        background: #f3f4f6;
        border-color: #9ca3af;
    }
    .quantity-btn:active {
        transform: scale(0.95);
    }
    .quantity-input {
        width: 3.5rem;
        height: 2.5rem;
        border: 1px solid #d1d5db;
        border-radius: 0.5rem;
        text-align: center;
        font-weight: bold;
        font-size: 1rem;
    }
    .quantity-input:focus {
        outline: none;
        border-color: #003033;
        box-shadow: 0 0 0 3px rgba(0, 48, 51, 0.1);
    }
}

/* Force single column for very small screens (<=360px) */
@media (max-width: 360px) {
  .mobile-one-col {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .cart-grid { 
        grid-template-columns: 1.5fr 1fr; 
        gap: 1.5rem;
    }
    .product-grid { 
        grid-template-columns: repeat(12, 1fr); 
        gap: 1rem;
    }
}

/* khalid */
.fi{
    display: flex;
    align-items: center;
    justify-content: center;
}

::-webkit-scrollbar {
    width: 4px; 
    height: 4px; 
}
  
::-webkit-scrollbar-track {
    background: transparent; 
    border-radius: 4px;
}
  
::-webkit-scrollbar-thumb {
    background: var(--primary-orange);
    border-radius: 4px;
}
  
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-orange); 
}

.text-decoration-line-through {
    text-decoration: line-through;
}

@media (min-width: 1200px) {
	/* Keep header columns stable and center track from shrinking issues */
	header .container > .grid {
		align-items: center;
	}
	header .container > .grid > div:first-child,
	header .container > .grid > div:last-child {
		flex-shrink: 0;
	}
	header .container > .grid > div:nth-child(2) {
		min-width: 0;
	}
	header nav[ x-ref="track" ],
	header [x-ref="track"] {
		max-width: 100%;
	}
}

/* Swiper Custom Styles - banner widget removed */
/* ===== Announcement bar (offers-announcement) ===== */
.marquee-section .swiper-slide{
    min-height: auto !important;
    min-width: max-content !important;
    width: auto !important;
}
.marquee-section .swiper-wrapper {
    transition-timing-function: linear !important; /* حركة خطية */
}

/* ===== Section vertical rhythm (balanced spacing) ===== */
/* Default spacing for sections */
section.relative.w-full.overflow-hidden {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}
.hero-section.relative.w-full.overflow-hidden {
  margin-bottom: 0.75rem !important;
}

/* Mobile spacing */
@media (max-width: 768px) {
  section.relative.w-full.overflow-hidden {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  .hero-section.relative.w-full.overflow-hidden {
    margin-bottom: 0.5rem !important;
  }
}

/* Large screens spacing */
@media (min-width: 1024px) {
  section.relative.w-full.overflow-hidden {
    margin-bottom: 1.25rem !important;
  }
  .hero-section.relative.w-full.overflow-hidden {
    margin-bottom: 1rem !important;
  }
}

/* Ensure sections take full width */
section.relative.w-full.overflow-hidden {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    max-width: none;
}

/* تقليل المسافة بين الأقسام على جميع الشاشات */
section.relative.w-full.overflow-hidden {
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
}

/* تقليل المسافة بعد قسم الهيرو تحديداً */
.hero-section.relative.w-full.overflow-hidden {
    margin-bottom: 0.25rem !important;
    margin-top: 0 !important;
}

/* Banner section spacing rules removed (widget deleted) */

/* تقليل المسافة على الشاشات الكبيرة */
@media (min-width: 1024px) {
    section.relative.w-full.overflow-hidden {
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
    }
    
    .hero-section.relative.w-full.overflow-hidden {
        margin-bottom: 0.25rem !important;
        margin-top: 0 !important;
    }
    
    /* banner section spacing removed */
}



/* Keep original colors and backgrounds - only fix spacing */
@media (max-width: 768px) {
  /* Remove gray borders from header and announcement bar */
  header {
    border-bottom: none !important;
  }
  
  
  /* Keep original section backgrounds */
  
  /* Keep original padding but reduce excessive spacing */
  .py-6 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  .py-8 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  .py-12 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  
  /* Keep original container backgrounds */
  
  /* Keep original main content backgrounds */
  
  /* Keep original body background */
}

/* Mobile Section Spacing - Professional & Consistent */
@media (max-width: 768px) {
  /* Remove all margins and padding between sections for seamless layout */
  section {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Banner section removed */
  
  /* Remove spacing between sections completely */
  section + section {
    margin-top: 0 !important;
  }
  
  /* Container adjustments for mobile - Minimal padding */
  .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Specific section padding adjustments */
  .products-section .container,
  .offers-section .container,
  .features-section .container,
  .collections-section .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Full-width sections on mobile - Enhanced for complete screen width */
  /* Banner swiper container removed */
  
  /* Container adjustments for new structure - Full width */
  /* Banner container removed */
  
  /* Banner sections - Full width */
  /* Banner section full-width removed */
  
  
  /* Special offers section spacing - simplified (avoid :has/:contains) */
  .py-12 {
    padding-top: 0.75rem !important;
    padding-bottom: 1rem !important;
  }
  
  
  /* Remove main content padding for seamless layout */
  main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  
  /* Set a small bottom margin for last section */
  section:last-of-type {
    margin-bottom: 0.75rem !important;
  }
  
  /* Minimal footer spacing */
  footer {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
  }
  
  /* Remove main content spacing */
  main {
    padding-bottom: 0 !important;
  }
  
  /* Ensure sections have some breathing room */
  section {
    margin-bottom: 0.75rem !important;
  }
  
  /* Improve section content spacing */
  .section-content {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* Remove excessive padding from section headers */
  .section-header {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
  }
  
  /* Improve product grid spacing */
  .product-grid {
    gap: 0.5rem !important;
  }
  
  /* Improve card spacing */
  .product-card,
  .offer-card {
    margin-bottom: 0.5rem !important;
  }
  
  /* Keep original card backgrounds */
  
  /* Keep original text colors */
  
  /* Keep original button backgrounds */
  
  /* Enhanced mobile touch experience */
  /* Banner swiper touch behavior removed */
  
  /* Mobile-optimized shadows */
  /* Banner swiper container shadow removed */
  
  /* Enhanced image sizing for mobile - Show full content without cropping */
  /* Banner image overrides removed */
  
  /* Image containers for better mobile display */
  /* Banner image container removed */
  
  /* Mobile typography improvements */
  /* Banner text/button overrides removed */
  
  /* Mobile navigation improvements - Enhanced arrows */
  /* Banner nav removed */
  
  /* Mobile pagination improvements */
  /* Banner pagination removed */
}

/* ===== MOBILE PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  /* Optimize animations for mobile */
  /* Banner image perf hints removed */
  
  /* Mobile-specific loading states */
  /* Banner image animation removed */
  
  @keyframes mobileFadeIn {
    from {
      opacity: 0;
      transform: scale(1.05);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Additional mobile optimizations for banner */
  /* Banner section overflow removed */
  
  /* Ensure proper aspect ratio maintenance on mobile */
  /* Banner slide size removed */
  
  /* Final mobile layout improvements */
  .mobile-tight {
    gap: 0.25rem !important;
  }
  
  /* Remove any remaining gray spaces */
  .space-y-6 > * + *,
  .space-y-8 > * + *,
  .space-y-12 > * + * {
    margin-top: 0 !important;
  }
  
  /* Ensure seamless section transitions */
  .section-transition {
    transition: all 0.3s ease-in-out;
  }
  
  /* Keep original backgrounds and colors */
  
  /* Keep original content area backgrounds */
  
  /* Keep original text colors */
  
  /* Keep original section backgrounds */
  
  /* Keep original element backgrounds */
  
  /* Final mobile layout improvements - keep spacing optimizations */
  .mobile-optimized {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Ensure proper spacing for content sections */
  .content-section {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* Maintain proper spacing for product grids */
  .product-grid-mobile {
    gap: 0.5rem !important;
  }
  
  /* Ensure proper spacing for section headers */
  .section-header-mobile {
    margin-bottom: 0.5rem !important;
  }
  
  /* Keep original backgrounds and colors - no more transparent overrides */
  
}



/* removed announcement bar/marquee styles */

/* ===== NEW ARRIVALS SWIPER STYLES ===== */

/* Mobile Padding Fix */
@media (max-width: 640px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===== OFFERS SECTION STYLES ===== */

/* ===== ZERO GAP: announcement + header + hero + video ===== */
body { margin: 0 !important; }
.marquee-section { margin: 0 !important; }
header { margin: 0 !important; }
.hero-section { margin: 0 !important; }

/* إزالة المسافة بين الهيدر وقسم الفيديو */
.video-section,
section.relative.w-full.overflow-hidden:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ضمان عدم وجود مسافات في جميع أحجام الشاشات */
@media (max-width: 768px) {
  .video-section,
  section.relative.w-full.overflow-hidden:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (min-width: 769px) {
  .video-section,
  section.relative.w-full.overflow-hidden:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Swiper Navigation Buttons Styling */
.swiper-button-next,
.swiper-button-prev {
    width: 28px;
    height: 28px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111827 !important;
    box-shadow: none;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 12px;
    font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
    
    .offers-swiper {
        padding: 0 12px;
    }
    
    .swiper-slide {
        /* width: calc(50% - 6px) !important;
        margin-right: 12px !important; */
    }
}

/* ===== Unified top gap for selected content sections ===== */
:root { --widget-top-gap: clamp(20px, 4vw, 48px); }
.section-spaced { margin-top: var(--widget-top-gap) !important; }

/* إزالة المسافة من قسم الفيديو تحديداً */
.video-section.section-spaced {
  margin-top: 0 !important;
}

/* ضمان عدم وجود مسافات في جميع أحجام الشاشات لقسم الفيديو */
@media (max-width: 640px) {
  .video-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* إزالة المسافة من العنصر السابق لقسم الفيديو */
  header + .video-section,
  .hero-section + .video-section,
  .marquee-section + .video-section {
    margin-top: 0 !important;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .video-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* إزالة المسافة من العنصر السابق لقسم الفيديو */
  header + .video-section,
  .hero-section + .video-section,
  .marquee-section + .video-section {
    margin-top: 0 !important;
  }
}

@media (min-width: 1024px) {
  .video-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* إزالة المسافة من العنصر السابق لقسم الفيديو */
  header + .video-section,
  .hero-section + .video-section,
  .marquee-section + .video-section {
    margin-top: 0 !important;
  }
}

/* إزالة المسافة العامة من أي عنصر قبل قسم الفيديو */
* + .video-section {
  margin-top: 0 !important;
}

/* @media (min-width: 641px) and (max-width: 1023px) {
    .swiper-slide {
        width: calc(50% - 12px) !important;
        margin-right: 24px !important;
    }
} */

/* ===== HERO SWIPER CUSTOMIZATION ===== */
.hero-swiper {
  width: 100%;
  height: 100%;
}

.hero-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

/* Loading Animation */
.hero-image {
  opacity: 0;
  animation: fadeInHeroImage 0.5s ease-in-out forwards;
}

@keyframes fadeInHeroImage {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Smooth transitions between slides */
.hero-swiper .swiper-slide-active .hero-image {
  transform: scale(1);
}

/* ===== HERO SWIPER FIXES ===== */
.hero-swiper .swiper-slide {
  width: 100% !important;
  height: 100% !important;
  flex-shrink: 0;
}

.hero-swiper .swiper-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Force single slide view */
.hero-swiper {
  overflow: hidden;
}

.hero-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0;
  pointer-events: none;
}

/* Additional fixes for hero swiper */
.hero-swiper .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-swiper .swiper-slide-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Smooth slide transitions for hero */
.hero-swiper .swiper-slide {
  transition: transform 0.6s ease-in-out;
}

.hero-swiper .swiper-slide-active {
  transform: translateX(0);
}

.hero-swiper .swiper-slide-next {
  transform: translateX(100%);
}

.hero-swiper .swiper-slide-prev {
  transform: translateX(-100%);
}

/* Remove opacity effects for smooth slide transitions */
.hero-swiper .swiper-slide {
  opacity: 1;
  pointer-events: auto;
}

/* Enhanced Navigation Buttons Styling */
#new-arrivals-prev,
#new-arrivals-next {
  width: 40px;
  height: 40px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  color: #111827 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 20;
}
/* Tighten top spacing for features and reviews sections */
.features-section.section-spaced,
.reviews-section.section-spaced {
  margin-top: 0 !important;
  padding-top: 0.25rem !important;
}
@media (min-width: 1024px) {
  .features-section.section-spaced,
  .reviews-section.section-spaced {
    padding-top: 0.5rem !important;
  }
}

/* Features section mobile improvements */
@media (max-width: 768px) {
  .features-section .grid {
    gap: 1.5rem !important;
  }
  
  .features-section .text-center {
    padding: 0 0.5rem;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .features-section .text-center h3 {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0.5rem !important;
    text-align: center !important;
    max-width: 200px !important;
    word-wrap: break-word !important;
  }
  
  .features-section .text-center p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
    max-width: 200px !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  
  .features-section .w-16 {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }
  
  .features-section .max-w-xs {
    max-width: 200px !important;
  }
  
  .features-section .mb-2 {
    margin-bottom: 0.5rem !important;
  }
  
  .features-section .mb-3 {
    margin-bottom: 0.5rem !important;
  }
}

/* Restore generous top spacing for category section (تسوق حسب الفئة) */
.category-section.section-spaced {
  padding-top: 1.25rem !important;
}
@media (min-width: 1024px) {
  .category-section.section-spaced {
    padding-top: 2rem !important;
  }
}
/* Extra small screens */
@media (max-width: 480px) {
  #new-arrivals-prev,
  #new-arrivals-next {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  
  #new-arrivals-prev {
    right: 4px !important;
  }
  
  #new-arrivals-next {
    left: 4px !important;
  }
}

#new-arrivals-prev:hover,
#new-arrivals-next:hover {
  background: #f9fafb;
  border-color: #003033;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: scale(1.1);
}

#new-arrivals-prev:active,
#new-arrivals-next:active {
  transform: scale(0.95);
}

/* Responsive Slides */

/* Mobile - 1.5 Cards (Match index.html style) */
@media (max-width: 639px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* .new-arrivals-swiper .swiper-slide {
    width: 256px !important; /* w-64 from index.html */
    /* margin-right: 16px !important; /* Match index.html spacing exactly */
    /* padding-left: 0 !important;
    padding-right: 0 !important; */
  } */ */
  
  .new-arrivals-swiper {
    gap: 16px !important; /* Match index.html spacing exactly */
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
  
  /* Show arrows on mobile with smaller size */
  #new-arrivals-prev,
  #new-arrivals-next {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
}

/* Tablet - 2 Cards */
@media (min-width: 640px) and (max-width: 767px) {
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .new-arrivals-swiper .swiper-slide {
    width: 280px !important;
    margin-right: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Small Desktop - 3 Cards */
@media (min-width: 768px) and (max-width: 1023px) {
  .new-arrivals-swiper .swiper-slide {
    width: 280px !important;
    margin-right: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Large Desktop - 4 Cards */
@media (min-width: 1024px) {
  .new-arrivals-swiper .swiper-slide {
    width: 280px !important;
    margin-right: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ===== PRODUCT WIDGET STYLES ===== */

/* Mobile and Tablet Responsive Fixes - Same height as other sections */
@media (max-width: 768px) {
  /* banner widget removed */
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* banner widget removed */
}

@media (min-width: 1025px) {
  /* banner widget removed */
}

@media (max-width: 480px) {
  /* banner widget removed */
}

/* ===== MOBILE CARDS ALIGNMENT (360px and below) ===== */
@media (max-width: 360px) {
  /* Match special offers section padding exactly */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Product cards alignment - match special offers section */
  .md\:hidden .flex.gap-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Individual product cards - show 1.5 cards with tiny gaps */
  .md\:hidden .min-w-\[50\%\] {
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
    width: calc(66.666% - 2px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Product card content - match special offers section alignment */
  .bg-gray-50.rounded-lg.shadow-md {
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
    /* Match the exact alignment of special offers images */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Show 1.5 cards horizontally with tiny gaps */
  .md\:hidden .flex.gap-0 {
    /* flex-direction: row !important; */
    gap: 4px !important; /* Tiny gap between cards */
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
  
  /* Enable horizontal scrolling for 1.5 cards */
  .md\:hidden .overflow-x-auto {
    overflow-x: auto !important;
  }
  
  /* Make each card show 1.5 cards */
  .md\:hidden .snap-start {
    width: calc(66.666% - 2px) !important;
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
    flex-shrink: 0 !important;
  }
  
  /* Section headers alignment */
  .flex.justify-between.items-center {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Banner sections - ensure full width */
  .hero-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  /* Products section container alignment */
  .py-6.bg-gray-50 .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Remove any remaining gaps between sections */
  section + section {
    margin-top: 0 !important;
  }
  
  /* Ensure product cards have no border radius and full width */
  .bg-gray-50.rounded-lg.shadow-md.overflow-hidden.group.border {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  /* Remove container padding from product sections */
  .py-6.bg-gray-50 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure seamless connection between banner and cards */
  /* banner sibling spacing removed */
  
  /* Product image full width */
  .bg-gray-50 .w-full.h-64.object-cover {
    border-radius: 0 !important;
  }
  
  /* Ensure perfect alignment with banner */
  .hero-swiper-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  /* Remove any remaining padding from mobile containers */
  .md\:hidden.-mx-4.px-4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Perfect horizontal layout for 1.5 cards */
  .md\:hidden .flex {
    display: flex !important;
    /* flex-direction: row !important; */
    width: 100% !important;
  }
  
  /* Enable snap behavior for horizontal scrolling */
  .md\:hidden .snap-x.snap-mandatory {
    scroll-snap-type: x mandatory !important;
  }
  
  .md\:hidden .snap-start {
    scroll-snap-align: start !important;
  }
  
  /* Ensure smooth scrolling and proper card sizing */
  .md\:hidden .flex.gap-0 {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
  }
  
  .md\:hidden .flex.gap-0::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
  }
  
  /* Perfect 1.5 cards layout - Force override */
  .md\:hidden .min-w-\[50\%\] {
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
    width: calc(66.666% - 2px) !important;
  }
}

/* ===== MOBILE CARDS 1.5 LAYOUT (320px to 360px) ===== */
@media (max-width: 360px) and (min-width: 320px) {
  /* Ensure 1.5 cards display for all mobile sizes */
  .md\:hidden .min-w-\[50\%\] {
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
    width: calc(66.666% - 2px) !important;
  }
  
  .md\:hidden .snap-start {
    width: calc(66.666% - 2px) !important;
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
  }
  
  .md\:hidden .flex.gap-0 {
    gap: 4px !important;
    /* flex-direction: row !important; */
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
}

/* ===== EXTRA SMALL MOBILE (320px and below) ===== */
@media (max-width: 320px) {
  /* Match special offers section padding exactly */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Ensure all sections are full width */
  section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Product cards perfect alignment */
  .bg-gray-50.rounded-lg.shadow-md.overflow-hidden.group.border.flex.flex-col {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  /* Match special offers section container padding exactly */
  .py-6.bg-gray-50 .container.mx-auto {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Ensure product cards align with special offers images */
  .py-6.bg-gray-50 .md\\:hidden .flex.gap-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* 1.5 cards layout for extra small screens */
  .md\:hidden .min-w-\[50\%\] {
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
    width: calc(66.666% - 2px) !important;
  }
  
  .md\:hidden .flex.gap-0 {
    gap: 4px !important;
    /* flex-direction: row !important; */
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
  
  /* Force 1.5 cards display */
  .md\:hidden .snap-start {
    width: calc(66.666% - 2px) !important;
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
  }
  
  /* Hide scrollbar for clean look */
  .md\:hidden .flex.gap-0 {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  .md\:hidden .flex.gap-0::-webkit-scrollbar {
    display: none !important;
  }
}

/* ===== MOBILE 1.5 CARDS FIX ===== */
@media (max-width: 360px) {
  .md\:hidden .min-w-\[50\%\] {
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
    width: calc(66.666% - 2px) !important;
  }
  
  .md\:hidden .snap-start {
    width: calc(66.666% - 2px) !important;
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
  }
  
  .md\:hidden .flex.gap-0 {
    gap: 4px !important;
    /* flex-direction: row !important; */
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
}

/* ===== MOBILE 1.5 CARDS FIX ===== */
@media (max-width: 360px) {
  .md\:hidden .min-w-\[50\%\] {
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
    width: calc(66.666% - 2px) !important;
  }
  
  .md\:hidden .snap-start {
    width: calc(66.666% - 2px) !important;
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
  }
  
  .md\:hidden .flex.gap-0 {
    gap: 4px !important;
    /* flex-direction: row !important; */
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
}

/* ===== MOBILE 1.5 CARDS FIX ===== */
@media (max-width: 360px) {
  .md\:hidden .min-w-\[50\%\] {
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
    width: calc(66.666% - 2px) !important;
  }
  
  .md\:hidden .snap-start {
    width: calc(66.666% - 2px) !important;
    min-width: calc(66.666% - 2px) !important;
    max-width: calc(66.666% - 2px) !important;
  }
  
  .md\:hidden .flex.gap-0 {
    gap: 4px !important;
    /* flex-direction: row !important; */
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
}

/* ===== NEW ARRIVALS RESPONSIVE FIX ===== */
@media (max-width: 360px) {
  /* Apply same style to new-arrivals swiper */
  .new-arrivals-swiper .swiper-slide {
    width: 240px !important; /* Slightly smaller for very small screens */
    margin-right: 8px !important;
  }
  
  .new-arrivals-swiper {
    gap: 8px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
}

@media (max-width: 320px) {
  /* Apply same style to new-arrivals swiper for extra small screens */
  .new-arrivals-swiper .swiper-slide {
    width: 220px !important; /* Even smaller for very small screens */
    margin-right: 16px !important; /* Match index.html spacing exactly */
  }
  
  .new-arrivals-swiper {
    gap: 16px !important; /* Match index.html spacing exactly */
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
}

/* ===== NEW ARRIVALS WIDGET RESPONSIVE FIX ===== */
@media (max-width: 360px) {
  .new-arrivals-swiper .swiper-slide {
    width: 240px !important; /* Slightly smaller for very small screens */
    margin-right: 16px !important; /* Match index.html spacing exactly */
  }
  
  .new-arrivals-swiper {
    gap: 16px !important; /* Match index.html spacing exactly */
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }
}

/* ===== NEW ARRIVALS SPACING FIX ===== */
@media (max-width: 639px) {
  .new-arrivals-swiper .swiper-slide {
    width: 256px !important;
    margin-right: 16px !important;
  }
  
  .new-arrivals-swiper {
    gap: 16px !important;
  }
}

/* ===== FINAL SECTION SPACING OVERRIDES =====
   لا تستخدم أي margin-bottom على السكاشن نفسها.
   نظّم المسافات داخل المحتوى الداخلي فقط (مثل .container أو عناوين السكاشن).
   هذا يمنع ظهور فراغات غير مرغوبة بين الشريط العلوي والهيدر على الشاشات الصغيرة. */
section,
section.relative.w-full.overflow-hidden,
.hero-section,
.banner-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* لو محتاج مسافة أعلى سكشن معين استخدم كلاس اختياري بدل margin على السكشن كله */
.section-spaced,
.section-gap-top { /* احتياطي للتوافق */
  margin-top: 0 !important;           /* منع أي margin خارجي */
  padding-top: clamp(8px, 2vw, 16px) !important; /* مسافة داخلية فقط */
}

/* منع أي إعادة تفعيل للمسافة في الموبايل */
@media (max-width: 768px) {
  section,
  section.relative.w-full.overflow-hidden,
  .hero-section,
  .banner-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 360px) {
  .new-arrivals-swiper .swiper-slide {
    width: 240px !important;
    margin-right: 16px !important;
  }
  
  .new-arrivals-swiper {
    gap: 16px !important;
  }
}

@media (max-width: 320px) {
  .new-arrivals-swiper .swiper-slide {
    width: 220px !important;
    margin-right: 16px !important;
  }
  
  .new-arrivals-swiper {
    gap: 16px !important;
  }
}

/* ===== HERO SECTION STYLES ===== */

/* Container & Layout */
.hero-container {
  width: 100%;
  padding: 0;
  margin: 0;
  max-width: none;
}

.hero-swiper-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

.hero-slide-container {
  position: relative;
  width: 100%;
  height: 500px; /* Larger height for hero section */
  overflow: hidden;
  margin: 0;
}

.hero-single-slide {
  position: relative;
  width: 100%;
  min-height: 500px; /* Minimum height for single slide */
  overflow: visible; /* Allow full image to show */
  margin: 0;
  padding: 0;
}

.hero-slide-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* Image Container - Perfect Aspect Ratio */
.hero-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff; /* White background instead of gray */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Single slide image container - adapts to content */
.hero-single-slide .hero-image-container {
  position: relative;
  width: 100%;
  min-height: 500px; /* Minimum height */
  background: #ffffff;
  display: flex;
  align-items: flex-start; /* Align to top instead of center */
  justify-content: center;
  overflow: visible; /* Allow full image to show */
}

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

/* Single slide image - adapts to content height */
.hero-single-slide .hero-single-image {
  width: 100% !important;
  height: auto !important; /* Let image determine its own height */
  max-height: none !important; /* Remove height restriction */
  object-fit: contain !important; /* Show full image without cropping */
  object-position: center !important;
  display: block !important;
}

/* Single slide image container - adapts to content */
.hero-single-slide .hero-single-image-container {
  position: relative !important;
  width: 100% !important;
  height: auto !important; /* Let container adapt to image height */
  background: #ffffff !important;
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* تنسيق إضافي قوي جداً */
.hero-section .hero-single-slide .hero-single-image-container .hero-single-image {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* Subtle Overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.15) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  opacity: 0;
  /* Removed hover effects */
}

/* Content Overlay */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 10;
  max-width: 85%;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  line-height: 1.3;
  font-family: 'Cairo', sans-serif;
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  font-family: 'Cairo', sans-serif;
  opacity: 0.9;
}

.hero-button {
  display: inline-block;
  background: linear-gradient(135deg, #003033 0%, #1a4a4d 100%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 25px;
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 48, 51, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Cairo', sans-serif;
}

/* Placeholder Styles */
.hero-placeholder {
  width: 100%;
  height: 100%;
  background: #ffffff; /* White background instead of gray */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #cbd5e1;
}

.hero-placeholder-content {
  text-align: center;
  color: #64748b;
}

.hero-placeholder-icon {
  margin-bottom: 0.75rem;
}

.hero-placeholder-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-family: 'Cairo', sans-serif;
}

.hero-placeholder-text {
  font-size: 1rem;
  opacity: 0.7;
  font-family: 'Cairo', sans-serif;
}

/* Enhanced Navigation - Like New Arrivals */
.hero-nav-prev,
.hero-nav-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827 !important;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.hero-nav-prev {
  right: 15px;
}

.hero-nav-next {
  left: 15px;
}

.hero-nav-prev:hover,
.hero-nav-next:hover {
  background: #f9fafb;
  border-color: #003033;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-50%) scale(1.1);
}

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

/* Enhanced Pagination - Like Hero */
.hero-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: auto;
  display: inline-block;
}

.hero-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  margin: 0 6px;
  transition: all 0.3s ease;
}

.hero-pagination .swiper-pagination-bullet-active {
  background: #003033;
  transform: scale(1.2);
}

/* Banner section styles removed (widget deleted) */

/* ===== HERO RESPONSIVE DESIGN ===== */

/* Mobile (up to 768px) - Modern & Professional */
@media (max-width: 768px) {
  /* Container adjustments - Full width on mobile */
  .hero-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  
  .hero-swiper-container {
    border-radius: 0; /* No border radius for full width */
    box-shadow: none; /* No shadow for full width */
    overflow: visible;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  
  .hero-slide-container {
    height: auto !important; /* dynamic height for mobile */
    border-radius: 0; /* No border radius for full width */
  }
  
  .hero-single-slide {
    min-height: unset !important; /* let content define height */
    height: auto !important;
    border-radius: 0; /* No border radius for full width */
  }
  
  /* Image container - perfect mobile sizing with full content display */
  .hero-image-container {
    background: #ffffff; /* White background */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .hero-image {
    object-fit: contain !important; /* show full image without cropping */
    object-position: center;
    width: 100%;
    height: auto !important;
    background-color: #ffffff;
  }
  
  /* Single slide mobile adjustments */
  .hero-single-slide .hero-image-container {
    min-height: unset !important;
    height: auto !important;
    align-items: flex-start !important;
    overflow: visible !important;
  }
  
  .hero-single-slide .hero-image {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  
  /* Content adjustments */
  .hero-content {
    max-width: 90%;
    padding: 0 1rem;
  }
  
  .hero-title {
    font-size: 1.75rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
  }
  
  .hero-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 20px;
  }
  
  /* Navigation - mobile optimized with better design */
  .hero-nav-prev,
  .hero-nav-next {
    width: 28px;
    height: 28px;
    background: #fff;
    border: 2px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
  }
  .hero-nav-prev {
    left: unset;
    right: 16px;
  }
  .hero-nav-next {
    right: unset;
    left: 16px;
  }
  
  /* Hide pagination on mobile */
  .hero-pagination {
    display: none !important;
  }
  
  /* Placeholder improvements */
  .hero-placeholder {
    border-radius: 8px;
    background: #ffffff; /* White background */
  }
  
  .hero-placeholder-title {
    font-size: 1.25rem;
  }
  
  .hero-placeholder-text {
    font-size: 0.9rem;
  }
  
  /* Section spacing - mobile optimized */
  .hero-section {
    padding: 0;
    margin-bottom: 0.25rem !important;
    margin-top: 0 !important;
  }
  
  /* Remove extra padding on mobile */
  .hero-section .hero-container {
    padding: 0;
  }
  
  /* Enhanced mobile touch interactions */
  .hero-swiper-container {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  
  /* تحسين أسهم التنقل للهواتف المحمولة */
  .hero-nav-prev, .hero-nav-next {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  
  .hero-nav-prev {
    right: 12px !important;
    left: auto !important;
  }
  
  .hero-nav-next {
    left: 12px !important;
    right: auto !important;
  }
}

/* Tablet (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-slide-container {
    height: 400px;
  }
  
  .hero-single-slide {
    min-height: 400px;
  }
  
  .hero-single-slide .hero-image {
    max-height: none;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.125rem;
  }
}

/* Desktop (1025px and up) */
@media (min-width: 1025px) {
  .hero-slide-container {
    height: 500px;
  }
  
  .hero-single-slide {
    min-height: 500px;
  }
  
  .hero-single-slide .hero-image {
    max-height: none;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.25rem;
  }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
  .hero-slide-container {
    height: 600px;
  }
  
  .hero-single-slide {
    min-height: 600px;
  }
  
  .hero-single-slide .hero-image {
    max-height: none;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-subtitle {
    font-size: 1.5rem;
  }
}

/* Banner responsive rules removed */

/* ===== HEADER WIDGET STYLES ===== */

/* Mobile Padding Fix for Header */
@media (max-width: 640px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===== SPECIAL OFFERS SECTION STYLES ===== */

/* تقليل المسافة بين البانر وسكشن العروض الحصرية في الهواتف المحمولة */
@media (max-width: 768px) {
  .special-offers-section {
    padding-top: 0.5rem !important;
    padding-bottom: 1rem !important;
  }
  
  /* banner sibling spacing removed */
}

/* Enhanced Special Offers Section Styles */
.special-offers-section {
  padding: 2rem 0;
}

.special-offers-section .container {
  max-width: 100%;
  padding: 0 1rem;
}

/* Desktop Layout - Side by Side */
@media (min-width: 640px) {
  .special-offers-section .container {
    padding: 0 1.5rem;
  }
  
  .special-offers-section img {
    height: 12rem; /* 192px */
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 768px) {
  .special-offers-section .container {
    padding: 0 2rem;
  }
  
  .special-offers-section img {
    height: 14rem; /* 224px */
  }
}

@media (min-width: 1024px) {
  .special-offers-section .container {
    padding: 0 3rem;
  }
  
  .special-offers-section img {
    height: 15rem; /* 240px */
  }
}

@media (min-width: 1280px) {
  .special-offers-section img {
    height: 16rem; /* 256px */
  }
}

/* Mobile Layout - Stacked */
@media (max-width: 639px) {
  .special-offers-section {
    padding: 1rem 0;
  }
  
  .special-offers-section .container {
    padding: 0 1rem;
  }
  
  .special-offers-section img {
    height: 12rem; /* 192px - Fixed height for mobile */
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0.5rem;
  }
  
  /* Ensure proper spacing between stacked images */
  .special-offers-section .flex-col > * + * {
    margin-top: 0.75rem;
  }
}

/* Tablet Layout - 2 images side by side */
@media (min-width: 640px) and (max-width: 1023px) {
  .special-offers-section img {
    height: 13rem; /* 208px */
  }
}

/* ===== COLLECTIONS SECTION STYLES ===== */

/* Mobile Card Height Increase */
@media (max-width: 640px) {
  .collections-swiper .swiper-slide .w-36.h-36 {
    height: 200px !important; /* زيادة الطول من 144px إلى 180px */
  }
}

/* Enhanced Navigation Buttons Styling */
#collections-prev,
#collections-next {
  width: 40px;
  height: 40px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  color: #111827 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 20;
}

/* Extra small screens */
@media (max-width: 480px) {
  #collections-prev,
  #collections-next {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  
  #collections-prev {
    right: 4px !important;
  }
  
  #collections-next {
    left: 4px !important;
  }
}

#collections-prev:hover,
#collections-next:hover {
  background: #f9fafb;
  border-color: #003033;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: scale(1.1);
}

#collections-prev:active,
#collections-next:active {
  transform: scale(0.95);
}

/* Responsive adjustments for mobile - تحسينات خاصة بالشاشات الصغيرة */
@media (max-width: 640px) {
    #collections-prev,
    #collections-next {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    .collections-swiper {
        padding: 0 1px;
    }
    
    .swiper-slide {
        width: calc(50% - 0.5px) !important;
        margin-right: 1px !important;
    }
}

@media (min-width: 641px) and (max-width: 767px) {
    .collections-swiper {
        padding: 0 4px;
    }
    
    .swiper-slide {
        width: calc(33.333% - 2px) !important;
        margin-right: 2px !important;
    }
}

/* Ensure proper slide width on all devices */
.collections-swiper .swiper-slide {
    width: auto !important;
}

/* Add some spacing between slides */
.collections-swiper .swiper-wrapper {
    gap: 1px;
}

/* ===== REVIEWS SECTION STYLES ===== */

/* Swiper Pagination Styling */
.swiper-pagination-bullet {
  background: #d1d5db;
  opacity: 0.5;
  margin: 0 4px;
  width: 8px;
  height: 8px;
}

/* Align arrows style if used here in future */
.swiper-button-next,
.swiper-button-prev {
  width: 28px;
  height: 28px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #111827 !important;
  box-shadow: none;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 12px;
  font-weight: 700;
}

.swiper-pagination-bullet-active {
  background: #000;
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .swiper-slide {
    padding: 1rem;
    min-height: 280px;
    width: 100% !important;
  }
  
  blockquote {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  
  .swiper-pagination {
    position: relative;
    bottom: auto;
    margin-top: 1rem;
  }
  
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 6px;
  }
}

/* Ensure single slide view on all devices */
.testimonials-swiper .swiper-slide {
  width: 100% !important;
  margin-right: 0 !important;
}

/* Hide any extra slides that might show */
.testimonials-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0;
  pointer-events: none;
}

/* ===== PRODUCTS SECTION STYLES ===== */

/* Mobile Padding Fix */
@media (max-width: 640px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===== OFFERS SECTION STYLES ===== */

/* Swiper Navigation Buttons Styling */
.swiper-button-next,
.swiper-button-prev {
    width: 28px;
    height: 28px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111827 !important;
    box-shadow: none;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 12px;
    font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
    
    .offers-swiper {
        padding: 0 12px;
    }
    
    /* .swiper-slide {
        width: calc(50% - 6px) !important;
        margin-right: 12px !important;
    }
} */

/* @media (min-width: 641px) and (max-width: 1023px) {
    .swiper-slide {
        width: calc(50% - 12px) !important;
        margin-right: 24px !important;
    }
} */

/* ===== HERO SWIPER CUSTOMIZATION ===== */
.hero-swiper {
  width: 100%;
  height: 100%;
}

.hero-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

/* Loading Animation */
.hero-image {
  opacity: 0;
  animation: fadeInHeroImage 0.5s ease-in-out forwards;
}

@keyframes fadeInHeroImage {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Smooth transitions between slides */
.hero-swiper .swiper-slide-active .hero-image {
  transform: scale(1);
}

/* ===== HERO SWIPER FIXES ===== */
.hero-swiper .swiper-slide {
  width: 100% !important;
  height: 100% !important;
  flex-shrink: 0;
}

.hero-swiper .swiper-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Force single slide view */
.hero-swiper {
  overflow: hidden;
<<<<<<< HEAD
  white-space: nowrap;
  position: relative;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  animation: marquee linear infinite;
=======
}

.hero-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0;
  pointer-events: none;
>>>>>>> 5cdd6cd0ae7d969f70096cf963b734114a677825
}

/* Additional fixes for hero swiper */
.hero-swiper .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-swiper .swiper-slide-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Smooth slide transitions for hero */
.hero-swiper .swiper-slide {
  transition: transform 0.6s ease-in-out;
}

<<<<<<< HEAD
/* Responsive */
@media (max-width: 768px) { .marquee-item a { font-size: 0.8rem; } }
@media (min-width: 769px) and (max-width: 1024px) { .marquee-item a { font-size: 0.9rem; } }
@media (min-width: 1025px) { .marquee-item a { font-size: 1rem; } }



















/* ===== BANNER SECTION PROFESSIONAL STYLES ===== */

/* Container & Layout */
.banner-container {
  width: 100%;
  padding: 0;
}

.banner-swiper-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-shadow: none;
}

.banner-slide-container,
.banner-single-slide {
  position: relative;
  width: 100%;
  height: 350px; /* Fixed height for consistency - smaller than hero */
  overflow: hidden;
}

.banner-slide-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* Image Container - Perfect Aspect Ratio */
.banner-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff; /* White background instead of gray */
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Removed hover effects */
}

/* Subtle Overlay */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.15) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  opacity: 0;
  /* Removed hover effects */
}

/* Content Overlay */
.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 10;
  max-width: 85%;
}

.banner-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  line-height: 1.3;
  font-family: 'Cairo', sans-serif;
}

.banner-subtitle {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  font-family: 'Cairo', sans-serif;
  opacity: 0.9;
}

.banner-button {
  display: inline-block;
  background: linear-gradient(135deg, #003033 0%, #1a4a4d 100%);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 48, 51, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Cairo', sans-serif;
}

/* Removed hover effects for buttons */

/* Placeholder Styles */
.banner-placeholder {
  width: 100%;
  height: 100%;
  background: #ffffff; /* White background instead of gray */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #cbd5e1;
}

.banner-placeholder-content {
  text-align: center;
  color: #64748b;
}

.banner-placeholder-icon {
  margin-bottom: 0.75rem;
}

.banner-placeholder-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-family: 'Cairo', sans-serif;
}

.banner-placeholder-text {
  font-size: 0.9rem;
  opacity: 0.7;
  font-family: 'Cairo', sans-serif;
}

/* Enhanced Navigation - Like New Arrivals */
.banner-nav-prev,
.banner-nav-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827 !important;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.banner-nav-prev {
  right: 15px;
}

.banner-nav-next {
  left: 15px;
}

.banner-nav-prev:hover,
.banner-nav-next:hover {
  background: #f9fafb;
  border-color: #003033;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-50%) scale(1.1);
}

.banner-nav-prev:active,
.banner-nav-next:active {
  transform: translateY(-50%) scale(0.95);
}

/* Enhanced Pagination - Like Hero */
.banner-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: auto;
  display: inline-block;
}

.banner-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  margin: 0 6px;
  transition: all 0.3s ease;
}

.banner-pagination .swiper-pagination-bullet-active {
  background: #003033;
  transform: scale(1.2);
}

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

/* Mobile (up to 768px) - Modern & Professional */
@media (max-width: 768px) {
  /* Container adjustments - Full width on mobile */
  .banner-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  
  .banner-swiper-container {
    border-radius: 0; /* No border radius for full width */
    box-shadow: none; /* No shadow for full width */
    overflow: visible;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  
  .banner-slide-container,
  .banner-single-slide {
    height: 250px; /* Optimized height for mobile */
    border-radius: 0; /* No border radius for full width */
  }
  
  /* Image container - perfect mobile sizing with full content display */
  .banner-image-container {
    background: #ffffff; /* White background */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .banner-image {
    object-fit: cover !important; /* Fill area like a real banner */
    object-position: center;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
  }
  
  /* Content adjustments */
  .banner-content {
    max-width: 90%;
    padding: 0 1rem;
  }
  
  .banner-title {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }
  
  .banner-subtitle {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.4;
  }
  
  .banner-button {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-radius: 20px;
  }
  
  /* Navigation - mobile optimized with better design */
  .banner-nav-prev,
  .banner-nav-next {
    width: 28px;
    height: 28px;
    background: #fff;
    border: 2px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
  }
  .banner-nav-prev {
    left: unset;
    right: 16px;
  }
  .banner-nav-next {
    right: unset;
    left: 16px;
  }
  
  /* Hide pagination on mobile */
  .banner-pagination {
    display: none !important;
  }
  
  /* Placeholder improvements */
  .banner-placeholder {
    border-radius: 8px;
    background: #ffffff; /* White background */
  }
  
  .banner-placeholder-title {
    font-size: 1.1rem;
  }
  
  .banner-placeholder-text {
    font-size: 0.85rem;
  }
  
  /* Section spacing - mobile optimized */
  .banner-section {
    padding: 0;
    margin-bottom: 0.5rem;
    margin-top: 0.25rem;
  }
  
  /* Remove extra padding on mobile */
  .banner-section .banner-container {
    padding: 0;
  }
  
  /* Enhanced mobile touch interactions */
  .banner-swiper-container {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Removed mobile-specific animations */
  /* تحسين أسهم التنقل للهواتف المحمولة */
  .banner-nav-prev, .banner-nav-next {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  
  .banner-nav-prev {
    right: 12px !important;
    left: auto !important;
  }
  
  .banner-nav-next {
    left: 12px !important;
    right: auto !important;
  }
  
}

/* Tablet (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .banner-slide-container,
  .banner-single-slide {
    height: 300px;
  }
  
  .banner-title {
    font-size: 1.5rem;
  }
  
  .banner-subtitle {
    font-size: 0.95rem;
  }
}

/* Desktop (1025px and up) */
@media (min-width: 1025px) {
  .banner-slide-container,
  .banner-single-slide {
    height: 350px;
  }
  
  .banner-title {
    font-size: 1.75rem;
  }
  
  .banner-subtitle {
    font-size: 1rem;
  }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
  .banner-slide-container,
  .banner-single-slide {
    height: 400px;
  }
  
  .banner-title {
    font-size: 2rem;
  }
  
  .banner-subtitle {
    font-size: 1.125rem;
  }
}

/* ===== SWIPER CUSTOMIZATION ===== */
.banner-swiper {
  width: 100%;
  height: 100%;
}

.banner-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

/* Loading Animation */
.banner-image {
  opacity: 0;
  animation: fadeInBannerImage 0.5s ease-in-out forwards;
}

@keyframes fadeInBannerImage {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Smooth transitions between slides */
.banner-swiper .swiper-slide-active .banner-image {
  transform: scale(1);
}













/* Mobile Padding Fix */
@media (max-width: 640px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Enhanced Navigation Buttons Styling */
#new-arrivals-prev,
#new-arrivals-next {
  width: 40px;
  height: 40px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  color: #111827 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 20;
}

/* Extra small screens */
@media (max-width: 480px) {
  #new-arrivals-prev,
  #new-arrivals-next {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  
  #new-arrivals-prev {
    right: 4px !important;
  }
  
  #new-arrivals-next {
    left: 4px !important;
  }
}

#new-arrivals-prev:hover,
#new-arrivals-next:hover {
  background: #f9fafb;
  border-color: #003033;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: scale(1.1);
}

#new-arrivals-prev:active,
#new-arrivals-next:active {
  transform: scale(0.95);
}

/* Responsive Slides */

/* Mobile - 1.5 Cards */
@media (max-width: 639px) {
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .new-arrivals-swiper .swiper-slide {
    width: 280px !important;
    margin-right: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Show arrows on mobile with smaller size */
  #new-arrivals-prev,
  #new-arrivals-next {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
}

/* Tablet - 2 Cards */
@media (min-width: 640px) and (max-width: 767px) {
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .new-arrivals-swiper .swiper-slide {
    width: 280px !important;
    margin-right: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Small Desktop - 3 Cards */
@media (min-width: 768px) and (max-width: 1023px) {
  .new-arrivals-swiper .swiper-slide {
    width: 280px !important;
    margin-right: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Large Desktop - 4 Cards */
@media (min-width: 1024px) {
  .new-arrivals-swiper .swiper-slide {
    width: 280px !important;
    margin-right: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
=======
.hero-swiper .swiper-slide-active {
  transform: translateX(0);
}

.hero-swiper .swiper-slide-next {
  transform: translateX(100%);
}

.hero-swiper .swiper-slide-prev {
  transform: translateX(-100%);
}

/* Remove opacity effects for smooth slide transitions */
.hero-swiper .swiper-slide {
  opacity: 1;
  pointer-events: auto;
}