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

:root {
  --q-green-950: #062c23;
  --q-green-900: #0b3529;
  --q-green-800: #194322;
  --q-green-700: #255a43;
  --q-gold-500: #d7b442;
  --q-gold-400: #e4c35b;
  --q-gold-200: #f2dda0;
  --q-ivory-50: #fffdf8;
  --q-ivory-100: #f8f1e5;
  --q-text: #15251f;
  --q-muted: #69766f;
  --q-border: rgba(25, 67, 34, 0.14);
  --q-shadow: 0 18px 48px rgba(6, 44, 35, 0.09);
  --q-radius-xl: 28px;
  --q-radius-lg: 20px;
  --q-radius-md: 14px;
  --font-main: "Alexandria", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body,
body * {
  font-family: var(--font-main) !important;
}

body {
  background:
    radial-gradient(circle at 8% 14%, rgba(215, 180, 66, 0.07), transparent 28rem),
    var(--q-ivory-50) !important;
  color: var(--q-text);
  -webkit-font-smoothing: antialiased;
}

/* ───────────────────── الشريط العلوي ───────────────────── */

.top-navbar,
.top-nav,
.header-top,
.announcement-bar {
  border: 0 !important;
  background: var(--q-green-950) !important;
  color: var(--q-gold-200) !important;
}

.top-navbar *,
.top-nav *,
.header-top *,
.announcement-bar * {
  color: var(--q-gold-200) !important;
  font-size: 12px !important;
}

/* ───────────────────── رأس المتجر ───────────────────── */

.store-header,
header.store-header,
.main-nav-container,
.header-components {
  border-bottom: 1px solid rgba(215, 180, 66, 0.22) !important;
  background: rgba(6, 44, 35, 0.97) !important;
  box-shadow: 0 10px 28px rgba(6, 44, 35, 0.15) !important;
  backdrop-filter: blur(16px);
}

.navbar-brand img,
.store-header .logo img,
.header-components .logo img {
  max-height: 72px !important;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.16));
}

.main-menu > li > a,
.main-menu li > a,
.store-header a,
.store-header button,
.header-components a,
.header-components button {
  color: rgba(255, 253, 248, 0.86) !important;
}

.main-menu > li > a {
  position: relative;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.main-menu > li > a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 7px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--q-gold-500);
  transform: translateX(50%);
  transition: width 0.18s ease;
}

.main-menu > li > a:hover,
.main-menu > li.active > a {
  color: var(--q-gold-400) !important;
}

.main-menu > li > a:hover::after,
.main-menu > li.active > a::after {
  width: 24px;
}

.store-header .sicon-search,
.store-header .sicon-user,
.store-header .sicon-shopping-bag,
.store-header .sicon-menu,
.header-components [class*="sicon-"] {
  color: var(--q-gold-400) !important;
}

.store-header .header-btn,
.header-components .header-btn {
  border: 1px solid rgba(215, 180, 66, 0.26) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.s-cart-summary-count,
.cart-count,
.store-header .badge {
  background: var(--q-gold-500) !important;
  color: var(--q-green-950) !important;
}

/* ───────────────────── البنرات والسلايدر ───────────────────── */

.s-slider-container,
.s-slider-block,
.home-slider,
.photos-slider,
.swiper {
  overflow: hidden;
  border-radius: var(--q-radius-xl) !important;
}

.s-slider-container img,
.home-slider img,
.photos-slider img {
  border: 1px solid rgba(215, 180, 66, 0.5) !important;
  border-radius: var(--q-radius-xl) !important;
}

.swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background: rgba(25, 67, 34, 0.32) !important;
  opacity: 1 !important;
  transition: width 0.18s ease;
}

.swiper-pagination-bullet-active {
  width: 26px !important;
  border-radius: 999px !important;
  background: var(--q-gold-500) !important;
}

.swiper-button-next,
.swiper-button-prev,
.s-slider-nav-arrow {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(215, 180, 66, 0.5) !important;
  border-radius: 50% !important;
  background: rgba(6, 44, 35, 0.9) !important;
  box-shadow: 0 10px 26px rgba(6, 44, 35, 0.2) !important;
  color: #fff !important;
}

/* ───────────────────── مساحات الأقسام وعناوينها ───────────────────── */

.s-block,
.home-block,
.products-slider,
.categories-slider {
  padding-block: clamp(34px, 6vw, 72px) !important;
}

.s-block__title h2,
.s-block__title h3,
.section-title,
.home-block h2,
.products-list-container > h2 {
  color: var(--q-green-950) !important;
  font-size: clamp(1.55rem, 3vw, 2.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

.s-block__title h2::before,
.s-block__title h3::before,
.section-title::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--q-gold-500);
}

.s-block__title p,
.home-block .subtitle,
.section-subtitle {
  color: var(--q-muted) !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
}

.s-block__title a,
.s-block__title .s-button-text,
.section-more {
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--q-gold-500) !important;
  color: var(--q-green-800) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ───────────────────── بطاقات التصنيفات ───────────────────── */

.category-entry,
.s-block--categories a,
.categories-style1 a,
.categories-style2 a,
.category-card {
  overflow: hidden;
  border: 1px solid rgba(215, 180, 66, 0.44) !important;
  border-radius: var(--q-radius-lg) !important;
  background: var(--q-green-950) !important;
  box-shadow: 0 15px 38px rgba(6, 44, 35, 0.08) !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
}

.category-entry:hover,
.s-block--categories a:hover,
.category-card:hover {
  box-shadow: 0 22px 50px rgba(6, 44, 35, 0.13) !important;
  transform: translateY(-5px);
}

.category-entry img,
.s-block--categories img,
.category-card img {
  transition: transform 0.5s ease !important;
}

.category-entry:hover img,
.s-block--categories a:hover img,
.category-card:hover img {
  transform: scale(1.04);
}

.category-entry h3,
.category-entry span,
.s-block--categories h3,
.category-card h3 {
  color: var(--q-green-950) !important;
  font-weight: 700 !important;
}

/* ───────────────────── بطاقات المنتجات ───────────────────── */

salla-product-card,
.s-product-card-wrapper,
.s-product-card-entry,
.product-entry,
.product-card {
  overflow: hidden;
  border: 1px solid rgba(25, 67, 34, 0.13) !important;
  border-radius: var(--q-radius-lg) !important;
  background: #fff !important;
  box-shadow: 0 14px 38px rgba(6, 44, 35, 0.065) !important;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

salla-product-card:hover,
.s-product-card-wrapper:hover,
.s-product-card-entry:hover,
.product-entry:hover,
.product-card:hover {
  border-color: rgba(215, 180, 66, 0.58) !important;
  box-shadow: 0 22px 52px rgba(6, 44, 35, 0.12) !important;
  transform: translateY(-6px);
}

.s-product-card-image,
.product-entry__image,
.product-card__image {
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 40%, #fff, transparent 70%),
    var(--q-ivory-100) !important;
}

.s-product-card-image img,
.product-entry__image img,
.product-card__image img {
  object-fit: contain !important;
  transition: transform 0.5s ease !important;
}

.s-product-card-wrapper:hover .s-product-card-image img,
.s-product-card-entry:hover .s-product-card-image img,
.product-entry:hover img,
.product-card:hover img {
  transform: scale(1.035);
}

.s-product-card-content,
.product-entry__content,
.product-card__content {
  padding: 16px !important;
}

.s-product-card-content-title,
.s-product-card-content-title a,
.product-entry__title,
.product-card h3 {
  color: var(--q-green-950) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
}

.s-product-card-content-sub,
.s-product-card-content-description,
.product-entry__subtitle {
  color: var(--q-muted) !important;
  font-size: 10px !important;
  line-height: 1.9 !important;
}

.s-product-card-price,
.s-product-card-sale-price,
.product-entry__price,
.product-price {
  color: var(--q-green-900) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.s-product-card-wishlist-btn,
.btn--wishlist,
.wishlist {
  border: 1px solid var(--q-border) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.93) !important;
  color: var(--q-green-900) !important;
  box-shadow: 0 7px 18px rgba(6, 44, 35, 0.08) !important;
}

.s-product-card-promotion-title,
.s-product-card-badge,
.product-label,
.product-badge {
  border: 1px solid rgba(215, 180, 66, 0.36) !important;
  border-radius: 999px !important;
  background: rgba(6, 44, 35, 0.92) !important;
  color: var(--q-gold-200) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* ───────────────────── الأزرار ───────────────────── */

.s-button-primary,
.btn-primary,
button[type="submit"],
.add-to-cart,
salla-add-product-button .s-button-element {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--q-green-900) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease !important;
}

.s-button-primary:hover,
.btn-primary:hover,
button[type="submit"]:hover,
.add-to-cart:hover,
salla-add-product-button .s-button-element:hover {
  background: var(--q-gold-500) !important;
  color: var(--q-green-950) !important;
  transform: translateY(-2px);
}

.s-button-outline,
.btn-outline,
.button-outline {
  border-color: var(--q-gold-500) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--q-green-900) !important;
}

/* ───────────────────── صفحة المنتج ───────────────────── */

.product-single h1,
.product-main h1,
.product-details h1,
.product-title {
  color: var(--q-green-950) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.product-single__image,
.product-gallery,
.s-product-images-slider {
  overflow: hidden;
  border: 1px solid var(--q-border) !important;
  border-radius: 24px !important;
  background: var(--q-ivory-100) !important;
  box-shadow: 0 16px 42px rgba(6, 44, 35, 0.07) !important;
}

.product-tabs,
.tabs,
.s-tabs {
  border-color: var(--q-border) !important;
}

.product-tabs .active,
.tabs .active,
.s-tabs .active {
  border-color: var(--q-gold-500) !important;
  color: var(--q-green-900) !important;
}

/* ───────────────────── الحقول ───────────────────── */

input,
textarea,
select,
.s-form-control,
.form-input {
  min-height: 46px !important;
  border: 1px solid var(--q-border) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--q-text) !important;
}

input:focus,
textarea:focus,
select:focus,
.s-form-control:focus,
.form-input:focus {
  border-color: var(--q-gold-500) !important;
  box-shadow: 0 0 0 3px rgba(215, 180, 66, 0.15) !important;
  outline: 0 !important;
}

/* ───────────────────── التذييل ───────────────────── */

.store-footer,
.footer-main,
footer {
  border-top: 1px solid rgba(215, 180, 66, 0.2) !important;
  background: #041f19 !important;
  color: rgba(255, 253, 248, 0.7) !important;
}

.store-footer h3,
.store-footer h4,
.footer-main h3,
.footer-main h4,
footer h3,
footer h4 {
  color: var(--q-gold-400) !important;
  font-weight: 700 !important;
}

.store-footer a,
.footer-main a,
footer a {
  color: rgba(255, 253, 248, 0.7) !important;
  transition: color 0.16s ease !important;
}

.store-footer a:hover,
.footer-main a:hover,
footer a:hover {
  color: var(--q-gold-400) !important;
}

.store-footer .social-link,
.footer-main .social-link {
  border: 1px solid rgba(215, 180, 66, 0.3) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ───────────────────── واتساب ───────────────────── */

.whatsapp-button,
.floating-whatsapp,
.s-whatsapp-button {
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 30px rgba(6, 44, 35, 0.24) !important;
}

/* ───────────────────── الجوال ───────────────────── */

@media (max-width: 767px) {
  .top-navbar *,
  .top-nav *,
  .header-top *,
  .announcement-bar * {
    font-size: 10px !important;
  }

  .store-header,
  header.store-header,
  .main-nav-container,
  .header-components {
    backdrop-filter: none;
  }

  .navbar-brand img,
  .store-header .logo img,
  .header-components .logo img {
    max-height: 58px !important;
  }

  .s-slider-container,
  .s-slider-block,
  .home-slider,
  .photos-slider,
  .swiper,
  .s-slider-container img,
  .home-slider img,
  .photos-slider img {
    border-radius: 18px !important;
  }

  .s-block,
  .home-block,
  .products-slider,
  .categories-slider {
    padding-block: 34px !important;
  }

  .s-block__title h2,
  .s-block__title h3,
  .section-title,
  .home-block h2,
  .products-list-container > h2 {
    font-size: 1.45rem !important;
  }

  salla-product-card,
  .s-product-card-wrapper,
  .s-product-card-entry,
  .product-entry,
  .product-card {
    border-radius: 15px !important;
  }

  .s-product-card-content,
  .product-entry__content,
  .product-card__content {
    padding: 11px !important;
  }

  .s-product-card-content-title,
  .s-product-card-content-title a,
  .product-entry__title,
  .product-card h3 {
    font-size: 11px !important;
  }

  .s-product-card-content-sub,
  .s-product-card-content-description,
  .product-entry__subtitle {
    font-size: 9px !important;
  }

  .s-product-card-price,
  .s-product-card-sale-price,
  .product-entry__price,
  .product-price {
    font-size: 13px !important;
  }

  .s-button-primary,
  .btn-primary,
  .add-to-cart,
  salla-add-product-button .s-button-element {
    min-height: 40px !important;
    font-size: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}