@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');
/* =====================================================================
   لِوار (Liwar) — Salla Custom CSS · Theme: Raed (رائد) · version "Liwar – Draft"
   Store: https://liwarcoffee.com
   Figma: Clavix (Mine) › لوار (node 1:975 / frame 25:175, 1920 desktop)
   Mobile: no design — adapted from desktop (section 13)
   Verified against rendered <body>: Raed 1.377.0, profile 1944328774 (Oct 3 2026)

   Author: Khaled Omar <KO />
   Portfolio: https://sunnysapartment.com
   LinkedIn: https://linkedin.com/in/khaledmahmoudomar
   GitHub: SunnysApartment

   PALETTE — all colours live in :root below. Figma MCP cap was hit before
   colours/fonts could be read → values are PLACEHOLDERS (coffee tones).
   Pick the real hex from Figma Inspect and replace the 8 tokens; nothing
   else in this file hardcodes brand colour.
     --lw-dark    headings, hero text, footer titles   (title 25:249)
     --lw-accent  borders, buttons, slider arrows      (card 25:292 border / button)
     --lw-icon    header icon rings + search border    (25:207)
     --lw-soft    top bar, bottom footer bar           (25:181 / 25:758)
     --lw-bg      page background                      (25:175 fill)
     --lw-price   product price                        (card price text)
     --lw-menu    main menu text                       (25:224)
     --lw-tile    image placeholder / card tint
   FONTS (VERIFY): Zain (display) · Cairo (UI) · Alexandria (buttons) — same
   Clavix template as Mozhela; swap the @import + names if Liwar differs.

   ⚠ Theme primary colour is still Salla default #aed8e0 → set it in
     theme settings to --lw-accent, or teal leaks into uncovered buttons.
   ===================================================================== */
:root {
  --lw-dark:   #4d1f0c;   /* sampled from the ornament */
  --lw-accent: #945229;   /* = theme primary */
  --lw-icon:   #945229;   /* = theme primary */
  --lw-soft:   #efe3d6;   /* VERIFY */
  --lw-bg:     #fbf7f2;   /* VERIFY */
  --lw-price:  #6b3a1e;   /* VERIFY */
  --lw-menu:   #3b2418;   /* VERIFY */
  --lw-tile:   #f3e9df;   /* VERIFY */
  --lw-accent-hover: #7a4220;

  /* MEDIA RATIOS (from Figma frame sizes) — one place to tune every image slot.
     Images are cropped to fill (object-fit / background cover), so export
     uploads at these ratios and nothing gets cut.                          */
  --lw-r-hero:     1920 / 982;   /* 25:236  hero (desktop image)        */
  --lw-r-hero-m:   auto;         /* mobile: natural ratio of the small image */
  --lw-r-banner:   1550 / 800;   /* 25:355 · 25:463 · 25:566 wide banners */
  --lw-r-cat:      1;            /* 25:252… categories 495² (w ÷ h, e.g. 0.75 for 3:4) */
  --lw-fit-cat:    cover;        /* cover = fill & crop · contain = show whole image */
  --lw-r-why:      350 / 459;    /* 25:452… why-Liwar card (image + caption baked) */
  --lw-r-why-img:  1 / 1;        /* same, when the caption comes from item text */
  --lw-r-origin:   1 / 1;        /* 25:559… origin cards 212²           */
  --lw-r-product:  1 / 1;        /* product photos (500×500 in store)   */
  --lw-radius-banner: clamp(20px, 2.1vw, 40px);

  /* ornament under every title — Frame_2147227724.png (Figma 25:250), 1988×332
     Backup (no hosting dependency): inline SVG trace, colour #4d1f0c →
     --lw-ornament: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1772 237'><path fill='%234d1f0c' fill-rule='evenodd' d='M847 232C847 230 853 222 858 218C864 212 870 208 884 201C904 191 913 180 916 162C918 147 913 128 900 112C898 109 896 107 896 106C897 106 915 118 922 124C940 142 948 166 939 183C935 192 927 200 917 205C909 209 907 209 884 215C870 219 859 223 853 229C848 233 847 234 847 232ZM612 231C578 228 541 217 504 199C490 193 451 171 448 168C445 166 420 153 409 148C370 129 343 123 310 123C283 123 264 126 221 139C152 160 109 165 51 162C21 160 23 160 57 159C107 159 130 155 197 134C275 110 310 107 362 121C391 128 409 135 461 162C540 203 602 220 672 220C723 220 771 208 803 188C811 183 811 183 811 184C808 188 778 205 761 211C722 227 661 235 612 231ZM1113 231C1047 227 994 210 966 185C962 181 963 182 972 188C1022 221 1111 230 1194 208C1234 198 1263 187 1318 159C1372 131 1396 122 1430 116C1470 108 1503 112 1570 133C1618 148 1639 153 1665 156C1683 159 1714 160 1730 160C1738 159 1744 160 1743 160C1742 162 1707 163 1683 163C1640 162 1613 157 1550 139C1504 125 1480 121 1454 122C1414 124 1374 139 1314 174C1250 212 1209 227 1158 231C1146 232 1124 232 1113 231ZM854 207C854 207 856 205 859 203C865 198 871 190 879 174C887 159 896 148 904 144C908 141 909 142 911 149C916 167 905 186 883 197C871 204 854 210 854 207ZM845 204C841 200 840 187 844 176C851 156 875 138 894 138C900 138 904 139 903 140C903 140 901 142 898 143C889 150 882 159 869 183C864 191 856 201 850 204C846 206 846 206 845 204ZM278 200C261 198 249 186 249 173C249 142 310 125 366 140C377 143 375 144 364 141C351 139 323 139 314 141C299 145 286 154 281 163C279 168 279 178 282 181C289 192 308 191 324 180C331 176 330 178 322 185C311 196 292 202 278 200ZM1480 200C1467 198 1456 192 1447 183C1442 177 1442 177 1450 182C1480 202 1509 177 1483 154C1471 143 1454 138 1429 139C1421 140 1412 141 1408 141C1400 143 1396 143 1402 141C1443 128 1498 135 1516 156C1531 173 1520 196 1495 200C1488 201 1488 201 1480 200ZM569 190C564 189 561 188 564 188C569 188 586 185 594 182C606 178 618 172 643 158C654 151 667 145 671 143C714 126 759 134 799 165C803 169 807 172 807 173C807 173 804 172 799 170C774 159 749 153 727 154C706 155 692 159 655 174C631 184 619 187 606 189C596 191 577 191 569 190ZM1167 189C1152 187 1138 182 1112 172C1081 159 1066 155 1045 154C1022 153 991 160 972 171C965 175 965 175 971 168C992 147 1028 133 1060 134C1083 135 1098 140 1129 158C1166 179 1182 185 1204 188C1210 188 1210 188 1208 189C1204 191 1175 191 1167 189ZM833 179C833 176 836 169 839 164L843 159L843 107L844 54L846 49C849 43 856 34 857 35C858 35 857 37 856 40C853 49 856 57 868 73C880 89 882 95 882 107C882 121 879 127 860 146C845 162 841 167 837 176C834 181 833 182 833 179ZM813 172C804 152 759 123 733 119C729 119 727 118 727 118C727 117 727 117 727 117C728 117 733 116 738 114C774 104 799 110 813 133C820 145 822 161 818 173C817 178 816 178 813 172ZM959 176C958 176 957 172 957 169C950 141 966 115 993 110C1005 108 1029 111 1042 117L1046 118L1038 120C1022 122 1009 128 993 139C975 151 966 160 962 172C960 175 959 177 959 176ZM8 167C3 165 2 155 8 152C16 148 24 158 17 165C14 168 12 169 8 167ZM1756 166C1748 161 1755 148 1764 153C1767 154 1768 155 1768 159C1768 166 1762 170 1756 166ZM1294 161C1294 161 1296 158 1299 155C1304 151 1313 138 1323 121C1340 94 1360 82 1386 82C1396 82 1401 83 1415 86C1424 87 1424 88 1416 91C1406 93 1397 99 1378 112C1368 119 1354 128 1346 133C1339 137 1330 142 1328 143C1325 145 1322 146 1321 146C1320 146 1315 148 1311 151C1302 158 1294 162 1294 161ZM470 158C468 156 463 153 459 150C455 147 452 145 451 146C450 146 448 145 446 144C445 143 439 140 433 137C421 130 408 121 390 109C377 100 365 93 356 90C349 88 349 87 355 86C402 76 427 85 449 122C461 141 467 150 472 155C479 162 479 163 470 158ZM885 86C883 80 880 75 872 67C855 49 854 38 868 26C873 21 898 4 899 4C899 5 897 8 895 11C887 23 887 26 886 60C886 80 885 88 885 86Z'/></svg>");  + set aspect-ratio 1772 / 237 in §04 */
  --lw-ornament: url('https://i.postimg.cc/9QYbKpsH/Frame-2147227724.png');
  /* footer logo — current store logo from og:image; replace with 25:222 export if different */
  --lw-logo: url('https://cdn.files.salla.network/other/963659706/d549ad15-107c-4acc-84b5-dfc26e0c1bf5-original.webp');
}

/* ---------------------------------------------------------------------
   00. BASE — overflow fix, background, fonts, 1520 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: var(--lw-bg) !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 each side */
}

/* ---------------------------------------------------------------------
   01–02. HEADER (desktop ≥1024 = Figma 25:177)
   Row 1  top bar 40px : policies (right) · contact (left)
   Row 2  main 112px   : logo (right) · search 1038×48 (center) · icons (left)
   Row 3  menu strip   : store categories, centered
   STICKY: Raed's own sticky pins only #mainnav .inner (position:fixed), which
   strands the search (it lives in .top-navbar). On desktop the whole header is
   made position:sticky instead, top = −40px → top bar scrolls away, rows 2–3
   (with search) stay pinned. Raed's fixed .inner is neutralised on desktop;
   mobile keeps Raed's behaviour. Works with "sticky header" on or off.
   Policies = footer menu → enable "important links" in theme settings.
   --------------------------------------------------------------------- */
:root { --lw-topbar-h: 40px; --lw-row-h: 112px; --lw-search-h: 48px; --lw-menu-h: 40px; }

#app .top-navbar {
  background: var(--lw-soft) !important;
  color: var(--lw-dark);
}
#app .top-navbar a,
#app .top-navbar .s-menu-topnav-item,
#app .top-navbar .s-contacts-topnav-link,
#app .top-navbar .topnav-link-item,
#app .top-navbar .s-contacts-item {
  color: var(--lw-dark) !important;
  font: 600 12px/22px 'Cairo', sans-serif !important;
}
#app .top-navbar .s-menu-topnav-list > li + li::before {
  content: "|"; margin-inline: 8px; color: var(--lw-dark); font-size: 13px;
}
#app .header-search .s-search-input {
  border: 1.5px solid var(--lw-icon) !important;
  border-radius: 24px !important;
  background: #fff !important;
  font: 500 12px 'Cairo', sans-serif;
}
#app .header-search .s-search-input::placeholder { color: #8a8a8a; }

@media (min-width: 1024px) {
  /* containing block for the lifted search; sticky on top (top bar scrolls away) */
  #app .store-header {
    position: relative;
    z-index: 40;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
  }
  @supports (position: sticky) {
    #app .store-header { position: sticky; top: calc(-1 * var(--lw-topbar-h)); }
  }

  /* row 1 — top bar */
  #app .top-navbar {
    height: var(--lw-topbar-h) !important; min-height: 0 !important;
    padding: 0 !important;
  }
  #app .top-navbar > .container { height: 100%; min-height: 0 !important; align-items: center; }

  /* search → centre of row 2 (absolute, so it never pushes the top bar) */
  #app .top-navbar .header-search {
    position: absolute !important;
    z-index: 41;
    top: calc(var(--lw-topbar-h) + (var(--lw-row-h) - var(--lw-search-h)) / 2);
    left: 50%;
    transform: translateX(-50%);
    width: min(1038px, calc(100vw - 560px)) !important;
    max-width: none !important;
    margin: 0 !important;
    flex: none !important;
  }
  #app .top-navbar .header-search .s-search-input { height: var(--lw-search-h) !important; }

  /* row 2 — logo (right) · icons (left); no wrapping tricks */
  #app #mainnav { height: auto !important; min-height: 0 !important; box-shadow: none !important; }
  #app #mainnav .inner,
  #app #mainnav.fixed-pinned .inner {               /* neutralise Raed's fixed pin */
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    background: #fff !important;
    padding-bottom: var(--lw-menu-h);               /* room for the menu strip (row 3) */
  }
  #app #mainnav .inner > .container > .flex {      /* has Raed class .relative → anchors row 3 */
    position: relative;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: var(--lw-row-h);
  }
  #app #mainnav .navbar-brand { margin: 0 !important; }
  #app #mainnav .navbar-brand img,
  #app #mainnav.fixed-pinned .navbar-brand img { max-height: calc(var(--lw-row-h) - 8px) !important; max-width: 180px !important; width: auto; }
  #app #mainnav .inner > .container > .flex > .flex:last-child { margin: 0 !important; gap: 18px; }
  #app #mainnav salla-cart-summary { margin: 0 !important; }

  /* row 3 — menu strip, pinned under row 2, full bleed */
  #app #mainnav custom-main-menu {
    position: absolute !important;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: var(--lw-menu-h);
    min-height: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#fff, var(--lw-bg));
    z-index: 30;
  }
  #app .main-menu,
  #app .fixed-pinned .main-menu {
    display: flex !important; flex-wrap: nowrap; justify-content: center; align-items: center;
    column-gap: 32px;
    margin: 0 !important; padding: 0 !important;     /* Raed: mx-6 pt-8 */
  }
  #app .main-menu > li > a,
  #app .fixed-pinned .main-menu > li > a {
    color: var(--lw-menu) !important;
    font: 700 14px/26px 'Cairo', sans-serif !important;
    padding: 0 !important;                            /* Raed: pb-8 / 20px when pinned */
    line-height: var(--lw-menu-h) !important;
  }
  #app .main-menu > li > a:hover { color: var(--lw-accent) !important; }

  /* compact when scrolled (Raed toggles .fixed-pinned if sticky is on) */
  #app .store-header:has(#mainnav.fixed-pinned) { --lw-row-h: 76px; }
}

/* icon rings (cart + user). Raed already rings .header-btn__icon → restyle, don't double */
#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(--lw-icon) !important;
  border-radius: 50% !important;
  background: #fff !important;
  display: flex !important; align-items: center; justify-content: center;
  color: var(--lw-icon) !important;
  font-size: 20px !important;
}
#app #mainnav .header-btn__icon::before { color: var(--lw-icon) !important; }
#app #mainnav .s-user-menu-login-btn svg,
#app #mainnav .s-user-menu-trigger svg { width: 22px; height: 22px; fill: var(--lw-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: var(--lw-dark) !important;
  border: 1px solid #fff;
  color: #fff !important;
  font: 700 10px/16px 'Cairo', sans-serif;
  display: flex; align-items: center; justify-content: center;
}


/* ---------------------------------------------------------------------
   03. HERO — fixed-banner, FIRST home section, full-bleed
   Composed image 1920×982 (text + "تسوق الآن" baked in). Link → 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; height: auto !important; display: block;
  aspect-ratio: var(--lw-r-hero); object-fit: cover !important; object-position: center;
}
@media (max-width: 767px) {
  /* upload a mobile ("small") image ≈ 750×1000 — shown at its own ratio */
  #app .s-block--fixed-banner:first-of-type img { aspect-ratio: var(--lw-r-hero-m); }
}

/* ---------------------------------------------------------------------
   04. SECTION TITLES — Zain 48 centered + ornament underneath
   square-photos titles, products-slider titles, main-links title, testimonials
   --------------------------------------------------------------------- */
#app .s-block__title,
#app .s-slider-block__title,
#app .s-reviews-header-wrapper {
  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 RTL padding-left:2rem */
  margin-inline: 0 !important;
}
#app .s-block__title h2,
#app .s-slider-block__title-right h2,
#app .s-reviews-header {
  display: block;
  width: 100%;
  padding-inline: 0 !important;
  text-align: center !important;
  font: 700 48px/80px 'Zain', sans-serif !important;
  color: var(--lw-dark) !important;
  margin: 0;
}
#app .s-block__title h2::after,
#app .s-slider-block__title-right h2::after,
#app .s-reviews-header::after {
  content: "";
  display: block;
  width: min(500px, 80%);
  aspect-ratio: 1988 / 332;   /* PNG incl. its padding */
  margin: 4px auto 0;
  background: var(--lw-ornament) center / contain no-repeat;
}
#app .s-slider-block__title-right p { color: #666; }

/* 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;
    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 var(--lw-accent) !important;
  border-radius: 10px !important;
  background: var(--lw-bg) !important;
  box-shadow: none !important;
  color: var(--lw-dark);
}
#app .s-slider-block__display-all {
  display: inline-flex; align-items: center; gap: 2px;
  height: 39px; padding: 0 12px;
  border: 1.5px solid var(--lw-accent);
  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; }

/* ---------------------------------------------------------------------
   04b. SQUARE-PHOTOS RESET — 3 items render as "featured-3" in Raed
   (2 cols, 200px rows, 1st tile row-span-2). Kill it → 3 equal tiles.
   --------------------------------------------------------------------- */
#app [data-testid="store-home-square-photos"] .square-photos-grid--featured-3 { grid-auto-rows: auto !important; }
#app [data-testid="store-home-square-photos"] .square-photos-grid--featured-3 > .banner-entry:first-child {
  grid-row: auto !important; grid-column: auto !important;   /* no padding here: blocks set their own (categories use padding for height) */
}
#app [data-testid="store-home-square-photos"] .square-photos-grid > .banner-entry { min-width: 0; }

/* ---------------------------------------------------------------------
   05. CATEGORIES — "اكتشف أقسام لِوار" · square-photos #1 (3 × 495²)
   Selector = block's component-id (stable when reordering; changes only if the
   block is deleted and re-added → then update 640057903 here).
   --------------------------------------------------------------------- */
#app [component-id="640057903"] .square-photos-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
@media (min-width: 1024px) {
  #app [component-id="640057903"] .square-photos-grid { gap: 32px !important; }
}
#app [component-id="640057903"] .square-photos-grid > .banner-entry,
#app [component-id="640057903"] .square-photos-grid > .banner-entry:first-child {
  position: relative;
  display: block !important;
  align-self: start;                       /* grid stretch would override the ratio */
  width: 100%;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 0 calc(100% / (var(--lw-r-cat))) 0 !important;   /* height from width → always the set ratio */
  border-radius: 32px !important;
  overflow: hidden;
  background: var(--lw-tile);
}
#app [component-id="640057903"] .banner-entry .lazy__bg {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  background-position: center !important;
}
#app [component-id="640057903"] .lazy__bg { background-size: var(--lw-fit-cat) !important; }
#app [component-id="640057903"] .has-overlay::after { display: none !important; }
#app [component-id="640057903"] h3.text-with-border {
  position: absolute;
  inset: auto 0 28px 0;
  height: auto !important;
  border: 0 !important;
  padding-inline: 16px;
  color: var(--lw-dark) !important;
  font: 700 28px/40px 'Zain', sans-serif !important;
  text-align: center;
  z-index: 1;
}

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

/* ---------------------------------------------------------------------
   07. PRODUCT CARD — 350×486, accent border, full-width button
   --------------------------------------------------------------------- */
#app custom-salla-product-card.s-product-card-vertical {
  background: #fff !important;
  border: 3px solid var(--lw-accent) !important;
  border-radius: 15px !important;
  padding: 10px !important;
  box-shadow: none !important;
  overflow: hidden;
}
#app custom-salla-product-card .s-product-card-image {
  height: auto !important;
  aspect-ratio: var(--lw-r-product);
  flex: 0 0 auto !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: var(--lw-tile);
}
#app custom-salla-product-card .s-product-card-image a { display: block; height: 100%; }
#app custom-salla-product-card .s-product-card-image img { width: 100%; height: 100% !important; object-fit: cover !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: var(--lw-price) !important;
  font: 700 18px/22px 'Cairo', sans-serif !important;
}
#app custom-salla-product-card .s-product-card-sale-price span { color: #8a8a8a; 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: 40px;
  border-radius: 20px !important;
  background: var(--lw-accent) !important;
  border-color: var(--lw-accent) !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: var(--lw-accent-hover) !important; border-color: var(--lw-accent-hover) !important; }
#app custom-salla-product-card salla-add-product-button .s-button-btn i { color: #fff; font-size: 16px; }
#app custom-salla-product-card .s-product-card-wishlist-btn { top: 14px !important; left: 14px !important; right: auto !important; }
#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(0, 0, 0, .12);
  color: var(--lw-dark);
}

/* ---------------------------------------------------------------------
   08. WIDE BANNERS — fixed-banner ×3 (not first) · 1550×800
   --------------------------------------------------------------------- */
#app .s-block--fixed-banner:not(:first-of-type) .banner--fixed {
  display: block;
  border-radius: var(--lw-radius-banner) !important;   /* VERIFY radius in Figma */
  overflow: hidden;
}
#app .s-block--fixed-banner:not(:first-of-type) img {
  width: 100% !important; height: auto !important; display: block;
  aspect-ratio: var(--lw-r-banner); object-fit: cover !important; object-position: center;
}

/* ---------------------------------------------------------------------
   09. WHY LIWAR — "لماذا لِوار" · square-photos #2 (3 × 350² image, text BELOW)
   Selector = component-id 1560860028 (update if the block is re-created).
   --------------------------------------------------------------------- */
#app [component-id="1560860028"] .square-photos-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  max-width: 1210px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  #app [component-id="1560860028"] .square-photos-grid {
    grid-template-columns: repeat(3, minmax(0, 350px)) !important;
    justify-content: center;
    column-gap: clamp(24px, 4.2vw, 80px) !important;
  }
}
#app [component-id="1560860028"] .banner-entry {
  display: flex !important;
  flex-direction: column;
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;
  pointer-events: none;                       /* no link in design; remove if items link */
}
#app [component-id="1560860028"] .lazy__bg {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  aspect-ratio: var(--lw-r-why-img);
  height: auto !important;
  border-radius: 32px;
  background-size: cover !important;
  background-color: var(--lw-tile);
}
/* items without text = caption baked into the image → full 350×459 card, nothing cropped */
#app [component-id="1560860028"] .banner-entry:not(:has(h3)) .lazy__bg {
  aspect-ratio: var(--lw-r-why);
  border-radius: 0;
  background-size: contain !important;
  background-position: center top !important;
  background-color: transparent;
}
#app [component-id="1560860028"] .has-overlay::after { display: none !important; }
#app [component-id="1560860028"] h3.text-with-border {
  position: static !important;
  height: auto !important;
  border: 0 !important;
  margin-top: 20px;
  padding: 0;
  color: var(--lw-dark) !important;
  font: 700 32px/44px 'Zain', sans-serif !important;
  text-align: center;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------
   10. ORIGINS — "من أرضها إلى فنجانك" · main-links (links mode)
   Images injected by CSS (the block's image field won't take them).
   Country name is baked into each card → item titles hidden visually.
   Mapping: by link URL (category id) first; falls back to slide order.
   Hosted on postimg.cc — move to Salla CDN when possible, then swap URLs here.
   --------------------------------------------------------------------- */
#app [data-testid="store-home-main-links"] {
  --lw-o1: url('https://i.postimg.cc/L5gZS9X4/1-ethiopia-athywbya.png');   /* ethiopia */
  --lw-o2: url('https://i.postimg.cc/x8NbQfCq/2-uganda-awghnda.png');   /* uganda */
  --lw-o3: url('https://i.postimg.cc/T15Wxdwp/3-colombia-kwlwmbya.png');   /* colombia */
  --lw-o4: url('https://i.postimg.cc/mk1F4LDk/4-yemen-alymn.png');   /* yemen */
  --lw-o5: url('https://i.postimg.cc/WzqJVN3d/5-el-salvador-alsylfadwr.png');   /* el-salvador */
  --lw-o6: url('https://i.postimg.cc/7hJT4H6G/6-brazil-albrazyl.png');   /* brazil */
  --lw-o7: url('https://i.postimg.cc/WzqJVN3q/7-costa-rica-kwstaryka.png');   /* costa-rica */
}
#app [data-testid="store-home-main-links"] .slide--cat-entry {
  display: block !important;
  position: relative;
  width: 100%; max-width: 212px; margin-inline: auto;
  aspect-ratio: var(--lw-r-origin);
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;                       /* Raed: border-gray-100 + h-36 card */
  border-radius: 0 !important;
  background: var(--lw-o) center / contain no-repeat transparent !important;
  box-shadow: none !important;
  transition: transform .25s;
}
#app [data-testid="store-home-main-links"] .slide--cat-entry:hover { transform: translateY(-4px); }
/* hide the icon / category image and the item title (name is in the card) */
#app [data-testid="store-home-main-links"] .slide--cat-entry i,
#app [data-testid="store-home-main-links"] .slide--cat-entry img { display: none !important; }
#app [data-testid="store-home-main-links"] .slide--cat-entry h2 {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0;
}

/* fallback: slide order (RTL → 1st = rightmost) */
#app [data-testid="store-home-main-links"] .swiper-slide:nth-child(1) .slide--cat-entry { --lw-o: var(--lw-o1); }
#app [data-testid="store-home-main-links"] .swiper-slide:nth-child(2) .slide--cat-entry { --lw-o: var(--lw-o2); }
#app [data-testid="store-home-main-links"] .swiper-slide:nth-child(3) .slide--cat-entry { --lw-o: var(--lw-o3); }
#app [data-testid="store-home-main-links"] .swiper-slide:nth-child(4) .slide--cat-entry { --lw-o: var(--lw-o4); }
#app [data-testid="store-home-main-links"] .swiper-slide:nth-child(5) .slide--cat-entry { --lw-o: var(--lw-o5); }
#app [data-testid="store-home-main-links"] .swiper-slide:nth-child(6) .slide--cat-entry { --lw-o: var(--lw-o6); }
#app [data-testid="store-home-main-links"] .swiper-slide:nth-child(7) .slide--cat-entry { --lw-o: var(--lw-o7); }
/* preferred: link URL → country category (wins over order) */
#app [data-testid="store-home-main-links"] .swiper-slide .slide--cat-entry[href*="c1675565421"] { --lw-o: var(--lw-o1); }   /* ethiopia */
#app [data-testid="store-home-main-links"] .swiper-slide .slide--cat-entry[href*="c1034172526"] { --lw-o: var(--lw-o2); }   /* uganda */
#app [data-testid="store-home-main-links"] .swiper-slide .slide--cat-entry[href*="c1459536747"] { --lw-o: var(--lw-o3); }   /* colombia */
#app [data-testid="store-home-main-links"] .swiper-slide .slide--cat-entry[href*="c1923088757"] { --lw-o: var(--lw-o4); }   /* yemen */
#app [data-testid="store-home-main-links"] .swiper-slide .slide--cat-entry[href*="c1284317302"] { --lw-o: var(--lw-o5); }   /* el-salvador */
#app [data-testid="store-home-main-links"] .swiper-slide .slide--cat-entry[href*="c1296049356"] { --lw-o: var(--lw-o6); }   /* brazil */
#app [data-testid="store-home-main-links"] .swiper-slide .slide--cat-entry[href*="c523060173"] { --lw-o: var(--lw-o7); }   /* costa-rica */

@media (min-width: 1280px) {
  #app [data-testid="store-home-main-links"] .swiper-slide { width: calc(100% / 7) !important; padding-inline: 6px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  #app [data-testid="store-home-main-links"] .swiper-slide { width: 20% !important; padding-inline: 6px; }
}

/* ---------------------------------------------------------------------
   11. TESTIMONIALS — "آراء عملائنا" · custom-testimonials
   Raed header text is fixed ("آراء العملاء") — styled, not renamed.
   Raed slider = 1 centered slide; cards restyled only (see notes).
   --------------------------------------------------------------------- */
#app .s-block--custom-testimonials .s-reviews-testimonial {
  background: #fff !important;
  border: 2px solid var(--lw-accent);
  border-radius: 24px;
  box-shadow: none !important;
}
#app .s-block--custom-testimonials .s-reviews-testimonial__text p { color: #444 !important; font: 500 16px/28px 'Cairo', sans-serif; }
#app .s-block--custom-testimonials .s-reviews-testimonial__info h2 { color: var(--lw-dark) !important; font: 700 16px 'Cairo', sans-serif; }
#app .s-block--custom-testimonials .s-reviews-testimonial__icon svg { fill: var(--lw-accent); }
#app .s-block--custom-testimonials .s-reviews-testimonial__avatar img { border: 2px solid var(--lw-accent); border-radius: 50%; }

/* ---------------------------------------------------------------------
   12. FOOTER — logo + text + social | روابط هامة | تواصل معنا · 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 { padding-block: 40px; }

#app .store-footer__inner .container > div:first-child > a h3 {
  width: 120px; height: 110px;
  margin: 0 0 12px;
  background: var(--lw-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; max-width: 365px; }

#app .store-footer h3,
#app .store-footer .s-contacts-title { color: var(--lw-dark) !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,
#app .store-footer .s-social-link a {
  width: 34px; height: 34px;
  border: 1px solid var(--lw-accent);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important;
  color: var(--lw-dark) !important;
}

#app .store-footer > div:last-of-type,
#app .store-footer .store-footer__inner + div {
  max-width: none !important;
  background: var(--lw-soft);
  display: flex !important;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  padding: 16px 20px !important;
}
#app .store-footer .copyright-text { color: var(--lw-dark); 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;
}

/* ---------------------------------------------------------------------
   12b. MOTION — hover effects + scroll reveal
   • Hover effects only on real pointers (@media hover:hover) → no sticky
     "hovered" state after a tap on phones.
   • Scroll reveal is CSS-only (animation-timeline: view()); browsers without
     support simply show sections normally.
   • Everything is off for users with "reduce motion" enabled.
   Tune: --lw-ease / --lw-dur, or delete this section to remove all motion.
   --------------------------------------------------------------------- */
:root { --lw-ease: cubic-bezier(.22, .61, .36, 1); --lw-dur: .35s; }

@media (hover: hover) and (pointer: fine) {
  /* product cards: lift + soft shadow, photo zoom */
  #app custom-salla-product-card.s-product-card-vertical {
    transition: transform var(--lw-dur) var(--lw-ease), box-shadow var(--lw-dur) var(--lw-ease) !important;
  }
  #app custom-salla-product-card.s-product-card-vertical:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px -12px rgba(77, 31, 12, .35) !important;
  }
  #app custom-salla-product-card .s-product-card-image img { transition: transform .6s var(--lw-ease); }
  #app custom-salla-product-card:hover .s-product-card-image img { transform: scale(1.06); }

  /* add-to-cart: darken + slight press-in */
  #app custom-salla-product-card salla-add-product-button .s-button-btn {
    transition: background-color .2s, border-color .2s, transform .15s !important;
  }
  #app custom-salla-product-card salla-add-product-button .s-button-btn:active { transform: scale(.97); }

  /* wishlist heart: pop */
  #app custom-salla-product-card .s-product-card-wishlist-btn .s-button-btn { transition: transform .2s var(--lw-ease); }
  #app custom-salla-product-card .s-product-card-wishlist-btn .s-button-btn:hover { transform: scale(1.12); color: #c0392b; }

  /* wide banners: slow zoom */
  #app .s-block--fixed-banner:not(:first-of-type) img { transition: transform 1.2s var(--lw-ease); }
  #app .s-block--fixed-banner:not(:first-of-type) .banner--fixed:hover img { transform: scale(1.04); }

  /* category tiles: zoom image + lift tile */
  #app [component-id="640057903"] .banner-entry { transition: transform var(--lw-dur) var(--lw-ease), box-shadow var(--lw-dur) var(--lw-ease); }
  #app [component-id="640057903"] .banner-entry:hover { transform: translateY(-6px); box-shadow: 0 16px 30px -14px rgba(77, 31, 12, .4); }
  #app [component-id="640057903"] .banner-entry .lazy__bg { transition: transform .8s var(--lw-ease), opacity .5s !important; }
  #app [component-id="640057903"] .banner-entry:hover .lazy__bg { transform: scale(1.07); }

  /* origin cards: lift + tilt (replaces the plain lift in §10) */
  #app [data-testid="store-home-main-links"] .slide--cat-entry { transition: transform var(--lw-dur) var(--lw-ease), filter var(--lw-dur) !important; }
  #app [data-testid="store-home-main-links"] .slide--cat-entry:hover {
    transform: translateY(-6px) rotate(-1.5deg);
    filter: drop-shadow(0 10px 14px rgba(77, 31, 12, .25));
  }

  /* slider arrows + "عرض الكل": fill with brand colour */
  #app .s-slider-block__title .s-slider-nav-arrow,
  #app .s-slider-block__display-all { transition: background-color .2s, color .2s, border-color .2s; }
  #app .s-slider-block__title .s-slider-nav-arrow:not([disabled]):hover,
  #app .s-slider-block__display-all:hover {
    background: var(--lw-accent) !important; border-color: var(--lw-accent) !important; color: #fff !important;
  }
  #app .s-slider-block__title .s-slider-nav-arrow:not([disabled]):hover svg { fill: #fff; }

  /* header icons: fill on hover */
  #app #mainnav .header-btn__icon,
  #app #mainnav .s-user-menu-login-btn,
  #app #mainnav .s-user-menu-trigger { transition: background-color .2s, color .2s, transform .2s var(--lw-ease) !important; }
  #app #mainnav .s-cart-summary-wrapper:hover .header-btn__icon,
  #app #mainnav .s-user-menu-login-btn:hover,
  #app #mainnav .s-user-menu-trigger:hover {
    background: var(--lw-icon) !important; color: #fff !important; transform: translateY(-2px);
  }
  #app #mainnav .s-cart-summary-wrapper:hover .header-btn__icon::before { color: #fff !important; }
  #app #mainnav .s-user-menu-login-btn:hover svg,
  #app #mainnav .s-user-menu-trigger:hover svg { fill: #fff !important; }

  /* main menu: underline grows from the centre */
  #app .main-menu > li > a { position: relative; }
  #app .main-menu > li > a::before {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: 6px; height: 2px;
    background: var(--lw-accent); border-radius: 2px;
    transition: left var(--lw-dur) var(--lw-ease), right var(--lw-dur) var(--lw-ease);
  }
  #app .main-menu > li:hover > a::before { left: 0; right: 0; }

  /* footer links + social */
  #app .store-footer .s-menu-footer-item a,
  #app .store-footer .s-contacts-item { transition: color .2s, padding .2s var(--lw-ease); }
  #app .store-footer .s-menu-footer-item a:hover { color: var(--lw-accent) !important; padding-inline-start: 6px; }
  #app .store-footer .s-contacts-icon,
  #app .store-footer .s-social-link a { transition: background-color .2s, color .2s, transform .2s var(--lw-ease); }
  #app .store-footer .s-contacts-item:hover .s-contacts-icon,
  #app .store-footer .s-social-link a:hover {
    background: var(--lw-accent) !important; color: #fff !important; transform: translateY(-2px);
  }
}

/* scroll reveal: sections fade + rise as they enter the viewport */
@supports (animation-timeline: view()) {
  @keyframes lw-reveal { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  #app main > section.s-block:not(:first-of-type) {
    animation: lw-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   13. MOBILE (< 1024px) — no mobile design; adapted from desktop
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  #app #mainnav .inner { background: #fff !important; }
  #app #mainnav .navbar-brand img { max-height: 56px; width: auto; }
  #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; }
  #app .top-navbar .container { flex-wrap: wrap; gap: 8px; }

  /* titles */
  #app .s-block__title,
  #app .s-slider-block__title,
  #app .s-reviews-header-wrapper { margin-bottom: 16px !important; }
  #app .s-slider-block__title { flex-direction: column !important; align-items: center !important; gap: 10px; 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-slider-block__display-all { height: 32px; font-size: 11px !important; }

  /* categories: 3 small tiles in a row */
  #app [component-id="640057903"] .banner-entry { border-radius: 16px !important; }

  /* product slider: 2 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 { 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; }

  /* why liwar */
  /* why liwar: 2 per row, 3rd centred under them (was 1 big card per row) */
  #app [component-id="1560860028"] h3.text-with-border { font-size: 24px !important; line-height: 34px !important; margin-top: 12px; }


  /* 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: 96px; height: 90px; 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: 767px) {
  /* origins: 2 cards per view */
  #app [data-testid="store-home-main-links"] .swiper-slide { width: 50% !important; padding-inline: 6px; }

  #app [component-id="1560860028"] .square-photos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px 12px !important;
    max-width: 480px;
  }
  #app [component-id="1560860028"] .square-photos-grid > .banner-entry:nth-child(n) { grid-column: span 2 !important; grid-row: auto !important; }   /* :nth-child(n) = outranks the featured-3 :first-child reset */
  #app [component-id="1560860028"] .square-photos-grid > .banner-entry:nth-child(3) { grid-column: 2 / span 2 !important; }
  #app [component-id="1560860028"] .lazy__bg { border-radius: 18px !important; }
  #app [component-id="1560860028"] h3.text-with-border { font-size: 18px !important; line-height: 26px !important; margin-top: 8px; }

  #app .s-block__title h2,
  #app .s-slider-block__title-right h2,
  #app .s-reviews-header { font-size: 30px !important; line-height: 44px !important; }
  #app .s-block__title h2::after,
  #app .s-slider-block__title-right h2::after,
  #app .s-reviews-header::after { width: min(240px, 70%); }
  #app [component-id="640057903"] h3.text-with-border { font-size: 15px !important; line-height: 20px !important; bottom: 10px; }
}
/* ========================== END ========================== */