/* ═══════════════════════════════════════════════════════════
   شكنز — ستايل مخصص
   ═══════════════════════════════════════════════════════════ */

::selection { background: #E30613; color: #fff; }

html {
  scroll-behavior: smooth;
  /* الشريط اللاصق يغطي عنوان القسم لو ما حجزنا له مكان */
  scroll-padding-top: 190px;
  -webkit-tap-highlight-color: transparent;
}

body { overscroll-behavior-y: none; }

*:focus-visible {
  outline: 3px solid #E30613;
  outline-offset: 2px;
  border-radius: 8px;
}

/* شريط التصنيفات: نخفي المؤشر بدون ما نمنع السحب */
#cattabs { scrollbar-width: none; -ms-overflow-style: none; }
#cattabs::-webkit-scrollbar { display: none; }

.cat-tab {
  flex: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3F3F46;
  background: #F1F1F2;
  white-space: nowrap;
  transition: background .25s, color .25s, transform .25s;
}
.cat-tab:hover { background: #E4E4E7; }
.cat-tab[aria-current="true"] {
  background: #E30613;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(227, 6, 19, .6);
}

/* ── كارد الصنف ── */
.item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17,17,17,.06), 0 6px 16px -8px rgba(17,17,17,.12);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  overflow: hidden;
}
@media (hover: hover) {
  .item-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px -6px rgba(17,17,17,.14), 0 20px 40px -20px rgba(227,6,19,.35);
  }
  .item-card:hover .item-photo img { transform: scale(1.07); }
}

.item-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #FAFAFA, #F1F1F2);
  overflow: hidden;
  cursor: zoom-in;
}
.item-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
/* الصور اللي بقت بخلفيتها الأصلية تملأ الإطار بدل ما تعوم داخله */
.item-photo.bleed img { object-fit: cover; padding: 0; }

.item-photo .no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #D4D4D8;
}

/* ── الشارات ── */
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.35);
}
.badge-best { background: #111111; }
.badge-new  { background: #E30613; }
.badge-hot  { background: linear-gradient(135deg, #FF6A00, #E30613); }

/* ── زر الإضافة ── */
.add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 999px;
  background: #E30613;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .18s, background .25s;
}
.add-btn:hover { background: #B60410; }
.add-btn:active { transform: scale(.88); }

/* نبضة قصيرة تأكد للزبون إن الصنف انضاف */
@keyframes pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.25); background: #111; }
  100% { transform: scale(1); }
}
.add-btn.popped { animation: pop .42s cubic-bezier(.16,1,.3,1); }

/* ── اختيار الحجم ── */
.size-pick {
  border: 1.5px solid #E4E4E7;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #3F3F46;
  transition: all .2s;
}
.size-pick[aria-pressed="true"] {
  border-color: #E30613;
  background: #FEF2F2;
  color: #E30613;
}

/* ── ظهور الكروت عند التمرير ── */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0s);
}

/* ── الشعار ── */
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  background: #fff;
  color: #E30613;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.3);
}
footer .logo-mark { color: #fff; }

/* ── تفاصيل صغيرة ── */
.h-13 { height: 3.25rem; }

.section-rule {
  height: 3px;
  width: 44px;
  border-radius: 999px;
  background: #E30613;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  #catbar, #cart-bar, #cart-panel, #lightbox, #header-wa { display: none !important; }
  .item-card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
}