@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
/* =====================================================================
   JERA (جيرا) — Salla Custom CSS · v1.1
   Store: https://jeraparfum.com
   Theme: Raed (رائد) 1.379.0 · version "Clavix 20/101/2026 – Live"
   Design: PDF (4 composed banners, Photoshop export) — no Figma, no mobile
           design → mobile adapted in §10.
   Header + footer modelled on https://faisalaldayel.com/ar/
   Verified against the live <body> (Oct 29 2026): blocks present =
     fixed-banner  component-id 764869760
     featured-products-style2 (tabs) component-id 577979209

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

   PALETTE — every brand colour is a token in :root (find-and-replace to
   reskin). Sampled from the PDF banners + the store logo; VERIFY with the
   brand book if one exists.
     --jr-wine   #5a1c24  label burgundy → buttons, prices, badge
     --jr-rust   #903828  logo colour (sampled from the logo file)
     --jr-ink    #220909  dark wall in banner 2 → footer, header icons
     --jr-cream  #f3e6d6  thank-you card / bag → footer text, tiles
     --jr-sand   #b79174  gift bag in light → dividers, borders
     --jr-bg     #fbf8f4  page background
   FONTS: store font (PingARLT, theme setting) for Arabic UI;
          Marcellus (Google) for Latin display — product names, titles.

   v1.1 — §11 floating WhatsApp button (needs the jera-whatsapp.js snippet)

   ⚠ Theme primary colour is still Salla default #aed8e0. §00 overrides the
     primary variables, but also set it in theme settings → #5a1c24.
   ===================================================================== */
:root {
  --jr-wine:  #5a1c24;
  --jr-wine-hover: #3f1219;
  --jr-rust:  #903828;
  --jr-ink:   #220909;
  --jr-cream: #f3e6d6;
  --jr-sand:  #b79174;
  --jr-bg:    #fbf8f4;
  --jr-paper: #f7f1ea;   /* products section + footer bottom bar */
  --jr-text:  #2a1714;
  --jr-muted: #8c7b72;
  --jr-icon:  var(--jr-ink);   /* header icon colour (reference: near-black, no rings) */

  /* theme primary → brand (kills the default teal on every page) */
  --color-primary: #5a1c24;
  --color-primary-dark: #3f1219;
  --color-primary-light: #f3e6d6;
  --color-primary-reverse: #ffffff;

  /* MEDIA RATIOS — one place for every image slot */
  --jr-r-hero:    2000 / 824;   /* PDF pages 1–3 (1440×593 artboard)          */
  --jr-r-hero-m:  6 / 5;        /* phones: CSS crop of the same image (§03)    */
  --jr-r-product: 5 / 6;        /* store photos are 416×500 / 500×500          */

  /* LOGO — the store logo file is 900×900 with ~25% transparent padding on
     every side, so it renders tiny. The box is enlarged and the padding is
     clipped (clicks follow the clip). If a tightly-cropped logo is uploaded
     later, set --jr-logo-clip: none and --jr-logo-box: 56px / 40px.        */
  --jr-logo: url('https://cdn.files.salla.network/other/1200840209/950c28e6-8354-4ef0-8550-73467a787b5e-original.webp');
  --jr-logo-box: 126px;              /* → mark+wordmark ≈ 56px tall */
  --jr-logo-clip: inset(26% 21%);

  /* HEADER metrics */
  --jr-row-h: 96px;
  --jr-ico: 40px;                   /* icon hit box */
  --jr-ico-gap: 8px;
  --jr-icons-w: calc(2 * var(--jr-ico) + 2 * var(--jr-ico-gap));   /* user + cart, search sits after them */

  --jr-ease: cubic-bezier(.22, .61, .36, 1);

  /* 4-point sparkle from the packaging (divider under titles) */
  --jr-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23b79174' d='M6 0 7.1 4.9 12 6 7.1 7.1 6 12 4.9 7.1 0 6 4.9 4.9Z'/%3E%3C/svg%3E");
  /* footer top curve */
  --jr-curve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V30C240 10 480 0 720 0s480 10 720 30v18Z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   00. BASE — overflow fix (clip keeps position:sticky working), background
   --------------------------------------------------------------------- */
html, body#app { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) {
  html, 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#app, html:not(.dark) #app .app-inner { background: var(--jr-bg) !important; }
#app { color: var(--jr-text); }

/* ---------------------------------------------------------------------
   01. HEADER — reference layout, one row:
       right  : main menu (desktop) · hamburger (mobile)
       centre : logo
       left   : search · account · cart   (plain glyphs, no rings)
   The search lives in Raed's .top-navbar. That bar is laid over the main
   row (absolute, bottom-aligned), and the search is parked next to the
   icons → it stays in place when the header sticks.
   Sticky = the whole <header> is position:sticky (works with the theme's
   "sticky header" setting on or off; Raed's own fixed pin is neutralised).
   --------------------------------------------------------------------- */
#app .store-header {
  position: relative;
  z-index: 40;
  background: #fff;
  box-shadow: 0 1px 0 rgba(34, 9, 9, .08);
}
@supports (position: sticky) {
  #app .store-header { position: sticky; top: 0; }
}

/* top bar → transparent overlay on the main row, only the search is live */
#app .top-navbar {
  position: absolute !important;
  inset: auto 0 0 0;
  height: var(--jr-row-h);
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  z-index: 50;                                            /* above the pinned row (Raed gives it z 29) */
  pointer-events: none;
}
#app .top-navbar > .container {
  height: 100%;
  align-items: center;
  justify-content: flex-end;          /* RTL: flex-end = left, next to the icons */
}
#app .top-navbar > .container > .flex-1 { flex: 0 0 auto !important; justify-content: flex-end; gap: 0 !important; }
#app .top-navbar salla-contacts,
#app .top-navbar .header-buttons,
#app .top-navbar salla-bullet-delivery-tag,
#app .top-navbar salla-menu { display: none !important; }

/* search → 40px icon button (clicking opens Salla's search modal) */
#app .top-navbar .header-search {
  position: relative;
  flex: none !important;
  width: var(--jr-ico) !important;
  height: var(--jr-ico);
  margin: 0 !important;
  margin-inline-end: var(--jr-icons-w) !important;   /* RTL: gap on the left = user + cart */
  pointer-events: auto;
}
#app .header-search salla-search,
#app .header-search .s-search-placeholder-wrapper,
#app .header-search .s-search-input-wrapper {
  display: block !important;
  position: relative;
  width: var(--jr-ico) !important;
  height: var(--jr-ico) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#app .header-search .s-search-input {
  width: var(--jr-ico) !important;
  height: var(--jr-ico) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  caret-color: transparent;
  cursor: pointer;
}
#app .header-search .s-search-input::placeholder { color: transparent !important; }
#app .header-search .s-search-icon-wrap {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  transform: none !important;                             /* Salla: top 50% + translateY(-50%) */
  pointer-events: none;
  z-index: 1;
}
#app .header-search .s-search-icon { display: flex; margin: 0 !important; }
#app .header-search .s-search-icon svg { width: 20px !important; height: 20px !important; fill: var(--jr-icon) !important; }

/* main row */
#app #mainnav { height: auto !important; min-height: 0 !important; box-shadow: none !important; background: #fff !important; }
#app #mainnav .inner,
#app #mainnav.fixed-pinned .inner {                     /* neutralise Raed's fixed pin */
  position: static !important;
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
  background: #fff !important;
}
#app #mainnav .inner > .container > .flex {             /* Raed class .relative → anchors the logo */
  position: relative;
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-height: var(--jr-row-h);
}
#app #mainnav .inner > .container > .flex > .flex { margin-block: 0 !important; }

/* logo — centred, padding clipped */
#app #mainnav .navbar-brand {
  position: absolute !important;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  z-index: 2;
  pointer-events: none;
}
#app #mainnav .navbar-brand img,
#app #mainnav.fixed-pinned .navbar-brand img {
  display: block;
  width: var(--jr-logo-box) !important;
  height: var(--jr-logo-box) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  clip-path: var(--jr-logo-clip);
  pointer-events: auto;
}

#app #mainnav custom-main-menu { min-height: 0 !important; }   /* Raed: min-height 84px (all widths) */

/* hamburger (mobile) */
#app #mainnav .mburger { margin: 0 !important; color: var(--jr-icon); }
#app #mainnav .mburger i { color: var(--jr-icon) !important; font-size: 24px !important; }

/* desktop main menu — sits on the right of the row */
@media (min-width: 1024px) {
  #app #mainnav custom-main-menu { display: flex; align-items: center; }
  #app .main-menu,
  #app .fixed-pinned .main-menu {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 28px;
    margin: 0 !important;
    padding: 0 !important;                              /* Raed: mx-6 pt-8 */
  }
  #app .main-menu > li > a,
  #app .fixed-pinned .main-menu > li > a {
    padding: 0 !important;                              /* Raed: pb-8 / 20px pinned */
    line-height: var(--jr-row-h) !important;
    color: var(--jr-text) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    white-space: nowrap;
  }
  #app .main-menu > li > a:hover { color: var(--jr-wine) !important; }
}

/* icons — plain glyphs, 40px hit box, no rings */
#app #mainnav .inner > .container > .flex > .flex:last-child { gap: var(--jr-ico-gap); }
#app #mainnav salla-user-menu,
#app #mainnav salla-cart-summary { margin: 0 !important; min-width: 0 !important; }
#app #mainnav .s-cart-summary-wrapper {
  position: relative;
  display: flex; align-items: center;
  padding: 0 !important; border: 0 !important; background: transparent !important;
}
#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: var(--jr-ico) !important;
  height: var(--jr-ico) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;                                  /* Raed rings .header-btn__icon */
  border-radius: 50% !important;
  background: transparent !important;
  display: flex !important; align-items: center; justify-content: center;
  color: var(--jr-icon) !important;
  font-size: 21px !important;
}
#app #mainnav .header-btn__icon::before { color: var(--jr-icon) !important; }
#app #mainnav .header-btn__icon.sicon-shopping-bag::before { content: "\e96b"; }   /* = sicon-cart, as in the reference */
/* guest account button: swap Raed's SVG for the sallaicons user glyph */
#app #mainnav .s-user-menu-login-btn svg { display: none !important; }
#app #mainnav .s-user-menu-login-btn::before {
  content: "\f078";                                       /* sicon-user */
  font-family: 'sallaicons' !important;
  font-size: 21px; line-height: 1; color: var(--jr-icon);
}
#app #mainnav .s-user-menu-trigger svg { width: 21px; height: 21px; fill: var(--jr-icon) !important; }
#app #mainnav .s-cart-summary-count {
  position: absolute !important;
  top: 0 !important; right: -2px !important; left: auto !important;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: var(--jr-wine) !important;
  border: 1.5px solid #fff;
  color: #fff !important;
  font: 700 10px/15px var(--font-main), sans-serif;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------------
   02. SECTION TITLES — centred, Marcellus/Arabic, sparkle divider
   --------------------------------------------------------------------- */
#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 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;
  margin: 0;
  text-align: center !important;
  font-family: 'Marcellus', var(--font-main), serif !important;
  font-size: 32px !important;
  line-height: 1.4 !important;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--jr-ink) !important;
}
#app .s-block__title h2::after,
#app .s-slider-block__title-right h2::after {
  content: "";
  display: block;
  width: 140px; height: 12px;
  margin: 10px auto 0;
  background:
    linear-gradient(var(--jr-sand), var(--jr-sand)) left  center / calc(50% - 14px) 1px no-repeat,
    linear-gradient(var(--jr-sand), var(--jr-sand)) right center / calc(50% - 14px) 1px no-repeat,
    var(--jr-star) center / 12px 12px no-repeat;
}
#app .s-slider-block__title-right p { color: var(--jr-muted); }

@media (min-width: 1024px) {
  #app .s-slider-block__title-left {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    display: flex; 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: 36px !important; height: 36px !important;
  border: 1px solid var(--jr-sand) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--jr-ink);
}
#app .s-slider-block__display-all {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 16px;
  border: 1px solid var(--jr-wine);
  border-radius: 10px;
  color: var(--jr-wine) !important;
  font-size: 13px !important; font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   03. HERO — photos-slider (صور متحركة), FIRST home block, full-bleed
   3 composed slides 2000×824 (text + CTA baked in, PDF pages 1–3).
   Each slide's link = the block's item link.
   Phones: same image cropped to 6:5 on the text side (no mobile-image field
   on this block). Slides are matched by Raed's alt "<store> image-slider-N"
   (N = 0,1,2 in editor order) — survives Swiper's loop clones.
   --------------------------------------------------------------------- */
#app .s-block--photos-slider { margin-top: 0 !important; margin-bottom: 0 !important; }
#app .s-block--photos-slider salla-slider.photos-slider .swiper {
  padding: 0 !important;                                  /* Raed: rtl:pl-6 md:pl-12 pb-10 */
  margin: 0 !important;
}
#app .s-block--photos-slider salla-slider.photos-slider .swiper-slide {
  width: 100% !important;                                 /* Raed: lg:w-[80%] centred peek */
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#app .s-block--photos-slider .swiper-slide a { display: block; }
#app .s-block--photos-slider .swiper-slide img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--jr-r-hero);
  object-fit: cover !important;
  object-position: center;
  border-radius: 0 !important;
}
#app .s-block--photos-slider .swiper-pagination { bottom: 14px !important; z-index: 2; }
#app .s-block--photos-slider .swiper-pagination-bullet {
  width: 8px; height: 8px; margin: 0 4px !important;
  background: var(--jr-cream) !important; opacity: .55;
  transition: width .3s var(--jr-ease), opacity .3s;
}
#app .s-block--photos-slider .swiper-pagination-bullet-active { width: 24px; border-radius: 4px; opacity: 1; }
#app .s-block--photos-slider .s-slider-block__title { display: none !important; }   /* no title on the hero */

@media (max-width: 767px) {
  #app .s-block--photos-slider .swiper-slide img { aspect-ratio: var(--jr-r-hero-m); }
  /* text side of each composed slide (object-position x is physical: 0% = left edge) */
  #app .s-block--photos-slider img[alt$="image-slider-0"] { object-position: 0% 50%; }    /* "عطر يترك أثر" — text left  */
  #app .s-block--photos-slider img[alt$="image-slider-1"] { object-position: 100% 50%; }  /* "الفخامة تبدأ…" — text right */
  #app .s-block--photos-slider img[alt$="image-slider-2"] { object-position: 6% 50%; }    /* "تفاصيل تليق…" — text left */
}

/* ---------------------------------------------------------------------
   04. FIXED BANNERS — full-bleed (Tamara banner, PDF page 4, 1953×805)
   Desktop image + mobile ("small") image 1300×805 via the block fields.
   Also covers the current fixed-banner 764869760 until it is re-used.
   --------------------------------------------------------------------- */
#app .s-block--fixed-banner { margin-top: 0 !important; margin-bottom: 0 !important; }
#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 { display: block; width: 100% !important; height: auto !important; }
#app .s-block--fixed-banner + .s-block--fixed-banner { margin-top: 0 !important; }

/* ---------------------------------------------------------------------
   05. PRODUCTS SECTION — background + spacing
   (a) featured-products-style2 "tabs" (577979209, current) → 3-up grid
   (b) products-slider (منتجات متحركة, recommended — has a title field)
   --------------------------------------------------------------------- */
#app .s-block--tabs-produtcs,
#app .s-block--best-offers {
  background: var(--jr-paper) !important;
  margin-top: 0 !important;
  padding-block: 64px !important;
}
#app .s-block--best-offers {                              /* Raed: section is .container → paint full-bleed */
  box-shadow: 0 0 0 100vmax var(--jr-paper);
  clip-path: inset(0 -100vmax);
}
@media (min-width: 1024px) {
  #app .s-block--tabs-produtcs .s-products-list-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    max-width: 1080px;
    margin-inline: auto;
  }
  #app .s-products-slider-card { max-width: none !important; width: 25% !important; padding-inline: 12px !important; }
}

/* ---------------------------------------------------------------------
   06. PRODUCT CARD (all pages) — white card, 5:6 photo, centred text,
   Marcellus name, wine price, wine button
   --------------------------------------------------------------------- */
#app custom-salla-product-card.s-product-card-vertical {
  background: #fff !important;
  border: 1px solid rgba(183, 145, 116, .35) !important;
  border-radius: 6px !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
#app custom-salla-product-card .s-product-card-image {
  height: auto !important;
  aspect-ratio: var(--jr-r-product);
  flex: 0 0 auto !important;
  border-radius: 0 !important;
  overflow: hidden;
  background: var(--jr-cream) !important;
}
#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: 18px 16px 16px !important; text-align: center; }
#app custom-salla-product-card .s-product-card-content-main { text-align: center; }
#app custom-salla-product-card .s-product-card-content-title,
#app custom-salla-product-card .s-product-card-content-title a {
  color: var(--jr-ink) !important;
  font-family: 'Marcellus', var(--font-main), serif !important;
  font-size: 19px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  letter-spacing: .12em;
  text-align: center !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#app custom-salla-product-card .s-product-card-content-sub { justify-content: center !important; margin-top: 6px; min-height: 24px; }
#app custom-salla-product-card .s-product-card-sale-price { display: flex !important; align-items: baseline; justify-content: center; gap: 10px; }
#app custom-salla-product-card .s-product-card-price,
#app custom-salla-product-card .s-product-card-sale-price h4 {
  color: var(--jr-wine) !important;
  font-size: 17px !important; font-weight: 700 !important; line-height: 24px;
  margin: 0 !important;
}
#app custom-salla-product-card .s-product-card-sale-price span { color: var(--jr-muted) !important; font-size: 13px !important; }
#app custom-salla-product-card .s-product-card-content-footer { margin-top: 14px !important; }
#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: 44px;
  border-radius: 10px !important;
  background: var(--jr-wine) !important;
  border: 1px solid var(--jr-wine) !important;
  color: #fff !important;
  font-size: 14px !important; font-weight: 600 !important;
}
#app custom-salla-product-card salla-add-product-button .s-button-btn:hover { background: var(--jr-wine-hover) !important; border-color: var(--jr-wine-hover) !important; }
#app custom-salla-product-card salla-add-product-button .s-button-btn i { color: #fff !important; font-size: 16px; }
/* wishlist: host salla-button and inner <button> share the class → position the host, style the button */
#app custom-salla-product-card salla-button.s-product-card-wishlist-btn { top: 12px !important; left: 12px !important; right: auto !important; }
#app custom-salla-product-card button.s-product-card-wishlist-btn {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(34, 9, 9, .15);
  color: var(--jr-wine) !important;
}

/* ---------------------------------------------------------------------
   07. FOOTER — reference layout (dark, curved top):
       row 1  روابط مهمة (right) · logo + badges (centre) · apps (left)
       row 2  dashed rule · contacts centred · social centred
       bar    light: copyright (right) · payments (left)
   --------------------------------------------------------------------- */
#app .store-footer {
  position: relative;
  margin-top: 64px;
  background: var(--jr-ink) !important;
  color: var(--jr-cream);
}
#app .store-footer::before {                              /* curved top edge */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: calc(100% - 1px);            /* 1px overlap = no seam */
  height: clamp(20px, 3.3vw, 48px);
  background: var(--jr-ink);
  -webkit-mask: var(--jr-curve) center / 100% 100% no-repeat;
          mask: var(--jr-curve) center / 100% 100% no-repeat;
  pointer-events: none;
}
#app .store-footer .store-footer__inner {
  background: var(--jr-ink) !important;
  background-image: none !important;
  color: var(--jr-cream) !important;
  border: 0 !important;                                   /* Raed: dashed bottom border */
  padding: 40px 0 0 !important;
}
#app .store-footer__inner > .container {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 32px !important;
  text-align: center;
}
#app .store-footer__inner > .container > * { padding: 0 !important; margin: 0 !important; min-width: 0; }

/* brand column: logo (store logo, recoloured cream via mask) */
#app .store-footer__inner > .container > div:first-child > a { justify-content: center; }
#app .store-footer__inner > .container > div:first-child > a h3 {
  width: 150px; height: 124px;                           /* logo artwork ratio 483:399 */
  margin: 0 auto !important;
  background: var(--jr-cream) !important;
  -webkit-mask: var(--jr-logo) center / 186% auto no-repeat;   /* 186% = zoom past the file's padding */
          mask: var(--jr-logo) center / 186% auto no-repeat;
  font-size: 0 !important; color: transparent !important;
}
#app .store-footer__inner > .container > div:first-child .leading-6 { color: rgba(243, 230, 214, .8); max-width: 420px; margin: 12px auto 0; }
#app .store-footer__inner > .container > div:first-child > .hidden { display: none !important; }   /* social moves under contacts */
#app .store-footer__inner > .container > div:first-child > .flex { justify-content: center; margin-top: 20px; }
#app .store-footer salla-trust-badges { display: flex; align-items: center; gap: 10px; color: var(--jr-cream); }
#app .store-footer .s-trust-badges-image { width: 44px; height: 44px; background: #fff; border-radius: 6px; padding: 3px; }
#app .store-footer .s-trust-badges-content { text-align: start; }
#app .store-footer .s-trust-badges-label { color: rgba(243, 230, 214, .75) !important; font-size: 12px; margin: 0; }
#app .store-footer .s-trust-badges-number { color: var(--jr-cream) !important; font-size: 15px; letter-spacing: .04em; }

/* titles + links */
#app .store-footer h3,
#app .store-footer .s-contacts-title {
  color: var(--jr-cream) !important;
  font-size: 18px !important; font-weight: 700 !important;
  margin-bottom: 16px !important;
}
#app .store-footer .s-menu-footer-list { display: grid; gap: 6px; justify-items: center; }
#app .store-footer .s-menu-footer-item,
#app .store-footer .s-menu-footer-item a,
#app .store-footer salla-menu a {
  color: rgba(243, 230, 214, .85) !important;
  font-size: 15px !important; line-height: 32px;
  border: 0 !important;
}
#app .store-footer salla-menu a:hover { color: #fff !important; }

/* contacts row */
#app .store-footer__inner > .container > div:nth-child(3) {
  border-top: 1px dashed rgba(243, 230, 214, .22);
  padding: 22px 0 18px !important;
}
#app .store-footer__inner > .container > div:nth-child(3) .s-contacts-title { display: none !important; }
#app .store-footer .s-contacts-list,
#app .store-footer #contact-slot {
  display: flex !important; flex-wrap: wrap;
  justify-content: center; gap: 12px 24px;
}
#app .store-footer .s-contacts-item {
  display: inline-flex !important; align-items: center; gap: 10px;
  color: var(--jr-cream) !important; font-size: 14px !important;
  margin: 0 !important;
}
#app .store-footer .s-contacts-icon {
  width: 32px; height: 32px; flex: none;
  border: 1px solid rgba(243, 230, 214, .6);
  border-radius: 50%;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: transparent !important; margin: 0 !important;
}
#app .store-footer .s-contacts-icon svg { width: 14px; height: 14px; fill: var(--jr-cream) !important; }
#app .store-footer .contact-social { display: block !important; margin-top: 16px; padding: 0 !important; border: 0 !important; }
#app .store-footer .s-social-list { display: flex; justify-content: center; gap: 10px; }
#app .store-footer .s-social-link a {
  width: 32px; height: 32px;
  border: 1px solid rgba(243, 230, 214, .6);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important;
}
#app .store-footer .s-social-link a svg { width: 14px; height: 14px; fill: var(--jr-cream) !important; }

/* bottom bar — light, full-bleed background, contained content */
#app .store-footer > div:last-of-type {
  position: relative;
  background: var(--jr-paper);
  box-shadow: 0 0 0 100vmax var(--jr-paper);
  clip-path: inset(0 -100vmax);
  padding-block: 14px !important;
  display: flex !important; flex-direction: column; align-items: center; gap: 10px;
}
#app .store-footer .copyright-text,
#app .store-footer .copyright-text p { color: var(--jr-muted) !important; font-size: 13px; margin: 0 !important; }
#app .store-footer .copyright-text a { color: var(--jr-wine) !important; }
#app .store-footer .s-payments-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#app .store-footer .s-payments-list-item {
  width: 52px; height: 32px;
  background: #fff !important;
  border: 1px solid rgba(34, 9, 9, .08);
  border-radius: 4px !important;
  display: flex; align-items: center; justify-content: center;
}
#app .store-footer .s-payments-list-item img { max-width: 40px; max-height: 22px; object-fit: contain; }

@media (min-width: 1024px) {
  #app .store-footer .store-footer__inner { padding-top: 56px !important; }
  #app .store-footer__inner > .container {
    grid-template-columns: 1fr 1.15fr 1fr;
    column-gap: 24px !important; row-gap: 36px !important;
    align-items: start;
  }
  /* RTL grid: column 1 = right */
  #app .store-footer__inner > .container > div:nth-child(2)  { grid-column: 1 !important; grid-row: 1; }   /* روابط مهمة */
  #app .store-footer__inner > .container > div:first-child   { grid-column: 2 !important; grid-row: 1; }   /* logo + badges */
  #app .store-footer__inner > .container > salla-apps-icons  { grid-column: 3 !important; grid-row: 1; }   /* apps (empty now) */
  #app .store-footer__inner > .container > div:nth-child(3)  { grid-column: 1 / -1 !important; grid-row: 2; }   /* contacts + social */
  #app .store-footer > div:last-of-type { flex-direction: row; justify-content: space-between; }
}

/* ---------------------------------------------------------------------
   08. MOTION — hover only on real pointers; off for reduced motion
   --------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  #app custom-salla-product-card.s-product-card-vertical {
    transition: transform .35s var(--jr-ease), box-shadow .35s var(--jr-ease) !important;
  }
  #app custom-salla-product-card.s-product-card-vertical:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px -18px rgba(34, 9, 9, .45) !important;
  }
  #app custom-salla-product-card .s-product-card-image img { transition: transform .7s var(--jr-ease); }
  #app custom-salla-product-card:hover .s-product-card-image img { transform: scale(1.05); }
  #app #mainnav .header-btn__icon,
  #app #mainnav .s-user-menu-login-btn,
  #app .header-search .s-search-icon-wrap { transition: transform .2s var(--jr-ease); }
  #app #mainnav .s-cart-summary-wrapper:hover .header-btn__icon,
  #app #mainnav .s-user-menu-login-btn:hover,
  #app .header-search:hover .s-search-icon-wrap { transform: translateY(-2px); }
  #app .s-block--fixed-banner img { transition: transform 1.2s var(--jr-ease); }
  #app .s-block--fixed-banner .banner--fixed { overflow: hidden; }
  #app .s-block--fixed-banner .banner--fixed:hover img { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   09. OPTIONAL — announcement bar (reference has one). CSS-only text.
   Uncomment and edit the text to enable.
   --------------------------------------------------------------------- */
/*
#app .store-header::before {
  content: "شحن سريع لجميع مناطق المملكة";
  display: block;
  padding: 10px 16px;
  background: var(--jr-wine);
  color: var(--jr-cream);
  font-size: 14px; text-align: center;
}
*/

/* ---------------------------------------------------------------------
   10. MOBILE (< 1024px) — no mobile design; adapted from desktop
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  :root {
    --jr-row-h: 64px;
    --jr-ico: 36px;
    --jr-ico-gap: 2px;
    --jr-logo-box: 92px;                                  /* → logo ≈ 41px */
  }
  #app #mainnav .header-btn__icon,
  #app #mainnav .s-user-menu-login-btn,
  #app #mainnav .s-user-menu-trigger,
  #app #mainnav .s-user-menu-login-btn::before { font-size: 20px !important; }
  #app .header-search .s-search-icon svg { width: 18px !important; height: 18px !important; }

  #app .s-block__title,
  #app .s-slider-block__title { margin-bottom: 20px !important; }
  #app .s-block__title h2,
  #app .s-slider-block__title-right h2 { font-size: 24px !important; }
  #app .s-slider-block__title { flex-direction: column !important; align-items: center !important; gap: 10px; }
  #app .s-slider-block__title-left { position: static; transform: none; justify-content: center; width: 100%; margin: 0 !important; }

  #app .s-block--tabs-produtcs,
  #app .s-block--best-offers { padding-block: 36px !important; }
  #app .s-block--tabs-produtcs .s-products-list-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  #app .s-products-slider-card { width: 50% !important; max-width: none !important; padding-inline: 6px !important; }

  #app custom-salla-product-card .s-product-card-content { padding: 12px 10px !important; }
  #app custom-salla-product-card .s-product-card-content-title,
  #app custom-salla-product-card .s-product-card-content-title a { font-size: 15px !important; line-height: 22px !important; letter-spacing: .08em; }
  #app custom-salla-product-card .s-product-card-price,
  #app custom-salla-product-card .s-product-card-sale-price h4 { font-size: 15px !important; }
  #app custom-salla-product-card .s-product-card-sale-price { gap: 6px; flex-wrap: wrap; }
  #app custom-salla-product-card .s-product-card-sale-price span { font-size: 12px !important; }
  #app custom-salla-product-card .s-product-card-content-footer { margin-top: 10px !important; }
  #app custom-salla-product-card salla-add-product-button .s-button-btn { height: 38px; font-size: 12px !important; padding-inline: 4px; }
  #app custom-salla-product-card salla-button.s-product-card-wishlist-btn { top: 8px !important; left: 8px !important; }
  #app custom-salla-product-card button.s-product-card-wishlist-btn { width: 30px !important; height: 30px !important; }

  #app .store-footer { margin-top: 40px; }
  #app .store-footer__inner > .container > div:first-child { order: -1; }   /* logo first on phones */
  #app .store-footer__inner > .container > div:first-child > a h3 { width: 120px; height: 99px; }
}
/* ---------------------------------------------------------------------
   11. FLOATING WHATSAPP BUTTON — element added by jera-whatsapp.js
   Bottom right (reference position), WhatsApp green, label on hover
   (desktop). Raised on product/cart pages on phones (sticky buy bar),
   hidden while the mobile menu is open.
   --------------------------------------------------------------------- */
:root { --jr-wa: #25d366; --jr-wa-hover: #1ebe5a; --jr-wa-size: 56px; --jr-wa-gap: 24px; }
.jr-wa {
  position: fixed;
  right: var(--jr-wa-gap);
  bottom: var(--jr-wa-gap);
  z-index: 60;
  width: var(--jr-wa-size);
  height: var(--jr-wa-size);
  border-radius: 50%;
  background: var(--jr-wa);
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .35);
  transition: background-color .2s, transform .25s var(--jr-ease), bottom .25s var(--jr-ease);
  -webkit-tap-highlight-color: transparent;
}
.jr-wa i { font-size: 30px; line-height: 1; color: #fff; }
.jr-wa::after {                                            /* soft pulse ring */
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--jr-wa);
  animation: jr-wa-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes jr-wa-pulse { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(1.45); opacity: 0; } }
.jr-wa__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translate(8px, -50%);
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--jr-ink);
  color: var(--jr-cream);
  font: 600 13px/1.4 var(--font-main), sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s var(--jr-ease);
}
@media (hover: hover) and (pointer: fine) {
  .jr-wa:hover { background: var(--jr-wa-hover); transform: translateY(-3px); }
  .jr-wa:hover .jr-wa__label { opacity: 1; transform: translate(0, -50%); }
}
body.menu-opened .jr-wa { display: none; }
@media (max-width: 767px) {
  :root { --jr-wa-size: 52px; --jr-wa-gap: 16px; }
  .jr-wa i { font-size: 28px; }
  .jr-wa__label { display: none; }
  body.jr-wa-raised .jr-wa { bottom: 88px; }               /* above Raed's sticky add-to-cart bar */
}
@media (prefers-reduced-motion: reduce) { .jr-wa::after { animation: none; display: none; } }
/* ========================== END ========================== */