/* ==========================================================
   جزيرة الخيم - تخصيص متجر زد (CSS)
   ثيم: صحراء + خيم + سدو
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=El+Messiri:wght@500;600;700&family=Tajawal:wght@400;500;700;800&display=swap");

:root {
  --sand: #f3e7d3;
  --cream: #fbf5e9;
  --dune: #e3cba0;
  --camel: #c79a5b;
  --terra: #b5532a;
  --terra-dark: #963f1c;
  --brown: #3b281a;
  --palm: #55633a;
  --sh: 0 10px 28px rgba(59, 40, 26, 0.10);
  --sh-h: 0 22px 46px rgba(59, 40, 26, 0.24);

  /* ===== أيقونات (تتلون حسب لون النص) ===== */
  --i-tent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill-rule='evenodd' d='M32 6 L62 54 H2 Z M32 28 L43 54 H21 Z'/><rect x='0' y='57' width='64' height='4'/></svg>");
  --i-bayt: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M2 34 L16 14 H48 L62 34 Z'/><rect x='8' y='36' width='4' height='20'/><rect x='52' y='36' width='4' height='20'/><rect x='27' y='38' width='10' height='18'/><rect x='0' y='57' width='64' height='4'/></svg>");
  --i-grid: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='8' height='8' rx='1.5'/><rect x='13' y='3' width='8' height='8' rx='1.5'/><rect x='3' y='13' width='8' height='8' rx='1.5'/><rect x='13' y='13' width='8' height='8' rx='1.5'/></svg>");
  --i-list: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='4' width='18' height='4' rx='1.5'/><rect x='3' y='10' width='18' height='4' rx='1.5'/><rect x='3' y='16' width='18' height='4' rx='1.5'/></svg>");

  /* ===== زخارف ملونة ===== */
  /* شريط سدو */
  --sadu: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'><rect width='40' height='12' fill='%233b281a'/><path d='M0 12 L10 0 L20 12Z' fill='%23b5532a'/><path d='M20 12 L30 0 L40 12Z' fill='%23e3cba0'/><circle cx='10' cy='8.5' r='1.5' fill='%23fbf5e9'/><circle cx='30' cy='8.5' r='1.5' fill='%233b281a'/></svg>");
  /* خيم صغيرة على حافة صور المنتجات */
  --fringe: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16'><path d='M0 16 L20 3 L40 16Z' fill='%23fbf5e9'/><rect y='14' width='40' height='2' fill='%23fbf5e9'/></svg>");
  /* مخيم كامل: خيمتين + نخلة + بيت شعر */
  --skyline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='90' viewBox='0 0 420 90'><g fill='%233b281a'><path d='M10 90 L80 22 L150 90Z'/><path d='M80 22 V8 L96 13 L80 18Z'/><path d='M170 90 L205 52 L240 90Z'/><path d='M330 90 L350 56 H400 L418 90Z'/><rect y='88' width='420' height='2'/></g><g fill='%23f3e7d3'><path d='M80 52 L96 90 L64 90Z'/><path d='M205 68 L214 90 L196 90Z'/><path d='M366 90 V72 H384 V90Z'/></g><g fill='none' stroke='%233b281a' stroke-linecap='round'><path stroke-width='5' d='M276 90 Q282 62 272 36'/><path stroke-width='3.5' d='M272 36 Q252 24 236 36 M272 36 Q262 18 244 16 M272 36 Q284 16 304 20 M272 36 Q296 28 310 42'/></g></svg>");
  /* كثبان رملية */
  --dunes: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0 90 V40 C180 8 330 14 520 44 C700 72 860 18 1050 22 C1230 26 1340 52 1440 30 V90Z' fill='%23e3cba0'/><path d='M0 90 V62 C220 30 380 50 560 66 C760 84 900 40 1100 48 C1260 54 1360 72 1440 58 V90Z' fill='%23f3e7d3'/></svg>");
  /* نقش خيم خفيف للخلفية */
  --pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23c79a5b' stroke-opacity='0.2' stroke-width='1.5'><path d='M20 60 L40 32 L60 60Z M40 46 L47 60 H33Z'/><path d='M100 142 L120 114 L140 142Z M120 128 L127 142 H113Z'/></g><g fill='%23c79a5b' fill-opacity='0.2'><circle cx='110' cy='30' r='1.6'/><circle cx='30' cy='120' r='1.6'/></g></svg>");
}

/* ---------- أيقونات القناع ---------- */
.jt-ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  background: currentColor;
  -webkit-mask: var(--i-tent) center / contain no-repeat;
  mask: var(--i-tent) center / contain no-repeat;
}
.jt-ico-bayt { -webkit-mask-image: var(--i-bayt); mask-image: var(--i-bayt); }
.jt-ico-grid { -webkit-mask-image: var(--i-grid); mask-image: var(--i-grid); }
.jt-ico-list { -webkit-mask-image: var(--i-list); mask-image: var(--i-list); }

/* ---------- الأساسيات ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: "Tajawal", sans-serif !important;
  background-color: var(--sand) !important;
  background-image: var(--pattern);
  color: var(--brown) !important;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "El Messiri", "Tajawal", sans-serif !important;
  color: var(--brown);
  font-weight: 700;
}

a { color: var(--terra); transition: color 0.25s ease; }
a:hover { color: var(--palm); }

::selection { background: var(--terra); color: var(--cream); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--sand); }
::-webkit-scrollbar-thumb { background: var(--camel); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--terra); }

/* ---------- شريط الإعلان ---------- */
.jt-announce {
  background: var(--brown);
  color: var(--dune);
  text-align: center;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.jt-announce strong { color: #fff; }
.jt-announce .jt-ico { color: var(--camel); }

/* ---------- الهيدر ---------- */
header, .header, .site-header {
  background: var(--cream) !important;
  transition: box-shadow 0.3s ease;
}
header a, .header a, .site-header a { color: var(--brown) !important; }
header a:hover, .header a:hover, .site-header a:hover { color: var(--terra) !important; }
header.jt-scrolled, .header.jt-scrolled, .site-header.jt-scrolled {
  box-shadow: 0 8px 24px rgba(59, 40, 26, 0.18);
}

/* مؤشر خيمة تحت روابط القائمة */
header nav a, .header nav a { position: relative; }
header nav a::after, .header nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 16px;
  height: 9px;
  background: var(--terra);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  transition: transform 0.25s ease;
}
header nav a:hover::after, .header nav a:hover::after { transform: translateX(-50%) scaleY(1); }

/* شريط سدو تحت الهيدر */
.jt-sadu {
  height: 12px;
  background: var(--sadu) repeat-x center / 40px 12px;
}

/* ---------- الأزرار ---------- */
.btn, .button, input[type="submit"],
[class*="add-to-cart"], [class*="addToCart"] {
  font-family: "Tajawal", sans-serif !important;
  font-weight: 700;
  border-radius: 999px !important;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary, .btn.btn-primary, [class*="add-to-cart"], [class*="addToCart"] {
  background: var(--terra) !important;
  border: 1px solid var(--terra) !important;
  color: var(--cream) !important;
  box-shadow: 0 8px 18px rgba(181, 83, 42, 0.32);
}
.btn-primary:hover, [class*="add-to-cart"]:hover, [class*="addToCart"]:hover {
  background: var(--palm) !important;
  border-color: var(--palm) !important;
  transform: translateY(-2px);
}

/* ---------- عناوين الأقسام + زخرفة الخيمة ---------- */
.jt-title {
  text-align: center;
  margin-bottom: 0 !important;
}
.jt-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 260px;
  margin: 10px auto 28px;
  color: var(--terra);
  font-size: 22px;
}
.jt-orn::before, .jt-orn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--camel));
}
.jt-orn::after { transform: scaleX(-1); }

/* ---------- كثبان بين الهيرو والمنتجات ---------- */
.jt-dunes {
  position: relative;
  z-index: 2;
  height: 70px;
  margin-top: -69px;
  background: var(--dunes) bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/* ==========================================================
   طريقة عرض المنتجات
   ========================================================== */

/* شريط الأدوات: عدد المنتجات + تبديل العرض */
.jt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 22px;
  padding: 10px 16px;
  background: var(--cream);
  border: 1px solid var(--dune);
  border-radius: 16px;
  box-shadow: var(--sh);
}
.jt-count { font-weight: 700; color: var(--brown); display: flex; align-items: center; gap: 8px; }
.jt-count .jt-ico { color: var(--terra); }
.jt-views { display: flex; gap: 6px; }
.jt-views button {
  width: 42px;
  height: 42px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  color: var(--brown) !important;
  border: 1px solid var(--dune) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  cursor: pointer;
}
.jt-views button .jt-ico { width: 20px; height: 20px; }
.jt-views button.jt-on {
  background: var(--terra) !important;
  border-color: var(--terra) !important;
  color: var(--cream) !important;
}

/* الشبكة */
.jt-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.jt-grid > .jt-card {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  flex: none !important;
}
@media (max-width: 1100px) { .jt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .jt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* القائمة */
.jt-grid.jt-list { grid-template-columns: 1fr; gap: 18px; }
.jt-list > .jt-card { display: flex !important; flex-direction: row; align-items: stretch; }
.jt-list > .jt-card .jt-media { width: 260px; flex: none; }
.jt-list > .jt-card .jt-media::after { display: none; }
.jt-list > .jt-card .jt-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: right;
  padding: 18px 24px;
}
@media (max-width: 600px) { .jt-list > .jt-card .jt-media { width: 130px; } }

/* ---------- كرت المنتج ---------- */
.jt-card {
  position: relative;
  background: var(--cream);
  border: 1px solid rgba(199, 154, 91, 0.45);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sh);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.jt-card:hover {
  transform: translateY(-8px);
  border-color: var(--terra);
  box-shadow: var(--sh-h);
}

.jt-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--dune);
}
.jt-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.jt-card:hover .jt-media img { transform: scale(1.07); }

/* صف خيم صغيرة على حافة الصورة السفلية */
.jt-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 16px;
  background: var(--fringe) repeat-x bottom / 40px 16px;
  pointer-events: none;
}

/* شارة الخيمة */
.jt-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terra);
  color: var(--cream);
  border-radius: 50%;
  font-size: 20px;
  box-shadow: 0 6px 14px rgba(181, 83, 42, 0.4);
  transition: transform 0.35s ease, background 0.35s ease;
}
.jt-card:hover .jt-tag { transform: rotate(-12deg) scale(1.1); background: var(--palm); }

/* زر عرض المنتج عند المرور */
.jt-quick {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 28px;
  z-index: 3;
  padding: 10px;
  text-align: center;
  background: rgba(59, 40, 26, 0.92);
  color: var(--cream);
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.jt-card:hover .jt-quick { opacity: 1; transform: none; }
@media (hover: none) { .jt-quick { display: none; } }

/* معلومات المنتج */
.jt-info { padding: 14px 16px 18px; text-align: center; }
.jt-card h2, .jt-card h3, .jt-card h4, .jt-card h5,
.jt-card [class*="title"], .jt-card [class*="name"] {
  font-family: "El Messiri", "Tajawal", sans-serif !important;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--brown);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jt-card [class*="price"] { color: var(--terra); font-weight: 800; font-size: 1.1em; }
.jt-card del, .jt-card s, .jt-card [class*="old"], .jt-card [class*="before"] {
  color: #9a8b73;
  font-weight: 400;
}
.jt-card .btn, .jt-card button { margin-top: 8px; }

/* ظهور المنتجات تدريجياً */
.jt-card.jt-pre { opacity: 0; }
.jt-card.jt-in { animation: jtUp 0.7s ease backwards; }
@keyframes jtUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- الحقول ---------- */
input, select, textarea {
  font-family: "Tajawal", sans-serif !important;
  border-radius: 12px !important;
  border: 1px solid var(--dune) !important;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--terra) !important;
  box-shadow: 0 0 0 3px rgba(181, 83, 42, 0.18) !important;
}

/* ---------- مخيم قبل الفوتر ---------- */
.jt-skyline {
  height: 90px;
  margin-top: 50px;
  background: var(--skyline) repeat-x bottom / 420px 90px;
}

/* ---------- الفوتر ---------- */
footer, .footer, .site-footer {
  background: var(--brown) !important;
  color: #e6d8bd !important;
}
footer .jt-title, .footer .jt-title { color: var(--dune); text-align: right; }
footer h1, footer h2, footer h3, footer h4,
.footer h1, .footer h2, .footer h3, .footer h4 { color: var(--dune) !important; }
footer .jt-orn, .footer .jt-orn { justify-content: flex-start; max-width: 150px; margin: 8px 0 16px; color: var(--camel); }
footer a, .footer a, .site-footer a { color: var(--dune) !important; }
footer a:hover, .footer a:hover, .site-footer a:hover { color: #fff !important; }
footer img[src*="tabby"], footer img[src*="emkan"], footer img[src*="tamara"] {
  background: #fff;
  padding: 6px 12px;
  border-radius: 10px;
}

/* ---------- زر الرجوع للأعلى (خيمة) ---------- */
.jt-top {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terra);
  color: var(--cream);
  border: none;
  border-radius: 50%;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.jt-top.jt-show { opacity: 1; pointer-events: auto; }
.jt-top:hover { background: var(--palm); transform: translateY(-4px); }

/* ---------- الجوال ---------- */
@media (max-width: 768px) {
  .jt-announce { font-size: 12.5px; gap: 8px; }
  .jt-info { padding: 10px 10px 14px; }
  .jt-card { border-radius: 16px; }
  .jt-tag { width: 32px; height: 32px; font-size: 17px; top: 8px; right: 8px; }
  .jt-skyline { height: 66px; background-size: 308px 66px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .jt-card.jt-pre { opacity: 1; }
}