/* Add custom CSS styles below */

/* WAQAR — Luxury Styling v1 */

/* 1. Global identity */
html.art-theme,
body#app,
body#app button,
body#app input,
body#app textarea,
body#app select {
  font-family: "Almarai", sans-serif;
}

html.art-theme,
body#app {
  background-color: #FCF4E9;
  color: #3E2723;
}

body#app {
  overflow-x: clip;
}

body.index .app-inner > section {
  padding-block: 96px;
}

#mainnav > .inner > div > .grid,
body.index .app-inner > section > .container,
footer.art-store-footer > [aria-label="footer"] > div,
footer.art-store-footer > div:nth-of-type(2) {
  width: min(100%, 1200px);
  margin-inline: auto;
}

/* 2. Art header */
#mainnav.art-main-nav,
#mainnav.art-main-nav .inner {
  background-color: #FCF4E9;
  box-shadow: none;
  border-radius: 0;
}

#mainnav.art-main-nav > .inner > div > .grid {
  min-height: 80px;
}

#mainnav.art-main-nav .navbar-brand {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
}

#mainnav.art-main-nav .navbar-brand img {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
}

#mainnav.art-main-nav .header-btn,
#mainnav.art-main-nav .s-cart-summary-wrapper,
#mainnav.art-main-nav .mburger {
  box-shadow: none;
  border-radius: 0;
}

#mainnav.art-main-nav .header-btn__icon,
#mainnav.art-main-nav .mburger > i {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

#mainnav.art-main-nav .header-btn__icon.sicon-shopping-bag {
  font-size: 22px;
}

#mainnav.art-main-nav .s-cart-summary-count {
  background-color: #B59462;
  color: #FCF4E9;
  box-shadow: none;
}

/* 3. Material section */
body.index .app-inner > section.art-text:nth-of-type(1) {
  background-color: #F2E5D5;
  padding-block: 88px;
}

body.index .app-inner > section.art-text:nth-of-type(1) .art-text-title {
  max-width: 900px;
  margin-inline: auto;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.35;
  color: #3E2723 !important;
}

body.index .app-inner > section.art-text:nth-of-type(1) .art-text-desc {
  max-width: 720px;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.9;
  color: #3E2723 !important;
  text-transform: none;
}

/* 4. WAQAR benefits */
body.index .app-inner > section.art-text:nth-of-type(2) {
  background-color: #FCF4E9;
  padding-block: 96px;
}

body.index .app-inner > section.art-text:nth-of-type(2) .art-text-title {
  margin-bottom: 28px;
  padding-bottom: 0;
  font-size: 26px;
  line-height: 1.45;
  font-weight: 500;
  color: #3E2723 !important;
}

body.index .app-inner > section.art-text:nth-of-type(2) .art-text-desc {
  width: 100%;
  max-width: 1200px;
  height: 34px;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  columns: 5;
  column-gap: 0;
  column-fill: auto;
  column-rule: 1px solid rgba(62, 39, 35, 0.20);
  font-size: 16px;
  line-height: 34px;
  font-weight: 400;
  text-align: center;
  text-indent: -0.9em each-line;
  color: #3E2723 !important;
  text-transform: none;
}

body.index .app-inner > section.art-text:nth-of-type(2) .art-text-desc br {
  break-after: column;
}

/* 5. Art FAQ */
body.index .app-inner > section.art-faq {
  padding-block: 64px;
}
body.index .app-inner > section.art-faq > .container {
  max-width: 900px;
  margin-inline: auto;
}
body.index .art-faq .art-faq-title {
  width: 100%;
  max-width: none;              /* ← كان 720px */
  margin-bottom: 24px;
}
body.index .art-faq .art-accordion {
  min-height: 68px;
  padding-block: 0 !important;
  border-color: rgba(62, 39, 35, 0.20) !important;
}
body.index .art-faq .art-faq-label {
  min-height: 68px;
  justify-content: space-between; /* ← كان flex-start */
  gap: 16px;                      /* ← كان 14px */
}
body.index .art-faq .art-faq-label h5 {
  flex: 1 1 auto;                 /* ← كان 0 1 auto */
  font-size: 19px;
  line-height: 1.55;
}
body.index .art-faq .art-faq-label h5 button {
  text-align: start;
}
body.index .art-faq .art-faq-label > span {
  flex: 0 0 auto;
  margin-inline-start: auto;      /* ← جديد: يدفع السهم لآخر السطر */
}
body.index .art-faq .art-contentBox p {
  line-height: 1.8;
  padding-top: 14px;
  padding-bottom: 16px;
}

/* 6. Art footer */
footer.art-store-footer {
  background-color: #472C27;
  color: #FCF4E9;
  box-shadow: none;
}

footer.art-store-footer,
footer.art-store-footer a,
footer.art-store-footer h3,
footer.art-store-footer p,
footer.art-store-footer b,
footer.art-store-footer span,
footer.art-store-footer .s-contacts-item,
footer.art-store-footer .s-contacts-icon {
  color: #FCF4E9;
}

footer.art-store-footer > [aria-label="footer"] {
  padding-block: 48px !important;
}

footer.art-store-footer > [aria-label="footer"] > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 48px !important;
}

footer.art-store-footer > [aria-label="footer"] > div > div:first-child {
  grid-column: auto !important;
  padding-inline: 0 !important;
}

footer.art-store-footer > [aria-label="footer"] > div > div:nth-child(2):has(> h3:only-child) {
  display: none !important;
}

footer.art-store-footer > [aria-label="footer"] > div > div:first-child > p:empty,
footer.art-store-footer > [aria-label="footer"] > div > div:first-child > .block:has(.s-social-list:empty) {
  display: none;
}

footer.art-store-footer > [aria-label="footer"] h3 {
  margin-bottom: 14px;
}

footer.art-store-footer > [aria-label="footer"] p {
  margin-bottom: 16px;
  line-height: 1.8;
}

footer.art-store-footer .s-trust-badges-wrapper {
  margin-top: 4px;
}

footer.art-store-footer > div:nth-of-type(2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px !important;
  border-top: 1px solid rgba(252, 244, 233, 0.18);
}

footer.art-store-footer .copyright-text p {
  margin: 0;
  color: rgba(252, 244, 233, 0.78);
}

footer.art-store-footer .s-payments-list {
  display: flex;
  align-items: center;
  gap: 6px;
}

footer.art-store-footer .s-payments-list-item {
  width: 34px;
  height: 24px;
  margin: 0;
}

/* 7. Responsive QA */
@media (max-width: 767px) {
  body.index .app-inner > section {
    padding-block: 56px;
  }

  #mainnav.art-main-nav > .inner > div > .grid {
    min-height: 68px;
  }

  #mainnav.art-main-nav .navbar-brand,
  #mainnav.art-main-nav .navbar-brand img {
    width: 42px;
    height: 42px;
    max-width: 42px;
    max-height: 42px;
  }

  #mainnav.art-main-nav .header-btn__icon,
  #mainnav.art-main-nav .mburger > i,
  #mainnav.art-main-nav .header-btn__icon.sicon-shopping-bag {
    font-size: 21px;
  }

  body.index .app-inner > section.art-text:nth-of-type(1) {
    padding-block: 56px;
  }

  body.index .app-inner > section.art-text:nth-of-type(1) .art-text-title {
    font-size: 30px;
  }

  body.index .app-inner > section.art-text:nth-of-type(1) .art-text-desc {
    max-width: 34rem;
    font-size: 16px;
    line-height: 1.85;
  }

  body.index .app-inner > section.art-text:nth-of-type(2) {
    padding-block: 56px;
  }

  body.index .app-inner > section.art-text:nth-of-type(2) .art-text-title {
    margin-bottom: 20px;
    font-size: 22px;
  }

  body.index .app-inner > section.art-text:nth-of-type(2) .art-text-desc {
    height: auto;
    max-width: 28rem;
    overflow: hidden;
    columns: 1;
    column-rule: 0;
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
    text-indent: -0.9em each-line;
  }

  body.index .app-inner > section.art-text:nth-of-type(2) .art-text-desc br {
    display: block;
    content: "";
    margin: 12px 0;
    border-bottom: 1px solid rgba(62, 39, 35, 0.20);
    break-after: auto;
  }

  body.index .app-inner > section.art-faq {
    padding-block: 48px;
  }

  body.index .art-faq .art-faq-title {
    margin-bottom: 18px;
  }

  body.index .art-faq .art-accordion,
  body.index .art-faq .art-faq-label {
    min-height: 64px;
  }

  body.index .art-faq .art-faq-label {
    gap: 12px;
  }

  body.index .art-faq .art-faq-label h5 {
    font-size: 17px;
  }

  footer.art-store-footer > [aria-label="footer"] {
    padding-block: 36px !important;
  }

  footer.art-store-footer > [aria-label="footer"] > div {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 24px !important;
    text-align: center !important;
  }

  footer.art-store-footer > [aria-label="footer"] > div > div {
    width: 100%;
    max-width: 34rem;
  }

  footer.art-store-footer > [aria-label="footer"] > div > div:first-child > a,
  footer.art-store-footer .s-contacts-list {
    justify-content: center;
  }

  footer.art-store-footer .s-trust-badges-wrapper {
    justify-content: center;
  }

  footer.art-store-footer > div:nth-of-type(2) {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-block: 14px !important;
  }

  footer.art-store-footer .s-payments-list {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  body.index .app-inner > section.art-text:nth-of-type(2) .art-text-desc br {
    width: 100%;
    height: 1px;
    line-height: 1px;
  }
}

/* WAQAR — Benefits strip (art-features) */
/* salla-slider يعيد بناء الـ DOM بعد التهيئة:
   قبلها  →  [slot="items"] > div
   بعدها  →  .swiper-wrapper > .swiper-slide
   القواعد تغطي الحالتين عشان متعتمدش على توقيت التحميل */
body.index .app-inner > section.art-features,
.art-features{
  background-color:transparent !important;
  border-top:1px solid rgba(62,39,35,.13) !important;
  border-bottom:1px solid rgba(62,39,35,.13) !important;
  padding-block:clamp(26px,3.2vw,40px) !important;
  padding-inline:0 !important;
  text-align:center !important;
  overflow:visible !important;
}
.art-features [class*="swiper-button"],
.art-features [class*="slider-nav"],
.art-features [class*="s-slider-control"],
.art-features .swiper-pagination{ display:none !important; }

.art-features-slider [slot="items"],
.art-features-slider .swiper-wrapper{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)) !important;
  align-items:start !important;
  width:100% !important;
  transform:none !important;
  gap:clamp(14px,2.4vw,36px) !important;
  margin-inline:auto !important;
}
.art-features-slider [slot="items"] > div,
.art-features-slider .swiper-slide{
  width:auto !important; max-width:none !important; min-width:0 !important;
  margin:0 !important; padding:0 !important;
  border:0 !important; background:transparent !important;
  min-height:0 !important;
}
/* الأيقونات — مخفية في الحالتين */
.art-features span[class*="sicon"]{ display:none !important; }

.art-features-slider [slot="items"] h4,
.art-features-slider .swiper-slide h4{
  font-size:clamp(.88rem,1.1vw,.98rem) !important;
  font-weight:400 !important;
  line-height:1.65 !important;
  letter-spacing:normal !important;
  color:rgba(62,39,35,.8) !important;
  padding:0 !important; margin:0 !important;
}
.art-features-slider [slot="items"] p,
.art-features-slider .swiper-slide p{ display:none !important; }

@media (max-width:767px){
  .art-features-slider [slot="items"],
  .art-features-slider .swiper-wrapper{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:20px 18px !important;
    padding-inline:clamp(18px,6vw,28px) !important;
  }
  /* محاذاة يمين جوه كل خانة — عشان يبقى فيه خط محاذاة واضح */
  .art-features-slider [slot="items"] > div,
  .art-features-slider .swiper-slide{
    align-items:flex-start !important;
    text-align:right !important;
  }
  .art-features-slider [slot="items"] h4,
  .art-features-slider .swiper-slide h4{
    text-align:right !important;
    width:100% !important;
  }
}

/* salla-slider بيرندر العناصر في [slot="items"] مش .swiper-slide */
body.index .app-inner > section.art-features,
.art-features{
  background-color:transparent !important;
  border-top:1px solid rgba(62,39,35,.13) !important;
  border-bottom:1px solid rgba(62,39,35,.13) !important;
  padding-block:clamp(26px,3.2vw,40px) !important;
  padding-inline:0 !important;
  text-align:center !important;
  overflow:visible !important;
}
.art-features [class*="swiper-button"],
.art-features [class*="slider-nav"],
.art-features [class*="s-slider-control"],
.art-features .swiper-pagination{ display:none !important; }

.art-features-slider [slot="items"],
.art-features-slider .swiper-wrapper{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)) !important;
  align-items:start !important;
  width:100% !important;
  transform:none !important;
  gap:clamp(14px,2.4vw,36px) !important;
  margin-inline:auto !important;
}
.art-features-slider [slot="items"] > div,
.art-features-slider .swiper-slide{
  width:auto !important; max-width:none !important; min-width:0 !important;
  margin:0 !important; padding:0 !important;
  border:0 !important; background:transparent !important;
  min-height:0 !important;
}
.art-features-slider [slot="items"] > div > span{ display:none !important; }
.art-features-slider [slot="items"] > div h4{
  font-size:clamp(.88rem,1.1vw,.98rem) !important;
  font-weight:400 !important;
  line-height:1.65 !important;
  letter-spacing:normal !important;
  color:rgba(62,39,35,.8) !important;
  padding:0 !important; margin:0 !important;
}
.art-features-slider [slot="items"] > div p{ display:none !important; }

@media (max-width:767px){
  .art-features-slider [slot="items"],
  .art-features-slider .swiper-wrapper{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:22px 14px !important;
  }
}

/* WAQAR — Product Cutout Grid */
body.index .s-block--banners .grid.two-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2vw, 28px) !important;
}
body.index .s-block--banners .grid.two-row > .banner-entry {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  background-color: transparent !important;
  background-size: 92% auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 14px 24px rgba(55, 31, 20, 0.12));
  overflow: visible !important;
  transition: transform 300ms ease !important;
}
body.index .s-block--banners .grid.two-row > .banner-entry:hover {
  transform: translateY(-3px);
}
body.index .s-block--banners .grid.two-row > .banner-entry::before,
body.index .s-block--banners .grid.two-row > .banner-entry::after {
  content: none !important;
  display: none !important;
}
body.index .s-block--banners .grid.two-row > .banner-entry article {
  display: none !important;
}
@media (max-width: 767px) {
  body.index .s-block--banners .grid.two-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  body.index .s-block--banners .grid.two-row > .banner-entry {
    background-size: 90% auto !important;
  }
}
body.index .s-block--banners .grid.two-row > .banner-entry:nth-child(4) {
  background-size: 108% auto !important;
}

/* ===================================================== */
/* WAQAR — Luxury Finish (consolidated)                  */
/* Bold, visible luxury · Arabic-safe · whisper gold     */
/* ===================================================== */

body#app, body#app * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Balanced generous rhythm */
body.index .app-inner > section { padding-block: clamp(44px, 5.5vw, 96px) !important; }

/* waqar-section-titles — same big size for every section title, no ornament */
/* excludes hero (.art-title) and video overlay (.art-video-title) */
.art-text-title,
.app-inner h2:not([class*="art-"]) {
  font-weight: 800 !important; color: #3E2723 !important; line-height: 1.4 !important;
  font-size: clamp(2.3rem, 6.5vw, 2.9rem) !important;
  text-align: right !important;
}
.art-faq .art-faq-title,
.app-inner h2:not([class*="art-"]) > div,
.art-faq .art-faq-title > div { justify-content: flex-start !important; align-items: flex-start !important; }
.art-text-title::before,
.art-faq .art-faq-title::before,
.app-inner h2:not([class*="art-"])::before {
  content: none !important; display: none !important;
}

/* Product cards — editorial & premium */
.s-products-list-wrapper.s-products-list-vertical-cards { gap: 30px !important; }
custom-salla-product-card.s-product-card-entry { border:0 !important; box-shadow:none !important; background:transparent !important; padding:0 !important; }
.s-product-card-image { overflow:hidden !important; border-radius:5px !important; background:transparent !important; }
.s-product-card-image img, .s-product-card-image-contain { transition: transform .8s cubic-bezier(.2,.7,.3,1) !important; }
custom-salla-product-card.s-product-card-entry:hover .s-product-card-image img { transform: scale(1.06) !important; }
.s-product-card-content h3, .s-product-card-content [class*="title"] { font-weight:700 !important; color:#3E2723 !important; font-size:1.02rem !important; margin-top:14px !important; }
.s-product-card-content [class*="price"], .s-product-card-price { color:#472C27 !important; font-weight:800 !important; }

/* Buttons — tactile, refined */
.s-button-element, salla-button, body.index .app-inner a.btn, body.index .app-inner .btn { border-radius:2px !important; box-shadow:none !important; transition: all .35s ease !important; }
.s-button-element:hover, salla-button:hover, body.index .app-inner .btn:hover { transform: translateY(-2px); }

/* FAQ accordion refinement */
body.index .art-faq .art-faq-label { border-bottom:1px solid rgba(62,39,35,.12) !important; transition: background .3s ease !important; }
body.index .art-faq .art-faq-label h5 button { font-weight:700 !important; color:#3E2723 !important; padding-block:20px !important; transition: color .3s ease !important; }
body.index .art-faq .art-faq-label:hover h5 button { color:#B08D57 !important; }

/* Sets & Gifting cutout banners — refined hover */
body.index .s-block--banners .grid.two-row > .banner-entry { transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease !important; }
body.index .s-block--banners .grid.two-row > .banner-entry:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 40px -22px rgba(62,39,35,.45) !important; }

/* Hero — cinematic legibility */
body.index .app-inner > section h1 { font-weight:800 !important; line-height:1.6 !important; text-shadow: 0 2px 30px rgba(0,0,0,.4); }

/* Footer polish */
footer.art-store-footer { border-top:1px solid rgba(181,148,98,.4) !important; }
footer.art-store-footer > [aria-label="footer"] h3 { position:relative; padding-bottom:12px; font-weight:700 !important; color:#FCF4E9 !important; }
footer.art-store-footer > [aria-label="footer"] h3::after { content:""; display:block; width:34px; height:2px; background:#B08D57; opacity:.85; margin-top:10px; }
footer.art-store-footer .s-payments-list { gap:10px !important; opacity:.9; margin-top:8px; }
footer.art-store-footer a:hover { color:#B08D57 !important; }

/* waqar-color-fix-rule — show product photos in full color (theme forced grayscale) */
body.index custom-salla-product-card .s-product-card-image img,
body.index .s-product-card-image .s-product-card-image-contain,
body.index .s-product-card-image-contain { filter: none !important; -webkit-filter: none !important; }

/* waqar-image-text-ratio — Material/Lifestyle (art-text-with-photo): large image + concise text */
/* image fills its column on ALL widths (big on mobile, stacked); side-by-side 76/24 on desktop */
.art-text-with-photo div[class*="grid-cols-8"]{ position:relative !important; width:100% !important; height:auto !important; aspect-ratio:4 / 3 !important; }
.art-text-with-photo div[class*="grid-cols-8"] > div[class*="row-span-3"]{ display:none !important; }
.art-text-with-photo div[class*="grid-cols-8"] > div[class*="row-span-2"]{ position:absolute !important; inset:0 !important; transform:none !important; width:auto !important; height:auto !important; z-index:1 !important; }
.art-text-with-photo div[class*="grid-cols-8"] > div[class*="row-span-2"] img{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius:8px !important; }
@media (min-width:768px){
  .art-text-with-photo div[class*="grid-cols-2"]{ grid-template-columns:76% 24% !important; gap:40px !important; align-items:center !important; }
  .art-text-with-photo .art-text-title{ font-size:clamp(2.3rem,6.5vw,2.9rem) !important; line-height:1.35 !important; }
  .art-text-with-photo .art-text-desc{ font-size:clamp(.95rem,1.1vw,1.02rem) !important; line-height:1.9 !important; }
}

/* waqar-image-text-mobile — on phones make the image dominate ~78% of the screen, text compact below */
@media (max-width:767px){
  .art-text-with-photo div[class*="grid-cols-8"]{ aspect-ratio:auto !important; height:78vh !important; min-height:78vh !important; }
  .art-text-with-photo div[class*="grid-cols-2"]{ gap:18px !important; }
  body.index .app-inner > section.art-text-with-photo{ padding-block:26px !important; }
  .art-text-with-photo .art-text-title{ font-size:clamp(2.3rem,6.5vw,2.9rem) !important; line-height:1.4 !important; }
  .art-text-with-photo .art-text-desc{ font-size:1rem !important; line-height:1.8 !important; }
}


/* waqar-refine-2 — full-bleed mobile Material image (-5% height) + transparent auto-contrast header */
@media (max-width:767px){
  .art-text-with-photo div[class*="grid-cols-8"]{ height:74vh !important; min-height:74vh !important; }
  .art-text-with-photo div[class*="grid-cols-8"] > div[class*="row-span-2"] img{ border-radius:0 !important; }
  body.index .app-inner > section.art-text-with-photo{ padding-inline:0 !important; }
  .art-text-with-photo .container{ max-width:100% !important; padding-inline:0 !important; }

}
/* transparent, sticky, auto-contrast top nav */
#mainnav.art-main-nav{ position:sticky !important; top:0 !important; z-index:60 !important; background:transparent !important; box-shadow:none !important; border:0 !important; }
#mainnav.art-main-nav .inner{ background:transparent !important; mix-blend-mode:difference !important; }
#mainnav.art-main-nav .header-btn__icon,
#mainnav.art-main-nav .mburger,
#mainnav.art-main-nav .mburger > i,
#mainnav.art-main-nav a,
#mainnav.art-main-nav .s-cart-summary-wrapper{ color:#ffffff !important; }

/* waqar-header-clean — override: transparent over hero, no blend, white icons+logo, scrim, scrolls away */
#mainnav.art-main-nav{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; z-index:60 !important; background:transparent !important; box-shadow:none !important; }
#mainnav.art-main-nav .inner{ mix-blend-mode:normal !important; position:relative !important; z-index:1 !important; }
#mainnav.art-main-nav::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; background:linear-gradient(to bottom, rgba(20,12,10,.45), rgba(20,12,10,0)) !important; }
#mainnav.art-main-nav .header-btn__icon,
#mainnav.art-main-nav .mburger,
#mainnav.art-main-nav .mburger > i,
#mainnav.art-main-nav a,
#mainnav.art-main-nav .s-cart-summary-wrapper{ color:#ffffff !important; }

/* waqar-header-controls — show menu on tablet+desktop, remove search */
#mainnav.art-main-nav a.mburger{ display:inline-flex !important; color:#ffffff !important; }
#mainnav.art-main-nav a.mburger i{ color:#ffffff !important; background:transparent !important; }
#mainnav.art-main-nav i.sicon-search{ display:none !important; }
/* waqar-cart-empty — hide the empty count bubble */
#mainnav.art-main-nav salla-cart-summary .s-cart-summary-count{ display:none !important; }

/* waqar-radius-zero — square corners on all elements */
body#app *, body#app *::before, body#app *::after{ border-radius:0 !important; }

/* waqar-text-padding — keep text off the edges in art-text-with-photo (all widths) */
.art-text-with-photo .grid > .flex.flex-col{ padding-inline: clamp(20px, 6vw, 40px) !important; }



/* ===== WAQAR — Lifestyle banners (art-banner-2) ===== */
/* ستاك عمودي غامق بأسلوب Il Bisonte — يمسك الأربع بانرات تلقائياً */
.art-banner-2{
  height:auto !important; min-height:0 !important;
  aspect-ratio:4 / 5 !important;
  background-clip:padding-box !important;
  background-size:cover !important; background-position:center !important;

  /* الإطار الغامق */
  border-style:solid !important;
  border-color:#1C1310 !important;
  border-inline-width:11px !important;   /* الجوانب */
  border-top-width:24px !important;      /* ← المساحة قبل أول بانر */
  border-bottom-width:11px !important;   /* المسافة بين البانرات */
}

/* البانرات من التاني للرابع — مسافة صغيرة من فوق */
.art-banner-2 ~ .art-banner-2{ border-top-width:11px !important; }

/* آخر بانر — المساحة بعد آخر بلوك */
.art-banner-2:not(:has(~ .art-banner-2)){ border-bottom-width:24px !important; }

/* طبقة تعتيم عشان النص الأبيض يبان */
.art-banner-2::after{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:30 !important;
  background:linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.10) 45%, rgba(0,0,0,.52)) !important;
}

/* إلغاء الكارت الأبيض — النص مباشرة على الصورة */
.art-banner-2 .art-banner-header{
  background-color:transparent !important;
  width:min(88%, 560px) !important; height:auto !important;
  padding:0 !important; gap:14px !important;
}
.art-banner-2 .art-title{
  color:#ffffff !important; font-weight:800 !important;
  font-size:clamp(1.6rem, 4.2vw, 2.2rem) !important;
  letter-spacing:normal !important; line-height:1.45 !important;
}
.art-banner-2 .art-subtitle{
  color:rgba(255,255,255,.92) !important;
  font-size:clamp(.95rem, 2.6vw, 1.05rem) !important; line-height:1.9 !important;
}

/* زر الـ CTA — أبيض (الـ a وأي عنصر جواه) */
.art-banner-2 a,
.art-banner-2 a *{
  color:#ffffff !important; background:transparent !important;
}
.art-banner-2 a{
  display:inline-block !important;
  position:relative !important;
  overflow:visible !important;
  text-decoration:none !important;
  border-bottom:0 !important;
  padding:0 0 5px 0 !important;
  margin-top:6px !important;
}
/* الخط + أنيميشن الـ hover (بيقصر عند المرور زي الثيم) */
.art-banner-2 a::after{
  content:"" !important;
  position:absolute !important;
  inset-inline-start:0 !important;
  bottom:0 !important;
  width:100% !important; height:1px !important;
  background:#ffffff !important;
  transition:width .3s ease !important;
}
.art-banner-2 a:hover::after{ width:0 !important; }
/* الزرار جوه الرابط */
.art-banner-2 a button{
  color:#ffffff !important; background:transparent !important;
  padding:0 !important;
}
/* خط الثيم متقصوص بسبب overflow:hidden — بنلغيه ونعتمد على خط الرابط */
.art-banner-2 a button::after{
  display:none !important;
}

@media (min-width:768px){
  .art-banner-2{ aspect-ratio:16 / 9 !important; border-inline-width:14px !important; }
}

/* WAQAR — PDP Refinement v1 */
/* Scoped to Art product pages only. */

/* Keep the product header in normal flow; the homepage overlay header remains untouched. */
body.product-single #mainnav.art-main-nav {
  position: relative !important;
  inset: auto !important;
  background: #FCF4E9 !important;
  box-shadow: none !important;
}
body.product-single #mainnav.art-main-nav::after {
  content: none !important;
  display: none !important;
}
body.product-single #mainnav.art-main-nav .inner {
  background: #FCF4E9 !important;
  mix-blend-mode: normal !important;
}
body.product-single #mainnav.art-main-nav a,
body.product-single #mainnav.art-main-nav .mburger,
body.product-single #mainnav.art-main-nav .mburger > i,
body.product-single #mainnav.art-main-nav .header-btn__icon,
body.product-single #mainnav.art-main-nav .s-cart-summary-wrapper {
  color: #3E2723 !important;
}

/* The product title already provides location context; remove the redundant breadcrumb row. */
body.product-single nav.breadcrumbs:has(> salla-breadcrumb) {
  display: none !important;
}

/* Keep the primary price beside the product title; suppress the duplicate price block in the form. */
body.product-single form.product-form > section:has(.price-wrapper) {
  display: none !important;
}

/* Preserve a clear vertical purchase sequence: color first, then quantity. */
body.product-single form.product-form > salla-product-options {
  display: block;
  margin-bottom: 18px;
}
body.product-single form.product-form > section.sticky-product-bar {
  display: block;
}
body.product-single .sticky-product-bar__quantity {
  margin-bottom: 18px;
}

/* Fix contrast on Add to cart hover/focus. */
body.product-single .sticky-product-bar__btn .s-button-element:hover,
body.product-single .sticky-product-bar__btn .s-button-element:focus-visible {
  color: #FCF4E9 !important;
}
body.product-single .sticky-product-bar__btn .s-button-element:hover .s-button-text,
body.product-single .sticky-product-bar__btn .s-button-element:focus-visible .s-button-text {
  color: #FCF4E9 !important;
}

/* Compact quick-benefits strip on PDP. */
body.product-single section.art-features {
  margin-block: 32px 48px !important;
  padding-block: 24px !important;
}

/* Mobile persistent purchase actions. */
@media (max-width: 767px) {
  body.product-single {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body.product-single salla-add-product-button.sticky-product-bar__btn {
    position: fixed !important;
    inset-inline: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    background: #FCF4E9 !important;
    border-top: 1px solid rgba(62, 39, 35, 0.16) !important;
    box-shadow: 0 -8px 24px rgba(62, 39, 35, 0.08) !important;
  }

  body.product-single salla-add-product-button.sticky-product-bar__btn .s-add-product-button-main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
  }

  body.product-single salla-add-product-button.sticky-product-bar__btn salla-button,
  body.product-single salla-add-product-button.sticky-product-bar__btn .s-button-element,
  body.product-single salla-add-product-button.sticky-product-bar__btn salla-mini-checkout-widget {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
  }

  body.product-single salla-add-product-button.sticky-product-bar__btn .s-add-product-button-mini-checkout-content {
    width: 100% !important;
    height: 48px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body.product-single salla-add-product-button.sticky-product-bar__btn salla-quick-buy {
    display: none !important;
  }

  body.product-single section.art-features {
    margin-block: 24px 32px !important;
    padding-block: 20px !important;
  }
}


/* WAQAR — PDP Benefits Heading */
body.product-single section.art-features::before {
  content: "أهم المزايا";
  display: block;
  width: min(100%, 1200px);
  margin: 0 auto 20px;
  padding-inline: 20px;
  color: #3E2723;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 600;
  text-align: start;
}
@media (max-width: 767px) {
  body.product-single section.art-features::before {
    margin-bottom: 16px;
    font-size: 19px;
  }
}

/* ===== WAQAR — PDP & inner pages: solid header ===== */
/* الهيدر الشفاف مصمم للرئيسية فوق الفيديو الغامق فقط.
   على باقي الصفحات كان يسبب: أيقونات بيضا غير مرئية + تراكب مع البريدكرَم
   (position:absolute يخرجه من التدفق). */
body:not(.index) #mainnav.art-main-nav{
  position:relative !important;
  background:#FCF4E9 !important;
  border-bottom:1px solid rgba(62,39,35,.10) !important;
}
body:not(.index) #mainnav.art-main-nav::after{ content:none !important; }
body:not(.index) #mainnav.art-main-nav .inner{ background:transparent !important; }
body:not(.index) #mainnav.art-main-nav .header-btn__icon,
body:not(.index) #mainnav.art-main-nav .mburger,
body:not(.index) #mainnav.art-main-nav .mburger > i,
body:not(.index) #mainnav.art-main-nav a,
body:not(.index) #mainnav.art-main-nav .s-cart-summary-wrapper{
  color:#3E2723 !important;
}