@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Alexandria:wght@500&display=swap');
/* =====================================================================
   أثر (Athr) — Salla Custom CSS · v1.0 · 2026-10-21
   Theme: Raed (رائد) 1.379.0 · version "Clavix 20/10 – Live" (profile 1793934971)
   Store: https://athrwithyou.com/ar (store 1047653817)
   Figma: implementation-Projects › Page 1 › frame "أثر" 2014:248 (1920 desktop)
          + slide 2 "بانر عروض الزوجين" 2014:757 + "بانر هدية له" 2014:767
   Mobile: no design — adapted from desktop (section 14)
   Verified against the live <body> (Oct 21 2026).

   ⚠ REPLACE the whole Custom CSS field with this file. The old CSS
     (navy #020265, full-screen splash on body::after, "ADFAZ" footer
     text) conflicts with this design and must be deleted.

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

   PALETTE (read from Figma) — every brand colour lives in :root.
     --at-ink      #180F04  headings, menu, icon rings, search border
     --at-brown    #281701  card border, buttons  (= theme primary ✓)
     --at-gold     #C69964  top bar, payments bar
     --at-gold-tx  #EBE0CF  top-bar text
     --at-bg       #FFF2E2  page + header background
     --at-chip     #F4E5D1  slider arrows fill   · --at-chip-line #86663F
     --at-more     #CD999F  "عرض الكل" border
     --at-price    #80050A  product price
     --at-sale     #B22E2E  "تخفيضات" menu item
     --at-badge    #F55157  cart counter
   FONTS: Cairo (UI) · Alexandria (card button) · titles are
     "DIN Next LT Arabic" in Figma (commercial, not on Google Fonts) →
     falls back to Cairo. If the store has a DIN Next licence, add its
     @font-face and nothing else changes.

   HOME BLOCKS (component-id → design section)
     1151222043  photos-slider   hero 1920×1000 (2 composed slides)
     1242125133  square-photos   "ابدأ أثرك معنا" 2 × 663²
     1833672792  products-slider "منتجات تترك أثرًا"
     1614909285  fixed-banner    full-bleed 1920×800 (+ mobile image)
     1631191996  products-slider "ابدأ رحلة ذكرك معنا"
     1307060869  square-photos   2 × 740×500
     1771202695  products-slider "صممت لكِ"
     823121027   photos-slider   1520×700 (2 slides)
     1555108493  products-slider "صممت لكِ" (Figma: "صممت لك")
     356882049   fixed-banner    full-bleed 1920×800
     889080039   square-photos   "لماذا أثر" 4 × 350×499 (caption baked in)
   component-ids change only if a block is deleted and re-added.
   ===================================================================== */
:root {
  --at-ink:       #180F04;
  --at-brown:     #281701;
  --at-brown-hv:  #4a2c06;
  --at-gold:      #C69964;
  --at-gold-tx:   #EBE0CF;
  --at-bg:        #FFF2E2;
  --at-chip:      #F4E5D1;
  --at-chip-line: #86663F;
  --at-more:      #CD999F;
  --at-price:     #80050A;
  --at-title:     #333333;
  --at-sale:      #B22E2E;
  --at-badge:     #F55157;

  --at-font:      'Cairo', sans-serif;
  --at-display:   'DIN Next LT Arabic', 'Cairo', sans-serif;

  /* MEDIA RATIOS — from Figma frames; uploaded images already match */
  --at-r-hero:    1920 / 1000;  /* photos-slider #1 (uploads 1440×750)  */
  --at-r-wide:    1920 / 800;   /* fixed-banners    (uploads 1440×600)  */
  --at-r-promo:   1520 / 700;   /* photos-slider #2 (uploads 1440×663)  */
  --at-r-start:   663 / 662;    /* "ابدأ أثرك معنا" (uploads 669×668)   */
  --at-r-duo:     740 / 500;    /* 2-banner row     (uploads 740×500)   */
  --at-r-why:     350 / 499;    /* "لماذا أثر"      (uploads 350×499)   */
  --at-r-product: 326 / 300;    /* card image slot                      */

  /* title ornament — redrawn from Figma 2014:343 (gold lines + bead).
     Exact art: export 2014:343 @2x, upload to Salla, put its URL here. */
  --at-ornament: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 84'><defs><linearGradient id='a' x1='0' x2='1'><stop offset='0' stop-color='%23C69964' stop-opacity='0'/><stop offset='.55' stop-color='%23C69964'/><stop offset='1' stop-color='%23A7743A'/></linearGradient><linearGradient id='b' x1='1' x2='0'><stop offset='0' stop-color='%23C69964' stop-opacity='0'/><stop offset='.55' stop-color='%23C69964'/><stop offset='1' stop-color='%23A7743A'/></linearGradient><radialGradient id='c' cx='.36' cy='.32' r='.75'><stop offset='0' stop-color='%23FCE6AE'/><stop offset='.45' stop-color='%23C9913F'/><stop offset='1' stop-color='%235E3A14'/></radialGradient></defs><path d='M14 42L234 40.4Q237 42 234 43.6Z' fill='url(%23a)'/><path d='M486 42L266 40.4Q263 42 266 43.6Z' fill='url(%23b)'/><circle cx='250' cy='42' r='9' fill='url(%23c)'/></svg>");
  /* footer logo = current store logo */
  --at-logo: url('https://cdn.files.salla.network/other/1047653817/63b48488-5a03-463b-91ce-f6da6d2a8943-original.webp');
}

/* ---------------------------------------------------------------------
   00. BASE — overflow fix, background, fonts, 1520 container, spacing
   --------------------------------------------------------------------- */
/* Raed 1.379 puts .overflow-x-hidden on <body>; with any overflow on <html>
   that makes <body> a scroll container and kills position:sticky (header).
   clip = no scroll container → sticky works and nothing overflows sideways. */
html, body { max-width: 100%; }
@supports (overflow: clip) {
  html, body#app, body#app.overflow-x-hidden, #app .app-inner { overflow-x: clip !important; }
}
salla-slider, .s-products-slider-wrapper, .swiper { max-width: 100%; }

html:not(.dark) body, html:not(.dark) #app .app-inner { background: var(--at-bg) !important; }
#app, #app button, #app input { font-family: var(--at-font); }

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

/* 60px between sections (Figma), first section flush under the header */
#app main > section.s-block { margin-top: 60px !important; }
#app main > section.s-block:first-of-type { margin-top: 8px !important; }

/* ---------------------------------------------------------------------
   01. HEADER (desktop ≥1024 = Figma 2014:251 + 2014:270)
   Row 1  top bar 40px  : policies (right) · تواصل معنا (left, JS)
   Row 2  main 112px    : logo (right) · search 1038×48 · icons (left)
   Row 3  menu strip    : store categories, centred
   STICKY: whole header is position:sticky, top −40px → top bar scrolls
   away, rows 2–3 (with the search) stay pinned. Raed's own fixed .inner
   is neutralised on desktop; mobile keeps Raed's sticky.
   --------------------------------------------------------------------- */
:root { --at-topbar-h: 40px; --at-row-h: 112px; --at-search-h: 48px; --at-menu-h: 40px; }

#app .top-navbar { background: var(--at-gold) !important; color: var(--at-gold-tx); border: 0 !important; }
#app .top-navbar a,
#app .top-navbar .s-menu-topnav-item,
#app .top-navbar .s-localization-modal-trigger-btn,
#app .top-navbar .at-topbar-contact {
  color: var(--at-gold-tx) !important;
  font: 600 12px/22px var(--at-font) !important;
}
#app .top-navbar .s-menu-topnav-item + .s-menu-topnav-item::before {
  content: "|"; margin-inline: 8px; font-size: 13px; color: var(--at-gold-tx);
}
#app .top-navbar .s-localization-modal-trigger-btn { background: transparent !important; border: 0 !important; }
#app .top-navbar .s-localization-modal-trigger-btn i { color: var(--at-gold-tx); }
/* contact link injected by the JS snippet: phone icon | تواصل معنا */
#app .at-topbar-contact { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#app .at-topbar-contact i { font-size: 16px; line-height: 1; }
#app .at-topbar-contact .at-sep { font-size: 13px; }

/* search: 2px ink border, cream fill, icon on the left (Figma) */
#app .header-search .s-search-input {
  border: 2px solid var(--at-ink) !important;
  border-radius: 24px !important;
  background: var(--at-bg) !important;
  color: var(--at-ink);
  font: 500 12px var(--at-font);
  padding-inline: 22px 48px !important;
}
#app .header-search .s-search-input::placeholder { color: #A5A5A5; }
#app .header-search .s-search-icon-wrap { right: auto !important; left: 22px !important; }
#app .header-search .s-search-icon svg { width: 16px; height: 16px; fill: var(--at-ink); }

@media (min-width: 1024px) {
  #app .store-header {
    position: relative;
    z-index: 40;
    background: var(--at-bg);
  }
  @supports (position: sticky) {
    #app .store-header { position: sticky; top: calc(-1 * var(--at-topbar-h)); }
  }

  /* row 1 */
  #app .top-navbar { height: var(--at-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: never pushes the top bar) */
  #app .top-navbar .header-search {
    position: absolute !important;
    z-index: 41;
    top: calc(var(--at-topbar-h) + (var(--at-row-h) - var(--at-search-h)) / 2);
    left: 50%;
    transform: translateX(-50%);
    width: min(1038px, calc(100vw - 600px)) !important;
    max-width: none !important;
    margin: 0 !important;
    flex: none !important;
  }
  #app .top-navbar .header-search .s-search-input { height: var(--at-search-h) !important; }

  /* row 2 */
  #app #mainnav { height: auto !important; min-height: 0 !important; box-shadow: none !important; background: var(--at-bg) !important; }
  #app #mainnav .inner,
  #app #mainnav.fixed-pinned .inner {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    background: var(--at-bg) !important;
    padding-bottom: var(--at-menu-h);
  }
  #app #mainnav .inner > .container > .flex {
    position: relative;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: var(--at-row-h);
  }
  #app #mainnav .navbar-brand { margin: 0 !important; }
  #app #mainnav .navbar-brand img,
  #app #mainnav.fixed-pinned .navbar-brand img {
    height: min(86px, calc(var(--at-row-h) - 16px)) !important;
    max-height: none !important; max-width: none !important; width: auto !important;
    border-radius: 16px;
  }
  #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 */
  #app #mainnav custom-main-menu {
    position: absolute !important;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: var(--at-menu-h);
    min-height: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--at-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;
  }
  #app .main-menu > li > a,
  #app .fixed-pinned .main-menu > li > a {
    color: var(--at-ink) !important;
    font: 700 14px/26px var(--at-font) !important;
    padding: 0 !important;
    line-height: var(--at-menu-h) !important;
  }
  #app .main-menu > li > a:hover { color: var(--at-chip-line) !important; }
  /* "تخفيضات" in red — matches an offers/sale link (VERIFY its URL) */
  #app .main-menu > li > a:is([href*="offers"], [href*="sale"], [href*="تخفيضات"]) { color: var(--at-sale) !important; }

  #app .store-header:has(#mainnav.fixed-pinned) { --at-row-h: 80px; }
}

/* icon rings: cart · wishlist (JS) · user — 40px, 2px ink ring, no fill */
#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,
#app #mainnav .at-wishlist-btn {
  width: 40px !important; height: 40px !important;
  margin: 0 !important;
  border: 2px solid var(--at-ink) !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: flex !important; align-items: center; justify-content: center;
  color: var(--at-ink) !important;
  font-size: 22px !important;
  line-height: 1;
}
#app #mainnav .header-btn__icon::before { color: var(--at-ink) !important; }
#app #mainnav .header-btn__icon.sicon-shopping-bag::before { content: "\e96b"; }   /* sicon-cart (Figma cart) */
/* guest user button: theme draws a user-in-circle SVG → swap to plain user glyph */
#app #mainnav .s-user-menu-login-btn svg { display: none !important; }
#app #mainnav .s-user-menu-login-btn::before { content: "\f078"; font-family: 'sallaicons'; font-size: 20px; color: var(--at-ink); }
#app #mainnav .s-user-menu-trigger img { border-radius: 50%; }
#app #mainnav .at-wishlist-btn i { font-size: 20px; color: var(--at-ink); }
#app #mainnav .s-cart-summary-count {
  position: absolute !important;
  top: -2px !important; right: -4px !important; left: auto !important;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: var(--at-badge) !important;
  border: 1px solid #fff;
  color: #fff !important;
  font: 700 9px/16px var(--at-font);
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------------
   02. HERO — photos-slider #1 (first home section), full-bleed 1920×1000
   Composed slides (text + "تسوق الآن" baked in). One slide per view.
   --------------------------------------------------------------------- */
#app .s-block--photos-slider .s-slider-block__title { display: none !important; }   /* no arrows in design */
#app .s-block--photos-slider .swiper { padding: 0 !important; }                        /* Raed: 0 0 40px 48px */
#app .s-block--photos-slider .swiper-slide { width: 100% !important; padding: 0 !important; }   /* Raed: 0 10px */
#app .s-block--photos-slider .swiper-slide > a { display: block; }
#app .s-block--photos-slider .swiper-slide img {
  width: 100% !important; height: auto !important; display: block;
  object-fit: cover !important; object-position: center;
  border-radius: 0 !important;
}
#app :is(.s-block--photos-slider:first-of-type, [component-id="1151222043"]) .swiper-slide img { aspect-ratio: var(--at-r-hero); }

/* pagination: brown pills */
#app .s-block--photos-slider .swiper-pagination { bottom: 16px !important; }
#app .s-block--photos-slider .swiper-pagination-bullet {
  width: 8px; height: 8px; margin: 0 4px !important;
  background: var(--at-brown) !important; opacity: .35;
  transition: width .3s, opacity .3s;
}
#app .s-block--photos-slider .swiper-pagination-bullet-active { width: 24px; border-radius: 4px; opacity: 1; }

/* ---------------------------------------------------------------------
   03. SECTION TITLES — DIN Next 60 / ink, centred, ornament underneath
   square-photos titles + products-slider titles
   --------------------------------------------------------------------- */
#app .s-block__title,
#app .s-slider-block__title {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: 24px;
  margin-bottom: 24px !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 {
  display: block;
  width: 100%;
  padding-inline: 0 !important;
  text-align: center !important;
  font: 400 60px/80px var(--at-display) !important;
  color: var(--at-ink) !important;
  margin: 0;
}
#app .s-block__title h2::after,
#app .s-slider-block__title-right h2::after {
  content: "";
  display: block;
  width: min(500px, 80%);
  aspect-ratio: 500 / 84;
  margin: -6px auto 0;
  background: var(--at-ornament) center / contain no-repeat;
}

/* slider controls: arrows on top, "عرض الكل" below — left side */
@media (min-width: 1024px) {
  #app .s-slider-block__title-left {
    position: absolute;
    left: 0; top: calc(50% + 12px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
  }
  #app .s-slider-block__title-nav { position: static !important; display: flex !important; gap: 8px; max-width: none !important; margin: 0 !important; }
}
#app .s-slider-block__title .s-slider-nav-arrow {
  width: 34px !important; height: 34px !important;
  border: 1px solid var(--at-chip-line) !important;
  border-radius: 10px !important;
  background: var(--at-chip) !important;
  box-shadow: none !important;
  color: var(--at-ink);
  display: flex !important; align-items: center; justify-content: center;
}
#app .s-slider-block__title .s-slider-nav-arrow svg { width: 14px; height: 14px; fill: var(--at-ink); }
#app .s-slider-block__title .s-slider-nav-arrow[disabled] { opacity: .45; }
#app .s-slider-block__display-all {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  height: 39px; min-width: 76px; padding: 0 12px;
  border: 1.5px solid var(--at-more);
  border-radius: 10px;
  color: #383838 !important;
  font: 600 10px var(--at-font) !important;
  white-space: nowrap;
  margin: 0 !important;
}
#app .s-slider-block__display-all::after { content: "\e970"; font-family: 'sallaicons'; font-size: 14px; line-height: 1; }

/* ---------------------------------------------------------------------
   04. SQUARE-PHOTOS — shared tile mechanics (ratio by padding, image layer)
   Raed defaults: .banner-entry h-[200px] p-3 rounded bg-gray-100; 3 items
   become "featured-3". Every block below sets its own ratio + columns.
   --------------------------------------------------------------------- */
#app [data-testid="store-home-square-photos"] .square-photos-grid { display: grid !important; grid-auto-rows: auto !important; }
#app [data-testid="store-home-square-photos"] .square-photos-grid > .banner-entry:nth-child(n) {
  position: relative;
  display: block !important;
  align-self: start;
  width: 100%;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 0 calc(100% / (var(--at-r-tile, 1))) 0 !important;
  grid-row: auto !important; grid-column: auto !important;
  border-radius: 0 !important;
  overflow: hidden;
  background: transparent !important;
  min-width: 0;
}
#app [data-testid="store-home-square-photos"] .banner-entry .lazy__bg {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  background-position: center !important;
  background-size: cover !important;
}
#app [data-testid="store-home-square-photos"] .has-overlay::after { display: none !important; }

/* 04a. "ابدأ أثرك معنا" — 2 × 663², 70px gap, centred */
#app [component-id="1242125133"] { --at-r-tile: var(--at-r-start); }
#app [component-id="1242125133"] .square-photos-grid {
  grid-template-columns: repeat(2, minmax(0, 663px)) !important;
  justify-content: center;
  gap: clamp(12px, 3.65vw, 70px) !important;
}

/* 04b. 2-banner row — 2 × 740×500, 40px gap */
#app [component-id="1307060869"] { --at-r-tile: var(--at-r-duo); }
#app [component-id="1307060869"] .square-photos-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(12px, 2.1vw, 40px) !important;
}

/* 04c. "لماذا أثر" — 4 × 350×499, caption baked into each image */
#app [component-id="889080039"] { --at-r-tile: var(--at-r-why); }
#app [component-id="889080039"] .square-photos-grid {
  grid-template-columns: repeat(4, minmax(0, 350px)) !important;
  justify-content: center;
  gap: 24px clamp(16px, 2.1vw, 40px) !important;
}
#app [component-id="889080039"] .banner-entry { pointer-events: none; }   /* items have no link */
#app [component-id="889080039"] .banner-entry .lazy__bg { background-size: contain !important; }

/* ---------------------------------------------------------------------
   05. 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: 19.5px !important; }
  #app .s-block--best-offers .swiper { margin-inline: -19.5px; max-width: none; padding-block: 6px; }
}

/* ---------------------------------------------------------------------
   06. PRODUCT CARD — 350×486, 4px brown border, full-width button
   --------------------------------------------------------------------- */
#app custom-salla-product-card.s-product-card-vertical {
  background: #fff !important;
  border: 4px solid var(--at-brown) !important;
  border-radius: 15px !important;
  padding: 10px !important;
  box-shadow: none !important;
  overflow: hidden;
  height: 100%;
}
#app custom-salla-product-card .s-product-card-image {
  height: auto !important;
  aspect-ratio: var(--at-r-product);
  flex: 0 0 auto !important;
  border-radius: 15px !important;
  overflow: hidden;
  background: #fff;
}
#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: contain !important; }
#app custom-salla-product-card .s-product-card-content { padding: 10px 0 0 !important; display: flex; flex-direction: column; flex: 1 1 auto; }
#app custom-salla-product-card .s-product-card-content-main { text-align: start; }
#app custom-salla-product-card .s-product-card-content-title,
#app custom-salla-product-card .s-product-card-content-title a {
  color: var(--at-title) !important;
  font: 700 18px/30px var(--at-font) !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-content-sub { justify-content: flex-start; margin-top: 4px; }
#app custom-salla-product-card .s-product-card-price,
#app custom-salla-product-card .s-product-card-sale-price h4 {
  color: var(--at-price) !important;
  font: 700 18px/22px var(--at-font) !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: auto; padding-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: var(--at-brown) !important;
  border-color: var(--at-brown) !important;
  color: #fff !important;
  font: 500 12px/22px 'Alexandria', var(--at-font) !important;
}
#app custom-salla-product-card salla-add-product-button .s-button-btn:hover { background: var(--at-brown-hv) !important; border-color: var(--at-brown-hv) !important; }
/* icon after the label (left in RTL) + cart glyph like Figma */
#app custom-salla-product-card salla-add-product-button .s-button-text { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 4px; }
#app custom-salla-product-card salla-add-product-button .s-button-btn i { color: #fff; font-size: 18px !important; }
#app custom-salla-product-card salla-add-product-button .sicon-shopping-bag::before { content: "\e96b"; }
/* wishlist: 32px white circle, top-left */
#app custom-salla-product-card .s-product-card-wishlist-btn { top: 10px !important; left: 10px !important; right: auto !important; position: absolute !important; z-index: 2; }
#app custom-salla-product-card .s-product-card-wishlist-btn .s-button-btn {
  width: 32px; height: 32px; padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .8) !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  color: var(--at-ink) !important;
}
#app custom-salla-product-card .s-product-card-wishlist-btn i { font-size: 14px; }

/* ---------------------------------------------------------------------
   07. WIDE BANNERS — fixed-banner ×2, full-bleed 1920×800
   (1614909285 also has a mobile image 427×899 → used below 768px)
   --------------------------------------------------------------------- */
#app .s-block--fixed-banner .container { max-width: none !important; padding: 0 !important; }
#app .s-block--fixed-banner .banner--fixed { display: block; border-radius: 0 !important; }
#app .s-block--fixed-banner img {
  width: 100% !important; height: auto !important; display: block;
  aspect-ratio: var(--at-r-wide); object-fit: cover !important; object-position: center;
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------
   08. PROMO SLIDER — photos-slider #2, container width 1520×700
   --------------------------------------------------------------------- */
#app :is(.s-block--photos-slider:not(:first-of-type), [component-id="823121027"]) {
  max-width: 1280px;                 /* = Raed .container */
  margin-inline: auto;
  padding-inline: 10px;
}
@media (min-width: 1600px) {
  #app :is(.s-block--photos-slider:not(:first-of-type), [component-id="823121027"]) { max-width: 1540px; }
}
#app :is(.s-block--photos-slider:not(:first-of-type), [component-id="823121027"]) .swiper-slide img { aspect-ratio: var(--at-r-promo); }

/* ---------------------------------------------------------------------
   09. FOOTER — logo + text + social | روابط هامة | تواصل معنا · payments bar
   Theme setting "dark footer" is on → overridden to white here.
   --------------------------------------------------------------------- */
#app .store-footer,
#app .store-footer .store-footer__inner {
  background: #fff !important; background-image: none !important; color: #000;
}
#app .store-footer { box-shadow: 0 -4px 4px rgba(255, 216, 218, .15); }
#app .store-footer .store-footer__inner { padding-block: 40px; }
@media (min-width: 1024px) {
  #app .store-footer__inner > .container {
    grid-template-columns: minmax(0, 429px) 209px 235px !important;
    justify-content: space-between;
    align-items: start;
  }
  #app .store-footer__inner > .container > * { grid-column: auto !important; padding: 0 !important; }
}
#app .store-footer__inner salla-apps-icons:not(:has(*)) { display: none !important; }

#app .store-footer__inner .container > div:first-child > a h3 {
  width: 93px; height: 86px;
  margin: 0 0 12px;
  border-radius: 16px;
  background: var(--at-logo) center / cover no-repeat;
  font-size: 0 !important; color: transparent !important;
}
#app .store-footer__inner .container > div:first-child .leading-6,
#app .store-footer__inner .container > div:first-child .leading-6 p {
  font: 500 16px/25px var(--at-font); color: #000; max-width: 365px; text-align: start !important;
  margin-bottom: 20px !important;
}
#app .store-footer h3,
#app .store-footer .s-contacts-title { color: var(--at-ink) !important; font: 700 24px/25px var(--at-font) !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 var(--at-font) !important; }
#app .store-footer .s-menu-footer-list { display: grid; gap: 12px; }
#app .store-footer .s-menu-footer-item { margin: 0 !important; }
#app .store-footer .s-contacts-list { display: grid; gap: 16px; }
#app .store-footer .s-contacts-item { display: flex; align-items: center; gap: 12px; }
#app .store-footer .s-contacts-icon,
#app .store-footer .s-social-link a {
  width: 34px; height: 34px; flex: 0 0 34px;
  border: 1px solid var(--at-chip-line);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important;
  color: var(--at-chip-line) !important;
  margin: 0 !important;
}
#app .store-footer .s-contacts-icon svg,
#app .store-footer .s-social-link svg { width: 17px; height: 17px; fill: var(--at-chip-line) !important; }
#app .store-footer .s-social-list { gap: 11px; }
#app .store-footer salla-trust-badges .s-trust-badges-label,
#app .store-footer salla-trust-badges .s-trust-badges-number { color: var(--at-ink) !important; }

/* bottom bar — gold, payments centred */
#app .store-footer > div:last-of-type {
  max-width: none !important;
  background: var(--at-gold);
  display: flex !important;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  padding: 16px 20px !important;
}
#app .store-footer .copyright-text,
#app .store-footer .copyright-text p,
#app .store-footer .copyright-text a { color: var(--at-gold-tx) !important; font-size: 12px; margin: 0 !important; }
#app .store-footer .s-payments-list { justify-content: center; gap: 8px; flex-wrap: wrap; }
#app .store-footer .s-payments-list-item {
  background: #fff !important; border-radius: 2px !important;
  width: 64px; height: 31px; padding: 3px 6px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 !important;
}
#app .store-footer .s-payments-list-item img { max-height: 100%; width: auto; object-fit: contain; }

/* ---------------------------------------------------------------------
   10. MOTION — hover (real pointers only) + scroll reveal; off for
   "reduce motion". Delete this section to remove all motion.
   --------------------------------------------------------------------- */
:root { --at-ease: cubic-bezier(.22, .61, .36, 1); --at-dur: .35s; }
@media (hover: hover) and (pointer: fine) {
  #app custom-salla-product-card.s-product-card-vertical { transition: transform var(--at-dur) var(--at-ease), box-shadow var(--at-dur) var(--at-ease) !important; }
  #app custom-salla-product-card.s-product-card-vertical:hover { transform: translateY(-6px); box-shadow: 0 14px 28px -12px rgba(40, 23, 1, .35) !important; }
  #app custom-salla-product-card .s-product-card-image img { transition: transform .6s var(--at-ease); }
  #app custom-salla-product-card:hover .s-product-card-image img { transform: scale(1.05); }
  #app custom-salla-product-card salla-add-product-button .s-button-btn { transition: background-color .2s, transform .15s !important; }
  #app custom-salla-product-card salla-add-product-button .s-button-btn:active { transform: scale(.97); }
  #app custom-salla-product-card .s-product-card-wishlist-btn .s-button-btn { transition: transform .2s var(--at-ease); }
  #app custom-salla-product-card .s-product-card-wishlist-btn .s-button-btn:hover { transform: scale(1.12); color: var(--at-sale) !important; }

  #app .s-block--fixed-banner img { transition: transform 1.2s var(--at-ease); }
  #app .s-block--fixed-banner .banner--fixed { overflow: hidden; }
  #app .s-block--fixed-banner .banner--fixed:hover img { transform: scale(1.03); }
  #app :is([component-id="1242125133"], [component-id="1307060869"]) .banner-entry .lazy__bg { transition: transform .8s var(--at-ease) !important; }
  #app :is([component-id="1242125133"], [component-id="1307060869"]) .banner-entry:hover .lazy__bg { transform: scale(1.04); }

  #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(--at-brown) !important; border-color: var(--at-brown) !important; color: #fff !important; }
  #app .s-slider-block__title .s-slider-nav-arrow:not([disabled]):hover svg { fill: #fff; }

  #app #mainnav .header-btn__icon,
  #app #mainnav .s-user-menu-login-btn,
  #app #mainnav .s-user-menu-trigger,
  #app #mainnav .at-wishlist-btn { transition: background-color .2s, color .2s, transform .2s var(--at-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,
  #app #mainnav .at-wishlist-btn:hover { background: var(--at-ink) !important; transform: translateY(-2px); }
  #app #mainnav .s-cart-summary-wrapper:hover .header-btn__icon::before,
  #app #mainnav .s-user-menu-login-btn:hover::before,
  #app #mainnav .at-wishlist-btn:hover i { color: var(--at-bg) !important; }

  #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(--at-gold); border-radius: 2px;
    transition: left var(--at-dur) var(--at-ease), right var(--at-dur) var(--at-ease);
  }
  #app .main-menu > li:hover > a::before { left: 0; right: 0; }

  #app .store-footer .s-menu-footer-item a,
  #app .store-footer a.s-menu-footer-item { transition: color .2s, padding .2s var(--at-ease); }
  #app .store-footer a.s-menu-footer-item:hover { color: var(--at-chip-line) !important; padding-inline-start: 6px; }
  #app .store-footer .s-contacts-icon,
  #app .store-footer .s-social-link a { transition: background-color .2s, transform .2s var(--at-ease); }
  #app .store-footer .s-contacts-item:hover .s-contacts-icon,
  #app .store-footer .s-social-link a:hover { background: var(--at-chip-line) !important; transform: translateY(-2px); }
  #app .store-footer .s-contacts-item:hover .s-contacts-icon svg,
  #app .store-footer .s-social-link a:hover svg { fill: #fff !important; }
}
@supports (animation-timeline: view()) {
  @keyframes at-reveal { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  #app main > section.s-block:not(:first-of-type) {
    animation: at-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; }
}

/* ---------------------------------------------------------------------
   11. MOBILE / TABLET (< 1024px) — no mobile design; adapted from desktop
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  #app main > section.s-block { margin-top: 36px !important; }
  #app main > section.s-block:first-of-type { margin-top: 0 !important; }

  /* header */
  #app #mainnav { background: var(--at-bg) !important; box-shadow: none !important; }
  #app #mainnav .inner { background: var(--at-bg) !important; }
  #app #mainnav .navbar-brand img { max-height: 56px; width: auto; border-radius: 12px; }
  #app #mainnav .header-btn__icon,
  #app #mainnav .s-user-menu-login-btn,
  #app #mainnav .s-user-menu-trigger,
  #app #mainnav .at-wishlist-btn { width: 36px !important; height: 36px !important; font-size: 18px !important; }
  #app #mainnav .inner > .container > .flex > .flex:last-child { gap: 10px; }
  #app #mainnav salla-cart-summary { margin: 0 !important; }
  #app #mainnav .s-user-menu-login-btn::before { font-size: 17px; }
  #app .at-topbar-contact { display: none !important; }   /* contacts stay in the footer on phones */
  #app .top-navbar { padding-block: 8px !important; }
  #app .top-navbar .container { flex-wrap: wrap; gap: 8px; }
  #app .header-search .s-search-input { height: 40px !important; }

  /* titles */
  #app .s-block__title,
  #app .s-slider-block__title { padding-top: 8px; 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; display: flex; 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; }

  /* 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 { padding-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: 8px !important; left: 8px !important; }
  #app custom-salla-product-card .s-product-card-wishlist-btn .s-button-btn { width: 28px; height: 28px; }

  /* "لماذا أثر": 2 × 2 */
  #app [component-id="889080039"] .square-photos-grid { grid-template-columns: repeat(2, minmax(0, 260px)) !important; gap: 20px 16px !important; }

  /* footer: stacked, centred */
  #app .store-footer .store-footer__inner { padding-block: 28px; text-align: center; }
  #app .store-footer__inner > .container { gap: 28px !important; }
  #app .store-footer__inner .container > div:first-child > a { display: flex; justify-content: center; }
  #app .store-footer__inner .container > div:first-child > a h3 { margin-inline: auto; }
  #app .store-footer__inner .container > div:first-child .leading-6,
  #app .store-footer__inner .container > div:first-child .leading-6 p { margin-inline: auto; text-align: center !important; 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-contacts-item { justify-content: center; }
  #app .store-footer .s-social-list,
  #app .store-footer .flex.gap-4 { justify-content: center; }
}
@media (max-width: 767px) {
  /* titles */
  #app .s-block__title h2,
  #app .s-slider-block__title-right h2 { font-size: 32px !important; line-height: 46px !important; }
  #app .s-block__title h2::after,
  #app .s-slider-block__title-right h2::after { width: min(260px, 70%); margin-top: -4px; }

  /* 2-tile blocks stack */
  #app [component-id="1242125133"] .square-photos-grid { grid-template-columns: minmax(0, 420px) !important; gap: 14px !important; }
  #app [component-id="1307060869"] .square-photos-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  #app [component-id="889080039"] .square-photos-grid { gap: 16px 12px !important; }

  /* fixed banner with a mobile ("small") image → show it at its own ratio */
  #app .s-block--fixed-banner .banner--fixed:has(source) img { aspect-ratio: auto; }

  /* hero pagination tighter */
  #app .s-block--photos-slider .swiper-pagination { bottom: 6px !important; }
}

  #main-content > section:nth-child(6) {
    display: none !important;
}

#app > div.app-inner.flex.flex-col.min-h-full > salla-advertisement {
  display: none !important;
}
/* ========================== END ========================== */