/* =========================================================
   Cardni - Home Banners (match Abady style)
   - Centered container (not full width)
   - Tight desktop spacing
   - 3 banners per row on mobile
   - Keep PNG transparency
   ========================================================= */

/* 1) خلّي بلوك البنرات: Container ملموم بالوسط */
.s-block--banners.container,
.s-block--fixed-banner .container{
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* 2) حل مشكلة المسافات الكبيرة */
.s-block--banners > .grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  justify-content: center !important;
  align-content: start !important;
  column-gap: 14px !important;
  row-gap: 14px !important;
}

/* 3) البانر نفسه */
.s-block--banners .banner-entry.h-lg-banner{
  width: 100% !important;
  height: 460px !important;
  min-height: 460px !important;

  border-radius: 6px !important;
  overflow: hidden !important;
  position: relative !important;

  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* 4) النص/الرابط داخل البانر */
.s-block--banners .banner-entry.h-lg-banner .banner-entry__text{
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  padding: 24px !important;
  text-align: center !important;

  background: transparent !important;
}

/* 5) إزالة أي Overlay */
.s-block--banners .banner-entry::before,
.s-block--banners .banner-entry::after{
  background: transparent !important;
  opacity: 0 !important;
  content: "" !important;
}

/* 6) إزالة أي حدود/Outline */
.s-block--banners .banner-entry,
.s-block--banners .banner-entry__text,
.s-block--banners a{
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 7) البانر العريض */
.s-block--fixed-banner .banner--fixed{
  border-radius: 6px !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* =========================================
   Kill any gray overlay on Fixed Banner
   ========================================= */
.s-block--fixed-banner,
.s-block--fixed-banner .container,
.s-block--fixed-banner .banner,
.s-block--fixed-banner .banner--fixed{
  background: transparent !important;
  background-color: transparent !important;
}

.s-block--fixed-banner .banner::before,
.s-block--fixed-banner .banner::after,
.s-block--fixed-banner .banner--fixed::before,
.s-block--fixed-banner .banner--fixed::after{
  content: none !important;
  background: transparent !important;
  opacity: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.s-block--fixed-banner img{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.s-block--fixed-banner .overflow-hidden{
  background: transparent !important;
}

/* =========================================================
   Mobile tuning (3 columns + أكبر + مسافات أرتب)
   ========================================================= */
@media (max-width: 767px){

  .s-block--banners > .grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 12px !important;
  }

  .s-block--banners.container,
  .s-block--fixed-banner .container{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .s-block--banners .banner-entry,
  .s-block--banners .banner-entry.h-lg-banner{
    height: 130px !important;
    min-height: 130px !important;
    width: 100% !important;

    border-radius: 15px !important;
    overflow: hidden !important;
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .s-block--banners .banner-entry img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .s-block--banners .banner-entry__text{
    padding: 0 !important;
    background: transparent !important;
  }
}

/* =========================================================
   ✅ Rounded 15px for the "mixed images" group (the one in your screenshot)
   IMPORTANT: Put this at the END (it is now)
   ========================================================= */

/* 0) جرّب نمسك أي grid داخل بلوك البنرات (لأن الثيمات تختلف) */
.s-block--banners section .grid > *,
.s-block--banners .grid > *{
  border-radius: 15px !important;
  overflow: hidden !important;
}

/* 1) استهداف الـ grid اللي عندك بالاسم (md:grid-cols-3 two-row) */
.s-block--banners .grid.md\:grid-cols-3.two-row,
.s-block--banners .grid.md\:grid-cols-3.two-row > *{
  border-radius: 15px !important;
  overflow: hidden !important;
}

/* 2) لو العنصر داخلها رابط */
.s-block--banners .grid.md\:grid-cols-3.two-row a,
.s-block--banners .grid a{
  display: block !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}

/* 3) الصورة نفسها */
.s-block--banners .grid.md\:grid-cols-3.two-row img,
.s-block--banners .grid img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 15px !important;
  object-fit: cover !important;
}

/* 4) لو الصورة background مو img */
.s-block--banners .grid.md\:grid-cols-3.two-row [style*="background"],
.s-block--banners .grid [style*="background"]{
  border-radius: 15px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
}

/*   ==========   product   ==========   */


/* Brand tokens */
:root{
  --pr-purple-900:#100b21;
  --pr-purple-800:#1b1239;
  --pr-purple-700:#201747;
  --pr-purple-600:#2d1e5e;

  --pr-yellow:#ffc72c;
  --pr-danger:#ff2c2c;

  --pr-radius:10px;
  --pr-gap:1rem;
}

/* ---------- Page title bar ---------- */
.product-index .page-title-bar{
  background-color: transparent;
  border: 0;
}

@media (min-width: 1024px){
  .product-index .page-title-bar h1{
    font-size: 15px;
    line-height: 28px;
  }

  .swiper-autoheight,
  .swiper-autoheight .swiper-slide{
    height: 622px;
  }

  .product-index .s-products-list-wrapper{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ---------- Category pills (dark) ---------- */
.dark .product-index .selected-cat-item > span,
.dark .product-index input[name="selected-cat"]:checked + span{
  border-color: rgba(255,255,255,.1);
  background-color: var(--pr-purple-800);
}

.dark .product-index .selected-cat-item > span:hover{
  background-color: var(--pr-purple-600);
}

/* ---------- Filters (dark checkbox bg) ---------- */
.dark .product-index .product-entry--cat [type="checkbox"]{
  background-color: var(--pr-purple-900);
}

/* ---------- Product card layout ---------- */
.product-index .s-products-list-wrapper{
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pr-gap);
}

/* If you want a safer max width without breaking layouts, keep it */
.s-products-slider-card{
  max-width: 190px !important;
}

.product-entry{
  display: flex;
  flex-direction: column;
  border-radius: var(--pr-radius);
  box-sizing: border-box;
}

.product-entry--vertical .product-entry__content{
  gap: 8px;
}

/* Center + spacing in category card */
.product-index .product-entry--cat{
  align-items: center;
  gap: 10px;
  padding: 15px;
}

/* ---------- Badge ---------- */
.product-index .product-entry--cat .promotion-badge-wrap{
  position: absolute;
  top: 0;
  left: 50% !important;
  transform: translate(-50%, 0);
  border-radius: 0 0 8px 8px;
  background-color: var(--pr-yellow);
  font-size: .75rem;
  color: var(--pr-purple-600);
  margin-top: 0;
}

/* ---------- Image sizing ---------- */
.product-index .product-entry--cat .product-entry__image{
  height: auto;
  max-height: fit-content;
  width: auto;
  padding: 0;
}

.product-index .product-entry--cat .product-entry__image img{
  min-height: auto;
  height: auto;
  display: block; /* avoids extra baseline space */
}

/* ---------- Typography ---------- */
.product-entry__title{
  font-size: 16px;
  -webkit-text-stroke: 0.3px;
  font-weight: 100;
  text-align: center;
  color: var(--pr-purple-600);
}

.text-info{
  align-items: center;
  text-align: center;
}

/* ---------- Pricing ---------- */
.price-wrapper{
  color: #000;
}

.sale-price{
  font-size: 15px;
  font-weight: 700;
  color: var(--pr-purple-700);
}

.dark .sale-price{
  color: var(--pr-yellow);
}

/* merged duplicate regular-price blocks */
.regular-price{
  font-size: 14px;
  line-height: 1.75rem;
  font-weight: 400;
  text-decoration-line: line-through;
  text-decoration-color: var(--pr-danger);
  color: var(--pr-danger);
  opacity: .5;
}

.dark .regular-price{
  text-decoration-color: #fff;
}

/* ---------- Button ---------- */
.btn--main--gray button{
  border-width: 0;
  background-color: var(--pr-purple-600);
  color: #fff;
  border-radius: var(--pr-radius) !important;
  height: 34px;
}

/* =========================
   No-image safe styling
   Keeps card layout stable
   ========================= */

/* 1) Lock the image area to a consistent ratio (same space even if no image) */
.product-index .product-entry--cat .product-entry__image{
  width: 100%;
  aspect-ratio: 1 / 1;          /* square area like your cards */
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pr-purple-800), var(--pr-purple-600));
}

/* 2) Make the image behave nicely when it exists */
.product-index .product-entry--cat .product-entry__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 3) If the image is missing/broken/empty, hide it so it doesn’t show the ugly icon */
.product-index .product-entry--cat .product-entry__image img:not([src]),
.product-index .product-entry--cat .product-entry__image img[src=""],
.product-index .product-entry--cat .product-entry__image img[alt=""],
.product-index .product-entry--cat .product-entry__image img{
  /* keep as-is, but allow fallback below to take over when it errors */
}

/* Hide broken images (common pattern) */
.product-index .product-entry--cat .product-entry__image img{
  font-size: 0;                 /* prevents broken-image text spacing */
}

/* 4) Fallback placeholder overlay (always there, image will cover it when loaded) */
.product-index .product-entry--cat .product-entry__image::after{
  content: "No Image";
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.75);
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}

/* When a real image exists and loads, it will visually cover the ::after.
   But if you want to completely remove the text when image is present,
   use the next optional rule (works in modern browsers): */
.product-index .product-entry--cat .product-entry__image:has(img[src]:not([src=""]))::after{
  content: "";
  border: 0;
  background: transparent;
  padding: 0;
}



/* === FORCE PRODUCTS TO TAKE FULL WIDTH === */
.product-index .s-products-list-wrapper {
    width: 100% !important;
}

/*   ==========   INNER INNER PR   ==========   */
.promotion-title {
    top: 8px;
    right: 8px !important;
    border-radius: 8px !important;
    background-color: #ffc72c;
    color: #2d1e5e;
}

:is([dir=rtl] .rtl\:space-x-reverse)>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 1;
    background: #0000;
}

.p-5 {
    padding: 1.25rem;
    background: #20174712;
    border-radius: 10px;
    margin-block: 10px;
}

#app .s-quantity-input-container {
    border-radius: 10px;
    border-color: #2d1e5e;
    height: 38px;
}

.border {
    border-width: 0px;
}

.s-gifting-widget .s-list-tile-item {
    border-radius: 10px;
}

.product-entry--vertical .product-entry__image {
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
    height: 0px;
}

.product-index .cat-col {
    background-color: transparent!important;
    display: flex;
    position: relative;
}

@media (min-width: 768px){
.md\:w-1\/4 {
    width: 100%;
}

.product-index .cat-col {
    padding-bottom: 0rem;
}

.md\:w-\[calc\(75\%-32px\)\] {
    width: calc(100% - 0px);
}
}
/*
.product-index .cat-col .product-entry__content {
    padding-top: 0;
    padding-bottom: 0;
}*/
/* =========================================================
   Brands slider: keep title/subtitle, remove logos + space
   ========================================================= */

/* 1) Hide ONLY the items slot content (logos) */
.s-block--brands-slider salla-slider [slot="items"]{
  display: none !important;
}

/* 2) Hide the rendered swiper if it exists */
.s-block--brands-slider salla-slider .swiper,
.s-block--brands-slider salla-slider .swiper-wrapper,
.s-block--brands-slider salla-slider .swiper-slide{
  display: none !important;
}

/* 3) Remove extra reserved space */
.s-block--brands-slider,
.s-block--brands-slider .container{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 4) If the component adds spacing around header area */
.s-block--brands-slider salla-slider{
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
/* Final cut: remove block default spacing only for this section */
.s-block--brands-slider.s-block{
  padding: 0 !important;
}
/* Remove top spacing of the section AFTER brands slider */
section.s-block--brands-slider + section{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

[dir="rtl"] .s-slider-prev,
[dir="rtl"] .s-slider-next {
  display: none !important;
}

/* ========== Search Bar – Global Fix ========== */

salla-search {
  --search-height: 44px;
}

/* الحاوية */
.header-search {
  max-width: 520px;
}

/* input نفسه */
salla-search input {
  height: var(--search-height) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  padding-inline-start: 44px !important;
  padding-inline-end: 16px !important;
  font-size: 14px !important;
  background-color: #f7f7f9 !important;
  transition: all .2s ease;
}

/* focus */
salla-search input:focus {
  background-color: #fff !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(71,56,148,.12);
}

/* أيقونة البحث */
salla-search .search-icon,
salla-search svg {
  width: 18px;
  height: 18px;
  opacity: .5;
}

/* مكان الأيقونة */
salla-search .search-icon {
  inset-inline-start: 14px;
}

/* placeholder */
salla-search input::placeholder {
  color: #9ca3af;
  font-size: 13px;
}

/* ========== Mobile تحسين إضافي ========== */
@media (max-width: 768px) {
  .header-search {
    margin-top: 8px;
  }

  salla-search input {
    height: 40px !important;
    font-size: 13px !important;
  }
}






/* =========================================================
   FIX gap under header — Mobile safe
   (Do NOT move the banner with negative top on mobile)
   ========================================================= */

/* Desktop: if you still want to pull it a bit, keep desktop only */
@media (min-width: 1024px){
  body.theme-digital main#main-content > section.s-block--fixed-banner{
    position: relative !important;
    top: -80px !important; /* your desktop fix */
  }
}

/* Mobile: reset any pulling + override injected inline margin */
@media (max-width: 1023px){

  /* stop the banner from being shifted/cropped */
  body.theme-digital main#main-content > section.s-block--fixed-banner{
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }

  /* remove any padding that pushes content down */
  body.theme-digital main#main-content{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* this is the real problem: inline style="margin-top: XXXpx" */
  body.theme-digital main#main-content > section.s-block--fixed-banner[style*="margin-top"]{
    margin-top: 0px !important;   /* change to 0, 8, 12, 16 as you like */
  }
  body.theme-digital main#main-content > section.wide-placeholder{
  margin-top: 0px !important;
  padding-top: 0 !important;
  }

}