/* ── Reset ── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding: 80px;
}

/* ── Scroll To Top ── */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 45px;
  height: 45px;
  background: var(--gold);
  color: var(--black);
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--gold-light);
  transform: translateY(-3px);
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}
.reveal-delay-2 {
  transition-delay: 0.2s;
}
.reveal-delay-3 {
  transition-delay: 0.3s;
}
.reveal-delay-4 {
  transition-delay: 0.4s;
}
.reveal-delay-5 {
  transition-delay: 0.5s;
}
.reveal-delay-6 {
  transition-delay: 0.6s;
}

/* icon */
.noto--balance-scale::after {
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23c9a84c' d='M60.55 28.66h7v70.6h-7z'/%3E%3Cpath fill='%23c9a84c' d='M92.42 35.83c5.23 0 10.82-1.88 15.35-8.2l-5.69-4.08c-5.42 7.55-12.69 5.6-20.28 2.73l-.9-.34c-5.05-1.88-11.04-2.92-16.85-2.92v7c4.93 0 10.19.9 14.41 2.48l.87.33c3.13 1.18 7.94 3 13.09 3m-52 77.57c2.05-2.14 11.91-4.93 14.51-7.35s-.03-5.23 1.21-10.98c1.58-7.33 7.91-8.18 7.91-8.18s6.33.85 7.91 8.18c1.24 5.74-1.4 8.56 1.21 10.98c2.6 2.42 12.47 5.21 14.51 7.35c2.14 2.24 2.23 5.21 0 6.23c0 0-7.48 3.07-23.63 3.07s-23.63-3.07-23.63-3.07c-1.91-.6-2.14-3.99 0-6.23'/%3E%3Cpath fill='%238a6d2d' d='M67.52 37.96c0 .49.49 2.96-2.32 3.55c-2.46.51-4.66-.57-4.66-3.61c0-2.5.24-3.66.24-3.66s6.74 2.22 6.74 3.72'/%3E%3Cpath fill='%23c9a84c' d='M72.37 30.35c0-4.59-3.72-17.04-8.32-17.04s-8.32 12.45-8.32 17.04s3.72 8.32 8.32 8.32s8.32-3.72 8.32-8.32'/%3E%3Ccircle cx='64.05' cy='10.8' r='5.5' fill='%23c9a84c'/%3E%3Ccircle cx='104.26' cy='24.19' r='5.5' fill='%23c9a84c'/%3E%3Cpath fill='%23c9a84c' d='M35.67 35.83c5.15 0 9.96-1.82 13.09-3l.87-.33c4.23-1.57 9.48-2.48 14.41-2.48v-7c-5.82 0-11.8 1.04-16.85 2.92l-.9.34c-7.6 2.87-14.86 4.82-20.28-2.73l-5.69 4.08c4.54 6.32 10.12 8.2 15.35 8.2'/%3E%3Cpath fill='%23e3c56d' d='M59.18 91.9c-1.44 1.09-1.27 3.02-1.19 3.31c.2.7.9 1.12 1.57 1.37c1.74.64 3.72.49 5.39-.28c1.21-.56 3.66-2.27 3.41-3.88c-.41-2.65-7.73-1.62-9.18-.52m7.8 24.6c-7.44 1.69-15.26.84-21.64-1.33c-2.67-.91-1.71-1.89-1.56-2.01c1.29-1.06 2.93-1.79 4.68-1.93c3.18-.25 5.7.98 8.75 1.89c3.46 1.03 7.13 1.37 10.72.99c.51-.05 1.07-.1 1.5.19c1.67 1.12-2.45 2.2-2.45 2.2M63.2 10.99c-.54.24-1.16.38-1.72.18c-.79-.28-1.24-1.18-1.16-2.01c.15-1.51 2.49-3.56 4.07-2.77c2.09 1.05.23 3.96-1.19 4.6m-5 16.21c1.41 1.68 4.57 1.43 6.14-2.44c1.06-2.62.74-5.58.59-6.49c-.38-2.44-2.54-3.01-4.04-.92c-3.15 4.37-3.61 8.76-2.69 9.85'/%3E%3Ccircle cx='23.83' cy='24.91' r='1.81' fill='%23c9a84c'/%3E%3Cpath fill='%23c9a84c' d='M3.44 92.29L22 24.45s1.07-1.28 1.83-1.28s1.87 1.28 1.87 1.28l18.61 67.93l-2.65.74l-16.45-60.23l-2.75.26L6.09 93.02z'/%3E%3Cpath fill='%23e3c56d' d='M44.41 92.44H3.25c0 4.59 10.82 10.8 20.58 10.8s20.58-6.63 20.58-10.8'/%3E%3Cellipse cx='23.83' cy='92.57' fill='%238a6d2d' rx='20.58' ry='3.13'/%3E%3Cpath fill='%23f5e1a4' d='M23.83 90.45c8.54 0 14.87.79 17.85 1.59c.53.14.53.91 0 1.05c-2.98.8-9.31 1.59-17.85 1.59S8.96 93.9 5.98 93.1c-.53-.14-.53-.91 0-1.05c2.98-.81 9.31-1.6 17.85-1.6m0-1.01c-11.37 0-20.58 1.4-20.58 3.13s9.21 3.13 20.58 3.13s20.58-1.4 20.58-3.13s-9.21-3.13-20.58-3.13m-6.22 10.25c1.93.95 1.57 1.55.39 1.67c-2.34.24-6.18-1.23-8.48-3.21c-.67-.58-1.49-2.56.73-2.23c3.44.5 3.19 1.7 7.36 3.77'/%3E%3Cpath fill='%23c9a84c' d='M22.46 24.58v-.03c0-.76.62-1.38 1.38-1.38s1.38.62 1.38 1.38v71.2c0 .76-.62 1.38-1.38 1.38s-1.38-.62-1.38-1.38z'/%3E%3Ccircle cx='23.83' cy='24.54' r='5.5' fill='%23c9a84c'/%3E%3Cpath fill='%23e3c56d' d='M24.77 20.16c1.33.6.73 1.75.46 2.09c-.73.93-1.92.97-2.8 1.97c-.38.43-.58 1.42-1.43 1.65a.89.89 0 0 1-1.16-.67c-.34-2.01.41-3.41 1.73-4.39c.61-.46 1.87-1.25 3.2-.65'/%3E%3Cpath fill='%23c9a84c' d='m83.78 92.21l18.8-67.77s1.08-1.28 1.84-1.28s1.87 1.29 1.87 1.29l18.37 68l-2.66.74l-16.25-60.3l-2.75.26l-16.58 59.8z'/%3E%3Cpath fill='%23e3c56d' d='m124.75 92.52l-41.16-.15c-.02 4.59 10.78 10.84 20.54 10.87c9.76.04 20.61-6.56 20.62-10.72'/%3E%3Cellipse cx='104.17' cy='92.57' fill='%238a6d2d' rx='3.13' ry='20.58' transform='rotate(-89.797 104.168 92.57)'/%3E%3Cpath fill='%23f5e1a4' d='M104.18 90.45c8.54.03 14.87.84 17.84 1.65c.53.14.52.91 0 1.05c-2.98.79-9.31 1.56-17.85 1.53s-14.87-.84-17.84-1.65c-.53-.14-.52-.91 0-1.05c2.97-.79 9.31-1.56 17.85-1.53m0-1.01c-11.37-.04-20.59 1.33-20.59 3.06c-.01 1.73 9.2 3.16 20.57 3.2s20.59-1.33 20.59-3.06c.01-1.72-9.2-3.16-20.57-3.2m-6.26 10.22c1.93.96 1.39 1.41.21 1.53c-2.34.24-5.85-1.42-8.45-3.4c-.7-.54-1.92-2.47.9-1.93c3.37.66 3.46 1.87 7.34 3.8'/%3E%3Cpath fill='%23c9a84c' d='M103.03 24.57v-.03a1.374 1.374 0 1 1 2.75.01v.05l-.25 71.15a1.374 1.374 0 1 1-2.75-.01z'/%3E%3Cpath fill='%23e3c56d' d='M104.81 20.11c1.33.6.77 1.78.46 2.09c-.59.6-1.29 1.08-1.95 1.59c-.71.55-1.29 1.12-2.4.47c-1.26-.73-.49-2.51.63-3.35c.6-.45 1.93-1.39 3.26-.8'/%3E%3C/svg%3E");
}
.ph--sneaker-move-bold::after {
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23c9a84c' d='m232.94 163.06l-28.62-14.31A43.78 43.78 0 0 1 180 109.39V80a12 12 0 0 0-12-12a44.05 44.05 0 0 1-44-44a12 12 0 0 0-19.25-9.56l-77 58.41l-.3.23a20 20 0 0 0-1.56 29.69l113.68 113.72a12 12 0 0 0 8.49 3.51H224a20 20 0 0 0 20-20v-19.06a19.88 19.88 0 0 0-11.06-17.88M220 196h-67L46.08 89.05l12.86-9.76l41.2 41.2a12 12 0 0 0 17-17L78.25 64.65l25.24-19.14A68.24 68.24 0 0 0 156 90.94v18.45a67.62 67.62 0 0 0 37.59 60.82L220 183.42ZM55.49 184H32a12 12 0 0 1 0-24h23.49a12 12 0 0 1 0 24m48 24a12 12 0 0 1-12 12H48a12 12 0 0 1 0-24h43.49a12 12 0 0 1 12 12'/%3E%3C/svg%3E");
}
.sneaker::after {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}
.bitcoin-icons--verify-filled::after {
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9a84c' fill-rule='evenodd' d='M15.418 5.643a1.25 1.25 0 0 0-1.34-.555l-1.798.413a1.25 1.25 0 0 1-.56 0l-1.798-.413a1.25 1.25 0 0 0-1.34.555l-.98 1.564c-.1.16-.235.295-.395.396l-1.564.98a1.25 1.25 0 0 0-.555 1.338l.413 1.8a1.25 1.25 0 0 1 0 .559l-.413 1.799a1.25 1.25 0 0 0 .555 1.339l1.564.98c.16.1.295.235.396.395l.98 1.564c.282.451.82.674 1.339.555l1.798-.413a1.25 1.25 0 0 1 .56 0l1.799.413a1.25 1.25 0 0 0 1.339-.555l.98-1.564c.1-.16.235-.295.395-.395l1.565-.98a1.25 1.25 0 0 0 .554-1.34L18.5 12.28a1.25 1.25 0 0 1 0-.56l.413-1.799a1.25 1.25 0 0 0-.554-1.339l-1.565-.98a1.25 1.25 0 0 1-.395-.395zm-.503 4.127a.5.5 0 0 0-.86-.509l-2.615 4.426l-1.579-1.512a.5.5 0 1 0-.691.722l2.034 1.949a.5.5 0 0 0 .776-.107z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.verify::after {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.icon-park-twotone--search::after {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cmask id='SVGzmt0MemV'%3E%3Cg fill='none' stroke='%23fff' stroke-linejoin='round' stroke-width='4'%3E%3Cpath fill='%23555555' d='M21 38c9.389 0 17-7.611 17-17S30.389 4 21 4S4 11.611 4 21s7.611 17 17 17Z'/%3E%3Cpath stroke-linecap='round' d='M26.657 14.343A7.98 7.98 0 0 0 21 12a7.98 7.98 0 0 0-5.657 2.343m17.879 18.879l8.485 8.485'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cpath fill='%23c9a84c' d='M0 0h48v48H0z' mask='url(%23SVGzmt0MemV)'/%3E%3C/svg%3E");
}
.mingcute--refund-dollar-line::after {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23c9a84c' d='M21.66 9.412c1.428 5.334-1.737 10.818-7.072 12.247c-4.598 1.232-9.304-.95-11.433-4.99a1 1 0 0 1 1.77-.932a8 8 0 1 0-.452-6.449l1.057-.235c1.186-.265 1.862 1.306.854 1.985L3.711 12.84c-.718.483-1.72-.016-1.713-.918a10 10 0 0 1 7.414-9.58C14.746.91 20.23 4.076 21.659 9.41M12 6a1 1 0 0 1 1 1v1h2a1 1 0 1 1 0 2h-5a.5.5 0 0 0 0 1h4a2.5 2.5 0 0 1 0 5h-1v1a1 1 0 1 1-2 0v-1H9a1 1 0 1 1 0-2h5a.5.5 0 0 0 0-1h-4a2.5 2.5 0 0 1 0-5h1V7a1 1 0 0 1 1-1'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Variables ── */
:root {
  --black: #0d0d0d;
  --gold: #c9a84c;
  --gold-light: #e8c96d;
  --white: #f5f5f5;
  --gray: #888888;
  --surface: #1a1a1a;
  --border: #2a2a2a;
}

/* ── Base ── */
body {
  background-color: var(--black);
  color: var(--white);
  font-family: "Cairo", sans-serif;
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: "Tajawal", sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Navbar ── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.2rem 0;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
  isolation: isolate;
}

.navbar.scrolled {
  background: rgba(13, 13, 13, 0.95);
  border-color: var(--border);
  backdrop-filter: blur(10px);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 50px;
  width: auto;
}

/* ── Desktop (أكبر من 1024) ── */

.nav-links {
  display: flex;
  gap: 2.5rem;
}

.nav-links a {
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  transition: color 0.2s;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: var(--gold);
}

.nav-links a:hover::after {
  width: 100%;
}

/* Burger — مخفي على الديسكتوب */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.burger span {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--white);
  transition: all 0.3s;
}

/* ── Tablet و Mobile ── */
@media (max-width: 1024px) {
  .burger {
    display: flex;
  }

  .nav-links {
    position: fixed;
    inset: 0;
    width: 100vw;
    min-height: 100vh;
    background: rgba(13, 13, 13, 0.98);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    font-size: 1.2rem;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    z-index: 999;
    overflow-y: auto;
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .burger {
    z-index: 1000;
    position: relative;
  }
}

@media (max-width: 768px) {
  .logo img {
    height: 40px;
  }
}

/* ── Burger Animation ── */
.burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger.open span:nth-child(2) {
  opacity: 0;
}

.burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: visible;
  padding-top: 80px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to left,
      rgba(13, 13, 13, 0.3) 0%,
      rgba(13, 13, 13, 0.7) 50%,
      rgba(13, 13, 13, 0.95) 100%
    ),
    url("../images/home/hero-bg.png") center/cover no-repeat;
  z-index: 0;
}

/* خطوط زخرفية في الخلفية */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 168, 76, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 168, 76, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-content {
  max-width: 650px;
  padding-top: 0;
  margin-bottom: 8rem;
}

.hero-tag {
  display: inline-block;
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.3);
  color: var(--gold);
  padding: 0.4rem 1.2rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  animation: fadeUp 0.6s ease both;
}

.hero-content h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1.2rem;
  animation: fadeUp 0.6s 0.1s ease both;
}

.hero-content h1 span {
  color: var(--gold);
}

.hero-content p {
  font-size: 1.1rem;
  color: var(--gray);
  line-height: 1.8;
  margin-bottom: 2.5rem;
  animation: fadeUp 0.6s 0.2s ease both;
}

/* ── Buttons ── */
.hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  animation: fadeUp 0.6s 0.3s ease both;
}

.btn-primary {
  background: var(--gold);
  color: var(--black);
  padding: 0.9rem 2.2rem;
  border-radius: 8px;
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.3s;
  display: inline-block;
}

.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(201, 168, 76, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  padding: 0.9rem 2.2rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.3s;
  display: inline-block;
}

.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-3px);
}

/* ── Scroll Indicator ── */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  z-index: 2;
}

.scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollDown 1.5s ease-in-out infinite;
}

/* ── Animations ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollDown {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ── Hero Responsive ── */
@media (max-width: 768px) {
  .hero {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 120px;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-btns {
    justify-content: center;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1rem;
  }

  .btn-primary,
  .btn-outline {
    padding: 0.8rem 1.8rem;
    font-size: 0.95rem;
  }
}

/* ── Section Header ── */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-tag {
  display: inline-block;
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.3);
  color: var(--gold);
  padding: 0.3rem 1rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.section-header h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.section-header h2 span {
  color: var(--gold);
}

.section-header p {
  color: var(--gray);
  font-size: 1rem;
}

/* ── Products Section ── */
.products-section {
  padding: 2rem 0 6rem;
}

.products-count {
  margin-bottom: 1.5rem;
  color: var(--gray);
  font-size: 0.9rem;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ── No Results ── */
.no-results {
  display: none;
  text-align: center;
  padding: 5rem 0;
}

.no-results span {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

.no-results h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.no-results p {
  color: var(--gray);
}

.btn-details {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.2s;
  display: inline-block;
}

.btn-details:hover {
  background: var(--gold);
  color: var(--black);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

/* ── Featured Section ── */
.featured {
  padding: 6rem 0;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* ── Product Card ── */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.product-card:hover {
  border-color: rgba(201, 168, 76, 0.3);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.product-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

.product-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(201, 168, 76, 0.15);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: var(--gold);
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;

  background: rgba(13, 13, 13, 0.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(201, 168, 76, 0.5);
}

.product-info {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-info h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.product-info p {
  color: var(--gray);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  line-height: 1.6;
  min-height: 2.72rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  font-family: "Tajawal", sans-serif;
}

.whatsapp-btn {
  background: #25d366;
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.2s;
  display: inline-block;
}

.whatsapp-btn:hover {
  background: #1fb855;
  transform: translateY(-2px);
}

.price-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.price-original {
  font-size: 0.8rem;
  color: var(--gray);
  text-decoration: line-through;
  font-family: "Tajawal", sans-serif;
}

.product-badge-discount {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: #e53935;
  color: white;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 4;
}

/* ── Featured More ── */
.featured-more {
  text-align: center;
  margin-top: 3rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .featured {
    padding: 4rem 0;
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .product-info h3 {
    font-size: 1rem;
  }

  .whatsapp-btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.2rem;
  }
}

/* ── Categories ── */
.categories {
  padding: 6rem 0;
  background: var(--surface);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.category-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  display: block;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

.category-img {
  width: 100%;
  height: 100%;
}

.category-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.category-card:hover .category-img img {
  transform: scale(1.08);
}

.category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 13, 13, 0.9) 0%,
    rgba(13, 13, 13, 0.3) 50%,
    transparent 100%
  );
  transition: background 0.3s ease;
}

.category-card:hover .category-overlay {
  background: linear-gradient(
    to top,
    rgba(13, 13, 13, 0.95) 0%,
    rgba(13, 13, 13, 0.5) 60%,
    transparent 100%
  );
}

.category-info {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
}

.category-info h3 {
  font-size: 2rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 0.4rem;
}

.category-info span {
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 600;
  transition: gap 0.2s;
}

.category-card:hover .category-info span {
  letter-spacing: 0.05em;
}

/* ── Categories Responsive ── */
@media (max-width: 768px) {
  .categories {
    padding: 4rem 0;
  }

  .categories-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .category-card {
    aspect-ratio: 16 / 9;
  }

  .category-info h3 {
    font-size: 1.5rem;
  }

  .category-info {
    bottom: 1.2rem;
    right: 1.2rem;
  }
}

/* ── Why Us ── */
.why-us {
  padding: 6rem 0;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.why-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.why-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.why-card:hover::before {
  transform: scaleX(1);
}

.why-card:hover {
  border-color: rgba(201, 168, 76, 0.2);
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.why-icon {
  font-size: 2.5rem;
  margin-bottom: 1.2rem;
  display: block;
}

.why-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--white);
}

.why-card p {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ── Why Us Responsive ── */
@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .why-us {
    padding: 4rem 0;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .why-card {
    padding: 2rem 1.5rem;
  }
}

/* ── Contact ── */
.contact {
  padding: 6rem 0;
  background: var(--surface);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.contact-card {
  background: var(--black);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.3s ease;
  display: block;
  position: relative;
  overflow: hidden;
}

.contact-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.contact-card:hover::before {
  transform: scaleX(1);
}

.contact-card:hover {
  border-color: rgba(201, 168, 76, 0.2);
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.contact-icon {
  font-size: 2.5rem;
  margin-bottom: 1.2rem;
  display: block;
}

.contact-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--white);
}

.contact-card p {
  color: var(--gray);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

.contact-link {
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
  transition: letter-spacing 0.2s;
}

.contact-card:hover .contact-link {
  letter-spacing: 0.05em;
}

/* ── Footer ── */
.footer {
  padding: 2.5rem 0;
  border-top: 1px solid var(--border);
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 10px;
}

.footer-content p {
  color: var(--gray);
  font-size: 0.85rem;
}

.footer-links {
  display: flex;
  gap: 2rem;
}

.footer-links a {
  color: var(--gray);
  font-size: 0.85rem;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--gold);
}

/* ── Contact Responsive ── */
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .contact {
    padding: 4rem 0;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact-card {
    padding: 2rem 1.5rem;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-links {
    gap: 1.5rem;
  }
}

/* ── Made By ── */
.made-by {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  background: var(--black);
}

.made-by-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(201, 168, 76, 0.05);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  transition: all 0.3s;
  flex-wrap: wrap;
  gap: 1rem;
}

.made-by-card:hover {
  background: rgba(201, 168, 76, 0.1);
  border-color: rgba(201, 168, 76, 0.3);
}

.made-by-tag {
  display: inline-block;
  background: rgba(201, 168, 76, 0.15);
  color: var(--gold);
  padding: 0.2rem 0.8rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.made-by-text p {
  color: var(--gray);
  font-size: 0.9rem;
}

.made-by-text strong {
  color: var(--white);
}

.made-by-btn {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .made-by-card {
    flex-direction: column;
    text-align: center;
  }
}