/* ==========================================================================
   AMAZON REAL REPLICA STYLESHEET (مطابق 100% للقطات شاشة أمازون الخمسة)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  --mc-green:      #014140;  /* لون اللوغو نفسه */
  --mc-green-deep: #002B2A;  /* أغمق درجة للتدرجات */
  --mc-green-soft: #0A5F5C;  /* أفتح درجة للروابط والحواف */
  --mc-green-line: #14706D;  /* خط فاصل فوق الأخضر */
  --mc-green-tint: #EDF4F3;  /* خلفية باهتة بميلان أخضر */

  --amz-dark: var(--mc-green);
  --amz-subnav: var(--mc-green);
  --amz-yellow: #febd69;
  --amz-orange: #f3a847;
  --amz-red: #cc0c39;
  --amz-link: var(--mc-green-soft);
  --amz-link-hover: #0E8D88;
  --amz-body-bg: #eaeded;
  --amz-card-bg: #ffffff;
  --amz-text: #0f1111;
  --amz-text-muted: #565959;
  --amz-border: #e7e7e7;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
  direction: rtl;
  text-align: right;
  background-color: var(--amz-body-bg);
  color: var(--amz-text);
  line-height: 1.35;
  overflow-x: hidden;
}

/* ==========================================================================
   1. AMAZON MAIN HEADER (مطابق للصورة 3 تماماً)
   ========================================================================== */
.amz-header {
  background-color: var(--amz-dark);
  color: #ffffff;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
}

.amz-logo-box {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  gap: 10px;
  transition: all 0.2s;
}

.amz-logo-box:hover {
  border-color: #ffffff;
}

.amz-logo-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: contain;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 0 12px rgba(102, 192, 231, 0.5);
  display: block;
  flex-shrink: 0;
}

.amz-brand-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.amz-brand-title .brand-name {
  font-size: 19px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.amz-brand-title .brand-domain {
  font-size: 12px;
  font-weight: 700;
  color: var(--amz-yellow);
  direction: ltr;
  text-align: right;
  display: inline-block;
}

/* موقع التوصيل */
.amz-location {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: default;
  color: #ffffff;
  user-select: none;
}

.amz-location:hover {
  border-color: transparent;
}

.amz-location i {
  font-size: 16px;
  margin-top: 4px;
}

.location-text {
  font-size: 12px;
  line-height: 1.2;
}

.location-text .sub {
  font-size: 11px;
  color: #cccccc;
}

.location-text .main {
  font-weight: 700;
  color: #ffffff;
}

/* شريط البحث المماثل لأمازون */
.amz-search-bar {
  flex: 1;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
}

.search-bar-inner {
  display: flex;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.search-bar-inner:focus-within {
  box-shadow: 0 0 0 2px #f90, 0 0 0 3px rgba(255,153,0,0.5);
}

.search-select {
  background: #e6e6e6;
  border: none;
  border-left: 1px solid #cdcdcd;
  padding: 0 12px;
  font-family: inherit;
  font-size: 12px;
  color: #555555;
  cursor: pointer;
  outline: none;
}

.search-input {
  flex: 1;
  border: none;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: #111111;
  outline: none;
}

.search-button {
  background-color: var(--amz-yellow);
  border: none;
  width: 45px;
  cursor: pointer;
  color: #111111;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
}

.search-button:hover {
  background-color: var(--amz-orange);
}

/* منصات التواصل الـ 4 من رسم اليد */
.social-header-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-circle-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  transition: transform 0.15s;
}

.social-circle-btn:hover {
  transform: scale(1.1);
}

.social-circle-btn.whatsapp { background: #25D366; }
.social-circle-btn.instagram { background: #E1306C; }
.social-circle-btn.facebook { background: #1877F2; }
.social-circle-btn.tiktok { background: #000000; border: 1px solid #555; }

/* أدوات الحساب والسلة */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-action-item {
  color: #ffffff;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 2px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.header-action-item:hover {
  border-color: #ffffff;
}

.header-action-item .sub {
  font-size: 11px;
  color: #cccccc;
}

.header-action-item .main {
  font-size: 13px;
  font-weight: 700;
}

.header-cart-box {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 2px;
  border: 1px solid transparent;
  position: relative;
}

.header-cart-box:hover {
  border-color: #ffffff;
}

.cart-count-num {
  position: absolute;
  top: 0;
  right: 18px;
  color: var(--amz-yellow);
  font-weight: 900;
  font-size: 15px;
}

/* ==========================================================================
   2. AMAZON SUBNAV STRIP (الكحلي)
   ========================================================================== */
.amz-subnav {
  background-color: var(--amz-subnav);
  color: #ffffff;
  padding: 0 10px;
  display: flex;
  align-items: stretch;
  font-size: 13px;
  position: relative;
  z-index: 60;
}

.subnav-btn-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  font-weight: 800;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  color: #ffffff;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  flex-shrink: 0;
}

.subnav-btn-all:hover {
  border-color: #ffffff;
}

/* الشريط القابل للتمرير أفقياً لباقي الأقسام */
/* لا نستخدم overflow هنا لأنه يقصّ القوائم المنسدلة — نلفّ العناصر بدلاً منه */
.subnav-items {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

/* كل قسم يتمدد ليملأ العرض بالتساوي مهما كان عددهم،
   وعند إضافة أقسام جديدة تتقلّص تلقائياً ثم تلتفّ لسطر ثانٍ */
.subnav-slot {
  flex: 1 1 auto;
  min-width: 0;
}

/* كل قسم مع قائمته المنسدلة */
.subnav-slot {
  position: relative;
}

.subnav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subnav-item:hover,
.subnav-slot:hover .subnav-item {
  border-color: #ffffff;
}

.subnav-item.highlight {
  color: var(--amz-yellow);
  font-weight: 800;
}

.subnav-caret {
  font-size: 9px;
  opacity: 0.7;
}

/* القائمة المنسدلة تحت كل قسم */
.subnav-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 240px;
  background: #ffffff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 70;
}

.subnav-dropdown.wide {
  min-width: 280px;
  column-count: 1;
}

.subnav-slot:hover .subnav-dropdown,
.subnav-slot:focus-within .subnav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.subnav-dropdown-head {
  font-size: 13px;
  font-weight: 800;
  color: var(--amz-text);
  padding: 4px 16px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--amz-border);
}

.subnav-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--amz-text);
  text-decoration: none;
  font-weight: 500;
}

.subnav-dropdown a i {
  width: 16px;
  color: var(--amz-text-muted);
  font-size: 12px;
}

.subnav-dropdown a:hover {
  background: #f3f4f6;
  color: var(--amz-link-hover);
}

.subnav-dropdown-all {
  margin-top: 4px;
  border-top: 1px solid var(--amz-border);
  color: var(--amz-link) !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   2.2 القائمة الجانبية الكاملة (زر "الكل")
   ========================================================================== */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 17, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 900;
}

.drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.side-drawer {
  position: fixed;
  visibility: hidden;
  top: 0;
  right: 0;
  height: 100%;
  width: 340px;
  max-width: 88vw;
  background: #ffffff;
  transform: translateX(105%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 950;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}

.side-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

.drawer-head {
  background: var(--amz-subnav);
  color: #ffffff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}

.drawer-head > i {
  font-size: 22px;
}

.drawer-close {
  margin-right: auto;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.85;
}

.drawer-close:hover { opacity: 1; }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 30px;
}

.drawer-group {
  padding: 10px 0;
  border-bottom: 1px solid var(--amz-border);
}

.drawer-group h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--amz-text);
  padding: 8px 18px 10px;
}

.drawer-cat-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--amz-text);
  cursor: pointer;
  text-align: right;
}

.drawer-cat-head:hover,
.drawer-link:hover {
  background: #f3f4f6;
}

.drawer-cat-icon {
  width: 18px;
  color: var(--amz-link);
  font-size: 14px;
  flex-shrink: 0;
}

.drawer-chevron {
  margin-right: auto;
  font-size: 11px;
  color: var(--amz-text-muted);
  transition: transform 0.2s ease;
}

.drawer-cat.open .drawer-chevron {
  transform: rotate(180deg);
}

.drawer-sublist {
  display: none;
  background: #fafafa;
  padding: 4px 0;
}

.drawer-cat.open .drawer-sublist {
  display: block;
}

.drawer-sublist a {
  display: block;
  padding: 9px 18px 9px 18px;
  padding-right: 46px;
  font-size: 13px;
  color: var(--amz-text-muted);
  text-decoration: none;
  font-weight: 500;
}

.drawer-sublist a:hover {
  color: var(--amz-link-hover);
  background: #f0f0f0;
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--amz-text);
  text-decoration: none;
}

/* ==========================================================================
   2.3 نتائج البحث الفوري
   ========================================================================== */
.amz-search-bar {
  position: relative;
}

.search-results-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  background: #ffffff;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  display: none;
  z-index: 800;
}

.search-results-dropdown.active {
  display: block;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--amz-text);
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
}

.search-item:last-child { border-bottom: none; }

.search-item:hover { background: #f3f4f6; }

.search-item > i {
  color: var(--amz-text-muted);
  font-size: 12px;
}

.search-item-name {
  font-weight: 700;
  flex: 1;
}

.search-item-badge {
  font-size: 11px;
  color: var(--amz-text-muted);
  background: #eef0f1;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.search-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--amz-text-muted);
}

@media (max-width: 700px) {
  .side-drawer { width: 300px; }
  .subnav-caret { display: none; }
}

/* ==========================================================================
   3. AMAZON COLOR-CONTAINER DEAL CAROUSEL (مطابق تماماً للصور 1 و 2 و 3 و 4)
   الأشرطة الملونة بعرض الصفحة وبداخلها بطاقات بيضاء مقصوصة مع شارة التخفيض الحمراء
   ========================================================================== */
.amz-deals-strip-container {
  max-width: 1540px;
  margin: 16px auto;
  padding: 14px 16px;
  border-radius: 4px;
  position: relative;
}

/* الألوان المطابقة تماماً للقطات الشاشة الخمسة */
.amz-deals-strip-container.lime-banner {
  background: #d4e723; /* أصفر ليموني كما بالصورة 1 والصورة 4 */
  color: #0f1111;
}

.amz-deals-strip-container.cyan-banner {
  background: #9cf0ff; /* سماوي كما بالصورة 2 والصورة 3 */
  color: #0f1111;
}

.amz-deals-strip-container.teal-banner {
  background: #a8f0c6; /* أخضر نعناعي فاتح لقسم البقالة */
  color: #0f1111;
}

.amz-deals-strip-container.rose-banner {
  background: #ffc6de; /* وردي لقسم العطورات والميك اب */
  color: #0f1111;
}

.amz-deals-strip-container.amber-banner {
  background: #ffd79a; /* برتقالي فاتح لقسم الملابس */
  color: #0f1111;
}

.amz-deals-strip-container.sky-banner {
  background: #b9cdff; /* أزرق فاتح لقسم السيارات */
  color: #0f1111;
}

.amz-deals-strip-container.sand-banner {
  background: #e6d3b3; /* رملي دافئ لقسم الموبيلية */
  color: #0f1111;
}

.amz-deals-strip-container.purple-banner {
  background: #8b00d6; /* بنفسجي كما بالصورة 4 */
  color: #ffffff;
}

.amz-deals-strip-container.blue-banner {
  background: #0073e6; /* أزرق كهربائي */
  color: #ffffff;
}

.amz-deals-strip-container.dark-banner {
  background: #232f3e; /* كحلي للخدمات */
  color: #ffffff;
}

/* عنوان الحاوية مع الأسهم */
.strip-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.strip-headline-title {
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.strip-headline-title:hover {
  text-decoration: underline;
}

.strip-scroll-wrapper {
  position: relative;
}

.strip-cards-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px;
}

.strip-cards-carousel::-webkit-scrollbar {
  display: none;
}

/* بطاقة المنتج البيضاء داخل الشريط الملون (مطابقة للصور 1 و 2 و 3 و 4 حرفياً) */
.product-white-card {
  flex: 0 0 178px;
  background: #ffffff;
  border-radius: 6px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: #0f1111;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.product-white-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.product-card-img-wrap {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
  background: #ffffff;
}

.product-card-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.2s;
}

.product-white-card:hover .product-card-img-wrap img {
  transform: scale(1.05);
}

.product-card-name {
  font-size: 12px;
  font-weight: 600;
  color: #0f1111;
  line-height: 1.35;
  height: 32px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 6px;
}

/* شارة الخصم الحمراء والوقت المتبقي كما بالصورة 1 و 2 */
.discount-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.red-discount-pill {
  background-color: var(--amz-red);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

.time-left-text {
  font-size: 10px;
  color: var(--amz-red);
  font-weight: 700;
}

/* السعر بالريال السعودي مع الشطب */
.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.current-price {
  font-size: 15px;
  font-weight: 900;
  color: #0f1111;
}

.current-price small {
  font-size: 11px;
  font-weight: 700;
}

.old-price {
  font-size: 11px;
  color: var(--amz-text-muted);
  text-decoration: line-through;
}

/* أزرار السحب لليمين واليسار */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: 1px solid #d5d9d9;
  width: 40px;
  height: 70px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #111111;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  z-index: 10;
  transition: background 0.15s;
}

.carousel-btn:hover {
  background: #f7f7f7;
}

.carousel-btn.right {
  right: -10px;
}

.carousel-btn.left {
  left: -10px;
}

/* ==========================================================================
   3.5 AMAZON HERO BANNER & CAROUSEL (سلايدر إعلانات أمازون الدوار)
   ========================================================================== */
.amz-hero-banner {
  position: relative;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  height: 520px;
  background: #131921;
  overflow: hidden;
}

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

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
  z-index: 1;
}

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

.hero-banner-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* أزرار أسهم أمازون الفعلية الدقيقة */
.hero-nav-arrow {
  position: absolute;
  top: 70px;
  background: transparent;
  border: 1px solid transparent;
  width: 50px;
  height: 120px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  cursor: pointer;
  z-index: 20;
  transition: all 0.2s ease;
  padding: 0;
}

.hero-nav-arrow i {
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.9);
}

.hero-nav-arrow:hover {
  outline: 2px solid #ffffff;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.hero-nav-arrow:focus {
  outline: 3px solid #007185;
}

.hero-nav-arrow.right { right: 8px; }
.hero-nav-arrow.left { left: 8px; }

/* طبقة التلاشي السفلية لأمازون لتندمج خلفية البانر مع لون الصفحة الرمادي */
.hero-bottom-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 290px;
  background: linear-gradient(to bottom, rgba(234, 237, 237, 0) 0%, rgba(234, 237, 237, 0.3) 25%, #eaeded 88%);
  pointer-events: none;
  z-index: 5;
}

/* ==========================================================================
   4. AMAZON 4-GRID QUAD CARDS (مطابقة لموقع أمازون المباشر ar_AE بدقة)
   كل بطاقة تحتوي 4 مربعات متناسقة تماماً مع نسب أبعاد أمازون
   ========================================================================== */
.amz-quad-section {
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}

.amz-quad-section.overlap-hero {
  margin-top: -285px; /* مسافة متوازنة بدقة تترك مسافة تنفس مريحة أسفل الشنطة */
  z-index: 10;
  margin-bottom: 24px;
}

.amz-quad-section.second-row {
  margin-top: 24px;
  margin-bottom: 24px;
}

.quad-4col-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.quad-card-box {
  background: #ffffff;
  border-radius: 0;
  padding: 20px 20px 15px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 420px;
  box-sizing: border-box;
  transition: box-shadow 0.2s;
  cursor: default;
}

.quad-card-box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.quad-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  height: 55px;
}

.quad-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f1111;
  line-height: 26px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.quad-title-arrow {
  font-size: 15px;
  color: #0f1111;
  margin-top: 5px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.quad-card-box:hover .quad-title-arrow {
  transform: translateX(-3px);
  color: var(--amz-link);
}

.quad-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
  margin-bottom: 8px;
  flex: 1;
}

.quad-tile {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.quad-tile-img {
  width: 100%;
  height: 105px;
  background: #f7f8f8; /* خلفية ناعمة أنيقة كما في أمازون الحي */
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: background-color 0.2s;
}

.quad-tile:hover .quad-tile-img {
  background: #edf2f7;
}

.quad-tile-img img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.quad-tile:hover .quad-tile-img img {
  transform: scale(1.05);
}

.quad-tile-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  margin-top: 4px;
  color: #0f1111;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quad-card-link {
  font-size: 13px;
  color: var(--amz-link);
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
  padding-top: 10px;
  display: inline-block;
  line-height: 19px;
}

.quad-card-link:hover {
  color: var(--amz-link-hover);
  text-decoration: underline;
}

@media (max-width: 1240px) {
  .quad-4col-layout {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .amz-quad-section.overlap-hero {
    margin-top: -150px;
  }
  .amz-hero-banner {
    height: 380px;
  }
}

@media (max-width: 650px) {
  .quad-4col-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .amz-quad-section.overlap-hero {
    margin-top: -80px;
  }
  .amz-hero-banner {
    height: 300px;
  }
  .hero-title {
    font-size: 24px;
  }
}

/* ==========================================================================
   5. SERVICES SECTION (خدمات أخرى - بنفس أسلوب كروت أمازون الحقيقية)
   ========================================================================== */
.service-white-card {
  flex: 0 0 178px;
  background: #ffffff;
  border-radius: 6px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: transform 0.15s, box-shadow 0.15s;
}

.service-white-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.service-card-icon-box {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mc-green-tint);
  color: var(--mc-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 12px;
  transition: background 0.2s, color 0.2s;
}

.service-white-card:hover .service-card-icon-box {
  background: var(--mc-green);
  color: var(--amz-yellow);
}

.service-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f1111;
  margin-bottom: 10px;
}

.service-card-action {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: var(--mc-green);
  padding: 6px 12px;
  border-radius: 20px;
  width: 100%;
}

.service-white-card:hover .service-card-action {
  background: var(--amz-yellow);
  color: #111;
}

/* ==========================================================================
   5.5 AMAZON SIGN-IN RECOMMENDATION PROMPT (مطابق لموقع أمازون المباشر)
   ========================================================================== */
/* ==========================================================================
   6. FOOTER (مطابق لأمازون تماماً)
   ========================================================================== */
.amz-back-to-top {
  background-color: #37475a;
  color: #ffffff;
  text-align: center;
  padding: 15px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
}

.amz-back-to-top:hover {
  background-color: #485769;
}

.amz-footer-main {
  background-color: var(--amz-subnav);
  color: #dddddd;
  padding: 40px 20px;
  border-bottom: 1px solid #3a4553;
}

.footer-4col-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.footer-col h4 {
  color: #ffffff;
  font-size: 15px;
  margin-bottom: 14px;
  font-weight: 700;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  color: #dddddd;
  text-decoration: none;
  font-size: 13px;
}

.footer-col ul li a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.amz-footer-bottom {
  background-color: var(--amz-dark);
  color: #999999;
  text-align: center;
  padding: 30px 20px;
  font-size: 12px;
}

.footer-logo-wrap {
  margin-bottom: 12px;
}

.footer-logo-wrap img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  padding: 2px;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-box {
  background: #ffffff;
  border-radius: 8px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
}

.modal-header {
  background: #232f3e;
  color: #ffffff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
}

.modal-body {
  padding: 24px;
}

.btn-whatsapp-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25D366;
  color: #ffffff;
  text-decoration: none;
  padding: 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 1024px) {
  .quad-4col-layout {
    grid-template-columns: repeat(2, 1fr);
  }
  .amz-quad-section.overlap-hero {
    margin-top: -180px;
  }
  .amz-hero-banner {
    height: 420px;
  }
  .footer-4col-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .quad-4col-layout {
    grid-template-columns: 1fr;
  }
  .amz-quad-section.overlap-hero {
    margin-top: -60px;
  }
  .amz-hero-banner {
    height: 320px;
  }
  .hero-bottom-mask {
    height: 120px;
  }
  .amz-header {
    flex-direction: column;
    align-items: stretch;
  }
  .amz-location {
    display: none;
  }
  .footer-4col-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   10. صفحات الخدمات (services.html و service.html)
   ========================================================================== */
.page-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 16px 50px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--amz-text-muted);
  padding: 12px 2px;
}

.breadcrumb a {
  color: var(--amz-link);
  text-decoration: none;
  font-weight: 600;
}

.breadcrumb a:hover { color: var(--amz-link-hover); text-decoration: underline; }

.breadcrumb i { font-size: 10px; opacity: 0.6; }

/* ترويسة صفحة قائمة الخدمات */
.page-hero {
  background: linear-gradient(135deg, var(--amz-subnav), #37475a);
  color: #ffffff;
  border-radius: 10px;
  padding: 34px 30px;
  margin-bottom: 22px;
}

.page-hero h1 {
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 10px;
}

.page-hero p {
  font-size: 15px;
  line-height: 1.8;
  max-width: 760px;
  opacity: 0.9;
}

/* شبكة بطاقات الخدمات */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

.service-tile {
  background: var(--amz-card-bg);
  border: 1px solid var(--amz-border);
  border-radius: 10px;
  padding: 22px 20px;
  text-decoration: none;
  color: var(--amz-text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.service-tile:hover {
  box-shadow: 0 6px 20px rgba(15, 17, 17, 0.14);
  transform: translateY(-3px);
}

.service-tile-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #f0f5f7;
  color: var(--amz-link);
  display: grid;
  place-items: center;
  font-size: 22px;
}

.service-tile h3 {
  font-size: 17px;
  font-weight: 800;
}

.service-tile p {
  font-size: 13px;
  color: var(--amz-text-muted);
  line-height: 1.7;
  flex: 1;
}

.service-tile-link {
  font-size: 13px;
  font-weight: 800;
  color: var(--amz-link);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.services-grid.compact .service-tile { padding: 18px 16px; }

/* ترويسة صفحة الخدمة المفردة */
.service-hero {
  background: var(--amz-card-bg);
  border: 1px solid var(--amz-border);
  border-radius: 10px;
  padding: 28px 26px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.service-hero-icon {
  width: 78px;
  height: 78px;
  border-radius: 16px;
  background: var(--amz-subnav);
  color: var(--amz-yellow);
  display: grid;
  place-items: center;
  font-size: 34px;
  flex-shrink: 0;
}

.service-hero-text { flex: 1; }

.service-hero h1 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 8px;
}

.service-tagline {
  font-size: 15px;
  color: var(--amz-text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.service-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-primary-yellow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--amz-yellow);
  color: var(--amz-text);
  border: 1px solid var(--amz-orange);
  border-radius: 22px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary-yellow:hover { background: var(--amz-orange); }

.btn-outline {
  background: none;
  border: 1px solid #adb1b8;
  border-radius: 22px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: var(--amz-text);
  cursor: pointer;
}

.btn-outline:hover { background: #f0f2f2; }

/* أقسام محتوى الخدمة */
.service-panel {
  background: var(--amz-card-bg);
  border: 1px solid var(--amz-border);
  border-radius: 10px;
  padding: 24px 26px;
  margin-bottom: 18px;
}

.service-panel h2 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--amz-yellow);
  display: inline-block;
}

.service-intro {
  font-size: 15px;
  line-height: 2;
  color: #333;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.feature-card {
  background: #fafafa;
  border: 1px solid var(--amz-border);
  border-radius: 8px;
  padding: 18px 16px;
}

.feature-card > i {
  font-size: 22px;
  color: var(--amz-link);
  margin-bottom: 10px;
  display: block;
}

.feature-card h3 {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 6px;
}

.feature-card p {
  font-size: 13px;
  color: var(--amz-text-muted);
  line-height: 1.8;
}

/* خطوات التنفيذ */
.steps-list {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.steps-list li {
  counter-increment: step;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  line-height: 1.8;
}

.step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--amz-subnav);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.step-num::before { content: counter(step); }

/* الأسئلة الشائعة */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  border: 1px solid var(--amz-border);
  border-radius: 8px;
  overflow: hidden;
}

.faq-item summary {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: #fafafa;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::before {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 11px;
  color: var(--amz-text-muted);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::before { transform: rotate(180deg); }

.faq-item p {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--amz-text-muted);
}

/* شريط الدعوة للتواصل */
.cta-band {
  background: linear-gradient(135deg, var(--amz-subnav), #37475a);
  color: #ffffff;
  border-radius: 10px;
  padding: 30px 26px;
  text-align: center;
  margin-bottom: 18px;
}

.cta-band h2 {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 8px;
}

.cta-band p {
  font-size: 14px;
  opacity: 0.88;
  margin-bottom: 18px;
}

.cta-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #ffffff;
  padding: 12px 30px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.cta-band-btn:hover { background: #1eb355; }

/* صفحة خدمة غير موجودة */
.not-found {
  background: var(--amz-card-bg);
  border-radius: 10px;
  padding: 60px 24px;
  text-align: center;
}

.not-found > i {
  font-size: 54px;
  color: var(--amz-text-muted);
  margin-bottom: 16px;
}

.not-found h1 { font-size: 24px; font-weight: 900; margin-bottom: 8px; }

.not-found p { color: var(--amz-text-muted); margin-bottom: 22px; }

@media (max-width: 700px) {
  .service-hero { flex-direction: column; }
  .page-hero h1 { font-size: 23px; }
  .service-hero h1 { font-size: 22px; }
}

.drawer-sublist-all {
  color: var(--amz-link) !important;
  font-weight: 800 !important;
}


/* ==========================================================================
   12. صفحات تصفّح الأقسام — مطابقة لصفحة نتائج أمازون
   القياسات مأخوذة من amazon.com مباشرة:
   الكرت بلا ظل وبحد #F5F5F5 نصف قطره 4px · الصورة مربّعة 225px
   العنوان 16px/400 بارتفاع سطر 24px · السعر 28px بوزن عادي
   الزر أبيض بحد #888C8C ونصف قطر 100px بارتفاع 32px
   شريط الأدوات أبيض بحد سفلي #CCC · العمود الجانبي 242px
   ========================================================================== */
.srp {
  background: #ffffff;
  padding-bottom: 40px;
  font-size: 14px;   /* حجم خط الأساس في أمازون — محصور بصفحات التصفّح فقط */
}

.srp-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ---------- شريط الأدوات العلوي ---------- */
.srp-toolbar {
  border-bottom: 1px solid #cccccc;
  background: #ffffff;
}

.srp-toolbar .srp-inner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.srp-count {
  font-size: 14px;
  color: var(--amz-text);
}

.srp-count b { font-weight: 700; }

.srp-sortwrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--amz-text);
}

.srp-sortwrap select {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  background: #f0f2f2;
  color: var(--amz-text);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(15, 17, 17, 0.08);
}

/* ---------- مسار التنقّل ---------- */
.srp-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--amz-text-muted);
  padding: 9px 0 4px;
}

.srp-crumb a { color: var(--amz-link); text-decoration: none; }
.srp-crumb a:hover { color: var(--amz-link-hover); text-decoration: underline; }
.srp-crumb i { font-size: 9px; opacity: 0.55; }

/* ---------- التخطيط ---------- */
.srp-body {
  display: grid;
  grid-template-columns: 242px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-top: 14px;
}

/* ---------- العمود الجانبي ---------- */
.srp-side {
  font-size: 14px;
}

.srp-side-group {
  margin-bottom: 18px;
}

.srp-side-group h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--amz-text);
  margin-bottom: 6px;
}

.srp-side-group ul {
  list-style: none;
}

.srp-side-link {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  color: var(--amz-text);
  text-decoration: none;
  line-height: 1.45;
}

.srp-side-link:hover { color: var(--amz-link-hover); text-decoration: underline; }

.srp-side-link.active {
  font-weight: 700;
}

.srp-side-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--amz-link);
  text-decoration: none;
  margin-bottom: 5px;
}

.srp-side-back:hover { color: var(--amz-link-hover); text-decoration: underline; }
.srp-side-back i { font-size: 10px; }

.srp-side-current {
  font-size: 14px;
  font-weight: 700;
  padding: 3px 0 4px;
}

.srp-side-tree { padding-right: 12px; }

.srp-side-num { color: var(--amz-text-muted); font-size: 13px; }

.srp-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.45;
}

.srp-check input {
  width: 16px;
  height: 16px;
  accent-color: #007185;
  cursor: pointer;
  flex-shrink: 0;
}

.srp-check:hover span { color: var(--amz-link-hover); }

.srp-side-clear {
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--amz-link);
  cursor: pointer;
}

.srp-side-clear:hover { color: var(--amz-link-hover); text-decoration: underline; }

/* ---------- منطقة النتائج ---------- */
.srp-results-head {
  font-size: 20px;
  font-weight: 700;
  color: var(--amz-text);
  margin-bottom: 3px;
}

.srp-results-sub {
  font-size: 14px;
  color: var(--amz-text-muted);
  margin-bottom: 14px;
}

/* صف الفروع أعلى النتائج */
.srp-subrow {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.srp-subcard {
  flex: 0 0 124px;
  text-align: center;
  text-decoration: none;
  color: var(--amz-text);
}

/* مربّع ثابت لكل الفروع — الصور بمقاسات مختلفة (صور منتجات على أبيض
   وصور لايف ستايل طولية)، فنوحّد الإطار ونعرضها بـ contain بلا قص */
.srp-subcard-img {
  display: block;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  margin-bottom: 7px;
  padding: 8px;
  overflow: hidden;
}

/* أبعاد صريحة 100% مع contain — النسب المئوية في max-height لا تُحلّ
   داخل حاوية بارتفاع تلقائي فتفيض الصور الطولية */
.srp-subcard-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.srp-subcard:hover .srp-subcard-img {
  border-color: var(--amz-link);
}

.srp-subcard-name {
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 35px;
}
.srp-subcard:hover .srp-subcard-name { color: var(--amz-link-hover); text-decoration: underline; }

/* ---------- شبكة النتائج ---------- */
.srp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 6px;
  margin-bottom: 22px;
}

/* بطاقة المنتج — بلا ظل وبحد شبه شفاف كما في أمازون */
.srp-card {
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.srp-card-imgbox {
  display: block;
  height: 225px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.srp-card-imgbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* شارة داكنة أعلى الصورة مثل Overall Pick */
.srp-pick {
  position: absolute;
  top: 0;
  right: 0;
  background: #232f3e;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
}

.srp-card-sub {
  font-size: 12px;
  color: var(--amz-text-muted);
  margin-bottom: 3px;
}

.srp-card-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--amz-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 48px;
  margin-bottom: 6px;
}

.srp-card-title:hover { color: var(--amz-link-hover); text-decoration: underline; }

/* شارة الفرع الرمادية الصغيرة مثل شارة العلامة التجارية */
.srp-brand {
  display: inline-block;
  background: #f0f2f2;
  color: var(--amz-text);
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 3px;
  margin-bottom: 7px;
}

/* السعر: رقم كبير بوزن عادي + رمز صغير مرفوع */
.srp-price {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
  margin-bottom: 3px;
}

.srp-price-whole {
  font-size: 28px;
  font-weight: 400;
  color: var(--amz-text);
}

.srp-price-cur {
  font-size: 13px;
  position: relative;
  top: 3px;
  color: var(--amz-text);
}

.srp-price-was {
  font-size: 13px;
  color: var(--amz-text-muted);
  margin-bottom: 5px;
}

.srp-price-was s { text-decoration: line-through; }

.srp-save {
  font-size: 13px;
  color: #067d62;
  font-weight: 700;
  margin-bottom: 5px;
}

.srp-note {
  font-size: 12px;
  color: var(--amz-text-muted);
  line-height: 1.6;
  margin-bottom: 10px;
  flex: 1;
}

/* الزر الأبيض بحواف دائرية */
.srp-btn {
  width: 100%;
  height: 32px;
  background: #ffffff;
  border: 1px solid #888c8c;
  border-radius: 100px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--amz-text);
  cursor: pointer;
}

.srp-btn:hover { background: #f7fafa; }

/* ---------- الفلاتر المفعّلة ---------- */
.srp-active {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.srp-active-label { font-size: 13px; color: var(--amz-text-muted); }

.srp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #888c8c;
  border-radius: 100px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--amz-text);
  cursor: pointer;
}

.srp-chip:hover { background: #f7fafa; }
.srp-chip i { font-size: 10px; color: var(--amz-text-muted); }

/* ---------- لا نتائج ---------- */
.srp-empty {
  padding: 50px 10px;
}

.srp-empty h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.srp-empty p { font-size: 14px; color: var(--amz-text-muted); margin-bottom: 14px; }

/* ---------- ترقيم الصفحات ---------- */
.srp-pages {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 26px 0 34px;
}

.srp-page {
  min-width: 42px;
  height: 36px;
  padding: 0 13px;
  background: #ffffff;
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--amz-text);
  cursor: pointer;
}

.srp-page:hover:not(:disabled):not(.active) { background: #f7fafa; }

.srp-page.active {
  background: #f0f2f2;
  border-color: #888c8c;
  font-weight: 700;
}

.srp-page:disabled { color: #a1a3a3; cursor: default; }

/* ---------- تصفّح باقي الأقسام ---------- */
.srp-cross {
  border-top: 1px solid #e7e7e7;
  padding-top: 20px;
}

.srp-cross h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.srp-cross-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.srp-cross-card {
  text-decoration: none;
  color: var(--amz-text);
  text-align: center;
}

/* صورة القسم: شبكة 2×2 من منتجات القسم بدل صورة منتج واحد */
.srp-cross-img {
  display: grid;
  /* minmax(0,1fr) وليس 1fr — وإلا رفضت الخلايا التقلّص تحت حجم الصورة وفاضت */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  height: 132px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 8px;
  background: #ffffff;
  overflow: hidden;
}

.srp-cross-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fafafa;
  border-radius: 3px;
  padding: 2px;
}

/* أقل من أربع صور: وزّعها على كامل المساحة بدل ترك فراغ */
.cross-mosaic-1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.cross-mosaic-2 { grid-template-rows: minmax(0, 1fr); }
.cross-mosaic-3 img:first-child { grid-column: 1 / -1; }

.srp-cross-card:hover .srp-cross-img { border-color: var(--amz-link); }

.srp-cross-name { display: block; font-size: 13px; font-weight: 700; }
.srp-cross-card:hover .srp-cross-name { color: var(--amz-link-hover); text-decoration: underline; }
.srp-cross-count { font-size: 12px; color: var(--amz-text-muted); }

/* ---------- الجوال ---------- */
@media (max-width: 900px) {
  .srp-body { grid-template-columns: 1fr; }
  .srp-side {
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 14px;
  }
  .srp-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .srp-card-imgbox { height: 160px; }
  .srp-price-whole { font-size: 22px; }
  .srp-card-title { font-size: 14px; line-height: 20px; min-height: 40px; }
}

/* ==========================================================================
   13. صفحة المنتج — هيكل وقياسات صفحة منتج أمازون
   العنوان 24px/400 بارتفاع سطر 32px · فاصل 0.8px #D5D9D9
   صندوق الشراء بحد 0.8px #D5D9D9 ونصف قطر 8px · النقاط 14px/20px
   مع لمساتنا: لون القسم في المعرض والصندوق، وشريط ضمانات، وواتساب كإجراء رئيسي
   ========================================================================== */
.pdp {
  background: #ffffff;
  font-size: 14px;
  padding-bottom: 40px;

  /* لون القسم — يُستخدم في الحواف والشارات */
  --pdp-accent: #007185;
  --pdp-accent-soft: #e7f3f5;
}

.pdp-grocery     { --pdp-accent: #0d9488; --pdp-accent-soft: #e3f7f3; }
.pdp-perfumes    { --pdp-accent: #db2777; --pdp-accent-soft: #fce7f1; }
.pdp-clothes     { --pdp-accent: #c2740f; --pdp-accent-soft: #fdf1de; }
.pdp-electronics { --pdp-accent: #7c1fbd; --pdp-accent-soft: #f4e6fd; }
.pdp-household   { --pdp-accent: #5c7d0d; --pdp-accent-soft: #f0f7dc; }
.pdp-cars        { --pdp-accent: #2563eb; --pdp-accent-soft: #e5edfd; }
.pdp-furniture   { --pdp-accent: #8a6231; --pdp-accent-soft: #f7efe4; }

.pdp-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ---------- مسار التنقّل ---------- */
.pdp-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--amz-text-muted);
  padding: 12px 2px 14px;
  flex-wrap: wrap;
}

.pdp-crumb a { color: var(--amz-link); text-decoration: none; }
.pdp-crumb a:hover { color: var(--amz-link-hover); text-decoration: underline; }
.pdp-crumb i { font-size: 9px; opacity: 0.55; }

/* ---------- الشبكة الثلاثية مثل أمازون ---------- */
.pdp-grid {
  display: grid;
  grid-template-columns: 424px minmax(0, 1fr) 300px;
  gap: 26px;
  align-items: start;
}

/* ---------- المعرض ---------- */
.pdp-gallery {
  display: flex;
  gap: 12px;
  position: sticky;
  top: 12px;
}

.pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.pdp-thumb {
  width: 52px;
  height: 52px;
  padding: 3px;
  background: #ffffff;
  border: 1px solid #d5d9d9;
  border-radius: 8px;   /* لمستنا: زوايا أنعم من أمازون */
  cursor: pointer;
  overflow: hidden;
}

.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pdp-thumb.active {
  border-color: var(--pdp-accent);
  box-shadow: 0 0 0 2px var(--pdp-accent-soft);
}

.pdp-main-img {
  flex: 1;
  height: 430px;
  border: 1px solid #f0f0f0;
  border-radius: 12px;      /* لمستنا: إطار ناعم حول الصورة */
  background: #ffffff;
  overflow: hidden;
  position: relative;
  padding: 14px;
}

.pdp-main-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* شارة الخصم على الصورة — لمستنا */
.pdp-disc-flag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--amz-red);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 100px;
}

/* ---------- عمود التفاصيل ---------- */
.pdp-store {
  font-size: 14px;
  color: var(--amz-link);
  text-decoration: none;
}

.pdp-store:hover { color: var(--amz-link-hover); text-decoration: underline; }

.pdp-title {
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: var(--amz-text);
  margin: 6px 0 10px;
}

.pdp-tagrow {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pdp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pdp-accent-soft);
  color: var(--pdp-accent);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 100px;
}

.pdp-tag-deal {
  background: #fdeaee;
  color: var(--amz-red);
}

.pdp-hr {
  border: none;
  border-top: 1px solid #d5d9d9;
  margin: 4px 0 14px;
}

/* السعر */
.pdp-priceblock {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pdp-disc-pill {
  background: var(--amz-red);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
}

.pdp-price { display: inline-flex; align-items: flex-start; gap: 3px; }

.pdp-price-whole {
  font-size: 30px;
  font-weight: 400;
  color: var(--amz-text);
  line-height: 1;
}

.pdp-price-cur {
  font-size: 14px;
  position: relative;
  top: 3px;
}

.pdp-was {
  font-size: 13px;
  color: var(--amz-text-muted);
  margin-top: 6px;
}

.pdp-saved {
  font-size: 14px;
  font-weight: 700;
  color: #067d62;
  margin-top: 4px;
}

/* أقسام النص */
.pdp-sec-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--amz-text);
  margin: 18px 0 8px;
  padding-right: 11px;
  border-right: 3px solid var(--pdp-accent);   /* لمستنا */
}

.pdp-desc {
  font-size: 14px;
  line-height: 24px;
  color: #333333;
}

.pdp-bullets {
  list-style: disc;
  padding-right: 20px;
}

.pdp-bullets li {
  font-size: 14px;
  line-height: 20px;
  color: var(--amz-text);
  margin-bottom: 7px;
}

/* جدول التفاصيل */
.pdp-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.pdp-specs th,
.pdp-specs td {
  text-align: right;
  padding: 9px 12px;
  border-bottom: 1px solid #e7e7e7;
  vertical-align: top;
}

.pdp-specs th {
  background: #f5f6f6;
  font-weight: 700;
  width: 150px;
  color: var(--amz-text);
}

.pdp-specs tr:last-child th,
.pdp-specs tr:last-child td { border-bottom: none; }

/* ---------- صندوق الشراء ---------- */
.pdp-buybox-wrap {
  position: sticky;
  top: 12px;
}

.pdp-buybox {
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  padding: 0 16px 16px;
  background: #ffffff;
  overflow: hidden;
}

/* الشريط الملوّن أعلى الصندوق — لمستنا */
.pdp-buybox-accent {
  height: 4px;
  background: var(--pdp-accent);
  margin: 0 -16px 14px;
}

.pdp-buybox-price {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  margin-bottom: 4px;
}

.pdp-buybox-save {
  font-size: 13px;
  font-weight: 700;
  color: #067d62;
  margin-bottom: 12px;
}

.pdp-ship {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  padding: 11px 0;
  border-top: 1px solid #f0f0f0;
}

.pdp-ship > i {
  color: var(--pdp-accent);
  font-size: 16px;
  margin-top: 2px;
}

.pdp-ship b { display: block; margin-bottom: 2px; }
.pdp-ship span { color: var(--amz-text-muted); font-size: 12px; }

.pdp-stock {
  font-size: 15px;
  font-weight: 700;
  color: #067d62;
  margin-bottom: 12px;
}

.pdp-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 10px;
}

.pdp-qty select {
  font-family: inherit;
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  background: #f0f2f2;
  cursor: pointer;
}

.pdp-total {
  font-size: 13px;
  color: var(--amz-text);
  margin-bottom: 10px;
}

.pdp-total:empty { display: none; }

/* الأزرار */
.pdp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 9px;
  border: 1px solid transparent;
}

/* واتساب هو الإجراء الرئيسي عندنا بدل "أضف إلى السلة" */
.pdp-btn-wa {
  background: #25d366;
  border-color: #1eb355;
  color: #ffffff;
}

.pdp-btn-wa:hover { background: #1eb355; }

.pdp-btn-cart {
  background: var(--amz-yellow);
  border-color: var(--amz-orange);
  color: var(--amz-text);
}

.pdp-btn-cart:hover { background: var(--amz-orange); }

.pdp-seller {
  font-size: 12px;
  color: var(--amz-text-muted);
  line-height: 1.7;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.pdp-seller b { color: var(--amz-text); }

/* ---------- شريط الضمانات ---------- */
.pdp-trust {
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  margin-top: 14px;
  padding: 6px 14px;
}

.pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 13px;
  border-bottom: 1px solid #f4f4f4;
}

.pdp-trust-item:last-child { border-bottom: none; }

.pdp-trust-item i {
  color: var(--pdp-accent);
  width: 18px;
  text-align: center;
  font-size: 14px;
}

/* ---------- منتجات مشابهة ---------- */
.pdp-related {
  margin-top: 34px;
  border-top: 1px solid #e7e7e7;
  padding-top: 22px;
}

.pdp-related h2 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* ---------- الجوال واللوحي ---------- */
@media (max-width: 1150px) {
  .pdp-grid { grid-template-columns: minmax(0, 1fr) 290px; }
  .pdp-gallery { grid-column: 1 / -1; position: static; }
  .pdp-main-img { height: 360px; }
}

@media (max-width: 800px) {
  .pdp-grid { grid-template-columns: 1fr; gap: 18px; }
  .pdp-gallery { flex-direction: column-reverse; }
  .pdp-thumbs { flex-direction: row; overflow-x: auto; }
  .pdp-main-img { height: 300px; }
  .pdp-buybox-wrap { position: static; }
  .pdp-title { font-size: 20px; line-height: 28px; }
  .pdp-price-whole { font-size: 26px; }
  .pdp-specs th { width: 110px; }
}

/* ==========================================================================
   14. السلة ومحدد المحافظة — بلا حسابات
   ========================================================================== */

/* محدد المحافظة في الهيدر صار زراً */
.amz-location {
  background: none;
  font-family: inherit;
  color: inherit;
  text-align: right;
}

/* ---------- نافذة اختيار المحافظة ---------- */
.gov-box { max-width: 520px; }

.gov-note {
  font-size: 13px;
  color: var(--amz-text-muted);
  line-height: 1.8;
  margin-bottom: 14px;
}

.gov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.gov-item {
  padding: 10px 8px;
  background: #ffffff;
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--amz-text);
  cursor: pointer;
}

.gov-item:hover { background: #f0f2f2; border-color: #888c8c; }

.gov-item.active {
  background: var(--amz-subnav);
  border-color: var(--amz-subnav);
  color: #ffffff;
}

/* ---------- تنبيه الإضافة للسلة ---------- */
.cart-toast {
  position: fixed;
  bottom: 22px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #d5d9d9;
  border-right: 4px solid #067d62;
  border-radius: 10px;
  padding: 13px 16px;
  box-shadow: 0 8px 26px rgba(15, 17, 17, 0.2);
  z-index: 990;
  max-width: 380px;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.cart-toast.show { transform: translateY(0); opacity: 1; }

.cart-toast > i { color: #067d62; font-size: 20px; }

.cart-toast-text { flex: 1; min-width: 0; }
.cart-toast-text b { display: block; font-size: 13px; margin-bottom: 2px; }
.cart-toast-text span {
  display: block;
  font-size: 12px;
  color: var(--amz-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-toast-btn {
  background: var(--amz-yellow);
  border: 1px solid var(--amz-orange);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 800;
  color: var(--amz-text);
  text-decoration: none;
  white-space: nowrap;
}

.cart-toast-btn:hover { background: var(--amz-orange); }

/* ---------- صفحة السلة ---------- */
.cart-page {
  background: #ffffff;
  font-size: 14px;
  padding-bottom: 40px;
  min-height: 60vh;
}

.cart-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 18px;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.cart-items {
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  padding: 18px 20px;
}

.cart-items-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 4px;
}

.cart-items-head h1 { font-size: 26px; font-weight: 700; }

.cart-clear {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--amz-link);
  cursor: pointer;
}

.cart-clear:hover { color: var(--amz-link-hover); text-decoration: underline; }

/* سطر منتج */
.cart-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #e7e7e7;
}

.cart-row:last-child { border-bottom: none; }

.cart-row-img {
  height: 132px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 8px;
  overflow: hidden;
  display: block;
}

.cart-row-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

.cart-row-name {
  font-size: 17px;
  line-height: 24px;
  color: var(--amz-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-row-name:hover { color: var(--amz-link-hover); text-decoration: underline; }

.cart-row-sub {
  font-size: 12px;
  color: var(--amz-text-muted);
  margin-top: 4px;
}

.cart-row-stock {
  font-size: 13px;
  color: #067d62;
  margin-top: 6px;
}

.cart-row-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.cart-qty {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.cart-qty select {
  font-family: inherit;
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  background: #f0f2f2;
  cursor: pointer;
}

.cart-remove {
  background: none;
  border: none;
  border-right: 1px solid #ddd;
  padding-right: 14px;
  font-family: inherit;
  font-size: 13px;
  color: var(--amz-link);
  cursor: pointer;
}

.cart-remove:hover { color: var(--amz-link-hover); text-decoration: underline; }

.cart-row-price { text-align: left; white-space: nowrap; }

.cart-row-total {
  font-size: 19px;
  font-weight: 700;
  color: var(--amz-text);
}

.cart-row-total small { font-size: 12px; font-weight: 400; }

.cart-row-unit {
  display: block;
  font-size: 12px;
  color: var(--amz-text-muted);
  margin-top: 4px;
}

/* ملخّص الطلب */
.cart-summary {
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  padding: 18px;
  position: sticky;
  top: 12px;
}

.cart-summary h2 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }

.cart-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  padding: 7px 0;
}

.cart-sum-save { color: #067d62; }

.cart-gov {
  border-top: 1px solid #e7e7e7;
  margin-top: 12px;
  padding-top: 12px;
  font-size: 13px;
}

.cart-gov > span { display: block; color: var(--amz-text-muted); margin-bottom: 7px; }

.cart-gov-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f8f8;
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--amz-text);
  cursor: pointer;
}

.cart-gov-btn:hover { background: #eef0f0; }
.cart-gov-btn i { color: var(--amz-link); }

.cart-gov-hint {
  display: block;
  font-size: 11px;
  color: var(--amz-red);
  margin-top: 6px;
}

.cart-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: #25d366;
  border: 1px solid #1eb355;
  border-radius: 100px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.cart-checkout:hover { background: #1eb355; }

.cart-note {
  font-size: 12px;
  color: var(--amz-text-muted);
  line-height: 1.8;
  margin-top: 12px;
}

/* سلة فارغة */
.cart-empty {
  text-align: center;
  padding: 70px 20px;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  margin-top: 20px;
}

.cart-empty > i { font-size: 52px; color: #c7c9c9; margin-bottom: 16px; }
.cart-empty h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.cart-empty p { font-size: 14px; color: var(--amz-text-muted); margin-bottom: 22px; }

@media (max-width: 850px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-row { grid-template-columns: 92px minmax(0, 1fr); }
  .cart-row-img { height: 92px; }
  .cart-row-price { grid-column: 1 / -1; text-align: right; }
  .cart-toast { left: 12px; right: 12px; max-width: none; }
}

/* ==========================================================================
   15. الصفحة الرئيسية بلا منتجات
   دليل الأقسام والفروع + شريط الضمانات + بلاطات الخدمات الأيقونية
   ========================================================================== */

/* بلاطة بأيقونة بدل صورة — تُستعمل في بطاقة الخدمات ضمن الشبكة الرباعية */
.quad-tile-iconbox {
  color: var(--amz-link);
  font-size: 34px;
}

.quad-tile:hover .quad-tile-iconbox {
  color: var(--amz-subnav);
}

/* ---------- عنوان قسم عام في الرئيسية ---------- */
.home-sec-head {
  margin-bottom: 18px;
}

.home-sec-head h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--amz-text);
  margin: 0 0 4px;
}

.home-sec-head p {
  font-size: 14px;
  color: var(--amz-text-muted);
  margin: 0;
}

/* ---------- دليل الأقسام ---------- */
.home-dir-section {
  background: #ffffff;
  padding: 26px 0 30px;
  margin: 24px 0;
}

.home-dir-inner {
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 16px;
}

/* شبكة متوازنة تماماً: 4 أعمدة على الشاشات الكبيرة (صفان × 4 كروت = 8 كروت بلا أي فراغ) */
.home-dir-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1200px) {
  .home-dir-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .home-dir-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.dir-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #dde5e4;
  border-top: 4px solid var(--dir-accent, var(--mc-green));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.dir-card:hover {
  box-shadow: 0 10px 24px rgba(1, 65, 64, 0.12);
  transform: translateY(-4px);
  border-color: #c9d8d6;
  border-top-color: var(--dir-accent, var(--mc-green));
}

.dir-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 16px 14px;
  text-decoration: none;
  color: var(--amz-text);
  background: var(--dir-tint, #f0f6f5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.2s ease;
}

.dir-card-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  background: #ffffff;
  border-radius: 50%;
  font-size: 20px;
  color: var(--dir-accent, var(--mc-green));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.dir-card:hover .dir-card-icon {
  background: var(--dir-accent, var(--mc-green));
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dir-card-titles {
  min-width: 0;
  flex: 1;
}

.dir-card-titles b {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  color: #0d2120;
  line-height: 1.35;
}

.dir-card-titles small {
  display: block;
  font-size: 11.8px;
  line-height: 1.5;
  color: #4b6260;
  margin-top: 3px;
  font-weight: 600;
}

.dir-card-head:hover .dir-card-titles b {
  color: var(--dir-accent, var(--mc-green));
}

.dir-card-list {
  list-style: none;
  margin: 0;
  padding: 12px 14px 8px;
  flex: 1;
}

.dir-card-list li {
  margin: 0;
}

.dir-card-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  color: #273635;
  text-decoration: none;
  border-radius: 6px;
  border-bottom: 1px solid #f2f6f5;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.dir-card-list li:last-child a {
  border-bottom: none;
}

.dir-card-list a i {
  font-size: 11px;
  color: var(--mc-green-soft);
  transition: transform 0.2s ease;
}

.dir-card-list a:hover {
  background: var(--mc-green-tint);
  color: var(--mc-green);
  font-weight: 700;
  transform: translateX(-4px);
}

.dir-card-list a:hover i {
  color: var(--mc-green);
  transform: translateX(-2px);
}

.dir-card-all {
  display: block;
  margin: 8px 16px 16px;
  padding: 10px 14px;
  text-align: center;
  background: #f4f8f7;
  border: 1px solid #d4e3e1;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 800;
  color: var(--mc-green);
  text-decoration: none;
  transition: all 0.2s ease;
}

.dir-card-all:hover {
  background: var(--mc-green);
  color: #ffffff;
  border-color: var(--mc-green);
  box-shadow: 0 4px 14px rgba(1, 65, 64, 0.25);
  transform: translateY(-1px);
}

/* ==========================================================================
   ألوان الأقسام الراقية — متناسقة تماماً ومبنية على درجات متوازنة وهادئة
   بدل ألوان الباستيل الفاقعة المتضاربة
   ========================================================================== */

/* 1. البقالة */
.dir-teal {
  --dir-accent: #0f766e;
  --dir-tint:   linear-gradient(180deg, #edf7f5 0%, #dff2ee 100%);
}

/* 2. عطورات وميك اب */
.dir-rose {
  --dir-accent: #b83265;
  --dir-tint:   linear-gradient(180deg, #fdf1f6 0%, #f7e0eb 100%);
}

/* 3. ملابس */
.dir-amber {
  --dir-accent: #b56c1d;
  --dir-tint:   linear-gradient(180deg, #fdf6ec 0%, #f7ebd7 100%);
}

/* 4. إلكترونيات */
.dir-purple {
  --dir-accent: #5b4897;
  --dir-tint:   linear-gradient(180deg, #f2eff9 0%, #e7e1f5 100%);
}

/* 5. أواني منزلية */
.dir-lime {
  --dir-accent: #4f7d36;
  --dir-tint:   linear-gradient(180deg, #f1f7ec 0%, #e4f0dc 100%);
}

/* 6. سيارات */
.dir-sky {
  --dir-accent: #236d85;
  --dir-tint:   linear-gradient(180deg, #edf5f7 0%, #deedf1 100%);
}

/* 7. موبيلية */
.dir-sand {
  --dir-accent: #8e6235;
  --dir-tint:   linear-gradient(180deg, #f8f3eb 0%, #eee5d6 100%);
}

/* 8. خدمات ومعاملات */
.dir-services {
  --dir-accent: var(--mc-green);
  --dir-tint:   linear-gradient(180deg, #e5f3f1 0%, #d3ece8 100%);
}

/* ---------- شريط الضمانات ---------- */
.home-trust-section {
  background: #ffffff;
  border-top: 1px solid var(--amz-border);
  padding: 26px 0 30px;
}

.home-trust-inner {
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 18px;
}

.home-trust-item {
  text-align: center;
  padding: 16px 12px;
  border: 1px solid var(--amz-border);
  border-radius: 10px;
}

.home-trust-item > i {
  font-size: 27px;
  color: var(--amz-link);
  margin-bottom: 9px;
  display: block;
}

.home-trust-item b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 5px;
}

.home-trust-item span {
  display: block;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--amz-text-muted);
}

@media (max-width: 1100px) {
  .quad-4col-layout { grid-template-columns: repeat(2, 1fr); }
  .amz-quad-section.overlap-hero { margin-top: -120px; }
}

@media (max-width: 620px) {
  .quad-4col-layout { grid-template-columns: 1fr; }
  .amz-quad-section.overlap-hero { margin-top: 16px; }
  .home-sec-head h2 { font-size: 20px; }
}

/* ==========================================================================
   16. هوية مركز الماهر — الأخضر الغامق المأخوذ من اللوغو
   اللون #014140 مسحوب حرفياً من بكسلات حرفَي MC في assets/icons/logo_mc_hd.png
   الترتيب المطلوب: شريط اللوغو الأخضر فوق، ثم شريط الأقسام الأبيض،
   والقائمة المنسدلة داخل كل قسم خضراء بلون اللوغو.
   ========================================================================== */
:root {
  --mc-green:      #014140;  /* لون اللوغو نفسه */
  --mc-green-deep: #002B2A;  /* أغمق درجة — للتدرّجات والظلال */
  --mc-green-soft: #0A5F5C;  /* أفتح درجة — للروابط والحواف */
  --mc-green-line: #14706D;  /* خط فاصل ظاهر على الأخضر */
  --mc-green-tint: #EDF4F3;  /* خلفية باهتة جداً بميلان أخضر */

  /* إعادة توجيه متغيّرات القالب القديمة إلى الهوية الخضراء */
  --amz-dark:       var(--mc-green);
  --amz-subnav:     var(--mc-green);
  --amz-link:       var(--mc-green-soft);
  --amz-link-hover: #0E8D88;
  --amz-body-bg:    #EDF0EF;
}

/* ---------- 1) شريط اللوغو العلوي ---------- */
.amz-header {
  background-color: var(--mc-green);
  border-bottom: 3px solid var(--mc-green-line);
}

.amz-logo-circle {
  width: 56px;
  height: 56px;
  /* حلقة بيضاء رفيعة تفصل اللوغو عن الخلفية الخضراء الغامقة */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 3px 10px rgba(0, 0, 0, 0.28);
}

.amz-logo-box:hover { border-color: rgba(255, 255, 255, 0.75); }
.amz-location:hover { border-color: transparent; }

/* ---------- 2) شريط الأقسام: أبيض ---------- */
.amz-subnav {
  background-color: #ffffff;
  color: var(--mc-green);
  border-bottom: 1px solid #dde4e3;
  box-shadow: 0 2px 6px rgba(1, 65, 64, 0.09);
}

.subnav-btn-all,
.subnav-item {
  color: var(--mc-green);
  font-weight: 700;
  border-radius: 6px 6px 0 0;
}

.subnav-btn-all:hover {
  border-color: transparent;
  background: var(--mc-green-tint);
}

/* عند فتح القسم يصير أخضر ليتّصل بصرياً مع القائمة الخضراء تحته */
.subnav-item:hover,
.subnav-slot:hover .subnav-item,
.subnav-slot:focus-within .subnav-item {
  border-color: transparent;
  background: var(--mc-green);
  color: #ffffff;
}

.subnav-item.highlight {
  color: var(--mc-green-soft);
  font-weight: 800;
}

.subnav-slot:hover .subnav-item.highlight,
.subnav-slot:focus-within .subnav-item.highlight {
  color: var(--amz-yellow);
}

/* ---------- 3) القائمة المنسدلة: خضراء بلون اللوغو ---------- */
.subnav-dropdown {
  background: var(--mc-green);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 28px rgba(1, 65, 64, 0.38);
  padding: 10px 0 8px;
  overflow: hidden;
}

.subnav-dropdown-head {
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2px 16px 9px;
}

.subnav-dropdown a {
  color: #DCE9E8;
}

.subnav-dropdown a i {
  color: rgba(255, 255, 255, 0.55);
}

.subnav-dropdown a:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  /* شريط أخضر فاتح على الحافة يوضّح العنصر المحدَّد */
  box-shadow: inset -3px 0 0 var(--amz-yellow);
}

.subnav-dropdown-all {
  color: var(--amz-yellow) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---------- 4) بقايا ألوان أمازون الكحلية المكتوبة صراحةً ---------- */
.amz-hero-banner { background: var(--mc-green-deep); }

.amz-back-to-top { background-color: var(--mc-green-soft); }
.amz-back-to-top:hover { background-color: var(--mc-green-line); }
.amz-footer-main { border-bottom: 1px solid var(--mc-green-line); }

.modal-header { background: var(--mc-green); }
.srp-pick { background: var(--mc-green); }
.page-hero,
.cta-band { background: linear-gradient(135deg, var(--mc-green), var(--mc-green-soft)); }

.pdp { --pdp-accent: var(--mc-green-soft); }
.pdp-cars { --pdp-accent: var(--mc-green-soft); --pdp-accent-soft: var(--mc-green-tint); }
.search-input:focus { outline-color: var(--mc-green-soft); }
.gov-item.active { background: var(--mc-green); border-color: var(--mc-green); }

/* ---------- 5) لمسات الهوية على الصفحة الرئيسية ---------- */
.home-sec-head h2 {
  color: var(--mc-green);
  /* خط أخضر قصير تحت العنوان بدل العنوان المجرّد */
  padding-bottom: 8px;
  border-bottom: 3px solid var(--mc-green);
  display: inline-block;
}

.home-trust-section { border-top: 3px solid var(--mc-green); }
.home-trust-item > i { color: var(--mc-green-soft); }
.dir-card-list a i { color: var(--mc-green-soft); }

/* خدمات البطاقة الرباعية */
.quad-tile-iconbox {
  color: var(--mc-green) !important;
  font-size: 34px;
  transition: transform 0.2s, color 0.2s;
}

.quad-tile:hover .quad-tile-iconbox {
  color: var(--mc-green-soft) !important;
  transform: scale(1.08);
}

.quad-tile:hover .quad-tile-img {
  background: var(--mc-green-tint) !important;
}

/* ==========================================================================
   17. شريط اللوغو المستقل + إزالة الأزرق كلياً من الخدمات
   ========================================================================== */

/* ---------- 1) اللوغو لوحده في البداية ---------- */
.mc-brandbar {
  background: linear-gradient(180deg, #002322 0%, var(--mc-green-deep) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px 14px;
  position: relative;
  z-index: 100;
}

.mc-brandbar-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 8px 24px 8px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: #ffffff;
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
}

.mc-brandbar-logo:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.mc-brandmark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: contain;
  background: #ffffff;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* سطر الاسم تحت اللوغو مباشرة — لاتيني ثم نقطة ثم عربي.
   dir="ltr" على العنصر يثبّت الترتيب البصري تماماً كما هو مكتوب،
   وإلا أعادت خوارزمية الاتجاه ترتيب المقطعين داخل الصفحة العربية. */
.mc-brandtext {
  display: block;
  text-align: center;
  line-height: 1.35;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* الهيدر بعد فصل اللوغو */
.amz-header {
  padding: 10px 18px;
  background-color: var(--mc-green);
  border-bottom: 3px solid var(--mc-green-line);
}

/* ---------- 2) شريط الخدمات في الأسفل (بلا أي أزرق) ---------- */
.amz-deals-strip-container.mc-green-banner {
  background: linear-gradient(135deg, var(--mc-green) 0%, var(--mc-green-deep) 100%);
  color: #ffffff;
  border: 1px solid var(--mc-green-line);
  box-shadow: 0 4px 18px rgba(1, 65, 64, 0.25);
  border-radius: 8px;
  padding: 18px 20px;
}

.mc-green-banner .strip-headline-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.mc-green-banner .strip-headline-title i {
  color: var(--amz-yellow);
  margin-right: 6px;
}

/* أسهم التمرير داخل شريط الخدمات */
.mc-green-banner .carousel-btn {
  background: #ffffff;
  color: var(--mc-green);
  border: 1px solid rgba(1, 65, 64, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-size: 16px;
}

.mc-green-banner .carousel-btn:hover {
  background: var(--mc-green);
  color: #ffffff;
  border-color: var(--mc-green);
}

/* بطاقات الخدمات البيضاء في الشريط السفلي */
.service-white-card {
  flex: 0 0 180px;
  background: #ffffff !important;
  border-radius: 8px;
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(1, 65, 64, 0.1);
  text-decoration: none;
  color: var(--amz-text) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-white-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(1, 65, 64, 0.28);
  border-color: var(--mc-green-soft);
}

/* أيقونة الخدمة — أخضر اللوغو وخلفية هادئة بلا أي مسحة زرقاء */
.service-card-icon-box {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mc-green-tint);
  color: var(--mc-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 12px;
  transition: background 0.2s, color 0.2s;
}

.service-white-card:hover .service-card-icon-box {
  background: var(--mc-green);
  color: var(--amz-yellow);
}

.service-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f1111;
  margin-bottom: 10px;
}

.service-card-action {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: var(--mc-green);
  padding: 6px 12px;
  border-radius: 20px;
  width: 100%;
}

.service-white-card:hover .service-card-action {
  background: var(--amz-yellow);
  color: #111;
}

/* ---------- 3) بطاقات الخدمات في صفحة الخدمات (services.html و service.html) ---------- */
.service-tile {
  border-color: #dce5e4;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.service-tile:hover {
  box-shadow: 0 8px 24px rgba(1, 65, 64, 0.16);
  border-color: var(--mc-green-soft);
  transform: translateY(-3px);
}

.service-tile-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--mc-green-tint) !important;
  color: var(--mc-green) !important;
  border: 1px solid rgba(1, 65, 64, 0.12);
  display: grid;
  place-items: center;
  font-size: 22px;
  transition: background 0.2s ease, color 0.2s ease;
}

.service-tile:hover .service-tile-icon {
  background: var(--mc-green) !important;
  color: var(--amz-yellow) !important;
}

.service-tile-link {
  font-size: 13px;
  font-weight: 800;
  color: var(--mc-green-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.service-tile:hover .service-tile-link {
  color: var(--mc-green);
}

.service-hero-icon {
  background: var(--mc-green) !important;
  color: var(--amz-yellow) !important;
  box-shadow: 0 4px 14px rgba(1, 65, 64, 0.25);
}

.feature-card > i {
  color: var(--mc-green-soft) !important;
}

.steps-list .step-num {
  background: var(--mc-green) !important;
  color: #ffffff !important;
}

@media (max-width: 620px) {
  .mc-brandmark { width: 50px; height: 50px; }
  .mc-brandtext { font-size: 14px; letter-spacing: 0; }
  .mc-brandbar { padding: 10px 14px; }
}

/* تثبيت ألوان الروابط لمنع ظهور أزرق المتصفح الافتراضي (#0000EE) */
.mc-brandbar-logo { color: #ffffff; }
.service-white-card { color: var(--amz-text); }
.hero-banner-link { color: inherit; }
.quad-tile,
.dir-card-head,
.product-white-card { color: var(--amz-text); }

/* ==========================================================================
   18. الصفحة الرئيسية البسيطة — صناديق أقسام فقط
   مطابقة للرسم اليدوي: البقالة عريض، ثم الأقسام اثنين بكل سطر،
   ثم "خدمات أخرى" عريض وتحته سهم وقائمة الخدمات.
   مقاسة لشاشة الكمبيوتر أولاً: العرض يتوسّع مع الشاشة بدل أن يبقى
   عموداً ضيّقاً وسطها، والصناديق تكبر معه بدل أن تبقى شرائط فارغة.
   ========================================================================== */
.mc-home {
  background: var(--amz-body-bg);
  padding: clamp(24px, 3vw, 46px) clamp(14px, 3vw, 40px) clamp(38px, 4vw, 64px);
  min-height: 60vh;
}

.mc-home-inner {
  /* يملأ الشاشة العريضة ويتوقّف عند حدّ مريح للقراءة */
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
}

/* عمود صناديق الأقسام */
.mc-boxes {
  display: flex;
  flex-direction: column;
  /* الفجوة أكبر من سماكة الحافة (10px) وإلا لامست الصناديق بعضها */
  gap: clamp(20px, 1.8vw, 28px);
}

/* سطر فيه صندوقان متساويان */
.mc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
}

/* صندوق القسم */
.mc-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: clamp(78px, 7.6vw, 124px);
  padding: 18px 22px;
  background: #ffffff;
  /* الإطار بسماكة الحافة السفلية المجسّمة نفسها حتى يبدو الصندوق
     قطعة واحدة مصمتة لا لوحاً رفيعاً له حافة سميكة من جهة واحدة */
  border: 8px solid var(--mc-green);
  border-radius: 18px;
  color: var(--mc-green);
  text-decoration: none;
  font-size: clamp(19px, 1.7vw, 28px);
  font-weight: 800;
  text-align: center;
  /* حافة مجسّمة: طبقة صلبة تحت الصندوق تلعب دور سماكته،
     وخط داكن يفصلها، وظل ناعم على الأرض يعطي الارتفاع.
     الحركة على translateY وحدها — لا نحرّك الظل بـ top حتى لا يهتزّ. */
  box-shadow:
    0 8px 0 0 var(--mc-green),
    0 10px 0 0 rgba(0, 0, 0, 0.22),
    0 18px 28px rgba(1, 65, 64, 0.30),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.9);
  transition: background 0.16s ease, color 0.16s ease,
              transform 0.12s ease, box-shadow 0.12s ease;
}

.mc-box i {
  font-size: 1.15em;
  flex-shrink: 0;
}

.mc-box:hover {
  background: var(--mc-green);
  color: #ffffff;
  transform: translateY(4px);
  box-shadow:
    0 4px 0 0 var(--mc-green-deep),
    0 6px 0 0 rgba(0, 0, 0, 0.25),
    0 10px 18px rgba(1, 65, 64, 0.28),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.14);
}

/* عند الضغط ينطبق الصندوق على الأرض تماماً */
.mc-box:active {
  transform: translateY(8px);
  box-shadow:
    0 0 0 0 var(--mc-green-deep),
    0 1px 0 0 rgba(0, 0, 0, 0.25),
    0 3px 8px rgba(1, 65, 64, 0.24),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.14);
}

/* الصندوق العريض يأخذ السطر كاملاً */
.mc-box-wide {
  min-height: clamp(92px, 9vw, 150px);
  font-size: clamp(22px, 2.1vw, 34px);
  border-radius: 22px;
}

/* صندوق الخدمات مملوء بالأخضر ليتميّز كما في الرسم */
.mc-box-services {
  background: var(--mc-green);
  color: #ffffff;
  margin-top: clamp(10px, 1vw, 18px);
  box-shadow:
    0 8px 0 0 var(--mc-green-deep),
    0 10px 0 0 rgba(0, 0, 0, 0.3),
    0 18px 30px rgba(1, 65, 64, 0.38),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.14);
}

.mc-box-services:hover {
  background: var(--mc-green-deep);
  border-color: var(--mc-green-deep);
  color: var(--amz-yellow);
}

/* السهم النازل من صندوق الخدمات إلى قائمتها */
.mc-arrow {
  text-align: center;
  color: var(--mc-green);
  font-size: clamp(20px, 1.8vw, 26px);
  margin: 2px 0 -2px;
}

/* قائمة الخدمات — ثلاثة أعمدة على الكمبيوتر (٩ خدمات = ٣ صفوف تامة) */
.mc-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.2vw, 20px);
}

.mc-service {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: clamp(13px, 1.3vw, 20px) clamp(15px, 1.3vw, 22px);
  background: #ffffff;
  border: 2px solid #cbd8d7;
  border-radius: 12px;
  color: var(--amz-text);
  text-decoration: none;
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 700;
  box-shadow:
    0 4px 0 0 #cfdbda,
    0 5px 0 0 rgba(0, 0, 0, 0.10),
    0 9px 16px rgba(1, 65, 64, 0.16);
  transition: border-color 0.16s ease, color 0.16s ease,
              background 0.16s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.mc-service i {
  width: 24px;
  text-align: center;
  color: var(--mc-green-soft);
  font-size: 1.15em;
  flex-shrink: 0;
  transition: color 0.18s ease;
}

.mc-service:hover {
  background: var(--mc-green-tint);
  border-color: var(--mc-green);
  color: var(--mc-green);
  transform: translateY(2px);
  box-shadow:
    0 2px 0 0 var(--mc-green-soft),
    0 3px 0 0 rgba(0, 0, 0, 0.12),
    0 6px 12px rgba(1, 65, 64, 0.2);
}

.mc-service:active {
  transform: translateY(4px);
  box-shadow:
    0 0 0 0 var(--mc-green-soft),
    0 1px 0 0 rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(1, 65, 64, 0.18);
}

.mc-service:hover i { color: var(--mc-green); }

/* لوح أصغر: الخدمات عمودان */
@media (max-width: 980px) {
  .mc-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* جوال: كل شيء عمود واحد */
@media (max-width: 620px) {
  .mc-row,
  .mc-services { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- أيقونات التواصل تحت الاسم داخل شريط اللوغو ---------- */
.mc-brandbar .social-header-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}

.mc-brandbar .social-circle-btn {
  width: 34px;
  height: 34px;
  font-size: 16px;
}

/* ==========================================================================
   19. ترويسة الشعار — العالم بين يديك

   مبنية كترويسة صفحة لا كشريط زخرفي: تجلس على نفس خلفية المحتوى وداخل
   نفس شبكة الصناديق (1540px)، محاذية لحافة الشبكة اليمنى لا في وسطها،
   والسطران على خطّ قاعدة واحد يفصلهما شريط رأسي قصير.
   بلا تدرّج ولا توهّج ولا ظل نص — التباين وحده يبني التسلسل.
   ========================================================================== */
.mc-masthead {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.2vw, 20px);
  padding-bottom: clamp(18px, 2vw, 30px);
  margin-bottom: clamp(6px, 0.8vw, 12px);
  border-bottom: 1px solid rgba(1, 65, 64, 0.14);
}

.mc-masthead-ar {
  margin: 0;
  font-size: clamp(28px, 3.3vw, 52px);
  font-weight: 900;
  line-height: 1.15;
  color: var(--mc-green);
  letter-spacing: 0;
}

/* شريط رأسي قصير يفصل اللغتين — يرتفع مع حجم السطر العربي */
.mc-masthead-rule {
  align-self: stretch;
  flex: 0 0 2px;
  background: var(--mc-green);
  opacity: 0.28;
  margin-bottom: 2px;
}

.mc-masthead-en {
  margin: 0;
  font-family: 'Tajawal', 'Cairo', Arial, sans-serif;
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 700;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--mc-green-soft);
  /* الحرف الأخير يرث المسافة الزائدة من letter-spacing */
  padding-left: 0.26em;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .mc-masthead {
    display: block;
    padding-bottom: 16px;
  }
  .mc-masthead-rule { display: none; }
  .mc-masthead-en {
    white-space: normal;
    margin-top: 6px;
    letter-spacing: 0.2em;
    padding-left: 0.2em;
  }
}


/* ==========================================================================
   20. بقية الصفحات — نفس لغة الصفحة الرئيسية
   قاعدة واحدة: خلفية رمادية فاتحة، ترويسة نصّية، وصناديق بيضاء بحافة
   خضراء مجسّمة. بلا فلاتر ولا أعمدة جانبية ولا زخرفة.
   ========================================================================== */

.mc-page {
  background: var(--amz-body-bg);
  padding: clamp(20px, 2.4vw, 38px) clamp(14px, 3vw, 40px) clamp(38px, 4vw, 64px);
  min-height: 55vh;
}

.mc-page-inner {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   ترويسة الصفحة — نفس مبدأ ترويسة الرئيسية: خط كبير، مسطرة، سطر صغير
   -------------------------------------------------------------------------- */
.mc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(10px, 1.2vw, 16px);
  color: var(--mc-green-soft);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}
.mc-back:hover { color: var(--mc-green); text-decoration: underline; }

.mc-head {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.2vw, 20px);
  flex-wrap: wrap;
  padding-bottom: clamp(14px, 1.6vw, 24px);
  margin-bottom: clamp(18px, 2vw, 30px);
  border-bottom: 1px solid rgba(1, 65, 64, 0.14);
}

.mc-head h1 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 44px);
  font-weight: 900;
  line-height: 1.15;
  color: var(--mc-green);
}

.mc-head-rule {
  align-self: stretch;
  flex: 0 0 2px;
  background: var(--mc-green);
  opacity: 0.28;
  margin-bottom: 2px;
}

.mc-head-note {
  margin: 0;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 700;
  color: var(--mc-green-soft);
}

/* --------------------------------------------------------------------------
   لوح نصّي أبيض — للخدمات والأسئلة والخطوات
   -------------------------------------------------------------------------- */
.mc-panel {
  background: #fff;
  border: 3px solid #cbd8d7;
  border-radius: 16px;
  padding: clamp(18px, 2vw, 30px);
  margin-bottom: clamp(16px, 1.6vw, 24px);
  box-shadow:
    0 5px 0 0 #cfdbda,
    0 6px 0 0 rgba(0, 0, 0, 0.08),
    0 10px 18px rgba(1, 65, 64, 0.12);
}

.mc-panel h2 {
  margin: 0 0 14px;
  font-size: clamp(19px, 1.6vw, 26px);
  font-weight: 900;
  color: var(--mc-green);
}

.mc-panel p {
  margin: 0 0 10px;
  color: #2c3a39;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.95;
}
.mc-panel p:last-child { margin-bottom: 0; }

.mc-panel ul,
.mc-panel ol {
  margin: 0;
  padding-inline-start: 22px;
  color: #2c3a39;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 2;
}
.mc-panel li::marker { color: var(--mc-green-soft); font-weight: 900; }

.mc-panel details {
  border-top: 1px solid #e3ebea;
  padding: 12px 0;
}
.mc-panel details:first-of-type { border-top: 0; padding-top: 0; }
.mc-panel details:last-of-type { padding-bottom: 0; }
.mc-panel summary {
  cursor: pointer;
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 800;
  color: var(--mc-green);
}
.mc-panel summary::marker { color: var(--mc-green-soft); }
.mc-panel details p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   أزرار موحّدة — نفس الحافة المجسّمة
   -------------------------------------------------------------------------- */
.mc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: var(--mc-green);
  color: #fff;
  font-family: inherit;
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 6px 0 0 var(--mc-green-deep),
    0 7px 0 0 rgba(0, 0, 0, 0.25),
    0 12px 20px rgba(1, 65, 64, 0.28);
  transition: transform .12s, box-shadow .12s, background .16s, color .16s;
}
.mc-btn:hover {
  transform: translateY(3px);
  box-shadow:
    0 3px 0 0 var(--mc-green-deep),
    0 4px 0 0 rgba(0, 0, 0, 0.25),
    0 7px 12px rgba(1, 65, 64, 0.24);
}
.mc-btn:active {
  transform: translateY(6px);
  box-shadow:
    0 0 0 0 var(--mc-green-deep),
    0 1px 0 0 rgba(0, 0, 0, 0.25),
    0 3px 8px rgba(1, 65, 64, 0.2);
}

.mc-btn-alt {
  background: #fff;
  color: var(--mc-green);
  border: 3px solid var(--mc-green);
  box-shadow:
    0 6px 0 0 var(--mc-green),
    0 7px 0 0 rgba(0, 0, 0, 0.18),
    0 12px 20px rgba(1, 65, 64, 0.20);
}
.mc-btn-alt:hover { background: var(--mc-green-tint); }

.mc-select {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 3px solid var(--mc-green);
  border-radius: 12px;
  background: #fff;
  color: var(--mc-green);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   شبكة المنتجات — بطاقة واحدة بسيطة تُستعمل في كل مكان
   -------------------------------------------------------------------------- */
.mc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
}

.mc-prod {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 4px solid var(--mc-green);
  border-radius: 16px;
  overflow: hidden;
  color: var(--amz-text);
  text-decoration: none;
  box-shadow:
    0 6px 0 0 var(--mc-green),
    0 7px 0 0 rgba(0, 0, 0, 0.18),
    0 12px 20px rgba(1, 65, 64, 0.20);
  transition: transform .12s, box-shadow .12s;
}
.mc-prod:hover {
  transform: translateY(3px);
  box-shadow:
    0 3px 0 0 var(--mc-green-deep),
    0 4px 0 0 rgba(0, 0, 0, 0.2),
    0 8px 14px rgba(1, 65, 64, 0.2);
}

.mc-prod-img {
  height: 190px;
  display: grid;
  place-items: center;
  padding: 12px;
  background: #fff;
}
.mc-prod-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.mc-prod-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 16px;
  border-top: 2px solid #e3ebea;
}

.mc-prod-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--amz-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mc-prod-price {
  margin-top: auto;
  font-size: 21px;
  font-weight: 900;
  color: var(--mc-green);
}
.mc-prod-price small { font-size: 13px; font-weight: 700; }

/* --------------------------------------------------------------------------
   صفحة المنتج — الصورة في صندوق، والطلب في صندوق
   -------------------------------------------------------------------------- */
.mc-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 36px);
  align-items: start;
}

.mc-pdp-img {
  display: grid;
  place-items: center;
  padding: clamp(14px, 1.6vw, 26px);
  background: #fff;
  border: 8px solid var(--mc-green);
  border-radius: 22px;
  box-shadow:
    0 8px 0 0 var(--mc-green),
    0 10px 0 0 rgba(0, 0, 0, 0.22),
    0 18px 28px rgba(1, 65, 64, 0.28);
}
.mc-pdp-img img {
  max-width: 100%;
  max-height: clamp(280px, 44vh, 520px);
  object-fit: contain;
}

.mc-pdp-buy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2vw, 28px);
  background: #fff;
  border: 8px solid var(--mc-green);
  border-radius: 22px;
  box-shadow:
    0 8px 0 0 var(--mc-green),
    0 10px 0 0 rgba(0, 0, 0, 0.22),
    0 18px 28px rgba(1, 65, 64, 0.28);
}

.mc-pdp-buy h1 {
  margin: 0;
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 900;
  line-height: 1.5;
  color: var(--amz-text);
}

.mc-price-big {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  line-height: 1;
  color: var(--mc-green);
}
.mc-price-big small { font-size: 0.45em; font-weight: 800; }

.mc-was { margin: -6px 0 0; font-size: 15px; font-weight: 700; color: #6b7a79; }

.mc-qty { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--mc-green); }
.mc-qty .mc-select { width: 110px; }

.mc-pdp-note {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  color: #4a5a59;
}

/* --------------------------------------------------------------------------
   السلة
   -------------------------------------------------------------------------- */
.mc-cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(16px, 1.8vw, 28px);
  align-items: start;
}

.mc-cart-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: clamp(12px, 1.2vw, 20px);
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #fff;
  border: 4px solid var(--mc-green);
  border-radius: 16px;
  box-shadow:
    0 6px 0 0 var(--mc-green),
    0 7px 0 0 rgba(0, 0, 0, 0.18),
    0 12px 20px rgba(1, 65, 64, 0.18);
}

.mc-cart-row-img { display: grid; place-items: center; height: 92px; }
.mc-cart-row-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.mc-cart-row-name {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 800;
  line-height: 1.6;
  color: var(--amz-text);
  text-decoration: none;
}
.mc-cart-row-name:hover { color: var(--mc-green); }

.mc-cart-row-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc-cart-row-tools .mc-select { width: 92px; min-height: 42px; }

.mc-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--mc-green-soft);
  cursor: pointer;
  text-decoration: underline;
}
.mc-linkbtn:hover { color: #a4262c; }

.mc-cart-row-price {
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 900;
  color: var(--mc-green);
  white-space: nowrap;
}
.mc-cart-row-price small { font-size: 13px; font-weight: 700; }

.mc-sum {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 2vw, 26px);
  background: #fff;
  border: 8px solid var(--mc-green);
  border-radius: 22px;
  box-shadow:
    0 8px 0 0 var(--mc-green),
    0 10px 0 0 rgba(0, 0, 0, 0.22),
    0 18px 28px rgba(1, 65, 64, 0.28);
}
.mc-sum h2 { margin: 0; font-size: clamp(18px, 1.5vw, 24px); font-weight: 900; color: var(--mc-green); }
.mc-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  font-weight: 800;
  color: #2c3a39;
}
.mc-sum-row b { color: var(--mc-green); }

/* --------------------------------------------------------------------------
   حالة فارغة
   -------------------------------------------------------------------------- */
.mc-empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(40px, 6vw, 90px) 20px;
  text-align: center;
  background: #fff;
  border: 3px solid #cbd8d7;
  border-radius: 18px;
}
.mc-empty i { font-size: 48px; color: var(--mc-green); opacity: .35; }
.mc-empty h2 { margin: 0; font-size: clamp(20px, 2vw, 30px); font-weight: 900; color: var(--mc-green); }
.mc-empty p { margin: 0; color: #4a5a59; font-size: 16px; font-weight: 600; }
.mc-empty .mc-btn { max-width: 280px; }

/* --------------------------------------------------------------------------
   الشاشات الضيّقة
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .mc-pdp { grid-template-columns: minmax(0, 1fr); }
  .mc-cart { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .mc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mc-prod-img { height: 140px; }
  .mc-cart-row { grid-template-columns: 78px minmax(0, 1fr); }
  .mc-cart-row-img { height: 72px; }
  .mc-cart-row-price { grid-column: 1 / -1; }
  .mc-head { display: block; }
  .mc-head-rule { display: none; }
  .mc-head-note { margin-top: 6px; }
}


/* ==========================================================================
   21. إصلاحان
   ========================================================================== */

/* --------------------------------------------------------------------------
   أ) الصور داخل الصناديق ذات الارتفاع الثابت
   max-height: 100% لا يُحسب هنا لأن الصورة عنصر شبكة داخل حاوية ارتفاعها
   ثابت — فكانت الصورة تخرج من صندوقها. الحل: ارتفاع صريح مع object-fit.
   -------------------------------------------------------------------------- */
/* الصورة عنصر مُستبدَل (replaced element): مع height أو max-height بنسبة
   مئوية يتجاهلها المتصفح ويرجع لأبعادها الطبيعية، فتخرج من صندوقها.
   الحل الوحيد المضمون هنا: ارتفاع صريح بالبكسل مع object-fit. */
.mc-prod-img,
.mc-cart-row-img {
  display: block;
  height: auto;
}

.mc-prod-img img,
.mc-cart-row-img img {
  display: block;
  width: 100%;
  height: 166px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.mc-cart-row-img img { height: 92px; }

@media (max-width: 620px) {
  .mc-prod-img img { height: 116px; }
  .mc-cart-row-img img { height: 72px; }
}

/* --------------------------------------------------------------------------
   ب) الشقّ الأبيض بين زرّ القسم والقائمة المنسدلة
   الزرّ كان أقصر من خانته، فيظهر شريط أبيض بين الأخضرين. نجعله يملأ
   ارتفاع الخانة كاملاً حتى يلتصق بالقائمة تحته.
   -------------------------------------------------------------------------- */
.subnav-slot {
  display: flex;
}

.subnav-item {
  flex: 1 1 auto;
}


/* ==========================================================================
   21. إصلاحات الهاتف لواجهة المتجر
   الهدف: لا تمرير أفقي على أي عرض شاشة، وأزرار يسهل ضغطها بالإصبع.
   ========================================================================== */

/* الشاشات الصغيرة: شريط البحث كان يفرض عرضاً أكبر من الشاشة فيظهر تمرير أفقي */
@media (max-width: 760px) {
  .amz-header { padding: 8px 10px; gap: 8px; }

  .amz-search-bar {
    min-width: 0;          /* بدونها يرفض عنصر الفليكس أن ينكمش تحت عرض محتواه */
    max-width: 100%;
    margin: 0;
  }
  .search-bar-inner { min-width: 0; }
  .search-input     { min-width: 0; font-size: 15px; }
  .search-select    { max-width: 104px; font-size: 11px; padding: 0 8px; }
  .search-button    { flex: 0 0 44px; width: 44px; }

  /* صف الإجراءات يتوزّع بالتساوي بدل أن ينضغط على طرف */
  .header-actions {
    justify-content: space-between;
    gap: 4px;
    flex-wrap: wrap;
  }
  .header-action-item { padding: 4px 6px; }
  .header-action-item .sub  { font-size: 10px; }
  .header-action-item .main { font-size: 12px; }

  .mc-brandbar { padding: 10px 12px; }
  .mc-brandtext { font-size: 12px; }
}

/* شاشة ضيّقة جداً: قائمة الفئات تختفي — البحث يبحث في كل شيء أصلاً */
@media (max-width: 430px) {
  .search-select { display: none; }
  .search-bar-inner { height: 42px; }
}

/* مساحة لمس مريحة للإصبع — القاعدة المتعارف عليها 44 بكسل */
.mc-back {
  min-height: 40px;
  align-items: center;
  padding: 6px 4px;
}

.modal-close-btn,
.drawer-close {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.modal-box { max-width: min(480px, calc(100vw - 32px)); }

/* منع أي فائض أفقي مهما حدث */
html { overflow-x: hidden; }

/* رابط لوحة التحكم في ذيل الصفحة — صغير وهادئ، للمالك لا للزبون */
.footer-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin-top: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
.footer-admin-link:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

/* ==========================================================================
   22) نموذج الطلب — الاسم والموبايل والمحافظة والعنوان
   --------------------------------------------------------------------------
   الحقول الأربعة إجبارية. كل حقل تحته سطر توضيحي بلغة بسيطة، وسطر خطأ
   أحمر يظهر عند الحاجة فقط. القياسات مكبَّرة للهاتف: ارتفاع 48 بكسل
   وخط 16 بكسل — أقل من ذلك يجعل iPhone يُقرّب الصفحة تلقائياً عند الكتابة.
   ========================================================================== */

.co-box {
  max-width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
}

.co-box .modal-header {
  background: var(--mc-green);
  flex: 0 0 auto;
}

.co-box .modal-body {
  padding: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.co-intro {
  background: var(--mc-green-tint);
  border: 1px solid rgba(1, 65, 64, 0.14);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #24423f;
  margin: 0 0 16px;
}

.co-field {
  display: block;
  margin-bottom: 15px;
}

.co-label {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 14.5px;
  font-weight: 800;
  color: #14322f;
  margin-bottom: 6px;
}

.co-req {
  background: #fee2e2;
  color: #b91c1c;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
}

.co-opt {
  background: #e7eceb;
  color: #4b5f5d;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.co-input {
  width: 100%;
  min-height: 48px;
  font-family: inherit;
  font-size: 16px;
  color: #16302e;
  background: #ffffff;
  border: 1.6px solid #cfdbd9;
  border-radius: 10px;
  padding: 10px 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.co-input:focus {
  border-color: var(--mc-green);
  box-shadow: 0 0 0 3px rgba(1, 65, 64, 0.12);
}

.co-input.bad {
  border-color: #dc2626;
  background: #fff7f7;
}

.co-area {
  min-height: 74px;
  line-height: 1.7;
  resize: vertical;
}

.co-help {
  display: block;
  font-size: 12.5px;
  line-height: 1.7;
  color: #5d6f6d;
  margin-top: 5px;
}

.co-err {
  display: none;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
  color: #b91c1c;
  margin-top: 4px;
}

.co-err.show { display: block; }

.co-sum {
  background: #f6f8f8;
  border: 1px solid #dfe7e6;
  border-radius: 10px;
  padding: 11px 13px;
  margin: 4px 0 14px;
}

.co-sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  padding: 4px 0;
  color: #3c514f;
}

.co-sum-row b { color: #14322f; }

.co-send {
  width: 100%;
  justify-content: center;
}

@media (max-width: 520px) {
  .modal-overlay { padding: 10px; align-items: flex-end; }
  .co-box { max-height: calc(100vh - 20px); border-radius: 14px 14px 0 0; }
  .co-box .modal-body { padding: 15px; }
}


/* ==========================================================================
   23) نموذج طلب الخدمة — service-form.js
   --------------------------------------------------------------------------
   لكل خدمة أسئلتها. الهدف إنّه الزبون يجاوب مرّة وحدة، وتوصل الرسالة
   ع واتساب كاملة — بلا ما يرجع الموظّف يسأله عشر أسئلة.
   الحقول بتستعمل نفس أصناف نموذج الطلب (.co-*) لتضل الواجهة وحدة.
   ========================================================================== */

.sf-field[hidden] { display: none !important; }

.sf-panel {
  border: 2px solid var(--mc-green);
  border-radius: 14px;
}

.sf-panel h2 i {
  color: var(--mc-green-soft);
  margin-left: 6px;
}

.sf-intro {
  background: var(--mc-green-tint);
  border: 1px solid rgba(1, 65, 64, 0.14);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #24423f;
  margin: 0 0 18px;
}

/* ثلاثة أعمدة ع الشاشة الكبيرة، اتنين ع التابلت، وحدة ع الهاتف */
.sf-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 16px;
  align-items: start;
}

@media (min-width: 620px) {
  .sf-fields { grid-template-columns: 1fr 1fr; }
}

/* الأسئلة يلي إلها خيارات أو نص طويل بتاخد السطر كامل */
.sf-field.sf-wide,
.sf-field.sf-half,
.sf-field:has(.co-area) { grid-column: 1 / -1; }

/* الأرقام والتواريخ والهاتف — كلها تبلّش من نفس الطرف متل باقي الحقول */
.sf-field .co-input[type="number"],
.sf-field .co-input[type="tel"],
.sf-field .co-input[type="date"],
.sf-field .co-input[type="time"] {
  direction: ltr;
  text-align: right;
}

/* أيقونة التقويم والساعة ع الطرف الشمال بدل ما تزاحم الرقم */
.sf-field .co-input[type="date"]::-webkit-calendar-picker-indicator,
.sf-field .co-input[type="time"]::-webkit-calendar-picker-indicator {
  margin: 0 0 0 auto;
  order: -1;
}

/* الأسهم يلي بتزيد وتنقص بحقل الرقم — مخفيّة، الكتابة أوضح */
.sf-field .co-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.sf-field .co-input[type="number"]::-webkit-outer-spin-button,
.sf-field .co-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sf-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-choices.bad {
  outline: 2px solid #d13b3b;
  outline-offset: 4px;
  border-radius: 8px;
}

.sf-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 15px;
  border: 1.6px solid #d7e1e0;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: #2b4a47;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.sf-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sf-chip:hover { border-color: var(--mc-green-soft); }

.sf-chip.on,
.sf-chip:has(input:checked) {
  background: var(--mc-green);
  border-color: var(--mc-green);
  color: #fff;
}

.sf-chip:has(input:focus-visible) {
  outline: 2px solid var(--amz-yellow);
  outline-offset: 2px;
}

.sf-send {
  width: 100%;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 20px;
  border: 0;
  border-radius: 12px;
  background: #25D366;
  color: #062e1a;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 0 #1aa851;
  transition: filter .15s, transform .08s;
}

.sf-send i { font-size: 21px; }

.sf-send:hover { filter: brightness(1.05); }

.sf-send:active { transform: translateY(2px); box-shadow: 0 1px 0 #1aa851; }

.sf-send:focus-visible {
  outline: 3px solid var(--amz-yellow);
  outline-offset: 3px;
}

.sf-top-err {
  margin-top: 10px;
}

@media (max-width: 560px) {
  .sf-fields { grid-template-columns: 1fr; }
  .sf-panel { padding: 16px 14px; }
}


/* ==========================================================================
   22. صور المنتجات — البطاقة، ومعرض صفحة المنتج، والصورة المكبّرة
   --------------------------------------------------------------------------
   قاعدة واحدة ماشية بكل الملف: صندوق الصورة ارتفاعه ثابت، والصورة جوّاته
   بـ object-fit: contain. يعني المنتج بيبان كامل بلا قصّ ولا تمطيط مهما
   كان مقاس الصورة الأصلية — وطالما الصندوق ثابت، الصفحة ما بترقص وقت
   تحميل الصور.
   ========================================================================== */

/* --------------------------------------------------------------------------
   أ) صورة البطاقة — أكبر شوي من قبل، وعلامة صغيرة إذا في أكتر من صورة
   -------------------------------------------------------------------------- */
.mc-prod-img {
  position: relative;
}

.mc-prod-img img {
  height: 200px;
}

.mc-prod-noimg {
  display: grid;
  place-items: center;
  height: 200px;
  font-size: 38px;
  color: #cfdcda;
}

.mc-prod-count {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(1, 65, 64, .82);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.mc-prod-count i { font-size: 10px; }

/* --------------------------------------------------------------------------
   ب) معرض صفحة المنتج
   الأسهم والنقاط والعدّاد والمصغّرات ما بتظهر إلا إذا كان للمنتج أكتر من
   صورة (الصنف has-many بينحطّ من الجافاسكربت) — منتج بصورة وحدة بيضل
   متل ما كان تماماً.
   -------------------------------------------------------------------------- */
.mc-pdp-media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.mc-pdp-img {
  position: relative;
  overflow: hidden;
}

.mc-pdp-img img#pdpMainImage {
  display: block;
  width: 100%;
  height: clamp(300px, 44vh, 500px);
  max-width: none;
  max-height: none;
  object-fit: contain;
  cursor: zoom-in;
}

/* السهمان: بيظهروا بس مع أكتر من صورة، وبيتخفّوا ع الموبايل لأنّ السحب
   بالإصبع أسهل والنقاط بتوضّح وين صار */
.mc-gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--mc-green);
  border-radius: 50%;
  background: #fff;
  color: var(--mc-green);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 0 0 rgba(1, 65, 64, .25);
  transition: transform .1s, background .1s;
}
.mc-pdp-img.has-many .mc-gal-nav { display: flex; }
.mc-gal-nav:hover  { background: #f2faf8; }
.mc-gal-nav:active { transform: translateY(-50%) scale(.94); }
.mc-gal-prev { inset-inline-start: auto; right: 12px; }
.mc-gal-next { inset-inline-end: auto;   left: 12px; }

.mc-gal-count {
  position: absolute;
  top: 12px;
  right: 12px;
  display: none;
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(1, 65, 64, .85);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.mc-pdp-img.has-many .mc-gal-count { display: block; }

.mc-gal-zoom {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 12px;
  background: rgba(1, 65, 64, .82);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}

.mc-gal-dots {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: none;
  align-items: center;
  gap: 6px;
}
.mc-pdp-img.has-many .mc-gal-dots { display: flex; }

.mc-gal-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(1, 65, 64, .28);
  cursor: pointer;
  transition: width .15s, background .15s;
}
.mc-gal-dot.active {
  width: 24px;
  background: var(--mc-green);
}

/* المصغّرات — صفّ بيتمرّر أفقياً إذا كترت الصور، بلا ما يكبّر الصفحة */
.mc-gal-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.mc-gal-thumbs:empty { display: none; }

.mc-gal-thumb {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  padding: 4px;
  border: 3px solid #d8e6e4;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  opacity: .75;
  transition: border-color .12s, opacity .12s, transform .12s;
}
.mc-gal-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mc-gal-thumb:hover { opacity: 1; }
.mc-gal-thumb.active {
  opacity: 1;
  border-color: var(--mc-green);
  box-shadow: 0 3px 0 0 var(--mc-green);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   ج) الصورة المكبّرة — ملء الشاشة
   -------------------------------------------------------------------------- */
body.mc-noscroll { overflow: hidden; }

.mc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .92);
}

.mc-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
  user-select: none;
}

.mc-lb-close,
.mc-lb-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: background .12s, transform .1s;
}
.mc-lb-close:hover,
.mc-lb-nav:hover { background: rgba(255, 255, 255, .3); }
.mc-lb-close:active,
.mc-lb-nav:active { transform: scale(.94); }

.mc-lb-close { top: 16px; right: 16px; }
.mc-lb-prev  { top: 50%; margin-top: -25px; right: 16px; }
.mc-lb-next  { top: 50%; margin-top: -25px; left: 16px; }

.mc-lb-count {
  position: absolute;
  top: 24px;
  left: 20px;
  padding: 5px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   د) الشاشات الضيّقة
   ع الموبايل: بلا أسهم (السحب بالإصبع أريح)، ومصغّرات أصغر
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .mc-prod-img img { height: 150px; }
  .mc-prod-noimg  { height: 150px; }

  .mc-pdp-img img#pdpMainImage { height: clamp(240px, 46vw, 320px); }
  .mc-pdp-img.has-many .mc-gal-nav { display: none; }
  .mc-gal-zoom { font-size: 11px; padding: 5px 9px; }
  .mc-gal-thumb { width: 62px; height: 62px; border-width: 2px; }

  .mc-lb-close { top: 10px; right: 10px; width: 44px; height: 44px; }
  .mc-lb-prev, .mc-lb-next { display: none; }
  .mc-lb-count { top: 18px; left: 14px; }
}