/* Add custom CSS styles below */ 
/* =========================================================
   TIME ART — DARK HISTORICAL GALLERY
   متجر فني داكن بطابع تاريخي فاخر
   ========================================================= */

/* ---------- 1. الألوان الأساسية ---------- */

:root {
  --time-black: #090909;
  --time-black-soft: #10100f;
  --time-surface: #161512;
  --time-surface-light: #1e1c18;

  --time-gold: #b99a62;
  --time-gold-light: #d4bc88;
  --time-gold-dark: #806943;

  --time-text: #f2eee6;
  --time-text-soft: #b9b3a8;
  --time-border: rgba(185, 154, 98, 0.24);

  --time-radius: 2px;
  --time-transition: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------- 2. إعدادات عامة ---------- */

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(
      circle at top center,
      rgba(185, 154, 98, 0.06),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #0d0d0c 0%,
      var(--time-black) 45%,
      #050505 100%
    ) !important;

  color: var(--time-text) !important;
  font-family: "IBM Plex Sans Arabic", "DIN Next Arabic", Tahoma, Arial, sans-serif !important;
  letter-spacing: 0;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 1px
    );

  background-size: 70px 70px;
  opacity: 0.24;
}

::selection {
  color: #080808;
  background: var(--time-gold-light);
}

a {
  transition:
    color var(--time-transition),
    opacity var(--time-transition),
    transform var(--time-transition);
}

img {
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease;
}


/* ---------- 3. شريط الإعلانات العلوي ---------- */

.top-navbar,
.topnav,
.s-topbar,
.header-top,
.top-header {
  background: #050505 !important;
  color: var(--time-text-soft) !important;
  border-bottom: 1px solid var(--time-border) !important;
}

.top-navbar a,
.topnav a,
.s-topbar a,
.header-top a {
  color: var(--time-text-soft) !important;
}


/* ---------- 4. الهيدر الرئيسي ---------- */

header,
.main-header,
.store-header,
.navbar,
.salla-header,
.header-inner,
.header-components {
  background: rgba(9, 9, 9, 0.94) !important;
  color: var(--time-text) !important;
  border-bottom: 1px solid var(--time-border) !important;

  box-shadow:
    0 12px 45px rgba(0, 0, 0, 0.38) !important;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

header a,
.main-header a,
.store-header a,
.navbar a,
.header-components a {
  color: var(--time-text) !important;
}

header a:hover,
.main-header a:hover,
.store-header a:hover,
.navbar a:hover {
  color: var(--time-gold-light) !important;
}


/* ---------- 5. الشعار ---------- */

.navbar-brand img,
.store-logo img,
.logo img,
header .logo img {
  max-height: 60px !important;
  filter:
    brightness(0)
    invert(1)
    sepia(0.2)
    saturate(0.8) !important;

  transition:
    transform var(--time-transition),
    opacity var(--time-transition);
}

.navbar-brand:hover img,
.store-logo:hover img,
.logo:hover img {
  transform: scale(1.025);
  opacity: 0.86;
}


/* ---------- 6. القائمة الرئيسية ---------- */

.main-menu,
.nav-desktop,
.navbar-menu,
.header-menu,
.s-menu,
.main-nav-container {
  background: transparent !important;
}

.main-menu a,
.nav-desktop a,
.navbar-menu a,
.header-menu a,
.s-menu a {
  color: var(--time-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  position: relative;
}

.main-menu a::after,
.nav-desktop a::after,
.navbar-menu a::after,
.header-menu a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: -7px;

  width: 0;
  height: 1px;

  background: var(--time-gold);
  transform: translateX(50%);
  transition: width var(--time-transition);
}

.main-menu a:hover::after,
.nav-desktop a:hover::after,
.navbar-menu a:hover::after,
.header-menu a:hover::after {
  width: 65%;
}


/* ---------- 7. القوائم المنسدلة ---------- */

.dropdown-menu,
.sub-menu,
.main-menu .sub-menu,
.navbar-menu ul,
.s-menu ul {
  background: rgba(15, 15, 14, 0.98) !important;
  border: 1px solid var(--time-border) !important;
  border-radius: 0 !important;

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.62) !important;

  padding: 12px !important;
}

.dropdown-menu a,
.sub-menu a,
.navbar-menu ul a {
  color: var(--time-text-soft) !important;
  border-bottom: 1px solid rgba(185, 154, 98, 0.08);
}

.dropdown-menu a:hover,
.sub-menu a:hover,
.navbar-menu ul a:hover {
  color: var(--time-gold-light) !important;
  background: rgba(185, 154, 98, 0.07) !important;
}


/* ---------- 8. أيقونات الهيدر ---------- */

header button,
header .icon,
header svg,
.main-header button,
.main-header svg,
.header-components button,
.header-components svg {
  color: var(--time-text) !important;
}

header button:hover,
.main-header button:hover,
.header-components button:hover {
  color: var(--time-gold-light) !important;
  transform: translateY(-2px);
}


/* ---------- 9. مربع البحث ---------- */

.search-bar,
.search-input,
.header-search,
.s-search-container,
salla-search input,
input[type="search"] {
  background: #121210 !important;
  color: var(--time-text) !important;
  border: 1px solid var(--time-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.search-bar::placeholder,
.search-input::placeholder,
.header-search::placeholder,
input[type="search"]::placeholder {
  color: #777268 !important;
}

.search-bar:focus,
.search-input:focus,
.header-search:focus,
input[type="search"]:focus {
  border-color: var(--time-gold) !important;
  box-shadow:
    0 0 0 3px rgba(185, 154, 98, 0.08) !important;
}


/* ---------- 10. البنر الرئيسي ---------- */

.hero,
.hero-section,
.main-slider,
.swiper,
.s-slider,
.slider-container,
.banner-entry {
  background: var(--time-black) !important;
}

.main-slider img,
.hero img,
.hero-section img,
.banner-entry img {
  width: 100% !important;
  filter:
    brightness(0.72)
    contrast(1.08)
    saturate(0.82);
}

.main-slider .swiper-slide,
.hero-section,
.banner-entry {
  position: relative;
  overflow: hidden;
}

.main-slider .swiper-slide::after,
.hero-section::after,
.banner-entry::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.74) 0%,
      rgba(0, 0, 0, 0.18) 48%,
      rgba(0, 0, 0, 0.42) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.58)
    );
}

.main-slider:hover img,
.hero:hover img,
.hero-section:hover img,
.banner-entry:hover img {
  transform: scale(1.018);
}


/* ---------- 11. الحاويات والمسافات ---------- */

.container,
.container-fluid,
section {
  position: relative;
}

section {
  padding-top: 48px;
  padding-bottom: 48px;
}

.home section + section {
  border-top: 1px solid rgba(185, 154, 98, 0.08);
}


/* ---------- 12. عناوين الأقسام ---------- */

.section-title,
.title,
.component-title,
.section-header h2,
section h2,
.page-title,
.products-listing-title {
  color: var(--time-text) !important;
  font-size: clamp(25px, 3vw, 42px) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.5px;
}

.section-title::after,
.component-title::after,
.section-header h2::after,
.products-listing-title::after {
  content: "";
  display: block;

  width: 46px;
  height: 1px;

  margin-top: 14px;
  background: var(--time-gold);
}

.section-header,
.section-title-wrapper {
  margin-bottom: 34px !important;
}


/* ---------- 13. وصف الأقسام ---------- */

.section-description,
.category-description,
.text-gray-500,
.text-gray-600,
.text-muted {
  color: var(--time-text-soft) !important;
  line-height: 1.9 !important;
}


/* ---------- 14. صفحة التصنيف ---------- */

.category-header,
.products-header,
.page-header,
.breadcrumbs-container {
  background: transparent !important;
}

.category-header,
.products-header,
.page-header {
  padding-top: 50px !important;
  padding-bottom: 30px !important;
}

.breadcrumb,
.breadcrumbs,
salla-breadcrumb {
  color: #8f897e !important;
}

.breadcrumb a,
.breadcrumbs a {
  color: #9d968a !important;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
  color: var(--time-gold-light) !important;
}


/* ---------- 15. شبكة المنتجات ---------- */

.products-grid,
.product-grid,
.grid-products {
  gap: 30px 18px !important;
}


/* ---------- 16. بطاقة المنتج ---------- */

.product-entry,
.product-card,
.s-product-card-entry,
salla-product-card,
.product-block {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--time-radius) !important;
  box-shadow: none !important;
  overflow: hidden;

  transition:
    transform var(--time-transition),
    opacity var(--time-transition);
}

.product-entry:hover,
.product-card:hover,
.s-product-card-entry:hover,
salla-product-card:hover,
.product-block:hover {
  transform: translateY(-7px);
}


/* ---------- 17. صورة المنتج ---------- */

.product-entry .product-image,
.product-card .product-image,
.s-product-card-image,
.s-product-card-entry .s-product-card-image,
.product-block .product-image {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #191814,
      #0e0e0d
    ) !important;

  border: 1px solid rgba(185, 154, 98, 0.14) !important;
  border-radius: 0 !important;
}

.product-entry .product-image::after,
.product-card .product-image::after,
.s-product-card-image::after,
.product-block .product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 -50px 70px rgba(0, 0, 0, 0.15);
}

.product-entry img,
.product-card img,
.s-product-card-image img,
.product-block img {
  width: 100%;
  transform: scale(1.001);
}

.product-entry:hover img,
.product-card:hover img,
.s-product-card-entry:hover img,
salla-product-card:hover img,
.product-block:hover img {
  transform: scale(1.045);
  filter:
    brightness(0.9)
    contrast(1.04);
}


/* ---------- 18. تفاصيل المنتج ---------- */

.product-entry .product-details,
.product-card .product-details,
.s-product-card-content,
.product-block .product-details {
  padding: 17px 4px 8px !important;
  background: transparent !important;
}

.product-entry h3,
.product-card h3,
.s-product-card-content-title,
.s-product-card-content-title a,
.product-block h3 {
  color: var(--time-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

.product-entry h3:hover,
.product-card h3:hover,
.s-product-card-content-title a:hover,
.product-block h3:hover {
  color: var(--time-gold-light) !important;
}

.product-entry p,
.product-card p,
.s-product-card-content-sub,
.product-block p {
  color: var(--time-text-soft) !important;
}


/* ---------- 19. السعر ---------- */

.product-price,
.price,
.s-product-card-price,
.s-product-card-sale-price {
  color: var(--time-gold-light) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.old-price,
.before-price,
.s-product-card-regular-price {
  color: #716d65 !important;
  text-decoration-color: #8c4f48 !important;
}


/* ---------- 20. شارات الخصم ---------- */

.badge,
.sale-badge,
.offer-badge,
.s-product-card-promotion-title,
.s-product-card-promotion-title {
  color: #0b0b0a !important;
  background: var(--time-gold-light) !important;
  border: 0 !important;
  border-radius: 0 !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 7px 10px !important;
}


/* ---------- 21. أزرار الشراء ---------- */

.btn-primary,
.button-primary,
.add-to-cart,
salla-add-product-button button,
.s-button-primary,
button[type="submit"],
.product-form button {
  color: #0b0b0a !important;
  background:
    linear-gradient(
      135deg,
      var(--time-gold-light),
      var(--time-gold)
    ) !important;

  border: 1px solid var(--time-gold) !important;
  border-radius: 0 !important;

  min-height: 48px;
  font-weight: 700 !important;

  box-shadow:
    0 10px 30px rgba(185, 154, 98, 0.13) !important;

  transition:
    transform var(--time-transition),
    background var(--time-transition),
    box-shadow var(--time-transition) !important;
}

.btn-primary:hover,
.button-primary:hover,
.add-to-cart:hover,
salla-add-product-button button:hover,
.s-button-primary:hover,
button[type="submit"]:hover,
.product-form button:hover {
  color: var(--time-gold-light) !important;
  background: transparent !important;

  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.4) !important;

  transform: translateY(-2px);
}


/* ---------- 22. الأزرار الثانوية ---------- */

.btn-secondary,
.button-secondary,
.s-button-outline,
.btn-outline,
button[class*="outline"] {
  color: var(--time-text) !important;
  background: transparent !important;

  border: 1px solid var(--time-border) !important;
  border-radius: 0 !important;
}

.btn-secondary:hover,
.button-secondary:hover,
.s-button-outline:hover,
.btn-outline:hover {
  color: var(--time-gold-light) !important;
  border-color: var(--time-gold) !important;
  background: rgba(185, 154, 98, 0.05) !important;
}


/* ---------- 23. زر المفضلة ---------- */

.add-to-wishlist,
.wishlist,
.s-product-card-wishlist-btn,
button[aria-label*="المفضلة"] {
  color: var(--time-text) !important;
  background: rgba(10, 10, 10, 0.76) !important;

  border: 1px solid var(--time-border) !important;
  border-radius: 50% !important;

  backdrop-filter: blur(8px);
}

.add-to-wishlist:hover,
.wishlist:hover,
.s-product-card-wishlist-btn:hover {
  color: var(--time-gold-light) !important;
  border-color: var(--time-gold) !important;
  transform: scale(1.07);
}


/* ---------- 24. فلترة وترتيب المنتجات ---------- */

select,
.form-select,
.products-sort select,
.s-select-input,
.filter-button,
.filters-trigger {
  color: var(--time-text) !important;
  background: #121210 !important;

  border: 1px solid var(--time-border) !important;
  border-radius: 0 !important;

  min-height: 46px;
}

select:focus,
.form-select:focus,
.s-select-input:focus {
  border-color: var(--time-gold) !important;
  box-shadow: none !important;
}


/* ---------- 25. صفحة المنتج ---------- */

.product-page,
.product-details-page,
.single-product,
.product-single {
  background: transparent !important;
}

.product-gallery,
.product-images,
.product-slider {
  background:
    linear-gradient(
      145deg,
      #181713,
      #0d0d0c
    ) !important;

  border: 1px solid rgba(185, 154, 98, 0.14) !important;
}

.product-gallery img,
.product-images img,
.product-slider img {
  filter:
    contrast(1.03)
    saturate(0.93);
}

.product-title,
.product-details h1,
.single-product h1,
.product-single h1 {
  color: var(--time-text) !important;
  font-size: clamp(29px, 4vw, 49px) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

.product-description,
.product-description *,
.product-details .description,
.product-summary {
  color: var(--time-text-soft) !important;
  line-height: 2 !important;
}

.product-option,
.product-options,
.product-form {
  border-color: var(--time-border) !important;
}


/* ---------- 26. خيارات المقاسات والخامات ---------- */

.product-option label,
.product-options label,
.s-form-control label {
  color: var(--time-text) !important;
}

.product-option input + span,
.product-options input + span,
.radio-images label,
.variant-option {
  color: var(--time-text-soft) !important;
  background: #121210 !important;

  border: 1px solid var(--time-border) !important;
  border-radius: 0 !important;

  transition: all var(--time-transition);
}

.product-option input:checked + span,
.product-options input:checked + span,
.radio-images input:checked + label,
.variant-option.active {
  color: var(--time-gold-light) !important;
  border-color: var(--time-gold) !important;
  background: rgba(185, 154, 98, 0.08) !important;
}


/* ---------- 27. حقول الإدخال ---------- */

input,
textarea,
.form-control,
.s-form-control,
.s-form-control-input {
  color: var(--time-text) !important;
  background: #121210 !important;

  border: 1px solid var(--time-border) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #716d65 !important;
}

input:focus,
textarea:focus,
.form-control:focus,
.s-form-control-input:focus {
  border-color: var(--time-gold) !important;

  box-shadow:
    0 0 0 3px rgba(185, 154, 98, 0.07) !important;
}


/* ---------- 28. المميزات ---------- */

.features,
.store-features,
.feature-item,
.features-list,
.home-features {
  background: transparent !important;
}

.feature-item,
.features .feature,
.store-features > div,
.home-features > div {
  background:
    linear-gradient(
      145deg,
      rgba(26, 25, 21, 0.92),
      rgba(12, 12, 11, 0.95)
    ) !important;

  border: 1px solid var(--time-border) !important;
  border-radius: 0 !important;

  padding: 30px 22px !important;
  transition:
    transform var(--time-transition),
    border-color var(--time-transition);
}

.feature-item:hover,
.features .feature:hover,
.store-features > div:hover,
.home-features > div:hover {
  transform: translateY(-5px);
  border-color: rgba(185, 154, 98, 0.48) !important;
}

.feature-item h3,
.features h3,
.store-features h3,
.home-features h3 {
  color: var(--time-text) !important;
}

.feature-item p,
.features p,
.store-features p,
.home-features p {
  color: var(--time-text-soft) !important;
}

.feature-item svg,
.features svg,
.store-features svg,
.home-features svg {
  color: var(--time-gold) !important;
}


/* ---------- 29. آراء العملاء ---------- */

.testimonials,
.reviews-section,
.customer-reviews,
.testimonial-slider {
  background:
    linear-gradient(
      180deg,
      rgba(185, 154, 98, 0.025),
      rgba(0, 0, 0, 0)
    ) !important;
}

.testimonial,
.review-card,
.customer-review,
.testimonial-item {
  background:
    linear-gradient(
      145deg,
      #171612,
      #0d0d0c
    ) !important;

  color: var(--time-text) !important;

  border: 1px solid var(--time-border) !important;
  border-radius: 0 !important;

  box-shadow:
    0 25px 55px rgba(0, 0, 0, 0.19) !important;
}

.testimonial p,
.review-card p,
.customer-review p,
.testimonial-item p {
  color: var(--time-text-soft) !important;
  line-height: 1.9 !important;
}

.testimonial h4,
.review-card h4,
.customer-review h4 {
  color: var(--time-text) !important;
}

.stars,
.rating,
.s-rating-stars,
.star {
  color: var(--time-gold-light) !important;
}


/* ---------- 30. الأسئلة الشائعة ---------- */

.faq,
.faq-section,
.accordion,
.s-accordion {
  background: transparent !important;
}

.accordion-item,
.faq-item,
.s-accordion-item {
  background: #11110f !important;

  border: 1px solid var(--time-border) !important;
  border-radius: 0 !important;

  margin-bottom: 12px !important;
  overflow: hidden;
}

.accordion-header,
.accordion-button,
.faq-question,
.s-accordion-header {
  color: var(--time-text) !important;
  background: #11110f !important;
  font-weight: 600 !important;
}

.accordion-button:hover,
.faq-question:hover,
.s-accordion-header:hover {
  color: var(--time-gold-light) !important;
}

.accordion-body,
.faq-answer,
.s-accordion-content {
  color: var(--time-text-soft) !important;
  background: #0c0c0b !important;
  line-height: 2 !important;

  border-top: 1px solid var(--time-border) !important;
}


/* ---------- 31. السلة الجانبية ---------- */

.cart-drawer,
.mini-cart,
.s-cart-summary,
salla-cart-summary,
.cart-sidebar {
  color: var(--time-text) !important;
  background: #0d0d0c !important;
  border-color: var(--time-border) !important;
}

.cart-drawer *,
.mini-cart *,
.s-cart-summary *,
.cart-sidebar * {
  border-color: var(--time-border);
}

.cart-drawer h3,
.mini-cart h3,
.s-cart-summary h3 {
  color: var(--time-text) !important;
}


/* ---------- 32. النوافذ المنبثقة ---------- */

.modal-content,
.s-modal-wrapper,
.popup-content,
.dialog-content {
  color: var(--time-text) !important;
  background: #10100f !important;

  border: 1px solid var(--time-border) !important;
  border-radius: 0 !important;

  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.7) !important;
}


/* ---------- 33. الفوتر ---------- */

footer,
.store-footer,
.footer-main,
.footer,
.s-footer {
  color: var(--time-text-soft) !important;
  background:
    linear-gradient(
      180deg,
      #090909,
      #030303
    ) !important;

  border-top: 1px solid var(--time-border) !important;
}

footer h3,
footer h4,
footer .footer-title,
.store-footer h3,
.s-footer h3 {
  color: var(--time-text) !important;
}

footer a,
.store-footer a,
.s-footer a {
  color: #aaa397 !important;
}

footer a:hover,
.store-footer a:hover,
.s-footer a:hover {
  color: var(--time-gold-light) !important;
  padding-right: 4px;
}

footer p,
.store-footer p,
.s-footer p {
  color: #918b80 !important;
  line-height: 1.9 !important;
}

footer::before,
.store-footer::before {
  content: "";
  display: block;

  width: min(92%, 1200px);
  height: 1px;

  margin: 0 auto 45px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--time-gold-dark),
      transparent
    );
}


/* ---------- 34. زر واتساب ---------- */

.whatsapp-button,
.whatsapp,
a[href*="wa.me"],
a[href*="whatsapp"] {
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.38) !important;

  transition:
    transform var(--time-transition),
    filter var(--time-transition);
}

.whatsapp-button:hover,
.whatsapp:hover,
a[href*="wa.me"]:hover,
a[href*="whatsapp"]:hover {
  transform: translateY(-4px) scale(1.03);
  filter: brightness(0.9);
}


/* ---------- 35. شريط التمرير ---------- */

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: #050505;
}

::-webkit-scrollbar-thumb {
  background: #50452f;
  border: 2px solid #050505;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--time-gold);
}


/* ---------- 36. حركة ظهور هادئة ---------- */

@keyframes timeArtReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.product-card,
.product-entry,
.s-product-card-entry,
.feature-item,
.review-card,
.testimonial-item,
.faq-item {
  animation: timeArtReveal 0.75s ease both;
}


/* ---------- 37. تأثير إضاءة فنية على الأقسام ---------- */

.products-slider,
.featured-products,
.latest-products,
.category-products {
  position: relative;
}

.products-slider::before,
.featured-products::before,
.latest-products::before,
.category-products::before {
  content: "";
  position: absolute;

  top: 0;
  right: 50%;

  width: 450px;
  height: 230px;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(185, 154, 98, 0.055),
      transparent 68%
    );

  transform: translateX(50%);
}


/* ---------- 38. الجوال ---------- */

@media (max-width: 768px) {

  section {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  header,
  .main-header,
  .store-header {
    background: rgba(8, 8, 8, 0.97) !important;
  }

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

  .section-title,
  .component-title,
  .section-header h2,
  section h2,
  .page-title {
    font-size: 27px !important;
  }

  .products-grid,
  .product-grid,
  .grid-products {
    gap: 24px 10px !important;
  }

  .product-entry .product-details,
  .product-card .product-details,
  .s-product-card-content {
    padding: 13px 2px 5px !important;
  }

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

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

  .feature-item,
  .features .feature,
  .store-features > div {
    padding: 24px 18px !important;
  }

  .main-slider img,
  .hero img,
  .hero-section img {
    min-height: 410px;
    object-fit: cover;
  }

  .btn-primary,
  .add-to-cart,
  salla-add-product-button button {
    min-height: 46px;
    font-size: 14px !important;
  }
}


/* ---------- 39. تقليل الحركة لمن يفضل ذلك ---------- */

@media (prefers-reduced-motion: reduce) {

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