﻿/* Mobile bottom nav - complete, single-file stylesheet */
:root{
  --nav-h:62px;
  --nav-browser-bottom: 0px;
  --nav-bottom-normal: max(12px, env(safe-area-inset-bottom), var(--nav-browser-bottom));
  --nav-bottom-compact: max(9px, env(safe-area-inset-bottom), var(--nav-browser-bottom));
  --nav-bg: linear-gradient(135deg, #152546 0%, #1c3158 48%, #101d38 100%);
  --nav-fg: #fff;
  --nav-accent: #D4AF37;
  --nav-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
  --badge-bg: #D4AF37;
  --badge-fg: #152546;
  --font-size: 14px;
}

/* ensure content not hidden under fixed nav */
html,body{height:100%}
body{
  margin:0;
  padding-bottom:calc(var(--nav-h) + 8px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}

@media (max-width: 899px){
  .site-footer{
    margin-bottom:calc(-1 * (var(--nav-h) + 8px + env(safe-area-inset-bottom))) !important;
    padding-bottom:calc(18px + var(--nav-h) + 8px + env(safe-area-inset-bottom)) !important;
  }
}

/* container */
.mobile-nav{
  position:fixed;
  left:16px;
  right:16px;
  bottom:var(--nav-bottom-normal);
  height:var(--nav-h);
  background:#152546;
  background-image:
    radial-gradient(140% 180% at 12% 0%, rgba(255,255,255,0.12), rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0, 0, 0, 0.1)),
    var(--nav-bg);
  box-shadow:var(--nav-shadow);
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 16px 30px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 34px;
  overflow: hidden;
  transition: height .22s ease, padding .22s ease, border-radius .22s ease, bottom .22s ease, transform .22s ease;
  transform-origin: center bottom;
}

.mobile-nav::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(50% 62% at 18% 22%, rgba(255,255,255,0.22), rgba(255,255,255,0) 72%),
    radial-gradient(45% 55% at 82% 100%, rgba(255,255,255,0.1), rgba(255,255,255,0) 74%);
  mix-blend-mode: screen;
}

@keyframes activeDockFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* hide on large screens */
@media (min-width: 900px){
  .mobile-nav{ display:none; }
}

/* list layout */
.mobile-nav ul{
  width:100%;
  max-width:620px;
  margin:0;
  padding:3px 9px;
  display:flex;
  gap:7px;
  list-style:none;
  box-sizing:border-box;
  transition: padding .26s ease, gap .26s ease;
  position:relative;
}

.mobile-nav li{ flex:1; text-align:center; position:relative; z-index:2; }

.nav-liquid-pill{
  position:absolute;
  top:50%;
  left:0;
  width:72px;
  height:44px;
  border-radius:999px;
  transform:translate3d(0,-50%,0);
  background:rgba(255,255,255,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 7px 16px rgba(0,0,0,0.12);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border:1px solid rgba(255,255,255,0.22);
  z-index:1;
  pointer-events:auto;
  touch-action:none;
  cursor:grab;
  transition: opacity .22s ease, box-shadow .22s ease, border-radius .22s ease;
}

.nav-liquid-pill::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
}

.nav-liquid-pill.is-dragging{
  cursor:grabbing;
  width:64px;
  opacity:.86;
  border-radius:42% 58% 55% 45% / 48% 44% 56% 52%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 14px 24px rgba(0,0,0,0.22);
}

/* link appearance */
.mobile-nav a,
.mobile-nav button{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  text-decoration:none;
  color:#f9fbff;
  font-size:var(--font-size);
  padding:0;
  background:transparent;
  border:0;
  width:100%;
  min-height:44px;
  cursor:pointer;
  border-radius:26px;
  position:relative;
  transition: color .28s ease, transform .28s ease, background-color .28s ease, min-height .26s ease, border-radius .26s ease;
  z-index:2;
}

.mobile-nav a.active,
.mobile-nav button.active{
  touch-action:none;
}

/* icons */
.mobile-nav svg.icon,
.mobile-nav img.icon,
.mobile-nav img.nav-icon{
  width:25px;
  height:25px;
  display:block;
  object-fit:contain;
  flex-shrink:0;
  fill:currentColor;
  color:#fff;
}

/* SVG icons as <img> need a filter to actually show as white */
.mobile-nav img.icon,
.mobile-nav img.nav-icon{
  filter: brightness(0) saturate(100%) invert(100%) !important;
  transition: transform .3s cubic-bezier(.2,.9,.2,1), filter .3s ease;
}

/* عند السحب لأعلى: الشريط يصغر (compact mode) */
.mobile-nav.is-compact {
  height: 44px !important;
  bottom: var(--nav-bottom-compact) !important;
  left: 64px !important;
  right: 64px !important;
  border-radius: 26px !important;
  padding: 0 8px env(safe-area-inset-bottom) !important;
}

.mobile-nav.is-compact ul {
  padding: 1px 7px !important;
  gap: 5px !important;
  max-width: 500px !important;
}

.mobile-nav.is-compact a,
.mobile-nav.is-compact button {
  min-height: 35px !important;
  border-radius: 20px !important;
}

.mobile-nav.is-compact svg.icon,
.mobile-nav.is-compact img.icon,
.mobile-nav.is-compact img.nav-icon {
  width: 21px !important;
  height: 21px !important;
}

.mobile-nav.is-compact .nav-liquid-pill{
  width:58px;
  height:36px;
}

.mobile-nav.is-compact .nav-liquid-pill.is-dragging{
  width:52px;
}

/* active state */
.mobile-nav a.active,
.mobile-nav button.active{
  color:#fff;
  background: transparent;
  border-radius:30px;
  box-shadow:none;
  transform: translateY(0);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav a,
  .mobile-nav button,
  .mobile-nav a.active,
  .mobile-nav button.active,
  .fire-nav-icon {
    animation: none !important;
    transition: none !important;
  }
}

/* تنسيق الأيقونات النشطة - تعديل لحل مشكلة عدم تغير اللون */
.mobile-nav a.active svg.icon {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.mobile-nav a.active img.icon {
  filter: brightness(0) saturate(100%) invert(100%) !important;
}

.mobile-nav a.active img.nav-icon {
  filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* keep labels for accessibility but hide them visually for the icon-only Apple style */
.mobile-nav a > span:not(.icon-wrap):not(.fire-nav-icon),
.mobile-nav button > span:not(.icon-wrap):not(.fire-nav-icon){
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
  white-space:nowrap;
}

/* إزالة تأثير التحويم حتى لا يتعارض مع تنسيق الأيقونات النشطة */
/* 
.mobile-nav a:hover .icon,
.mobile-nav button:hover .icon {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}
*/

/* focus styles */
.mobile-nav a:focus,
.mobile-nav button:focus{
  outline:2px solid rgba(0,123,255,0.18);
  outline-offset:4px;
  border-radius:6px;
}

/* ===== Fire Deal Button ===== */
.fire-deal-item { position: relative; }

.fire-deal-link {
  position: relative;
}

.fire-nav-icon {
  font-size: 28px;
  display: block;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255,120,0,0.45));
  animation: fireFlicker 2s ease-in-out infinite;
  transform-origin: bottom center;
}

.fire-deal-link span:not(.fire-nav-icon) {
  color: #fff !important;
  font-weight: 700;
  font-size: 12px;
}

@keyframes fireFlicker {
  0%,100% { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 6px rgba(255,180,0,0.9)); }
  30%      { transform: scale(1.18) rotate(2deg); filter: drop-shadow(0 0 10px rgba(255,120,0,1)); }
  60%      { transform: scale(1.1) rotate(-1deg); filter: drop-shadow(0 0 8px rgba(255,200,0,0.85)); }
}

/* active state for fire link */
.fire-deal-link.active .fire-nav-icon {
  filter: drop-shadow(0 0 10px #D4AF37) !important;
}
.fire-deal-link.active span:not(.fire-nav-icon) {
  color: #D4AF37 !important;
}

/* cart badge */
.cart-badge{ position:relative; display:inline-block; }
.cart-badge::after{
  content: attr(data-count);
  display:inline-block !important;
  min-width:16px;
  height:16px;
  line-height:16px;
  font-size:10px;
  text-align:center;
  padding:0 6px;
  border-radius:999px;
  background:var(--badge-bg);
  color:var(--badge-fg);
  position:absolute;
  top:-4px;
  right:-7px;
  box-shadow:0 1px 3px rgba(0,0,0,0.12);
  box-sizing:border-box;
  transform-origin:center;
  opacity: 1;
}
/* إخفاء الشارة لما تكون فارغة */
.cart-badge[data-count=""]::after,
.cart-badge[data-count="0"]::after {
  display: none !important;
}

/* account badge - نفس أسلوب عداد السلة */
.account-badge{ position:relative; display:inline-block; }
.account-badge::after{
  content: attr(data-count);
  display:inline-block !important;
  min-width:16px;
  height:16px;
  line-height:16px;
  font-size:10px;
  text-align:center;
  padding:0 6px;
  border-radius:999px;
  background:var(--badge-bg);
  color:var(--badge-fg);
  position:absolute;
  top:-4px;
  right:-7px;
  box-shadow:0 1px 3px rgba(0,0,0,0.12);
  box-sizing:border-box;
  transform-origin:center;
  opacity: 0; /* مخفية افتراضياً */
}
/* تظهر فقط لما يكون في إشعارات */
.account-badge[data-count]:not([data-count="0"]):not([data-count=""])::after {
  opacity: 1;
}

/* تأكيد عرض عداد السلة دائمًا */
.cart-badge::after {
  opacity: 1;
  display: inline-block !important;
}

/* small screens tweak */
@media (max-width: 420px){
  :root{ --nav-h:56px; --font-size:12px; }
  .mobile-nav{ left:12px; right:12px; bottom:var(--nav-bottom-normal); border-radius:30px; }
  .mobile-nav.is-compact{ left:58px !important; right:58px !important; bottom:var(--nav-bottom-compact) !important; }
  .mobile-nav ul{ padding:3px 7px; gap:5px; }
  .mobile-nav svg.icon, .mobile-nav img.icon{ width:23px; height:23px; }
  .nav-liquid-pill{ width:62px; height:40px; }
  .mobile-nav.is-compact .nav-liquid-pill{ width:50px; height:33px; }
}
@media (min-width: 421px) and (max-width: 900px){
  :root{ --font-size:13px; }
}

/**_______________________________________________________________________________________**/

/* زر الإلغاء للاستخدام على الموبايل */
@media (max-width: 768px) {
  .clear-filter-btn {
    padding: 8px 12px; /* زيادة حجم الزر على الشاشات الصغيرة */
    font-size: 13px;
  }
  
  [dir="rtl"] .clear-filter-btn {
    font-size: 14px;
  }
}

/* ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ */

/*    هاتف  */
@media (max-width: 1020px) {
  .footer-info-bar .footer-columns,
  .footer-info-bar .footer-bottom-row {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
  }
  
  .footer-info-bar .footer-pay-methods,
  .footer-info-bar .footer-security-badges {
    align-items: center !important;
    text-align: center !important;
  }
  .footer-info-bar .footer-column,
  .footer_info_bar .footer-app-section {
    padding-inline-end: 0;
    padding-inline-start: 0;
  }

  .footer-info-bar {
    width: 90%;
    padding: 10px 0 6px 0;
    font-size: 13px;
  }
  .footer-info-bar .footer-columns,
  .footer-info-bar .footer-bottom-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .footer-info-bar .footer-column,
  .footer-info-bar .footer-app-section {
    padding-inline-end: 0;
    padding-inline-start: 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin-bottom: 10px;
  }
  .footer-info-bar .footer-app-buttons {
    gap: 8px;
    margin: 10px 0 0 0;
    
  }
  .footer-info-bar .footer-social {
    margin: 10px 0 0 0;
  }
  .footer-info-bar .footer-social-icons {
    gap: 6px;
    margin-top: 8px;
  }
  .footer-info-bar .footer-social-icons a {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  .footer-info-bar .footer-pay-methods,
  .footer-info-bar .footer-security-badges {
    align-items: center !important;
    text-align: center !important;
    min-width: 0;
    width: 100%;
    margin-bottom: 8px;
  }
  .footer-info-bar .footer-pay-icons,
  .footer-info-bar .footer-security-icons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .footer-info-bar .footer-pay-icons img,
  .footer-info-bar .footer-security-icons img {
    width: 36px;
    height: 24px;
    padding: 1px;
    margin-bottom: -5px;
    margin-top: 7px;
  }
  .footer-info-bar p {
    margin-top: 12px;
    font-size: 12px;
  }
    
  
  .search-container {
    width: 90%;
    min-width: 90%;
    max-width: 100%;
    font-size: 10px;
  }
  
  
.search-container input {
    font-size: 10px; /* تكبير حجم الخط */
  }

  
  .categories a {
  padding: 5px 10px; /* تصغير حجم الأزرار */
  font-weight: bold;
  color: #333;
  border: 1px solid #ddd;
  z-index: 9999;
  font-size: 14px;
}
  .categories  {
  padding: 8px 10px;
  margin-bottom: 10px;
  margin-right: -15px;
  max-width: 100%;
}

.filter-toggle {
  padding: 8px 10px; /* تصغير حجم الأزرار */
  font-weight: bold;
  color: #333;
  border: 1px solid #ddd;
  z-index: 9999;
  font-size: 14px;
}
.filters-scroll-container {
  margin-bottom: 0px;
  margin-top: 0px;
  gap: 8px;
  padding: 8px 8px; /* تصغير الشريط */
  scrollbar-width: thin;
  scrollbar-color: #007bff00 #f2f2f200;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}
/* شريط الفئات الفرعية الدائري القابل للسحب */
#subcategories-display {
  margin-top: -7px;
  margin-bottom: -5px;
  max-width: 97%;
}

.subcategory-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    max-width: 70px;
    padding: 2px 2px;
    border-radius: 16px;
    background: #ffffff00;
    box-shadow: 0 2px 8px #007bff11;
    margin: 0 6px; /* مسافة متساوية يمين ويسار كل دائرة */
    gap: 0;
}

/* صورة دائرية صغيرة */
.subcategory-circle img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 7px;
  border: 2px solid #D4AF37;
  background: #f2f2f200;
}

/* اسم الفئة */
.subcategory-label {
  font-size: 14px;
  font-weight: bold;
  color: #222;
  text-align: center;
  white-space: nowrap;      /* كلمة واحدة في كل سطر */
  overflow: hidden;
  text-overflow: ellipsis;
  width: 65px;
  display: block;
  word-break: break-word;
  line-height: 1.1;
  min-height: unset;
  max-height: unset;
  margin-bottom: 5px;
}

main,
.header-content,
.footer-info-bar,
.filter-wrapper {
    width: 97%;
    max-width: 97%;
    min-width: 97%;
    margin-left: auto;
    margin-right: auto;
  }

  /* حقل البحث بعرض 97% أيضاً */
  .search-container {
    width: 97%;
    max-width: 97%;
    min-width: 97%;
    margin-left: auto;
    margin-right: auto;
  }
    .categories {
    /* ...existing code... */
    padding-inline: 0 !important;   /* إزالة المسافة الداخلية يمين/يسار */
    margin-inline: 0 !important;    /* ضمان عدم وجود هامش جانبي */
  }
  .filters-scroll-container {
    /* ...existing code... */
    padding-inline: 0 !important;   /* إزالة المسافة الداخلية يمين/يسار */
  }

}








/* ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ */

/* تصحيح عرض 320px: كل الحاويات 100% بدون فروقات */
@media (max-width: 360px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* غلاف الهيدر والفوتر أنفسهم */
  .main-header,
  footer {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* الحاويات الداخلية: هيدر/مين/فلاتر/فوتر */
  .header-content,
  main,
  .filter-wrapper,
  .search-container,
  .categories,
  .filters-scroll-container,
  .footer-info-bar,
  #subcategories-display {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* حشوة جانبية خفيفة للمحتوى الداخلي لتجنب الالتصاق بالحواف */
  .header-content,
  .footer-info-bar,
  .filters-scroll-container,
  .categories {
    padding-inline: 8px !important;
  }

  /* إزالة أي تعويضات قد تسبب انزياح أفقي */
  .categories {
    margin-right: 0 !important; /* يلغي -15px السابقة */
    padding-inline: 0 !important;
  }
  .filters-scroll-container {
    padding-inline: 0 !important;
  }

  /* المنتجات يمكن تبقى كما هي، فقط تأكد أن صف المنتجات لا يتجاوز العرض */
  .products-row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  }






/* ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ */

/*    كارت المنتجات للهاتف فقط  */
@media (max-width: 494px) {
    /* container: 100% width, 2 masonry columns, equal gap */
  .products-row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 8px !important;                      /* تباعد داخلي متساوٍ بين الكروت */
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-count: auto !important;
    column-gap: 8px !important;
    align-items: start !important;

    /* Arabic pages: start from the right column first */
    
  }

  .products-row.products-masonry > .products-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  /* each card stays intact in a column, fills column width, equal bottom gap */
  .products-row.products-masonry .product-card:not(.product-card-cart),
  .products-row:not(.products-masonry) > .product-card:not(.product-card-cart) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;       /* equal vertical spacing */
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    vertical-align: top !important;
    align-self: flex-start !important;
    box-sizing: border-box;

    break-inside: auto;
    -webkit-column-break-inside: auto;
    -moz-column-break-inside: auto;
  }

  /* images adapt naturally to content height */
  .products-row > .product-card:not(.product-card-cart) > .product-img {
    width: 100% !important;
    height: auto !important;          /* uses the 750x750 intrinsic ratio */
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block;
  }
  .products-row > .product-card:not(.product-card-cart) .product-content {
    height: auto !important;
    min-height: 0 !important;
  }
  /* اسم المنتج */
.product-name {
  font-weight: normal;
  font-size: 15px;
  margin-top: 6px;
  margin-bottom: 6px;
  color: #222;
}


.product-name {
  margin-bottom: 4px !important;
}
  /* ✅ حالة نفاذ المخزون */
.product-stock {
  font-size: 9px;
  color: #6e6e6e;
  background: #fff3e000;
  border-radius: 7px;
  padding: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  font-weight: bold;
  display: inline-block;
  letter-spacing: 1px;
  border: 1px solid #ffd1a300;
  box-shadow: 0 2px 8px #ffd1a300;
}

/* صف السعر */
.product-price-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

/* السعر الحالي */
.product-price {
  font-weight: bold;
  font-size: 13px;
  color: #000000;
}

/*  سعر الخصم */
.product-price-discount {
  font-size: 0.95em;
  color: #D4AF37 !important; /* لون أحمر أو أي لون تريده للخصم */
}

.product-old-price-striked {
  text-decoration: line-through;
  color: #000000a9;
  font-size: 0.95em;
  margin-top: -5px;
  margin-bottom: 0px;
  display: block;
  line-height: 1.1;
  padding: 0;
}

.product-fire {
  margin-inline-start: 1px;
  font-size: 0.6em;
  vertical-align: middle;
  user-select: none;
}
/* مؤقت العرض */
/* صندوق العداد والتوفير */
.product-timer-save-box {
  display: flex;
  align-items: stretch;
  width: fit-content;
  min-width: 0;
  margin: 2px 0 2px 0;
  padding: 1px 1px;
  font-weight: bold;
  font-size: 9px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 4px #0001;
  direction: inherit; /* يدعم الاتجاه تلقائياً */
}

/* نص التوفير والسهم */
.product-save-text {
  background: #152546;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 1px 4px;    /* تقليل المسافة من الداخل */
  font-size: 9px;
  font-weight: bold;
  border-radius: 0 2px 2px 0;
  white-space: nowrap;
  gap: 0px;
}
[dir="ltr"] .product-save-text {
  border-radius: 2px 0 0 2px;
}
.save-arrow {
  font-size: 12px;
  margin: 0 4px;
  vertical-align: middle;
}

/* العداد */
.product-timer {
  background: #fff;
  color: #152546;
  padding: 0 2px;
  display: flex;
  align-items: center;
  font-size: 9px;
  font-weight: bold;
  border-radius: 2px;
  border: none;
  min-width: 15px;
  justify-content: center;
  border: 0.2px solid rgba(21, 37, 70, 0.55);
}
[dir="ltr"] .product-timer {
  border-radius: 0 8px 8px 0;
}
/* توفير إضافي */
.product-save {
  background: #D4AF37;
  color: #fff;
  font-size: 2px;
  border-radius: 6px;
  padding: 0px 4px;
  margin-left: 1px;
  font-weight: bold;
  min-width: 10px;
}

/* صف المعلومات الإضافية */
.product-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #444;
  margin-top: 6px;
}

/* مبيعات */
.product-sales {
  margin-inline-start: 0px;
  font-size: 0.6em;
  color: #00000094;
  font-weight: bold;
  vertical-align: middle;
}

/* تقييم */
/* نظام عرض التقييم بالنجوم */

.product-rating-container {
  display: flex;
  align-items: center;
  gap: 1px;
}

/* حاوية النجوم */
.stars-container {
  position: relative;
  display: inline-block;
  unicode-bidi: bidi-override;
  text-align: right;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 2px;
}
/* النجوم الفارغة (الإطار) */
.stars-empty {
  color: #ccc;
  position: relative;
  z-index: 0;
}

/* النجوم المملوءة */
.stars-filled {
  color: #000000;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0; /* بداية التعبئة من اليمين */
  overflow: hidden;
  white-space: nowrap;
}

/* عدد التقييمات */
.rating-count {
  font-size: 0.75em !important;
  color: #777;
  margin-left: 2px;
  margin-inline-start: 2px;
  font-weight: normal;
}

.product-rating-container {
  flex-direction: auto;
}
/* زر السلة */
.product-cart-btn {
  position: absolute;
  bottom: 10px;
  background: #fff;
  color: #152546;
  border: none;
  width: 34px;
  height: 30px;
  font-size: 10px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(21,37,70,.12);
  transition: background 0.2s;
  border: 1.5px solid #152546;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:  5px;
  z-index: 8;
  opacity: 1;
  visibility: visible;
}
.product-cart-btn .cart-svg-icon {
  display: block;
  width: 18px;
  height: 18px;
}
.product-cart-btn .cart-svg-icon path {
  fill: #152546 !important;
}
.daily-picks-section+.trust-bar{margin-top:20px!important}

}





/* ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ */

/*    لاب توب */
@media (min-width: 1021px) and (max-width: 1440px) {
  main {
    width: 90%;
    margin: 0 auto; /* توسيط العنصر في الشاشة */
  }
   .header-content,
  .footer-info-bar {
    width: 90%;
    margin: 0 auto; /* توسيط العنصر في الشاشة */
  }
  .search-container {
    width: auto;
    margin: 0 auto; /* توسيط العنصر في الشاشة */
  }
  .logo img {
    height: 25px; /* تكبير الشعار قليلاً */
  }
  .search-container input {
    font-size: 4px; /* تكبير حجم الخط */
  }
  
}



