@media (max-width: 768px) {
  .nav-links ul {
    display: none;
    flex-direction: column;
    background: #111;
    padding: 15px;
    position: absolute;
    top: 60px;
    right: 0;
  }
  .nav-links.active ul { display: flex; }
  .hamburger { display: block; color: #fff; font-size: 24px; }
}
@media (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    width: 40px !important;
    height: 40px !important;
  }

  .swiper-button-next svg,
  .swiper-button-prev svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
  }
}
@media (max-width: 768px) {
  .slider-item {
    height: 65vw;       /* استجابة طبيعية للموبايل */
    max-height: 380px;
    min-height: 220px;
  }

  .slider-image {
    border-radius: 10px;
  }

  .slider-content {
    top: 12px;
    right: 12px;
  }

  .slider-btn {
    padding: 8px 18px;
    font-size: 13px;
    border-radius: 40px;
  }
}

/* ====== SMALL PHONES ====== */
@media (max-width: 480px) {
  .slider-item {
    height: 75vw;
    max-height: 320px;
  }

  .slider-btn {
    padding: 7px 16px;
    font-size: 12px;
  }
}
@media (max-width: 768px) {

  .nb__dropdown-menu {
    top: 48px;
    right: 0;
    min-width: 100%;
    padding: 14px 0;
    border-radius: 12px;
    transform: translateY(10px);
  }

  .user-box {
    gap: 6px;
  }

  .userName {
    font-size: 14px;
  }

  .user-avatar {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  /* زرار الحساب كله */
  #userDropdownBtn {
    padding: 8px 10px;
    font-size: 14px;
  }

  /* عناصر القائمة */
  .nb__dropdown-item {
    font-size: 15px;
    padding: 12px 18px;
  }
}
@media(max-width:992px) {
.featured-grid {grid-template-columns:repeat(3,1fr);}

}

@media(max-width:600px) {
.featured-grid {grid-template-columns:repeat(2,1fr);}

.featured-card {width:160px;height:160px;}

.featured-label {font-size:.9rem;padding:8px;}

}
@media (max-width: 640px) {
.carousel .car-track {scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;

    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;}

.carousel .car-track .card {flex: 0 0 calc(50% - 6px) !important;
    scroll-snap-align: unset !important;}

.carousel .car-btn {display: flex !important;}

}




/* === Mobile: keep slider with 2 cards visible per view === */

@media (max-width: 640px) {
.carousel .car-track {scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;

    display: flex !important;
    flex-wrap: nowrap !important;           /* keep horizontal track */
    gap: 12px !important;
    overflow-x: auto !important;            /* keep slider scrolling */
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;}

.carousel .car-track .card {flex: 0 0 calc(50% - 10px) !important;  /* two cards width */
    scroll-snap-align: start !important;}

/* optional: hide arrows on phones */

}




@media (max-width: 640px) {
.carousel .car-btn {display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    top: 40%;
    background: rgba(15,24,33,.85);
    border-radius: 999px;
    color: #fff;
    z-index: 9;}

.carousel .car-btn.prev {left: 6px;}

.carousel .car-btn.next {right: 6px;}

}



/* === Mobile touch improvements (#4) === */

@media (max-width: 640px) {
.car-track {-webkit-overflow-scrolling: touch;
    touch-action: pan-x;}

}



/* === Carousel Dots (#5) === */

.car-dots {display:none;}

@media (max-width:640px) {
.car-dots {display:flex; gap:6px; justify-content:center; margin-top:8px;}

.car-dots button {width:8px; height:8px; border-radius:999px; border:0; background:#475569;}

.car-dots button[aria-current="true"] {width:20px; background:#22c55e;}

}
@media (max-width: 768px) {

.product-wrap {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;}


.product-wrap > div:first-child {order: 1;}

.product-wrap > div:last-child {order: 2;}



#pImage {width: 100%; height: auto;}

.p-row {gap: 10px;}

}
@media (max-width: 768px) {

.nav-links {position: fixed;
    top: 56px;            
    left: 0; right: 0;
    display: none;        
    padding: 14px 16px;
    background: #0c141b;
    border-top: 1px solid var(--outline);
    flex-direction: column;
    gap: 18px;
    z-index: 50;}


.nav-links.open {display: block;}



.hamburger {display: inline-flex;}

}


@media (min-width: 769px) {
.nav-links {display: flex; 
    position: static; 
    gap: 16px;}

}


@media (max-width: 768px) {
.nav-links {position: fixed;
    z-index: 1200;      
    overflow: visible;}

.nav-links .dropdown .dropdown-menu {position: static;   
    z-index: 1300;}

}


.hero, .slider, .carousel {position: relative;
  z-index: 1;}


@media (max-width: 768px) {

.nav-links .dropdown {position: relative;}



.nav-links .dropdown .dropdown-menu {position: absolute;
    top: calc(100% + 6px);   
    left: 0;
    right: auto;
    transform: none;
    display: none;           
    max-width: calc(100vw - 32px);
    z-index: 1500;}



.nav-links .dropdown:hover .dropdown-menu,
  .nav-links .dropdown.open .dropdown-menu {display: block;}



.nav-links {overflow: visible;}

}