@import url('https://fonts.googleapis.com/css2?family=Zain:wght@400;700&family=Cairo:wght@500;600;700&family=Alexandria:wght@400;500&display=swap');
/* =====================================================================
   مذهلة (Mozhela) — Salla Custom CSS · Theme: Raed (رائد) v1.377
   Figma: Clavix (Mine) › مذهلة  (1920 desktop)

   Author: Khaled Omar <KO />
   Portfolio: https://sunnysapartment.github.io/Portfolio-Showcase/
   GitHub: SunnysApartment

   PALETTE (find-and-replace to reskin)
     #5c2826  deep plum    – headings, hero text, footer titles
     #cd999f  rose         – borders, buttons, icons
     #ce9b9f  rose (hdr)   – header icon rings / search border
     #ecd0d2  blush        – top bar, bottom footer bar
     #fff9f9  petal        – page background, arrow buttons
     #80050a  wine         – prices
     #66412e  cocoa        – main menu
     #333 / #666 / #a5a5a5 – text / muted / placeholder
   FONTS: Zain (display) · Cairo (UI) · Alexandria (buttons, features)

   ASSET URLS — upload the PNGs to Salla, paste the CDN links below.
   ===================================================================== */
:root {
  /* ornament: traced from Frame_2147227724.png → inline SVG (no upload needed) */
  --mz-ornament: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2161 282'><path fill='%235c2826' fill-rule='evenodd' d='M788 269C759 267 746 266 730 264C688 257 650 247 605 228C596 224 545 199 542 197C541 196 522 186 503 177C473 162 452 154 426 148C409 145 377 144 362 147C357 148 354 148 352 148C350 147 349 147 346 151C334 165 330 178 335 189C344 211 375 213 396 194C399 192 401 190 402 190C403 191 394 202 388 206C378 213 370 216 356 215C328 215 307 201 308 180C308 160 328 145 360 142C370 141 403 141 411 142C446 148 466 154 497 165C504 167 510 169 510 169C510 168 482 154 474 151C437 137 408 132 374 132C343 133 324 136 300 145C255 162 241 166 216 171C194 175 178 177 160 177C131 177 36 175 36 174C36 172 44 172 108 171C171 170 174 170 191 168C220 163 240 158 274 146C329 126 366 121 408 128C445 134 472 144 536 178C567 194 621 217 652 228C720 252 803 264 879 260C947 257 990 244 1018 219C1029 209 1038 196 1038 188C1038 166 965 114 927 109C920 109 919 107 924 106C927 105 931 104 933 103C949 98 976 97 990 99C1015 104 1034 122 1041 148C1044 159 1045 177 1042 187C1032 225 986 252 914 263C892 267 892 267 854 269C836 270 806 270 788 269ZM1306 269C1274 267 1245 264 1224 259C1185 250 1152 233 1135 214C1122 199 1119 188 1119 166C1120 153 1120 150 1122 144C1131 121 1144 108 1165 101C1174 98 1200 97 1213 99C1222 101 1242 106 1243 107C1243 108 1242 108 1232 110C1212 113 1184 127 1157 148C1136 164 1123 181 1125 190C1127 206 1148 226 1174 238C1242 269 1378 268 1488 235C1523 225 1590 196 1639 171C1679 150 1700 141 1722 135C1782 118 1828 122 1900 150C1911 155 1943 163 1960 166C1981 169 2005 171 2068 171C2094 172 2118 172 2121 173C2131 174 2127 175 2114 175C2107 175 2080 176 2053 176C1967 178 1942 174 1874 149C1856 143 1839 138 1824 135C1805 131 1762 131 1743 135C1727 138 1700 146 1685 153C1672 158 1652 168 1652 169C1653 169 1657 168 1662 166C1667 164 1677 160 1686 158C1707 151 1720 148 1744 143C1761 140 1798 141 1814 144C1860 154 1870 194 1830 211C1811 219 1788 217 1773 205C1767 201 1759 191 1760 190C1761 190 1763 192 1766 195C1791 217 1829 207 1829 178C1829 171 1826 163 1820 156C1814 149 1813 148 1812 149C1811 149 1807 148 1802 147C1789 145 1764 144 1748 146C1715 151 1688 161 1638 187C1555 231 1517 246 1463 258C1420 267 1357 272 1306 269ZM720 232L718 231L720 231C721 230 725 230 727 229C754 226 778 213 818 181C871 139 910 129 963 144C975 147 993 156 1005 163C1015 169 1013 169 999 163C966 147 931 143 900 151C887 155 863 167 850 177C836 187 815 202 809 206C806 208 800 211 797 213C777 226 751 233 729 233C725 233 721 232 720 232ZM1059 232C1059 232 1061 229 1064 225C1079 205 1085 180 1079 158C1077 152 1078 152 1083 159C1098 179 1097 206 1080 220C1073 226 1059 234 1059 232ZM1419 232C1391 228 1371 219 1332 190C1306 171 1297 166 1283 159C1265 150 1254 148 1234 147C1208 147 1190 150 1164 162C1158 165 1153 167 1152 167C1152 166 1163 159 1173 154C1185 148 1203 142 1217 139C1228 137 1254 137 1264 139C1293 144 1312 155 1358 191C1387 215 1414 227 1438 230C1445 230 1448 232 1442 232C1440 232 1436 232 1432 232C1428 233 1422 232 1419 232ZM7 180C1 174 5 166 13 166C18 166 21 168 22 172C23 181 13 186 7 180ZM2143 180C2140 177 2139 174 2141 170C2144 165 2152 164 2156 169C2160 174 2156 183 2149 183C2147 183 2145 182 2143 180ZM1608 174C1618 165 1631 152 1642 138C1658 120 1665 113 1677 107C1691 100 1700 98 1716 98C1727 98 1737 99 1742 101C1745 101 1744 103 1742 103C1732 103 1705 117 1650 151C1631 163 1607 176 1604 177C1603 178 1605 176 1608 174ZM541 169C534 164 527 160 526 160C525 159 521 156 517 154C513 152 506 147 501 144C458 118 438 108 424 104C414 102 414 102 426 99C444 96 464 98 477 104C493 110 503 119 522 141C533 155 542 164 554 174C560 179 556 177 541 169ZM1078 144C1063 121 1064 95 1081 77C1105 50 1110 38 1106 21C1102 8 1103 9 1105 12C1112 21 1119 38 1120 50C1121 68 1116 79 1098 99C1086 114 1080 128 1081 143C1082 147 1082 150 1082 150C1082 150 1080 147 1078 144ZM1054 95C1046 84 1043 74 1043 60C1044 45 1046 42 1067 22C1076 12 1084 3 1084 2C1085 -1 1093 -1 1093 2C1099 22 1094 41 1078 58C1065 71 1059 81 1058 92L1057 100L1054 95Z'/></svg>");
  --mz-logo: url('https://cdn.files.salla.network/other/783850022/83fd18f7-84ba-4dd0-8618-5b70ccba1076-original.webp');         /* Figma node 1:796 */
}

/* ---------------------------------------------------------------------
   00. BASE — overflow fix, background, fonts, wider container
   --------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body, #app .app-inner { overflow-x: clip; } }
salla-slider, .s-products-slider-wrapper, .swiper { max-width: 100%; }

html:not(.dark) body, html:not(.dark) #app .app-inner { background: #fff9f9 !important; }
#app, #app button, #app input { font-family: 'Cairo', var(--font-main), sans-serif; }

@media (min-width: 1600px) {
  #app .container { max-width: 1540px !important; } /* 1520 content + 10px padding each side */
}

/* ---------------------------------------------------------------------
   01. TOP BAR (40px, blush)
   --------------------------------------------------------------------- */
#app .top-navbar {
  background: #ecd0d2 !important;
  min-height: 40px;
  padding-block: 0 !important;
  color: #5c2826;
}
#app .top-navbar .container { align-items: center; min-height: 40px; }
#app .top-navbar a,
#app .top-navbar .s-menu-topnav-item,
#app .top-navbar .s-contacts-topnav-link,
#app .top-navbar .topnav-link-item {
  color: #5c2826 !important;
  font: 600 12px/22px 'Cairo', sans-serif !important;
}
#app .top-navbar .s-menu-topnav-list > li + li::before {
  content: "|"; margin-inline: 8px; color: #5c2826; font-size: 13px;
}

/* ---------------------------------------------------------------------
   02. MAIN HEADER — logo right · search center · icons left · menu row
   Desktop only; mobile keeps Raed's layout.
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  #app .store-header { position: relative; }

  #app #mainnav { height: auto !important; }   /* Raed sets inline height:84px */
  #app #mainnav .inner { background: #fff !important; box-shadow: none; }
  #app #mainnav .container > .flex {
    flex-wrap: wrap;
    align-items: center;
    min-height: 112px;
  }
  /* flatten [logo + menu] wrapper so menu can drop to its own row */
  #app #mainnav .container > .flex > .flex.items-center:first-child { display: contents; }
  #app #mainnav .navbar-brand { order: 1; }
  #app #mainnav .container > .flex > .flex.justify-end { order: 2; margin-inline-start: auto; gap: 18px; }
  #app #mainnav custom-main-menu {
    order: 3;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    background: linear-gradient(#fff, #fff9f9);
    margin-inline: calc(50% - 50vw);   /* full-bleed strip */
    padding-inline: calc(50vw - 50%);
  }

  #app #mainnav .navbar-brand img { max-height: 96px; width: auto; }

  /* search: lives in .top-navbar in Raed → lifted into the main row */
  #app .top-navbar .header-search {
    position: absolute;
    z-index: 20;
    top: 72px;                         /* 40 top bar + (112 − 48) / 2 */
    left: 50%;
    transform: translateX(-50%);
    width: min(1038px, 54vw);
  }
  #app .header-search .s-search-input {
    height: 48px !important;
    border: 2px solid #ce9b9f !important;
    border-radius: 24px !important;
    background: #fff !important;
    font: 500 12px 'Cairo', sans-serif;
  }
  #app .header-search .s-search-input::placeholder { color: #a5a5a5; }
}

/* icon rings: user + cart
   Raed already draws a 40px gray ring on .header-btn__icon (cart) → restyle that
   ring instead of adding a second one on the wrapper. */
#app #mainnav { --mz-icon: #ce9b9f; }          /* icon + ring colour (Figma) */
#app #mainnav salla-cart-summary { min-width: 0 !important; }
#app #mainnav .s-cart-summary-wrapper {
  position: relative;
  display: flex; align-items: center;
  background: transparent; border: 0; padding: 0;
}
#app #mainnav .s-cart-summary-content,
#app #mainnav .s-cart-summary-total { display: none !important; }
#app #mainnav .header-btn__icon,
#app #mainnav .s-user-menu-login-btn,
#app #mainnav .s-user-menu-trigger {
  width: 40px !important; height: 40px !important;
  margin: 0 !important;
  border: 2px solid var(--mz-icon) !important;
  border-radius: 50% !important;
  background: #fff !important;
  display: flex !important; align-items: center; justify-content: center;
  color: var(--mz-icon) !important;
  font-size: 20px !important;
}
#app #mainnav .header-btn__icon::before { color: var(--mz-icon) !important; }
#app #mainnav .s-user-menu-login-btn svg,
#app #mainnav .s-user-menu-trigger svg { width: 22px; height: 22px; fill: var(--mz-icon) !important; }
#app #mainnav .s-cart-summary-count {
  position: absolute !important;
  top: -3px !important; right: -3px !important; left: auto !important;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: #f55157 !important;
  border: 1px solid #fff;
  color: #fff !important;
  font: 700 10px/16px 'Cairo', sans-serif;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 1023px) {
  #app #mainnav .header-btn__icon,
  #app #mainnav .s-user-menu-login-btn,
  #app #mainnav .s-user-menu-trigger { width: 36px !important; height: 36px !important; font-size: 18px !important; }
}

/* main menu row */
@media (min-width: 1024px) {
  #app .main-menu { display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 4px; justify-content: center; }
  #app .main-menu > li > a {
    color: #66412e !important;
    font: 700 14px/26px 'Cairo', sans-serif !important;
    padding-block: 4px !important;
  }
}

/* ---------------------------------------------------------------------
   03. HERO — fixed-banner, full-bleed (must be FIRST home section)
   first-of-type: <salla-hook index:start> sits before it in <main>
   Image = composed hero (text + CTA baked in), 1920×1047.
   Mobile image → the block's small image field.
   --------------------------------------------------------------------- */
#app .s-block--fixed-banner:first-of-type { margin-top: 0 !important; }
#app .s-block--fixed-banner:first-of-type .container { max-width: none !important; padding: 0 !important; }
#app .s-block--fixed-banner:first-of-type .banner--fixed { border-radius: 0 !important; display: block; }
#app .s-block--fixed-banner:first-of-type img { width: 100% !important; display: block; }

/* ---------------------------------------------------------------------
   04. SECTION TITLES — Zain 48 plum, centered, ornament underneath
   (square-photos title + every products-slider title)
   --------------------------------------------------------------------- */
#app .s-block__title,
#app .s-slider-block__title {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 32px !important;
}
#app .s-block__title .right-side,
#app .s-slider-block__title-right {
  width: 100%;
  flex: 1 1 100%;
  text-align: center;
  padding-inline: 0 !important;   /* salla-slider adds padding-left:2rem in RTL → off-center */
  margin-inline: 0 !important;
}
#app .s-block__title h2,
#app .s-slider-block__title-right h2 {
  display: block;
  width: 100%;
  padding-inline: 0 !important;   /* salla-slider adds another 2rem on the h2 */
  text-align: center !important;
}

#app .s-block__title h2,
#app .s-slider-block__title-right h2 {
  font: 700 48px/80px 'Zain', sans-serif !important;
  color: #5c2826 !important;
  margin: 0;
}
#app .s-block__title h2::after,
#app .s-slider-block__title-right h2::after {
  content: "";
  display: block;
  width: min(540px, 80%);
  aspect-ratio: 2161 / 282;
  margin: 8px auto 0;
  background: var(--mz-ornament) center / contain no-repeat;
}
#app .s-slider-block__title-right p { color: #666; }

@media (max-width: 767px) {
  #app .s-block__title h2,
  #app .s-slider-block__title-right h2 { font-size: 30px !important; line-height: 44px !important; }
  #app .s-block__title h2::after,
  #app .s-slider-block__title-right h2::after { width: min(240px, 70%); margin-top: 4px; }
}

/* slider controls: arrows on top, "عرض الكل" below — left side */
@media (min-width: 1024px) {
  #app .s-slider-block__title-left {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column-reverse;   /* DOM: display-all, nav → nav on top */
    align-items: center;
    gap: 8px;
  }
  #app .s-slider-block__title-nav {
    position: static !important;
    display: flex !important;
    gap: 8px;
    max-width: none !important;
  }
}
#app .s-slider-block__title .s-slider-nav-arrow {
  width: 34px !important; height: 34px !important;
  border: 1px solid #cd999f !important;
  border-radius: 10px !important;
  background: #fff9f9 !important;
  box-shadow: none !important;
  color: #5c2826;
}
#app .s-slider-block__display-all {
  display: inline-flex; align-items: center; gap: 2px;
  height: 39px; padding: 0 12px;
  border: 1.5px solid #cd999f;
  border-radius: 10px;
  color: #383838 !important;
  font: 600 10px 'Cairo', sans-serif !important;
  white-space: nowrap;
}
#app .s-slider-block__display-all::after { content: "\2039"; font-size: 14px; line-height: 1; }
@media (max-width: 1023px) {
  #app .s-slider-block__title { flex-direction: column; align-items: center; gap: 10px; }
}

/* ---------------------------------------------------------------------
   05. CATEGORY CARDS — square-photos (4 items, with text)
   "اختاري ما يجعلكِ مذهلة"
   --------------------------------------------------------------------- */
#app [data-testid="store-home-square-photos"]:has(.banner-entry:nth-child(3)) .square-photos-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
@media (min-width: 1024px) {
  #app [data-testid="store-home-square-photos"]:has(.banner-entry:nth-child(3)) .square-photos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 40px !important;
  }
}
#app [data-testid="store-home-square-photos"]:has(.banner-entry:nth-child(3)) .banner-entry {
  height: auto !important;
  aspect-ratio: 350 / 500;
  border-radius: 32px !important;
  background: #f3dcdd;
  padding: 0 !important;
}
#app [data-testid="store-home-square-photos"]:has(.banner-entry:nth-child(3)) .lazy__bg { background-size: cover !important; }
#app [data-testid="store-home-square-photos"]:has(.banner-entry:nth-child(3)) .has-overlay::after { display: none !important; }
#app [data-testid="store-home-square-photos"]:has(.banner-entry:nth-child(3)) h3.text-with-border {
  position: absolute;
  inset: auto 0 28px 0;
  height: auto !important;
  border: 0 !important;
  padding-inline: 16px;
  color: #5c2826 !important;
  font: 700 26px/40px 'Zain', sans-serif !important;
  text-align: center;
  z-index: 1;
}
@media (max-width: 767px) {
  #app [data-testid="store-home-square-photos"]:has(.banner-entry:nth-child(3)) .banner-entry { border-radius: 20px !important; }
  #app [data-testid="store-home-square-photos"]:has(.banner-entry:nth-child(3)) h3.text-with-border { font-size: 18px !important; line-height: 26px !important; bottom: 14px; }
}

/* ---------------------------------------------------------------------
   06. PRODUCT SLIDERS — products-slider (×4)
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  #app .s-products-slider-card {
    max-width: none !important;
    width: 25% !important;
    padding-inline: 19px !important;   /* ≈ 39px gutter */
  }
}

/* ---------------------------------------------------------------------
   07. PRODUCT CARD — 4px rose border, full-width rose button
   --------------------------------------------------------------------- */
#app custom-salla-product-card.s-product-card-vertical {
  background: #fff !important;
  border: 4px solid #cd999f !important;
  border-radius: 15px !important;
  padding: 10px !important;
  box-shadow: none !important;
  overflow: hidden;
}
#app custom-salla-product-card .s-product-card-image {
  height: 300px;
  flex: 0 0 auto !important;
  border-radius: 15px !important;
  overflow: hidden;
  background: #fff;
}
#app custom-salla-product-card .s-product-card-image img { object-fit: contain !important; }
#app custom-salla-product-card .s-product-card-content { padding: 10px 0 0 !important; }
#app custom-salla-product-card .s-product-card-content-title,
#app custom-salla-product-card .s-product-card-content-title a {
  color: #333 !important;
  font: 700 18px/30px 'Cairo', sans-serif !important;
  text-align: start;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 60px;
}
#app custom-salla-product-card .s-product-card-price,
#app custom-salla-product-card .s-product-card-sale-price h4 {
  color: #80050a !important;
  font: 700 18px/22px 'Cairo', sans-serif !important;
}
#app custom-salla-product-card .s-product-card-sale-price span { color: #a5a5a5; font-size: 13px; }
#app custom-salla-product-card .s-product-card-content-footer { margin-top: 12px; }
#app custom-salla-product-card salla-add-product-button { width: 100%; }
#app custom-salla-product-card salla-add-product-button .s-button-btn {
  width: 100%;
  height: 38px;
  border-radius: 20px !important;
  background: #cd999f !important;
  border-color: #cd999f !important;
  color: #fff !important;
  font: 500 12px/22px 'Alexandria', sans-serif !important;
}
#app custom-salla-product-card salla-add-product-button .s-button-btn:hover { background: #b9828a !important; border-color: #b9828a !important; }
#app custom-salla-product-card salla-add-product-button .s-button-btn i { color: #fff; font-size: 16px; }

/* wishlist: white circle top-left */
#app custom-salla-product-card .s-product-card-wishlist-btn { top: 14px !important; left: 14px !important; right: auto !important; opacity: .9; }
#app custom-salla-product-card .s-product-card-wishlist-btn .s-button-btn {
  width: 32px; height: 32px;
  border-radius: 50% !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(92, 40, 38, .12);
  color: #5c2826;
}

/* ---------------------------------------------------------------------
   08. WIDE BANNERS — fixed-banner (not first) · radius TL + BR
   --------------------------------------------------------------------- */
#app .s-block--fixed-banner:not(:first-of-type) .banner--fixed {
  display: block;
  border-radius: clamp(24px, 5.2vw, 80px) 0 clamp(24px, 5.2vw, 80px) 0 !important;
  overflow: hidden;
}
#app .s-block--fixed-banner:not(:first-of-type) img { width: 100% !important; display: block; }

/* ---------------------------------------------------------------------
   09. DOUBLE BANNERS — enhanced-square-banners OR square-photos with 2 items
   Row is 1760 wide in the design (wider than container).
   --------------------------------------------------------------------- */
@media (min-width: 1600px) {
  #app [data-testid="store-home-square-banners"],
#app [data-testid="store-home-square-photos"]:not(:has(.banner-entry:nth-child(3))) { max-width: 1780px !important; }
}
#app [data-testid="store-home-square-banners"] .grid,
#app [data-testid="store-home-square-photos"]:not(:has(.banner-entry:nth-child(3))) .grid { gap: 16px !important; }
@media (min-width: 768px) {
  #app [data-testid="store-home-square-banners"] .grid,
#app [data-testid="store-home-square-photos"]:not(:has(.banner-entry:nth-child(3))) .grid { gap: 60px !important; }
}
#app [data-testid="store-home-square-banners"] .banner-entry,
#app [data-testid="store-home-square-photos"]:not(:has(.banner-entry:nth-child(3))) .banner-entry {
  height: auto !important;
  aspect-ratio: 850 / 500;
  background-size: cover !important;
  background-color: #f3dcdd;
  padding: 0 !important;
}
#app [data-testid="store-home-square-photos"]:not(:has(.banner-entry:nth-child(3))) .square-photos-grid { grid-template-columns: 1fr !important; }
@media (min-width: 768px) {
  #app [data-testid="store-home-square-photos"]:not(:has(.banner-entry:nth-child(3))) .square-photos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
#app [data-testid="store-home-square-photos"]:not(:has(.banner-entry:nth-child(3))) .lazy__bg { background-size: cover !important; }
/* RTL: 1st = right banner (TL square) · 2nd = left banner (TR square) */
#app [data-testid="store-home-square-banners"] .banner-entry:nth-child(1),
#app [data-testid="store-home-square-photos"]:not(:has(.banner-entry:nth-child(3))) .banner-entry:nth-child(1) {
  border-radius: 0 clamp(24px, 4.2vw, 80px) clamp(24px, 4.2vw, 80px) clamp(24px, 4.2vw, 80px) !important;
}
#app [data-testid="store-home-square-banners"] .banner-entry:nth-child(2),
#app [data-testid="store-home-square-photos"]:not(:has(.banner-entry:nth-child(3))) .banner-entry:nth-child(2) {
  border-radius: clamp(24px, 4.2vw, 80px) 0 clamp(24px, 4.2vw, 80px) clamp(24px, 4.2vw, 80px) !important;
}
#app [data-testid="store-home-square-banners"] .banner-entry__text:not(:has(h3:not(:empty))),
#app [data-testid="store-home-square-photos"]:not(:has(.banner-entry:nth-child(3))) .banner-entry__text:not(:has(h3:not(:empty))) { display: none; }

/* ---------------------------------------------------------------------
   10. STORE FEATURES — 3 bordered cards, text right · icon left
   --------------------------------------------------------------------- */
#app .s-block--features .grid { grid-template-columns: 1fr !important; gap: 16px !important; }
/* Raed gives the 1st item col-span-2 on mobile → creates a phantom 2nd column. Reset. */
#app .s-block--features__item:first-child { grid-column: auto !important; }
@media (min-width: 768px) {
  #app .s-block--features .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; }
}
@media (min-width: 1280px) {
  #app .s-block--features .grid { gap: 75px !important; }
}
#app .s-block--features__item {
  display: grid !important;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 16px;
  row-gap: 12px;
  min-height: 130px;
  padding: 20px 24px !important;
  background: #fff !important;
  border: 3px solid #cd999f;
  border-radius: 25px;
  text-align: start !important;
}
#app .s-block--features__item .feature-icon {
  grid-column: 2; grid-row: 1 / 3;
  width: 80px !important; height: 80px !important;
  margin: 0 !important;
  background: transparent !important;
}
#app .s-block--features__item .feature-icon i { color: #cd999f !important; font-size: 64px !important; }
#app .s-block--features__item h2 {
  grid-column: 1; grid-row: 1;
  margin: 0 !important;
  color: #5c2826 !important;
  font: 400 24px/26px 'Alexandria', sans-serif !important;
  align-self: end;
}
#app .s-block--features__item p {
  grid-column: 1; grid-row: 2;
  margin: 0 !important;
  color: #666 !important;
  font: 400 24px/32px 'Alexandria', sans-serif !important;
  align-self: start;
}
@media (max-width: 1279px) {
  #app .s-block--features__item h2 { font-size: 18px !important; }
  #app .s-block--features__item p { font-size: 16px !important; line-height: 24px !important; }
  #app .s-block--features__item .feature-icon { width: 56px !important; height: 56px !important; }
  #app .s-block--features__item .feature-icon i { font-size: 44px !important; }
}

/* ---------------------------------------------------------------------
   11. FOOTER — white body, blush payments bar
   --------------------------------------------------------------------- */
#app .store-footer,
#app .store-footer .store-footer__inner {
  background: #fff !important;
  background-image: none !important;
  color: #000;
}
#app .store-footer .store-footer__inner { box-shadow: 0 -4px 4px rgba(255, 216, 218, .15); padding-block: 40px; }

/* store name → logo image */
#app .store-footer__inner .container > div:first-child > a h3 {
  width: 271px; height: 110px;
  margin: 0 0 12px;
  background: var(--mz-logo) right center / contain no-repeat;
  font-size: 0 !important; color: transparent !important;
}
#app .store-footer__inner .container > div:first-child .leading-6 {
  font: 500 16px/25px 'Cairo', sans-serif; color: #000;
}

#app .store-footer h3,
#app .store-footer .s-contacts-title {
  color: #5c2826 !important;
  font: 700 24px/25px 'Cairo', sans-serif !important;
  margin-bottom: 27px;
}
#app .store-footer .s-menu-footer-item,
#app .store-footer .s-menu-footer-item a,
#app .store-footer .s-contacts-item {
  color: #000 !important;
  font: 600 16px/25px 'Cairo', sans-serif !important;
}
#app .store-footer .s-menu-footer-list { display: grid; gap: 12px; }
#app .store-footer .s-contacts-list { display: grid; gap: 16px; }
#app .store-footer .s-contacts-icon {
  width: 34px; height: 34px;
  border: 1px solid #cd999f;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important;
  color: #5c2826 !important;
}
#app .store-footer .s-social-link a {
  width: 34px; height: 34px;
  border: 1px solid #cd999f;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important;
  color: #5c2826 !important;
}

/* bottom bar: payments centered on blush */
#app .store-footer > div:last-of-type,
#app .store-footer .store-footer__inner + div {
  max-width: none !important;
  background: #ecd0d2;
  display: flex !important;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  padding: 16px 20px !important;
}
#app .store-footer .copyright-text { color: #5c2826; font-size: 12px; }
#app .store-footer .s-payments-list { justify-content: center; gap: 8px; }
#app .store-footer .s-payments-list-item {
  background: #fff !important;
  border-radius: 2px !important;
  width: 64px; height: 31px;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------------
   12. MOBILE (< 1024px) — Raed header kept; spacing, cards, titles tuned
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* header */
  #app #mainnav .inner { background: #fff !important; }
  #app #mainnav .navbar-brand img { max-height: 56px; width: auto; }
  #app .top-navbar { padding-block: 6px !important; }
  #app .header-search .s-search-input {
    height: 40px !important;
    border: 1.5px solid #ce9b9f !important;
    border-radius: 20px !important;
    background: #fff !important;
  }

  /* section titles: centered, "عرض الكل" under the ornament */
  #app .s-block__title,
  #app .s-slider-block__title { margin-bottom: 16px !important; }
  #app .s-slider-block__title { flex-direction: column !important; align-items: center !important; justify-content: center !important; padding-inline: 0 !important; }
  #app .s-slider-block__title-left { position: static; transform: none; justify-content: center; width: 100%; margin: 0 !important; }
  #app .s-slider-block__title-left > * { margin-inline: 0 !important; }
  #app .s-block__title h2::after,
  #app .s-slider-block__title-right h2::after { margin-inline: auto !important; }
  #app .s-slider-block__display-all { height: 32px; font-size: 11px !important; }

  /* product slider: 2 cards per view */
  #app .s-products-slider-card { width: 50% !important; max-width: none !important; padding-inline: 6px !important; }
  #app custom-salla-product-card.s-product-card-vertical { border-width: 2px !important; border-radius: 12px !important; padding: 6px !important; }
  #app custom-salla-product-card .s-product-card-image { height: 150px; border-radius: 10px !important; }
  #app custom-salla-product-card .s-product-card-content { padding-top: 8px !important; }
  #app custom-salla-product-card .s-product-card-content-title,
  #app custom-salla-product-card .s-product-card-content-title a { font-size: 13px !important; line-height: 20px !important; min-height: 40px; }
  #app custom-salla-product-card .s-product-card-price,
  #app custom-salla-product-card .s-product-card-sale-price h4 { font-size: 14px !important; }
  #app custom-salla-product-card .s-product-card-content-footer { margin-top: 8px; }
  #app custom-salla-product-card salla-add-product-button .s-button-btn { height: 34px; font-size: 11px !important; padding-inline: 4px; }
  #app custom-salla-product-card .s-product-card-wishlist-btn { top: 10px !important; left: 10px !important; }
  #app custom-salla-product-card .s-product-card-wishlist-btn .s-button-btn { width: 28px; height: 28px; }

  /* features: compact rows */
  #app .s-block--features__item {
    min-height: 96px; padding: 14px 16px !important; border-width: 2px; border-radius: 18px;
    grid-template-columns: 1fr auto; justify-content: stretch;
  }

  /* footer: stacked + centered */
  #app .store-footer .store-footer__inner { padding-block: 28px; text-align: center; }
  #app .store-footer__inner .container > div:first-child > a { justify-content: center; }
  #app .store-footer__inner .container > div:first-child > a h3 { width: 200px; height: 80px; margin-inline: auto; background-position: center; }
  #app .store-footer__inner .container > div:first-child .leading-6 { margin-inline: auto; font-size: 14px; }
  #app .store-footer h3,
  #app .store-footer .s-contacts-title { font-size: 20px !important; margin-bottom: 14px; }
  #app .store-footer .s-menu-footer-list,
  #app .store-footer .s-contacts-list { justify-items: center; }
  #app .store-footer .s-social-list,
  #app .store-footer .flex.gap-4 { justify-content: center; }
  #app .store-footer .s-payments-list { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  #app .s-block__title h2,
  #app .s-slider-block__title-right h2 { font-size: 26px !important; line-height: 38px !important; }
}
/* ========================== END ========================== */