/* ========================================
   خُلّة HÜLLA — نسخة موحّدة
   الخلفية: بيج
   الأزرار: وردي بنص داكن
   العناوين: زيتوني داكن
   ======================================== */

:root {
  --hulla-bg: #E8DDD3;
  --hulla-rose: #C48A85;
  --hulla-olive: #697466;
  --hulla-heading: #35443A;
  --hulla-text: #454941;
  --hulla-surface: #FFFDFB;
  --hulla-border: rgba(53, 68, 58, 0.16);
  --hulla-shadow: 0 5px 18px rgba(53, 68, 58, 0.07);
}

/* خلفية المتجر */
body {
  background-color: var(--hulla-bg);
}

/* ========================================
   الهيدر وشريط التنقل
   المحددات البديلة تحتاج مطابقة مع الثيم
   ======================================== */

body .store-header,
body .main-nav-container,
body .main-nav-container .inner,
body #mainnav,
body #mainnav .inner,
body .top-navbar {
  background-color: var(--hulla-bg) !important;
}

body .main-nav-container {
  border-bottom: 1px solid var(--hulla-border);
}

body .main-menu > li > a,
body .top-navbar a {
  color: var(--hulla-heading);
}

/* حجم شعار الهيدر؛ لا يغيّر صور البنرات */
body .navbar-brand img {
  width: auto;
  height: auto;
  max-height: 64px;
  max-width: 150px;
  object-fit: contain;
}

/* ========================================
   عناوين الأقسام والمنتجات
   ======================================== */

body .s-block__title h2,
body .product-single__title,
body .s-product-card-content-title a {
  color: var(--hulla-heading);
  line-height: 1.65;
}

body .s-product-card-content-title a {
  text-decoration: none;
}

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

body .s-product-card-entry {
  background-color: var(--hulla-surface);
  border: 1px solid var(--hulla-border);
  border-radius: 16px;
  box-shadow: var(--hulla-shadow);
  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    border-color 240ms ease;
}

body .s-product-card-entry .s-product-card-image {
  overflow: hidden;
  border-radius: 15px 15px 0 0;
}

body .s-product-card-entry .s-product-card-image img {
  transition: transform 450ms ease;
}

/* ========================================
   أزرار الإضافة إلى السلة
   نحافظ على أزرار الدفع والشارات بألوانها
   ======================================== */

body salla-add-product-button :is(
  .s-button-primary,
  .s-button-outline
) {
  background-color: var(--hulla-rose) !important;
  border-color: var(--hulla-rose) !important;
  color: #292D27 !important;
  border-radius: 12px;
  min-height: 46px;
  font-weight: 700;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

/* النص والأيقونة داخل زر الإضافة */
body salla-add-product-button :is(
  .s-button-primary,
  .s-button-outline
) :is(.s-button-text, .s-button-wrap, i) {
  color: inherit !important;
}

/* تركيز واضح عند استخدام لوحة المفاتيح */
body salla-add-product-button :is(
  .s-button-primary,
  .s-button-outline
):focus-visible {
  outline: 3px solid var(--hulla-heading);
  outline-offset: 3px;
}

/* ========================================
   البنرات — دون تغيير أبعاد الصور
   ======================================== */

body .banner-entry {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--hulla-shadow);
}

/* ========================================
   نهاية الصفحة
   ======================================== */

body .store-footer,
body .store-footer .store-footer__inner,
body .store-footer .store-footer__bottom,
body .store-footer .footer-bottom {
  background-color: var(--hulla-bg) !important;
  color: var(--hulla-text);
}

body .store-footer {
  border-top: 1px solid var(--hulla-border);
}

body .store-footer .store-footer__inner {
  padding-block: 40px;
}

body .store-footer :is(h2, h3, h4) {
  color: var(--hulla-heading) !important;
}

body .store-footer :is(p, li, a) {
  color: var(--hulla-text);
}

body .store-footer a {
  text-underline-offset: 4px;
}

body .store-footer a:focus-visible {
  outline: 2px solid var(--hulla-heading);
  outline-offset: 4px;
}

/* ========================================
   حركات ناعمة للأجهزة التي تدعم المؤشر
   ======================================== */

@media (hover: hover) and (pointer: fine) {
  body .s-product-card-entry:hover {
    transform: translateY(-4px);
    border-color: var(--hulla-rose);
    box-shadow: 0 12px 28px rgba(53, 68, 58, 0.13);
  }

  body .s-product-card-entry:hover .s-product-card-image img {
    transform: scale(1.03);
  }

  body salla-add-product-button :is(
    .s-button-primary,
    .s-button-outline
  ):not(:disabled):not([aria-disabled="true"]):hover {
    background-color: #CD9A95 !important;
    border-color: #CD9A95 !important;
    box-shadow: 0 5px 14px rgba(53, 68, 58, 0.15);
  }

  body .store-footer a:hover {
    text-decoration: underline;
  }
}

/* الجوال */
@media (max-width: 767px) {
  body .navbar-brand img {
    max-height: 48px;
    max-width: 120px;
  }

  body .store-footer .store-footer__inner {
    padding-block: 28px;
  }
}

/* احترام إعداد تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  body .s-product-card-entry,
  body .s-product-card-entry .s-product-card-image img,
  body salla-add-product-button :is(
    .s-button-primary,
    .s-button-outline
  ) {
    transition: none !important;
    transform: none !important;
  }
}