/* ============================================================
   SAHARA BRAND  —  Qamra information page
   ------------------------------------------------------------
   Page   : https://qamra.sa/صحارى/page-1588506108
   Anchor : the page id in the canonical link. It never changes,
            so adding, removing or reordering sections cannot
            break this file.
   Install: تخصيص متقدم ← CSS, at the END of the existing code.
            Back up the current CSS field before pasting.
   Theme  : بِينْك 1049559847 v1.52.0 (store 894662730)
   Version: 9 — wishlist button fixed, .quicklinks hidden.
   ------------------------------------------------------------
   ADDING MORE SECTIONS
   Nothing below targets a category id, a section order or an
   nth-child. Every selector is a class the theme emits for each
   "منتجات ثابتة" element, so new sections inherit this styling
   with no extra CSS.
   ------------------------------------------------------------
   ON !important
   The theme writes colours inline on elements and as Tailwind
   utilities. Inline styles can only be beaten by !important,
   so it is used deliberately here — not as a shortcut.
   ============================================================ */


/* ============================================================
   1. TOKENS
   These also drive the nav bar in its sticky state.
   ============================================================ */
html:has(link[rel="canonical"][href*="page-1588506108"]) {
  --sahara-ink:    #1F1F1F;
  --sahara-ink-2:  #141414;
  --sahara-red:    #F24C4C;
  --sahara-amber:  #F6C000;
  --sahara-line:   #ECECEC;

  --color-mainnav-bg:                      #1F1F1F;
  --color-mainnav-color:                   #ffffff;
  --color-mainnav-color-in-bg-transparent: #ffffff;
}


/* ============================================================
   2. HEADER  →  dark
   ============================================================ */
html:has(link[rel="canonical"][href*="page-1588506108"]) .store-header,
html:has(link[rel="canonical"][href*="page-1588506108"]) #main-nav {
  background-color: #1F1F1F !important;
  color: #ffffff !important;
}

/* Main navigation bar — hidden on this page.
   NOTE: this removes desktop navigation entirely. Mobile is
   unaffected (the burger panel is a separate element).
   To bring it back, delete this rule. */
html:has(link[rel="canonical"][href*="page-1588506108"]) .quicklinks {
  display: none !important;
}

/* Kept for the mobile burger panel, which reuses these classes */
html:has(link[rel="canonical"][href*="page-1588506108"]) .quicklinks-item,
html:has(link[rel="canonical"][href*="page-1588506108"]) .main-menu-item > a,
html:has(link[rel="canonical"][href*="page-1588506108"]) .header-icon-button,
html:has(link[rel="canonical"][href*="page-1588506108"]) .header-icon-button p,
html:has(link[rel="canonical"][href*="page-1588506108"]) .header-icon-button span,
html:has(link[rel="canonical"][href*="page-1588506108"]) .header-icon-button i {
  color: #ffffff !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .quicklinks-item:hover,
html:has(link[rel="canonical"][href*="page-1588506108"]) .main-menu-item > a:hover {
  color: #F6C000 !important;
}

/* Logo is a dark wordmark → flip to white */
html:has(link[rel="canonical"][href*="page-1588506108"]) .navbar-brand img {
  filter: brightness(0) invert(1);
}

/* Cart icon svg carries a hard-coded stroke */
html:has(link[rel="canonical"][href*="page-1588506108"]) .header__icons svg path {
  stroke: #ffffff !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-cart-summary-total,
html:has(link[rel="canonical"][href*="page-1588506108"]) .s-cart-summary-total i {
  color: #ffffff !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-cart-summary-count {
  background-color: #F6C000 !important;
  color: #000000 !important;
}

/* Burger bars carry inline background-color:#333 */
html:has(link[rel="canonical"][href*="page-1588506108"]) .mburger span {
  background-color: #ffffff !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .header-rounded-btn {
  background: transparent !important;
  border-color: rgba(255,255,255,.25) !important;
  color: #ffffff !important;
}

/* Inline search field on the dark bar */
html:has(link[rel="canonical"][href*="page-1588506108"]) .header__search .s-search-input {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #ffffff !important;
  border-radius: 4px;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .header__search .s-search-input::placeholder {
  color: rgba(255,255,255,.55) !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .header__search .s-search-icon svg {
  fill: rgba(255,255,255,.7) !important;
}


/* ============================================================
   3. TOP MARQUEE  →  removed
   To keep it as a grey band instead, comment out this rule and
   uncomment the two below.
   ============================================================ */
html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block--marquee {
  display: none !important;
}

/*
html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block--marquee {
  background-color: #C1C1C1 !important;
  background-image: none !important;
  color: #1F1F1F !important;
}
html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block--marquee span {
  color: #1F1F1F !important;
  font-weight: 600;
}
*/


/* ============================================================
   4. SECTION SHELL + TITLE
   The theme centres titles with .!text-center, which compiles to
   text-align:center !important — beating it needs !important.
   ============================================================ */
html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block--fixed-products {
  padding-block: 40px;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block--fixed-products + .s-block--fixed-products {
  border-top: 1px solid #F2F2F2;
}

/* Title on the reading edge, "عرض الكل" opposite it */
html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: right !important;
  margin-bottom: 28px;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title .right-side {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex: 1;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title .left-side {
  width: auto !important;
  justify-content: flex-end !important;
  flex: 0 0 auto;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title h2 {
  text-align: right !important;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: #1F1F1F;
  margin: 0;
}

/* Amber rule under each section title */
html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  background: #F6C000;
  border-radius: 2px;
  margin-top: 12px;
}


/* ============================================================
   5. "عرض الكل" BUTTON  →  ink, red on hover
   The theme sets opacity:.8 on :hover for every button, which
   would wash the red out — hence opacity:1.
   ============================================================ */
html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title .s-button-element {
  background: rgb(31,31,31) !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px !important;
  opacity: 1 !important;
  transition: background .25s ease-out;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title .s-button-element:hover {
  background: #F24C4C !important;
  opacity: 1 !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title .arrow-icon {
  transition: transform .25s ease-out;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title .s-button-element:hover .arrow-icon {
  transform: translateX(-4px);
}


/* ============================================================
   6. LOADING SKELETON  →  removed
   The theme keeps a dummy .cards-placeholder grid in the DOM
   after the real products arrive. That is the phantom loading
   block. Real products render in a separate wrapper, so hiding
   this costs nothing.
   ============================================================ */
html:has(link[rel="canonical"][href*="page-1588506108"]) .s-products-list-wrapper.cards-placeholder {
  display: none !important;
}


/* ============================================================
   7. PRODUCT CARD
   Target custom-salla-product-card, not .product-entry — the
   skeleton items share that class.
   ============================================================ */
html:has(link[rel="canonical"][href*="page-1588506108"]) custom-salla-product-card {
  background: #ffffff;
  border: 1px solid #ECECEC;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .2s ease-out, transform .2s ease-out, border-color .2s ease-out;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) custom-salla-product-card:hover {
  border-color: #1F1F1F;
  box-shadow: 0 4px 10px rgba(153,153,153,.45);
  transform: translateY(-2px);
}

html:has(link[rel="canonical"][href*="page-1588506108"]) custom-salla-product-card .product-entry__image-main {
  background: #ffffff;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) custom-salla-product-card .product-entry__content {
  padding: 16px;
}


/* ---------- WISHLIST BUTTON ----------
   .product-entry-btn--wishlist sits on BOTH the <salla-button>
   wrapper and the real button inside it. The wrapper is a web
   component with no real box, so styling it produces a 15x15
   square glued to the icon — the hover glitch.
   Only .s-button-element is the real button. Same rule applies
   to every salla-button on the site. */
html:has(link[rel="canonical"][href*="page-1588506108"]) salla-button.product-entry-btn--wishlist {
  background: transparent !important;
  border: 0 !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry-btn--wishlist.s-button-element {
  width: 40px !important;
  height: 40px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid #ECECEC !important;
  border-radius: 50% !important;
  color: #1F1F1F !important;
  opacity: 1 !important;
  transition: background .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry-btn--wishlist.s-button-element:hover {
  background: #1F1F1F !important;
  border-color: #1F1F1F !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry-btn--wishlist.s-button-element .sicon-heart {
  color: inherit !important;
  font-size: 17px;
}


/* ============================================================
   8. CARD TEXT
   ============================================================ */
html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry__brand {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #8A8A8A !important;
  max-width: 100% !important;
  margin-bottom: 6px !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.4px;
  color: #1F1F1F;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry__title:hover {
  color: #F24C4C;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry__subtitle {
  font-size: 13px !important;
  color: #7A7A7A !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry__price {
  margin-top: 10px;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry__price .sale-price {
  font-size: 20px;
  font-weight: 800;
  color: #1F1F1F;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry__price .regular-price {
  font-size: 14px;
  color: #9A9A9A;
  text-decoration: line-through;
}


/* ============================================================
   9. ADD TO CART  →  ink, red on hover
   ============================================================ */
html:has(link[rel="canonical"][href*="page-1588506108"]) .btn--add-to-cart .s-button-element {
  background: rgb(31,31,31) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-weight: 700;
  opacity: 1 !important;
  transition: background .25s ease-out;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .btn--add-to-cart .s-button-element:hover {
  background: #F24C4C !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}


/* ============================================================
   10. EMPTY SECTIONS
   Lists that rendered products gain the class .s-products-list;
   empty ones do not. Uncomment to hide an empty section rather
   than show "لا توجد منتجات".
   A stopgap only — link the products to their categories.
   ============================================================ */
/*
html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block--fixed-products:has(salla-products-list:not(.s-products-list)) {
  display: none;
}
*/

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-products-list-placeholder {
  padding: 40px 0;
  color: #9A9A9A;
}


/* ============================================================
   11. FOOTER  →  dark
   ============================================================ */
html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer-wrap {
  background-color: #1F1F1F !important;
  background-image: none !important;
  color: #ffffff !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer-wrap h3,
html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer-wrap .s-contacts-title {
  color: #ffffff !important;
  font-weight: 700;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer-wrap a,
html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer-wrap span,
html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer-wrap p,
html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer-wrap b {
  color: #D6D6D6 !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer-wrap a:hover {
  color: #F6C000 !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer .text-center img[alt*="قمرا"] {
  filter: brightness(0) invert(1);
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer-wrap .widget {
  border-color: #333333 !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer__bottom-bar {
  background-color: #141414 !important;
  border-color: #333333 !important;
  border-radius: 6px !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .store-footer__bottom-bar p {
  color: #9A9A9A !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-contacts-icon {
  border-color: rgba(255,255,255,.25) !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-contacts-icon svg {
  fill: #D6D6D6 !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .progress-wrap {
  background-color: #F6C000 !important;
}


/* ---------- Social icons ----------
   ul.s-social-list > li.s-social-link > a > span.s-social-icon > svg
   IcoMoon paths carry no fill attribute, so they inherit
   currentColor: setting the link colour drives both states. */
html:has(link[rel="canonical"][href*="page-1588506108"]) .s-social-list {
  gap: 12px;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-social-link a {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #FFFFFF !important;
  border-radius: 50%;
  width: 42px !important;
  height: 42px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-social-icon {
  display: inline-flex;
  line-height: 0;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-social-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-social-icon svg path {
  fill: currentColor !important;
  stroke: none !important;
}

html:has(link[rel="canonical"][href*="page-1588506108"]) .s-social-link a:hover {
  background: #F6C000 !important;
  border-color: #F6C000 !important;
  color: #000000 !important;
  opacity: 1 !important;
}


/* ============================================================
   12. RESPONSIVE
   The theme's grid already steps 4 → 3 → 2 columns, so only the
   type and spacing need adjusting.
   ============================================================ */
@media (max-width: 768px) {
  html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block--fixed-products {
    padding-block: 28px;
  }
  html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title .left-side {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  html:has(link[rel="canonical"][href*="page-1588506108"]) .s-block__title h2 {
    font-size: 22px;
  }
  html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry__title {
    font-size: 14px;
  }
  html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry__price .sale-price {
    font-size: 17px;
  }
  html:has(link[rel="canonical"][href*="page-1588506108"]) .product-entry-btn--wishlist.s-button-element {
    width: 34px !important;
    height: 34px !important;
  }
  html:has(link[rel="canonical"][href*="page-1588506108"]) .s-social-link a {
    width: 38px !important;
    height: 38px !important;
  }
  html:has(link[rel="canonical"][href*="page-1588506108"]) .s-social-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ============================================================
   قسم وصفات الشواء — موزاييك
   ============================================================ */
.sahara-cook {
  background: #1F1F1F;
  padding: 64px 0;
  overflow: hidden;
  margin-block: 40px;
}

.sahara-cook__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: center;
  gap: 40px;
}

/* ---------- النص ---------- */
.sahara-cook__text h2 {
  color: #ffffff;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 0 0 14px;
}

.sahara-cook__text p {
  color: #C9C9C9;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 28px;
  max-width: 34ch;
}

.sahara-cook__btn {
  display: inline-block;
  background: #ffffff;
  color: #1F1F1F;
  font-weight: 800;
  font-size: 15px;
  padding: 16px 36px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .25s ease-out, color .25s ease-out;
}

.sahara-cook__btn:hover {
  background: #F24C4C;
  color: #ffffff;
}

/* ---------- الموزاييك ---------- */
.sahara-cook__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sahara-cook__grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  transition: transform .35s ease-out;
}

.sahara-cook__grid img:hover {
  transform: scale(1.04);
}

/* الصف الأوسط مزاح — هذا ما يعطي الإحساس بالموزاييك
   بدلاً من شبكة جامدة. الصورة السادسة تُقصّ عند الحافة. */
.sahara-cook__grid img:nth-child(4),
.sahara-cook__grid img:nth-child(5),
.sahara-cook__grid img:nth-child(6) {
  transform: translateX(-9%);
}

.sahara-cook__grid img:nth-child(4):hover,
.sahara-cook__grid img:nth-child(5):hover,
.sahara-cook__grid img:nth-child(6):hover {
  transform: translateX(-9%) scale(1.04);
}

/* ---------- الاستجابة ---------- */
@media (max-width: 1024px) {
  .sahara-cook__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sahara-cook__text h2 { font-size: 30px; }
  .sahara-cook__text p  { max-width: 100%; }
}

@media (max-width: 768px) {
  .sahara-cook { padding: 40px 0; }
  .sahara-cook__text h2 { font-size: 24px; }
  .sahara-cook__grid { gap: 10px; }
  .sahara-cook__grid img { border-radius: 8px; }

  /* ست صور تكفي على الجوال — التسعة تصبح صغيرة بلا فائدة */
  .sahara-cook__grid img:nth-child(n+7) { display: none; }

  .sahara-cook__grid img:nth-child(4),
  .sahara-cook__grid img:nth-child(5),
  .sahara-cook__grid img:nth-child(6) {
    transform: none;
  }
}


/* ============================================================
   END — SAHARA BRAND
   ============================================================ */