/* =========================
   أساسيات عامة
========================= */
html { scroll-behavior: smooth; }
:root { --p:16px; --r:12px; --g:12px; }
body,button,input { font-size:16px; line-height:1.6; -webkit-tap-highlight-color:transparent; }
h1 { font-size:20px; } 
h2 { font-size:18px; }
.container, .page-content { padding-inline: var(--p); }

/* =========================
   شبكة المنتجات (جوال)
========================= */
@media (max-width:768px) {
  .products-grid, .product-grid, .collection__products, .cards-grid, .grid-products {
    display:grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--g) !important;
  }
  .product-card, .product-item, .card-product {
    background:#fff; border:1px solid #f1f1f1; border-radius:var(--r); padding:10px;
  }
  .product-card img, .product-item img, .card-product img {
    aspect-ratio:1/1; object-fit:cover; border-radius:var(--r);
  }
  .product-card .title, .card-product .product-title {
    font-size:14px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .price-old, .product-price--compare { opacity:.6; text-decoration:line-through; margin-inline-start:6px; }

  /* تبويبات التصنيفات أفقية */
  .category-tabs, .collections-tabs, .cats-tabs { display:flex; gap:8px; overflow-x:auto; padding:6px var(--p); }
  .category-tabs::-webkit-scrollbar { display:none; }
  .category-tabs a, .chip { white-space:nowrap; border:1px solid #eee; padding:8px 12px; border-radius:999px; }

  /* إخفاء عناصر دسكتوب الثقيلة */
  .hero--desktop, .mega-menu, .breadcrumbs, .header-desktop { display:none !important; }
  header .logo img { height:28px; }
}

/* =========================
   زر شراء ثابت (صفحة المنتج)
========================= */
.sticky-add-to-cart {
  position:fixed; inset-inline:0; bottom:0; z-index:999; background:#fff;
  border-top:1px solid #eee; padding:10px var(--p); box-shadow:0 -4px 16px rgba(0,0,0,.04);
}
.sticky-add-to-cart .row { display:flex; gap:10px; align-items:center; }
.sticky-add-to-cart .price { font-weight:700; }
.sticky-add-to-cart .btn { width:100%; min-height:48px; border-radius:var(--r); }

/* =========================
   زر واتساب عائم
========================= */
.whatsapp-fab {
  position:fixed; bottom:88px; inset-inline-end:16px; z-index:998;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.whatsapp-fab svg { width:28px; height:28px; fill:#fff; }

/* =========================
   بنرات الجوال (قصّ ذكي)
========================= */
@media (max-width:768px) {
  .slideshow, .hero, .hero-section, .banner, .banner-section, .slider, .swiper, .swiper-slide,
  .banner_media, .slide_media, .slide, .banner-media {
    position:relative;
    aspect-ratio: 4 / 5;
    overflow:hidden;
    border-radius:12px;
    background-size:cover !important;
    background-position:center center !important;
  }

  .slideshow img, .hero img, .banner img, .slider img, .swiper-slide img,
  .slide_image img, .banner_media img, .banner-media img {
    width:100% !important; height:100% !important;
    object-fit:cover !important; object-position:center center !important; display:block;
  }
}

/* =========================
   نص البنر: ظاهر دائمًا
========================= */
.banner-text,
.banner .banner-text,
.hero .banner-text,
.slideshow .banner-text {
  position:absolute; inset-inline-start:20px; bottom:20px;
  color:#fff; font-size:20px; font-weight:bold;
  opacity:1 !important; transition:none;
  background:rgba(0,0,0,.4); padding:5px 10px; border-radius:5px;
  z-index:2; pointer-events:none;
}

/* صور مربعة (محسّنة) - قالب رائد */
.section-square, .images-square, .square-images, .square-image {
  position:relative;
}
.section-square .item, .images-square .item, .square-images .item, .square-image .item {
  position:relative; overflow:hidden; border-radius:12px;
}
.section-square .item img, .images-square .item img,
.square-images .item img, .square-image .item img {
  width:100% !important; aspect-ratio:1/1;
  object-fit:cover !important; object-position:center !important;
  display:block;
}

/* النص في الوسط تمامًا */
.section-square .caption, .section-square .content, .section-square .title,
.images-square .caption, .images-square .content, .images-square .title,
.square-images .caption, .square-images .content, .square-images .title,
.square-image .caption, .square-image .content, .square-image .title,
.section-square figcaption, .images-square figcaption, .square-images figcaption, .square-image figcaption {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  opacity:1 !important; visibility:visible !important;
  transition:none !important;
  z-index:2; color:#fff; font-weight:700; line-height:1.4;
  background:rgba(0,0,0,0.45); padding:8px 14px; border-radius:6px;
  text-align:center;
  pointer-events:none;
}

/* ألغِ أي تعتيم للصور */
.section-square img, .images-square img, .square-images img, .square-image img {
  filter:none !important; opacity:1 !important; -webkit-filter:none !important;
}
}
.marquee-loop {
  width: 100%;
  overflow: hidden;
  background: #111; /* لون الخلفية */
  color: #fff;      /* لون النص */
  padding: 10px 0;
  white-space: nowrap;
  box-sizing: border-box;
}
.marquee-content {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-loop 15s linear infinite;
  font-size: 16px;
  font-weight: bold;
}
@keyframes marquee-loop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* سلايدر بنرات بتبديل تلقائي (Fade) */
.fk-slider{
  position:relative; aspect-ratio: 4/5;  /* مناسب للجوال؛ غيّرها لـ 16/9 للدسك توب */
  overflow:hidden; border-radius:12px; background:#000;
}
.fk-slider img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; animation: fkFade 15s infinite;
}

/* وزّع التأخيرات حسب عدد الصور */
.fk-slider img:nth-of-type(1){ animation-delay: 0s; }
.fk-slider img:nth-of-type(2){ animation-delay: 5s; }
.fk-slider img:nth-of-type(3){ animation-delay:10s; }

/* تأثير التلاشي + (اختياري) لمسة زوم خفيفة */
@keyframes fkFade{
  0%{opacity:0; transform:scale(1);}
  5%{opacity:1;}
  30%{opacity:1; transform:scale(1.04);}  /* Ken Burns بسيط */
  35%{opacity:0;}
  100%{opacity:0;}
}

/* تسمية/نص فوق البنر (اختياري) */
.fk-caption{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#fff; font-weight:700; text-align:center;
  background:rgba(0,0,0,.45); padding:10px 14px; border-radius:8px;
  line-height:1.5; max-width:88%; z-index:2; pointer-events:none;
}

/* تحسين المقاسات على الدسك توب */
@media (min-width:992px){
  .fk-slider{ aspect-ratio: 16/9; }
}