/* =====================================================================
   واجهة نصف القمر — طبقة CSS فوق قالب «رائد» في سلة
   تُلصق في: سلة ← المتجر ← تصميم المتجر ← إعدادات القالب ← CSS مخصص
   تُلغى بحذفها كاملة. لا تغيّر شيئاً في بيانات المتجر.
   ===================================================================== */

/* ── الألوان (من ملف التصميم) ───────────────────────────────────────── */
:root {
  --color-primary: #2BBBB2;
  --color-primary-dark: #1E9B93;
  --color-primary-light: #5FD0C9;
  --color-primary-reverse: #FFFFFF;

  --nsf-teal: #2BBBB2;
  --nsf-teal-dark: #1E9B93;
  --nsf-page: #E7F5F5;
  --nsf-ink: #383435;
  --nsf-muted: #6E7778;
  --nsf-pink: #F08AA8;
  --nsf-pink-soft: #FCE5ED;
  --nsf-yellow: #F9D38A;
  --nsf-yellow-soft: #FEF2D8;
  --nsf-cream: #F9FBEE;
  --nsf-card: #FFFFFF;
  --nsf-line: #DCEEED;
  --nsf-radius: 18px;
  --nsf-radius-sm: 12px;

  /* نقش البتلات: أربع بتلات حول مركز، فيروزي ووردي وأصفر على كريمي */
  --nsf-pattern: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%20viewBox='0%200%2056%2056'%3E%3Crect%20width='56'%20height='56'%20fill='%23F9FBEE'/%3E%3Cpath%20d='M28%2028A22%2022%200%200%201%2056%200A22%2022%200%200%201%2028%2028Z'%20fill='%232BBBB2'/%3E%3Cpath%20d='M28%2028A22%2022%200%200%201%2056%2056A22%2022%200%200%201%2028%2028Z'%20fill='%23F9D38A'/%3E%3Cpath%20d='M28%2028A22%2022%200%200%201%200%2056A22%2022%200%200%201%2028%2028Z'%20fill='%23F08AA8'/%3E%3Cpath%20d='M28%2028A22%2022%200%200%201%200%200A22%2022%200%200%201%2028%2028Z'%20fill='%23F9D38A'/%3E%3C/svg%3E");
}

/* ── الصفحة ─────────────────────────────────────────────────────────── */
body.theme-raed { background: var(--nsf-page) !important; color: var(--nsf-ink); }

/* ── الترويسة ───────────────────────────────────────────────────────── */
/* شريط النقش فوق الشريط الداكن */
.store-header::before {
  content: ""; display: block; height: 14px;
  background: var(--nsf-pattern) repeat-x; background-size: 28px 28px;
}
.store-header .top-navbar { background: var(--nsf-ink) !important; }
.store-header .top-navbar, .store-header .top-navbar a { color: #fff; }

/* الشريط الرئيسي أبيض بنصوص داكنة، كما في التصميم */
#mainnav, #mainnav .inner { background: #fff !important; box-shadow: 0 1px 0 var(--nsf-line) !important; }
#mainnav, #mainnav a, #mainnav .main-menu > li > a, #mainnav .sicon-menu { color: var(--nsf-ink) !important; }
#mainnav .main-menu > li > a:hover { color: var(--nsf-teal) !important; }

/* الشعار أبيض في المتجر، فيُلوَّن فيروزياً على الشريط الأبيض وحده (لا يمسّ الشعار المرفوع) */
#mainnav .navbar-brand img {
  filter: brightness(0) saturate(100%) invert(63%) sepia(54%) saturate(497%) hue-rotate(126deg) brightness(92%) contrast(88%);
}

/* البحث: حبة مستديرة بحدّ ناعم */
.header-search input, .header-search .s-search-input {
  border-radius: 999px !important; border: 1px solid var(--nsf-line) !important;
  background: #F4FAFA !important; color: var(--nsf-ink) !important;
}

/* السلة: دائرة فيروزية */
.header-btn__icon, #mainnav salla-cart-summary .s-cart-summary-wrapper,
#mainnav .s-cart-summary-icon {
  background: var(--nsf-teal) !important; color: #fff !important; border-radius: 999px !important;
}
.s-cart-summary-count { background: var(--nsf-ink) !important; color: #fff !important; }

/* ── عناوين الأقسام ────────────────────────────────────────────────── */
.s-block__title h2, .s-block__title .s-slider-block__title-right h2 {
  color: var(--nsf-ink) !important; font-weight: 700;
}
.s-block__display-all, .s-block__title a { color: var(--nsf-teal) !important; font-weight: 600; }

/* ── بطاقة المنتج ──────────────────────────────────────────────────── */
custom-salla-product-card.s-product-card-entry {
  background: var(--nsf-card) !important; border: 0 !important;
  border-radius: var(--nsf-radius) !important; box-shadow: none !important;
  padding: 8px !important; overflow: hidden;
}
custom-salla-product-card .s-product-card-image {
  background: #FFFFFF !important; border-radius: calc(var(--nsf-radius) - 6px) !important; overflow: hidden;
}
custom-salla-product-card .s-product-card-content-title a { color: var(--nsf-ink) !important; font-weight: 600; }
custom-salla-product-card .s-product-card-content-subtitle { color: var(--nsf-muted) !important; }
custom-salla-product-card .s-product-card-price { color: var(--nsf-ink) !important; font-weight: 700; }
custom-salla-product-card .s-product-card-sale-price h4, custom-salla-product-card .s-product-card-sale-price span { color: var(--nsf-ink) !important; }
custom-salla-product-card .s-product-card-sale-price .before-price,
custom-salla-product-card .s-product-card-sale-price del { color: var(--nsf-muted) !important; }

/* الشارة الترويجية (خصم/جديد): حبة وردية */
custom-salla-product-card .s-product-card-promotion-title {
  background: var(--nsf-pink) !important; color: #fff !important;
  border-radius: 999px !important; padding: 2px 10px !important; font-weight: 700;
}

/* القلب: دائرة بيضاء صغيرة */
custom-salla-product-card .s-product-card-wishlist-btn button,
custom-salla-product-card button.s-product-card-wishlist-btn {
  background: #fff !important; border: 0 !important; border-radius: 999px !important; color: var(--nsf-ink) !important;
}

/* زر الإضافة: حبة فيروزية مستديرة */
custom-salla-product-card salla-add-product-button button.s-button-element {
  background: var(--nsf-teal) !important; border-color: var(--nsf-teal) !important;
  color: #fff !important; border-radius: 999px !important; font-weight: 700;
}
custom-salla-product-card salla-add-product-button button.s-button-element:hover {
  background: var(--nsf-teal-dark) !important; border-color: var(--nsf-teal-dark) !important;
}
/* نفد المخزون: هادئ لا فيروزي */
custom-salla-product-card salla-add-product-button button.s-button-element[disabled],
custom-salla-product-card salla-add-product-button button.s-button-disabled {
  background: #EEF2F2 !important; border-color: #EEF2F2 !important; color: var(--nsf-muted) !important;
}

/* ── الأقسام الملوّنة والبانرات ────────────────────────────────────── */
.s-block--fixed-banner img, .s-block--fixed-banner a { border-radius: var(--nsf-radius) !important; overflow: hidden; }


/* البانر الرئيسي داخل إطار من النقش، كما في «كنوز العطارة الأصيلة» في التصميم */
.s-block--bundle-hero-slider {
  background: var(--nsf-pattern) repeat !important; background-size: 64px 64px !important;
  padding: 22px !important; border-radius: var(--nsf-radius); margin: 16px auto 0 !important; max-width: 1280px;
}
.s-block--bundle-hero-slider > * { border-radius: calc(var(--nsf-radius) - 4px); overflow: hidden; }
@media (max-width: 640px) {
  .s-block--bundle-hero-slider { padding: 10px !important; margin: 10px 10px 0 !important; }
}

/* ── آراء العملاء ──────────────────────────────────────────────────── */
.s-block--testimonials .swiper-slide > div, .s-block--testimonials .s-reviews-item,
.s-block--testimonials salla-reviews .s-reviews-testimonial {
  background: #fff !important; border: 0 !important; border-radius: var(--nsf-radius) !important; box-shadow: none !important;
}
.s-block--testimonials .sicon-star2, .s-block--testimonials .s-rating-stars-selected { color: var(--nsf-yellow) !important; }

/* ── التذييل ───────────────────────────────────────────────────────── */
.store-footer { background: var(--nsf-ink) !important; position: relative; }
.store-footer::before {
  content: ""; display: block; height: 14px;
  background: var(--nsf-pattern) repeat-x; background-size: 28px 28px;
}
.store-footer .store-footer__inner, .store-footer > div { background: var(--nsf-ink) !important; }
/* The copyright row: the theme paints it from a stronger rule in its own stylesheet. */
html body.theme-raed footer.store-footer > div.container:last-child,
html body.theme-raed.footer-is-dark footer.store-footer > div.container {
  background-color: var(--nsf-ink) !important; border-top: 1px solid rgba(255,255,255,.08);
}
.store-footer .store-footer__inner::before, .store-footer .store-footer__inner::after { display: none !important; }
.store-footer, .store-footer a, .store-footer h3, .store-footer p, .store-footer span { color: #EDEDED !important; }
.store-footer a:hover { color: var(--nsf-yellow) !important; }

/* ── الأزرار العامة ─────────────────────────────────────────────────── */
.btn--primary, .s-button-primary {
  border-radius: 999px !important;
}

/* ── Shop by section tiles (square images component): on a phone the large tile keeps
   its own proportions, so its name, line and button are not cropped (2026-10-21). ── */
@media (max-width: 767px) {
  .s-block--banners .banner-entry:first-child { height: auto !important; aspect-ratio: 399 / 432; }
}
/* ── Compact product cards in the homepage product rows (2026-10-21, the design's cards):
   name and line on top, then the price and a round add button on one row. Out-of-stock
   keeps its words, as a small pill. ── */
.s-block--best-offers .s-product-card-content { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
.s-block--best-offers .s-product-card-content-main { grid-column: 1 / -1; }
.s-block--best-offers .s-product-card-content-sub { grid-column: 1; margin: 0 !important; }
.s-block--best-offers .s-product-card-content-footer { grid-column: 2; margin: 0 !important; width: auto !important; }
.s-block--best-offers .s-product-card-content-footer salla-add-product-button,
.s-block--best-offers .s-product-card-content-footer salla-add-product-button > div { width: auto !important; }
.s-block--best-offers .s-product-card-content-footer .s-button-element:not([disabled]) {
  width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important;
  border-radius: 50% !important; font-size: 0 !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
.s-block--best-offers .s-product-card-content-footer .s-button-element:not([disabled]) > * { display: none !important; }
.s-block--best-offers .s-product-card-content-footer .s-button-element:not([disabled])::before {
  content: "+"; font-size: 24px; font-weight: 700; line-height: 1;
}
.s-block--best-offers .s-product-card-content-footer .s-button-element[disabled] {
  width: auto !important; padding: 6px 12px !important; font-size: 12px !important; border-radius: 999px !important;
}
/* ── Header as in the design (2026-10-21): on a computer the logo, a wide search and the
   icons on one row, the menu on its own row under them, the dark strip with the contacts
   above; on a phone the search goes under the logo row on white. CSS only: the theme's
   elements are laid out again, none is added or removed. ── */
@media (min-width: 1024px) {
  .store-header {
    display: grid !important; position: relative; isolation: isolate; background: #fff;
    grid-template-columns:
      [full-start] minmax(10px, calc((100% - 1260px) / 2)) [c-start] auto minmax(0, 1fr) auto [c-end]
      minmax(10px, calc((100% - 1260px) / 2)) [full-end];
    box-shadow: 0 1px 0 var(--nsf-line);
  }
  .store-header::before { grid-row: 1; grid-column: full; }
  .store-header::after { content: ""; grid-row: 2; grid-column: full; background: var(--nsf-ink); z-index: -1; }
  .store-header > .lg\:hidden { display: none !important; }
  .store-header .top-navbar, .store-header .top-navbar > .container,
  .store-header .top-navbar > .container > .flex-1,
  #mainnav, #mainnav > .inner, #mainnav > .inner > .container,
  #mainnav > .inner > .container > div, #mainnav > .inner > .container > div > div:first-child {
    display: contents !important;
  }
  .store-header .top-navbar .header-buttons, .store-header .top-navbar .hidden.lg\:block { grid-row: 2; grid-column: c; }
  .store-header .top-navbar salla-contacts {
    grid-row: 2; grid-column: c; justify-self: end; align-self: center; min-height: 40px; display: flex; align-items: center;
  }
  .store-header .header-search { grid-row: 3; grid-column: 3; align-self: center; justify-self: center; width: calc(100% - 64px); max-width: 640px; }
  .store-header .header-search input, .store-header .header-search .s-search-input { height: 46px !important; }
  #mainnav .navbar-brand { grid-row: 3; grid-column: 2; align-self: center; padding-block: 14px; }
  #mainnav > .inner > .container > div > div:last-child { grid-row: 3; grid-column: 4; align-self: center; margin: 0 !important; }
  #mainnav custom-main-menu { grid-row: 4; grid-column: c; border-top: 1px solid var(--nsf-line); }
  #mainnav custom-main-menu nav, #mainnav .main-menu { height: auto !important; min-height: 52px; }
}
@media (max-width: 1023px) {
  .store-header { display: flex !important; flex-direction: column; background: #fff; }
  .store-header::before { order: -2; }
  .store-header #mainnav { order: 1; box-shadow: none !important; }
  html body .store-header .top-navbar, html body .store-header .top-navbar > .container { order: 2; background: #fff !important; padding-bottom: 10px; box-shadow: 0 1px 0 var(--nsf-line); }
  .store-header > .lg\:hidden { order: 3; }
}

/* ── Spacing (2026-10-21): the two HTML sections sit in the page's column like every other
   section, the main banner comes up under the header, and the features strip stays close
   to the banner as in the design. ── */
.s-block--bundle-html-content { max-width: 1280px; margin-inline: auto; padding-inline: 10px; }
.s-block--bundle-html-content [style*="max-width: 1200px"] { max-width: none !important; }
main > section.s-block:first-of-type { margin-top: 24px !important; }
main > section.s-block:first-of-type + .s-block--bundle-html-content { margin-top: 16px !important; }
/* Its inner block carries the theme's own section margin too, which would collapse back to 64px. */
main > section.s-block:first-of-type + .s-block--bundle-html-content > .s-block { margin-top: 0 !important; }
@media (max-width: 767px) {
  main > section.s-block:first-of-type { margin-top: 12px !important; }
  main > section.s-block:first-of-type + .s-block--bundle-html-content { margin-top: 12px !important; }
  /* The four features two by two, icon above the words, instead of four tall rows. */
  .s-block--bundle-html-content [style*="min-width: 250px"] {
    min-width: 46% !important; flex-direction: column !important; text-align: center !important; padding: 12px 6px !important;
  }
  .s-block--bundle-html-content [style*="min-width: 250px"] > div:first-child { margin: 0 0 8px !important; }
  .s-block--bundle-html-content [style*="min-width: 250px"] > div:last-child { text-align: center !important; }
  .s-block--bundle-html-content [style*="min-width: 250px"] [style*="nowrap"] { white-space: normal !important; }
}
/* ── Menu (2026-10-21): «تصفّح الأقسام» comes first as the dark pill with a menu mark, and
   «التخفيضات» is in the brand's deep pink, as in the design. Found by their links, so
   renaming them in the menu keeps the look. ── */
#mainnav .main-menu > li:has(> a[href="https://nsfalqamar.com/"]) { order: -1; }
/* The theme keeps an 84px-tall menu with a deep bottom padding on each link (room for drop-downs it
   does not have here); the menu row takes the links' own height instead. */
@media (min-width: 1024px) {
  #mainnav custom-main-menu, #mainnav custom-main-menu nav, #mainnav .main-menu { min-height: 0 !important; height: auto !important; }
  #mainnav .main-menu { padding: 6px 0 !important; margin-inline: 0 !important; }
  #mainnav .main-menu > li.root-level > a { padding: 10px 12px !important; }
}
@media (min-width: 1024px) {
  #mainnav .main-menu > li > a[href="https://nsfalqamar.com/"] {
    background: var(--nsf-ink) !important; color: #fff !important; border-radius: 999px !important;
    padding: 8px 18px !important; display: inline-flex !important; align-items: center; gap: 8px;
    align-self: center;
  }
  #mainnav .main-menu > li > a[href="https://nsfalqamar.com/"]:hover { background: #000 !important; color: #fff !important; }
  #mainnav .main-menu > li > a[href="https://nsfalqamar.com/"]::before { content: "\2630"; font-size: 15px; line-height: 1; }
}
#mainnav .main-menu > li > a[href="https://nsfalqamar.com/offers"] { color: #B73454 !important; }
/* On a phone the side menu is the list of sections itself, so the button would only lead home. */
@media (max-width: 1023px) {
  #mobile-menu .main-menu > li:has(> a[href="https://nsfalqamar.com/"]) { display: none !important; }
}