:root {
  --faal-white: #ffffff;
  --faal-cream: #fffcf4;
  --faal-bg: #f4ece3;
  --faal-green: #022f2c;
  --faal-green-800: #011a18;
  --faal-black: #011412;
  --faal-accent: #3ac26b;
  --faal-mint: #7de38b;
  --faal-yellow: #fee9b3;
  --faal-muted: #6a706c;
  --faal-line: #e5ded4;
  --faal-card: #fffefa;
  --faal-shadow: 0 22px 70px rgba(1, 20, 18, 0.08);
  --faal-radius-sm: 16px;
  --faal-radius: 24px;
  --faal-radius-lg: 32px;
  --faal-container: 1320px;
  --faal-section: clamp(72px, 8vw, 112px);
  --faal-font: "thmanyah sans", "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--faal-bg);
  color: var(--faal-green-800);
  font-family: var(--faal-font);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

body.faal-theme {
  direction: rtl;
  background:
    linear-gradient(180deg, rgba(119, 246, 133, 0.85) 0, rgba(254, 222, 142, 0.6) 150px, rgba(244, 236, 227, 0) 740px) no-repeat top center / 100% 740px,
    var(--faal-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
}

.faal-container {
  width: min(var(--faal-container), calc(100% - 40px));
  margin-inline: auto;
}

.faal-page {
  overflow: hidden;
}

.faal-section {
  padding-block: var(--faal-section);
}

.faal-section-tight {
  padding-block: clamp(56px, 6vw, 88px);
}

.faal-section-title {
  max-width: 760px;
  margin: 0 auto clamp(32px, 5vw, 64px);
  text-align: center;
}

.faal-section-title h2,
.faal-section-title h1 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.2;
}

.faal-section-title p {
  margin: 16px 0 0;
  color: var(--faal-green-800);
  font-size: clamp(17px, 2vw, 22px);
}

.faal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--faal-green);
  border-radius: 999px;
  background: var(--faal-green);
  color: var(--faal-white);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.faal-btn:hover {
  transform: translateY(-2px);
  background: var(--faal-black);
}

.faal-btn.is-light {
  background: var(--faal-white);
  color: var(--faal-green);
}

.faal-btn.is-compact {
  min-height: 36px;
  padding-inline: 18px;
  font-size: 13px;
}

.faal-btn--mint {
  background: var(--faal-mint);
  border-color: var(--faal-mint);
  color: var(--faal-green);
}

.faal-btn--mint:hover {
  background: var(--faal-accent);
  border-color: var(--faal-accent);
}

.faal-btn--outline {
  background: transparent;
  color: var(--faal-green);
  border-color: var(--faal-green);
}

.faal-btn--outline:hover {
  background: var(--faal-green);
  color: var(--faal-white);
  transform: translateY(-2px);
}

.faal-gradient-card {
  background: linear-gradient(180deg, var(--faal-accent) 0%, var(--faal-cream) 100%);
}

/* Main navigation (<custom-main-menu>, main-menu.js): the merchant's header
   menu fetched from salla.api.component.getMenus('header') and rendered as
   .faal-menu with our own markup — no Tailwind internals, no duplicates. */
.faal-menu,
.faal-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faal-nav .faal-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 40px);
}

.faal-menu-item > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--faal-green);
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.faal-menu-item img {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
}

/* Desktop dropdown for nested menu items. */
.faal-nav .faal-menu-item {
  position: relative;
}

.faal-nav .faal-submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 40;
  min-width: 220px;
  padding: 12px 16px;
  display: grid;
  gap: 8px;
  border-radius: var(--faal-radius-sm);
  background: var(--faal-cream);
  box-shadow: 0 18px 44px rgba(1, 20, 18, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.faal-nav .faal-menu-item:hover > .faal-submenu,
.faal-nav .faal-menu-item:focus-within > .faal-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.faal-nav .faal-submenu .faal-menu-item > a {
  font-size: 15px;
  font-weight: 700;
  white-space: normal;
}

.faal-menu-products {
  display: none; /* mega-menu products: enable per design when needed */
}

/* Skeleton shown while the menu is being fetched. */
.faal-menu-skel {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 40px);
}

.faal-menu-skel span {
  height: 14px;
  border-radius: 999px;
  background: rgba(2, 47, 44, 0.1);
  animation: faal-skel-pulse 1.2s ease-in-out infinite;
}

@keyframes faal-skel-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Mobile drawer variant of the same menu. */
.faal-mobile-nav .faal-menu {
  display: grid;
  gap: 6px;
}

.faal-mobile-nav .faal-menu-item > a {
  padding: 10px 0;
  white-space: normal;
}

.faal-mobile-nav .faal-submenu {
  display: grid;
  gap: 4px;
  padding-inline-start: 18px;
}

.faal-mobile-nav .faal-menu-skel {
  padding-block: 10px;
}

/* Login modal.
   <salla-login-modal> renders <salla-modal class="s-login-modal"> wrapping a
   cross-origin <iframe> to accounts.salla.com. That iframe already draws the
   COMPLETE modal — dimmed backdrop, white card, close button, social buttons —
   and being cross-origin, nothing inside it can be styled from here.

   So this element must be a transparent full-viewport shell and nothing more.
   It previously had its own white card, padding, radius and backdrop shadow,
   which framed Salla's modal inside a second box (with a stray scrollbar, since
   the iframe is taller than the card). One frame, not two.

   State comes from the `visible` attribute, which salla-modal sets in open()
   and removes in close(). That is authoritative for every close path including
   the iframe's own ✕ — a class toggled by our JS could not see that click,
   because cross-origin iframes swallow their events. Scoped to .s-login-modal
   so other modals (search) are untouched. */
.s-login-modal:not([visible]) {
  display: none !important;
}

.s-login-modal[visible] {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 2147483000 !important;
}

/* Viewport units, NOT height: 100%. A percentage height only resolves against a
   parent with a DEFINITE height, and the iframe is not a child of this shell —
   Salla nests it under .s-modal-body, whose height is auto. So `height: 100%`
   collapsed to auto and the iframe fell back to the default height for a
   replaced element: exactly 150px. The login form is ~304px tall and the iframe
   carries scrolling="no", so everything below the email field — the submit
   button included — was simply cut off. `height="undefinedpx"`, the attribute
   Salla sets from the iframe's own height message, is equally unusable.
   dvh so the visible viewport (not the browser chrome) is what's filled. */
.s-login-modal[visible] iframe {
  display: block !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  border: 0 !important;
}

/* Keep the page behind from scrolling while the modal is up. */
html.faal-login-open,
html.faal-login-open body {
  overflow: hidden !important;
}

/* Search modal.
   Unlike the login modal this one is SAME-ORIGIN: <salla-search> renders its
   input, the live result rows and the empty-state into the light DOM with
   s-search-* classes, so it is fully themeable from here. Salla's own component
   CSS still provides the layout/backdrop — these rules only carry the Faal
   surface (cream card, brand focus ring, rounded rows) over it. */
.s-search-modal .s-search-container {
  font-family: var(--faal-font);
}

.s-search-modal .s-search-input {
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-cream);
  color: var(--faal-green-800);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
}

.s-search-modal .s-search-input::placeholder {
  color: var(--faal-muted);
  font-weight: 600;
}

.s-search-modal .s-search-input:focus {
  outline: none;
  border-color: var(--faal-green);
  box-shadow: 0 0 0 3px rgba(58, 194, 107, 0.25);
}

.s-search-modal .s-search-icon {
  color: var(--faal-green);
}

/* Results dropdown: one card, rows separated by the brand hairline.
   `overflow: hidden auto` and not plain `hidden` — the shorthand would drop
   Salla's own `overflow-y: auto`, so a long result list could not scroll inside
   its own box and everything past max-height was simply unreachable. The x-axis
   stays hidden so the rounded corners still clip the rows. */
.s-search-modal .s-search-results {
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  box-shadow: var(--faal-shadow);
  overflow: hidden auto;
  overscroll-behavior: contain;
}

/* The results box is ALWAYS in the DOM (it wraps the no-results <p> too), so
   before a search runs it is an empty card that would still paint its
   background and shadow. Salla marks the two states it should be visible in on
   the container — s-search-container-open (has hits) and s-search-no-results —
   so hide it in every other state. */
.s-search-modal
  .s-search-container:not(.s-search-container-open):not(.s-search-no-results)
  .s-search-results {
  display: none;
}

.s-search-modal .s-search-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--faal-line);
  color: var(--faal-green-800);
  transition: background 0.2s ease;
}

.s-search-modal .s-search-product:last-child {
  border-bottom: 0;
}

.s-search-modal .s-search-product:hover {
  background: rgba(2, 47, 44, 0.05);
}

.s-search-modal .s-search-product-image {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
}

.s-search-modal .s-search-product-title {
  font-size: 15px;
  font-weight: 800;
}

.s-search-modal .s-search-product-price {
  color: var(--faal-green);
  font-size: 14px;
  font-weight: 800;
}

.s-search-modal .s-search-product-regular-price {
  color: var(--faal-muted);
  font-weight: 600;
  text-decoration: line-through;
}

.s-search-modal .s-search-no-results-placeholder {
  padding: 16px;
  color: var(--faal-muted);
  font-weight: 700;
  text-align: center;
}

/* Search modal on phones.
   Salla positions .s-search-results as an ABSOLUTE dropdown, so it adds no
   height to the modal body. That is fine on a desktop viewport, but on a phone
   the on-screen keyboard cuts the visible area roughly in half, and the
   dropdown then hangs below it: the results exist, but only .s-modal-wrapper's
   scrollbar can reach them — which is exactly the "results don't show under the
   bar, you have to scroll" behaviour.

   Fix: on small screens put the list back in normal flow directly under the
   input and give it its own scroll area sized to the *visible* viewport (dvh
   excludes the browser chrome, and shrinks with the keyboard). The panel then
   always fits on screen and the list — not the page — is what scrolls. */
@media (max-width: 640px) {
  .s-search-modal .s-modal-wrapper {
    overflow: hidden;
  }

  .s-search-modal .s-modal-body {
    width: 100%;
    max-width: calc(100% - 24px);
    margin-top: 12px;
  }

  /* Salla caps the container at 14rem/24rem to fit its absolute dropdown; with
     the list in flow that cap would clip it instead. */
  .s-search-modal .s-search-container,
  .s-search-modal .s-search-container.s-search-container-open {
    max-height: none;
  }

  .s-search-modal .s-search-results {
    position: static;
    margin-top: 8px;
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
  }

  /* The close button is centred on .s-modal-body. That body is only as tall as
     the input while the list is absolute, but now the list grows it — so pin
     the button to the input row instead of letting it drift down the list. */
  .s-search-modal .s-modal-close {
    top: 30px;
  }
}

/* Store notifications → brand toast (registered via salla.notify.setNotifier in
   app.js, replacing Salla's window.alert fallback). Top corner (RTL start = top
   right), auto-dismiss, pause on hover. */
.faal-toast-region {
  position: fixed;
  top: 16px;
  inset-inline-start: 16px;
  z-index: 2147483001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.faal-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  border-inline-start: 4px solid var(--faal-accent);
  background: var(--faal-green);
  color: #fff;
  font-family: var(--faal-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 18px 44px rgba(1, 20, 18, 0.3);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.faal-toast.is-in { opacity: 1; transform: translateY(0); }
.faal-toast.is-out { opacity: 0; transform: translateY(-12px); }

.faal-toast--error { background: #7c1d16; border-inline-start-color: #f2836f; }
.faal-toast--warning { background: #7a5510; border-inline-start-color: #f4c150; }

.faal-toast-msg { flex: 1 1 auto; min-width: 0; }

.faal-toast-close {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}

.faal-toast-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }

.faal-header-shell {
  position: relative;
  z-index: 20;
  width: min(var(--faal-container), calc(100% - 40px));
  margin: 32px auto 0;
}

.faal-header-shell.is-sticky {
  position: sticky;
  top: 16px;
}

.faal-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  border-radius: var(--faal-radius);
  background: var(--faal-cream);
  box-shadow: 0 8px 35px rgba(1, 20, 18, 0.06);
}

.faal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--faal-green);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.faal-brand-logo {
  width: auto;
  max-width: min(150px, 34vw);
  height: 42px;
  object-fit: contain;
}

.faal-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px 10px 4px 10px;
  background: var(--faal-green);
  position: relative;
}

.faal-brand-mark::after {
  content: "";
  position: absolute;
  inset: 9px 8px 8px 9px;
  border-radius: 4px 4px 2px 4px;
  background: var(--faal-cream);
}

.faal-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 40px);
  color: var(--faal-green);
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.faal-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  direction: ltr;
}

/* ---- Native Salla cart entry point (<salla-cart-summary>) ----
   Salla renders its content in the light DOM with s-cart-summary-* classes
   (same as theme-raed styles), so app.css can theme it directly. */
.faal-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  color: var(--faal-green);
  cursor: pointer;
  line-height: 0;
  transition: color 0.2s ease;
}

.faal-cart:hover {
  color: var(--faal-green-800);
}

/* The hydrated component wraps its content in <a class="s-cart-summary-wrapper">
   containing #s-cart-icon (our slotted bag) + the count + the price content. */
.faal-cart .s-cart-summary-wrapper {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.faal-cart #s-cart-icon {
  display: inline-flex;
}

.faal-cart .sicon-shopping-bag {
  font-size: 26px;
  line-height: 1;
}

/* Keep a clean icon-only button — hide the native total-price text (and its
   wrapper), leaving just the bag + count badge. */
.faal-cart .s-cart-summary-content {
  display: none;
}

/* Live item count: Salla renders + updates .s-cart-summary-count on every cart
   event. Brand-accent pill on the icon's top corner. */
.faal-cart .s-cart-summary-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--faal-accent);
  color: var(--faal-green-800);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* ---- Search trigger (opens <salla-search>) ----
   Matches .faal-cart's icon-button metrics so the two sit as a pair. */
.faal-search-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  color: var(--faal-green);
  cursor: pointer;
  line-height: 0;
  transition: color 0.2s ease;
}

.faal-search-btn:hover {
  color: var(--faal-green-800);
}

.faal-search-btn .sicon-search {
  font-size: 24px;
  line-height: 1;
}

/* ---- Language picker (<select>) ----
   `appearance: none` drops the OS control so it can carry the header's type and
   colour; the chevron is a background image because a <select> cannot host a
   pseudo-element. The arrow sits at the inline end, which is the RIGHT here:
   .faal-header-actions forces direction: ltr on the row. The drawer copy is
   RTL and overrides the side below. */
.faal-language {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 26px 7px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23022f2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px auto;
  color: var(--faal-green);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.faal-language:hover {
  background-color: rgba(2, 47, 44, 0.06);
}

.faal-language:focus-visible {
  outline: none;
  border-color: var(--faal-green);
}

/* The native dropdown list is drawn by the OS in the page's colours, so give the
   options an explicit light surface — on a dark system theme they would
   otherwise come out white-on-white. */
.faal-language option {
  background: var(--faal-white);
  color: var(--faal-green-800);
}

.faal-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--faal-green);
  color: var(--faal-white);
  cursor: pointer;
}

.faal-menu-toggle span,
.faal-menu-toggle span::before,
.faal-menu-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.faal-menu-toggle span {
  position: relative;
}

.faal-menu-toggle span::before,
.faal-menu-toggle span::after {
  position: absolute;
  left: 0;
}

.faal-menu-toggle span::before {
  top: -6px;
}

.faal-menu-toggle span::after {
  top: 6px;
}

.faal-mobile-menu {
  display: none;
}

.faal-hero {
  margin-top: -108px;
  padding-top: 136px;
  padding-bottom: clamp(64px, 7vw, 96px);
  background: transparent;
}

.faal-hero--top {
  margin-top: calc(var(--faal-header-height, 108px) * -1);
  padding-top: calc(var(--faal-header-height, 108px) + 48px);
}

.faal-hero-copy {
  max-width: 820px;
  margin: clamp(70px, 8vw, 112px) auto 44px;
  text-align: center;
}

.faal-hero-copy h1 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(44px, 7vw, 72px);
  font-weight: 900;
  line-height: 1.18;
}

.faal-hero-copy p {
  max-width: 720px;
  margin: 22px auto 28px;
  color: var(--faal-green-800);
  font-size: clamp(19px, 2.3vw, 26px);
  line-height: 1.5;
}

.faal-hero-art {
  width: min(1320px, 100%);
  margin-inline: auto;
}

.faal-hero-art img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 45px rgba(1, 20, 18, 0.08));
}

.faal-hero--top .faal-hero-art img {
  object-fit: contain;
  object-position: center;
}

.faal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-block: clamp(56px, 8vw, 96px);
  /* Read the numbers left→right (90% | 7200+ | 2150+) as in Figma, not mirrored
     by the RTL page direction. Each stat's text stays centered. */
  direction: ltr;
}

.faal-stat {
  text-align: center;
}

.faal-dynamic-stats .faal-stat {
  min-height: 118px;
}

.faal-stat strong {
  display: block;
  color: var(--faal-black);
  direction: ltr;
  font-size: clamp(54px, 8vw, 112px);
  font-weight: 900;
  line-height: 1.05;
  unicode-bidi: isolate;
}

.faal-stat span {
  display: block;
  margin-top: 8px;
  color: var(--faal-green-800);
  font-size: clamp(15px, 2vw, 24px);
}

.faal-visual-section {
  padding-block: clamp(48px, 7vw, 92px);
}

.faal-youtube-section {
  padding: 64px 0;
}

.faal-youtube-embed {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #111827;
  aspect-ratio: 16 / 9;
}

.faal-youtube-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.faal-value-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.faal-value-media .faal-youtube-embed {
  border-radius: var(--faal-radius-sm);
}

.faal-value-card {
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--faal-radius);
  color: var(--faal-green-800);
}

.faal-value-card h2 {
  margin: 0 0 16px;
  color: var(--faal-black);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 900;
  line-height: 1.25;
}

.faal-value-card p {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
}

/* Value card: soft pastel tint (Figma), not the saturated green .faal-gradient-card base. */
.faal-value-card.faal-gradient-card {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.55), transparent 42%),
    linear-gradient(150deg, #fdfaf2 0%, #fdeab4 52%, #cdeec4 100%);
}

/* Video facade: Figma poster + green circular play button; iframe loads on click. */
.faal-video-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--faal-radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: #0d1b1a;
  aspect-ratio: 16 / 9;
}

.faal-video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.faal-video-facade:hover img {
  transform: scale(1.03);
}

.faal-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--faal-green);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.35);
}

.faal-video-play::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #ffffff;
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .faal-value-grid {
    grid-template-columns: 1fr;
  }
}

.faal-section-image {
  width: min(1320px, calc(100% - 40px));
  margin-inline: auto;
}

.faal-steps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.faal-steps-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.faal-step-card {
  padding: 26px 30px;
  border: 1px solid rgba(2, 47, 44, 0.08);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.05);
}

.faal-step-card h3 {
  margin: 0 0 8px;
  color: var(--faal-black);
  font-size: 22px;
  font-weight: 900;
}

.faal-step-card p {
  margin: 0;
  color: var(--faal-muted);
  font-size: 16px;
  line-height: 1.6;
}

.faal-steps-media {
  margin: 0;
  align-self: center;
  text-align: center;
}

.faal-steps-media img {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .faal-steps-grid {
    grid-template-columns: 1fr;
  }

  .faal-steps-media {
    order: -1;
  }

  .faal-steps-media img {
    max-width: 320px;
  }
}

.faal-guarantee-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--faal-radius-lg);
  text-align: right;
}

.faal-guarantee-card.faal-gradient-card {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.6), transparent 42%),
    linear-gradient(150deg, #fdfaf2 0%, #fdeab4 48%, #aee1a3 100%);
}

.faal-guarantee-copy {
  align-self: center;
}

/* Gold guarantee badge (Figma): sits above the "الضمان الذهبي" heading. Decorative. */
.faal-guarantee-badge {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 999px;
  color: #7a5a12;
  background:
    radial-gradient(circle at 32% 28%, #fff6d8 0%, transparent 45%),
    linear-gradient(150deg, #f7d979 0%, #e6b53f 55%, #c8912a 100%);
  box-shadow: 0 12px 28px rgba(200, 145, 42, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.faal-guarantee-badge svg {
  width: 32px;
  height: 32px;
}

.faal-guarantee-card h2 {
  margin: 0 0 12px;
  color: var(--faal-black);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
}

.faal-guarantee-sub {
  margin: 0 0 22px !important;
  color: var(--faal-black);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
}

.faal-guarantee-card p {
  margin: 0;
  color: var(--faal-green-800);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.7;
}

.faal-guarantee-media {
  margin: 0;
  border-radius: var(--faal-radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 60px rgba(1, 20, 18, 0.16);
}

.faal-guarantee-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 860px) {
  .faal-guarantee-card {
    grid-template-columns: 1fr;
  }

  .faal-guarantee-media {
    aspect-ratio: 16 / 10;
    order: -1;
  }
}

.faal-section-image img {
  width: 100%;
  height: auto;
  border-radius: var(--faal-radius-sm);
}

.faal-services {
  padding-block: var(--faal-section);
}

.faal-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.faal-section-action {
  margin-top: 32px;
  text-align: center;
}

/* Figma services: pricing packages (خدمات واتساب المؤسسي) */
.faal-package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.faal-package-card {
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  border: 1px solid rgba(2, 47, 44, 0.12);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  text-align: right;
}

.faal-package-card.is-featured {
  border-color: #e9c46a;
  box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.55), 0 22px 60px rgba(233, 196, 106, 0.22);
}

.faal-package-name {
  margin: 0 0 12px;
  color: var(--faal-black);
  font-size: 24px;
  font-weight: 900;
}

.faal-package-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

.faal-package-price b {
  font-size: 44px;
  font-weight: 900;
  color: var(--faal-black);
  line-height: 1;
}

.faal-package-price span {
  font-size: 16px;
  color: var(--faal-muted);
  font-weight: 800;
}

.faal-package-note {
  margin: 0 0 20px;
  color: var(--faal-muted);
  font-size: 15px;
}

.faal-package-features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
  flex: 1 1 auto;
}

.faal-package-features li {
  position: relative;
  padding-inline-start: 28px;
  color: var(--faal-green-800);
  font-size: 15px;
}

.faal-package-features li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--faal-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.faal-package-cta {
  width: 100%;
}

/* Figma services: gradient service cards (خدمات فال واتساب) */
.faal-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.faal-service-gcard {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--faal-radius);
  text-align: right;
}

.faal-service-gcard h3 {
  margin: 0 0 10px;
  color: var(--faal-black);
  font-size: 22px;
  font-weight: 900;
}

.faal-service-gprice {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}

.faal-service-gprice b {
  font-size: 34px;
  font-weight: 900;
  color: var(--faal-black);
  line-height: 1;
}

.faal-service-gprice span {
  font-size: 15px;
  color: var(--faal-green-800);
  font-weight: 800;
}

.faal-service-gcard p {
  margin: 0 0 22px;
  color: var(--faal-green-800);
  font-size: 15px;
  line-height: 1.6;
  flex: 1 1 auto;
}

.faal-service-gcta {
  align-self: flex-start;
}

/* When fed by real products, <salla-products-list> wraps the cards — make it
   (and any inner wrapper it renders) transparent to layout so our custom cards
   become direct grid/flex items. !important beats Salla's own component CSS. */
.faal-package-grid salla-products-list,
.faal-package-grid salla-products-list > div,
.faal-service-track salla-products-list,
.faal-service-track salla-products-list > div {
  display: contents !important;
}

.faal-package-grid faal-package-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 300px; /* reserve the card box while products fetch — no layout shift */
}

/* Salla's products-list adds an infinite-scroll / "load more" trigger that errors
   in this setup ("تعذر جلب المزيد"). Hide ONLY that trigger — never the wrapper
   that holds the cards (.s-products-list-wrapper), or the cards disappear. */
.faal-package-grid salla-products-list [class*="load-more"],
.faal-service-track salla-products-list [class*="load-more"],
.faal-package-grid salla-products-list [class*="loadmore"],
.faal-service-track salla-products-list [class*="loadmore"],
.faal-package-grid salla-products-list [class*="infinite"],
.faal-service-track salla-products-list [class*="infinite"],
.faal-package-grid salla-products-list salla-button,
.faal-service-track salla-products-list salla-button {
  display: none !important;
}

/* خدمات فال واتساب — horizontal slider (Figma) */
.faal-service-slider {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
}

.faal-service-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px;
  scrollbar-width: none;
  /* Center the cards when only one or two products come back (so a single card
     doesn't float against one edge), but fall back to start-aligned & scrollable
     when the list overflows. */
  justify-content: safe center;
}

.faal-service-track::-webkit-scrollbar {
  display: none;
}

.faal-service-track faal-service-card {
  flex: 0 0 clamp(260px, 30%, 340px);
  scroll-snap-align: start;
  display: flex !important;
  flex-direction: column;
  min-height: 300px; /* reserve height (tag selector — not the .faal-service-card class) */
}

@media (max-width: 640px) {
  .faal-service-slider {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
  }

  .faal-service-track faal-service-card {
    flex-basis: 80%;
  }
}

@media (max-width: 880px) {
  .faal-package-grid,
  .faal-service-grid {
    grid-template-columns: 1fr;
  }
}

.faal-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.faal-service-card {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 28px 28px;
  border: 1px solid rgba(2, 47, 44, 0.12);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  box-shadow: 0 8px 20px rgba(1, 20, 18, 0.04);
  overflow: hidden;
}

.faal-product-grid .faal-service-card,
.faal-product-card {
  min-height: 360px;
  border-color: rgba(2, 47, 44, 0.14);
  background: linear-gradient(180deg, rgba(255, 254, 250, 0.96) 0%, rgba(255, 252, 244, 0.88) 100%);
  box-shadow: 0 18px 44px rgba(1, 20, 18, 0.08);
}

.faal-service-card.is-featured {
  border-color: var(--faal-accent);
  box-shadow: 0 0 0 3px rgba(58, 194, 107, 0.14), var(--faal-shadow);
}

.faal-product-grid .faal-service-card.is-featured,
.faal-product-card.is-featured {
  background: linear-gradient(180deg, rgba(255, 254, 250, 1) 0%, rgba(254, 233, 179, 0.28) 100%);
}

.faal-service-ribbon {
  margin: 0 -28px 24px;
  padding: 18px 28px;
  background: linear-gradient(180deg, #77f685 0%, var(--faal-yellow) 100%);
  color: var(--faal-green);
  font-size: 22px;
  font-weight: 900;
}

.faal-product-grid .faal-service-ribbon,
.faal-product-badge {
  margin: 0 -28px 24px;
  padding: 16px 28px;
  background: linear-gradient(180deg, rgba(119, 246, 133, 0.92) 0%, rgba(254, 233, 179, 0.95) 100%);
  color: var(--faal-green);
  font-size: 20px;
  font-weight: 900;
}

.faal-service-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  color: var(--faal-black);
  text-align: center;
}

.faal-product-grid .faal-service-price,
.faal-product-price {
  color: var(--faal-green-800);
}

.faal-service-price b {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
}

.faal-service-price span {
  font-size: 18px;
  font-weight: 800;
}

.faal-service-card p {
  min-height: 54px;
  margin: 18px 0 22px;
  color: var(--faal-muted);
  text-align: center;
}

.faal-feature-list {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.faal-feature-list li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--faal-green-800);
  font-size: 15px;
}

.faal-feature-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--faal-green);
}

.faal-service-card .faal-btn {
  align-self: center;
  margin-top: auto;
}

.faal-salla-surface {
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius);
  background: rgba(255, 254, 250, 0.72);
  box-shadow: 0 16px 48px rgba(1, 20, 18, 0.06);
  backdrop-filter: blur(12px);
}

/* ==========================================================================
   Cart page — themed item cards + native Twilight cart components
   (salla-quantity-input, salla-cart-coupons, salla-cart-summary-card). The
   native components inherit --color-primary (brand green) from master.twig.
   ========================================================================== */
.faal-cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.faal-cart-items {
  display: grid;
  gap: 16px;
}

.faal-cart-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
}

.faal-cart-item-media {
  display: block;
  width: 96px;
  height: 84px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--faal-bg);
}

.faal-cart-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faal-cart-item-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faal-cart-item-name {
  color: var(--faal-green-800);
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 800;
  line-height: 1.5;
}

.faal-cart-item-price {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--faal-green);
  font-weight: 800;
}

.faal-cart-item-price del {
  color: var(--faal-muted);
  font-weight: 600;
}

.faal-cart-item-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Product options inside a cart line (reuses .faal-product-options) — tighter,
   narrower controls than the product page so they fit the item card. */
.faal-cart-options {
  display: block;
  margin: 2px 0 4px;
}
.faal-cart-options .s-product-options-option-container { margin-bottom: 10px; }
.faal-cart-options .s-product-options-option-container:last-child { margin-bottom: 0; }
.faal-cart-options .s-form-control { min-height: 40px; max-width: 320px; }

.faal-cart-item-remove {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--faal-line);
  border-radius: 999px;
  background: transparent;
  color: var(--faal-muted);
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.faal-cart-item-remove:hover {
  color: #b42318;
  border-color: #f0c8c3;
  background: rgba(180, 35, 24, 0.06);
}

.faal-cart-aside {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}

/* salla-cart-summary-card ("ملخص الطلب") — Salla emits s-cart-summary-card-*
   classes in light DOM (confirmed from rendered store HTML). Theme it as a card
   matching .faal-product-purchase, with a brand-green checkout button. */
.faal-cart-summary .s-cart-summary-card {
  display: block;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.05);
}

.faal-cart-summary .s-cart-summary-card-sheet-title {
  margin: 0 0 8px;
  color: var(--faal-green-800);
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
}

.faal-cart-summary .s-cart-summary-card-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  color: var(--faal-green-800);
  font-size: 15px;
  border-bottom: 1px dashed var(--faal-line);
}

.faal-cart-summary .s-cart-summary-card-line b { font-weight: 800; }

.faal-cart-summary .s-cart-summary-card-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--faal-line);
}

.faal-cart-summary .s-cart-summary-card-bar-label-text {
  color: var(--faal-green-800);
  font-weight: 900;
  font-size: 16px;
}

.faal-cart-summary .s-cart-summary-card-bar-count {
  margin-inline-start: 6px;
  color: var(--faal-muted);
  font-weight: 600;
  font-size: 13px;
}

.faal-cart-summary .s-cart-summary-card-bar-total {
  color: var(--faal-green);
  font-weight: 900;
  font-size: 22px;
  white-space: nowrap;
}

.faal-cart-summary .s-cart-summary-card-action {
  margin-top: 18px;
}

/* Checkout button ("اتمام الطلب"): salla-button → .s-button-element +
   .s-button-solid.s-button-primary. Brand-green pill (color from --color-primary,
   set authoritatively in master.twig), matching .faal-product-add. */
.faal-cart-summary .s-button-element,
.faal-cart-summary button.s-button-btn {
  min-height: 52px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  transition: background 180ms ease;
}
.faal-cart-summary .s-button-wide { width: 100%; }
.faal-cart-summary .s-button-solid.s-button-primary {
  background: var(--color-primary);
  color: var(--color-primary-reverse);
  border-color: var(--color-primary);
}
.faal-cart-summary .s-button-solid.s-button-primary:hover {
  background: var(--faal-black);
  border-color: var(--faal-black);
}

/* Empty state */
.faal-cart-empty {
  max-width: 520px;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-block: clamp(40px, 6vw, 64px);
  text-align: center;
}

.faal-cart-empty i {
  font-size: 52px;
  color: var(--faal-accent);
}

.faal-cart-empty p {
  margin: 0;
  color: var(--faal-muted);
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .faal-cart-grid {
    grid-template-columns: 1fr;
  }

  .faal-cart-aside {
    position: static;
  }
}

.faal-salla-products-list {
  display: block;
  min-height: 320px;
}

/* Salla renders the cards inside a single child, .s-products-list-wrapper (with
   an s-products-list-vertical-cards modifier that stacks them in one column).
   The salla-products-list host holds only that one wrapper, so gridding the host
   does nothing — the GRID must go on the wrapper for the cards to spread. */
.faal-salla-products-list .s-products-list-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* Salla's products-list runs a next-page probe for infinite scroll; in
   preview / maintenance that fetch can fail and flash "تعذر جلب المزيد 🐢" even
   though the list already resolved to the correct "no more products" state
   (s-infinite-scroll-last). Hide only that transient error text — not the
   wrapper (cards) or the loader. */
.faal-salla-products-list .s-infinite-scroll-error {
  display: none !important;
}

/* ── Products index: toolbar (mobile filter trigger + sort) ── */
.faal-product-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 24px;
}

.faal-filters-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 999px;
  background: var(--faal-white);
  color: var(--faal-green);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.faal-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.faal-sort label {
  font-size: 14px;
  font-weight: 700;
  color: var(--faal-green);
  white-space: nowrap;
}

.faal-sort-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: var(--faal-radius-sm);
  background-color: var(--faal-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23022f2c' stroke-width='2' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  color: var(--faal-green);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
[dir="ltr"] .faal-sort-select { padding: 0 40px 0 16px; background-position: right 14px center; }
[dir="rtl"] .faal-sort-select { padding: 0 16px 0 40px; background-position: left 14px center; }

/* ── Products index: layout (filters rail + list) ── */
.faal-product-index-layout {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* No filters → no rail: let the list take the full width so its card grid can
   show multiple columns instead of being boxed into the 280px filter column. */
.faal-product-index-layout.is-listonly {
  grid-template-columns: minmax(0, 1fr);
}

.faal-filters-drawer {
  position: sticky;
  top: 24px;
  align-self: start;
}
.faal-filters-drawer-head { display: none; }

/* Style the native <salla-filters> host with Faal tokens */
.faal-salla-filters {
  display: block;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius);
  background: rgba(255, 254, 250, 0.72);
  color: var(--faal-green-800);
}
.faal-salla-filters input[type="checkbox"],
.faal-salla-filters input[type="radio"] { accent-color: var(--faal-accent); }

.faal-filters-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(1, 20, 18, 0.45);
  backdrop-filter: blur(2px);
}
.faal-filters-backdrop[hidden] { display: none; }

@media (min-width: 1025px) {
  .faal-filters-trigger { display: none; }
}

@media (max-width: 1024px) {
  .faal-product-index-layout { grid-template-columns: minmax(0, 1fr); }

  .faal-filters-drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    width: min(360px, 88vw);
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--faal-cream);
    box-shadow: 0 0 60px rgba(1, 20, 18, 0.25);
    transform: translateX(-100%);
    transition: transform 260ms ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  [dir="rtl"] .faal-filters-drawer { left: auto; right: 0; transform: translateX(100%); }
  body.faal-filters-opened .faal-filters-drawer { transform: translateX(0); }
  body.faal-filters-opened { overflow: hidden; }

  .faal-filters-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(2, 47, 44, 0.1);
    background: var(--faal-cream);
    font-weight: 900;
    color: var(--faal-green);
  }
  .faal-filters-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(2, 47, 44, 0.08);
    color: var(--faal-green);
    font-size: 18px;
    cursor: pointer;
  }
  .faal-salla-filters {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 16px 20px 40px;
  }
}

.faal-product-detail .faal-salla-surface {
  padding: clamp(20px, 4vw, 48px);
}

.faal-product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.faal-product-media {
  margin: 0;
}

.faal-product-info h2 {
  margin: 0 0 8px;
  color: var(--faal-black);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
}

.faal-product-subtitle {
  margin: 0 0 16px;
  color: var(--faal-muted);
  font-size: 16px;
  line-height: 1.6;
}

.faal-product-rating {
  display: block;
  margin-bottom: 14px;
}

.faal-product-info { min-width: 0; }

.faal-product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2px;
}

.faal-product-price-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--faal-muted);
}

.faal-product-price b {
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 900;
  color: var(--faal-black);
  line-height: 1;
}

.faal-product-price-was {
  color: var(--faal-muted);
  font-size: 20px;
  font-weight: 700;
  text-decoration: line-through;
}

.faal-product-tax-note {
  margin: 0 0 22px;
  color: var(--faal-muted);
  font-size: 13px;
}

/* Description prose — restores lists/tables so spec pairs don't run together. */
.faal-product-desc {
  color: var(--faal-green-800);
  font-size: 17px;
  line-height: 1.8;
  /* Defensive: some catalog products store specs as one long unspaced string in the
     description (e.g. "المقاس36نصف محيط..."). Force it to wrap inside the column so it
     never overflows horizontally or forces a full-page scroll. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.faal-product-desc p { margin: 0 0 12px; }
.faal-product-desc ul,
.faal-product-desc ol { margin: 0 0 12px; padding-inline-start: 1.4em; list-style: revert; }
.faal-product-desc li { margin-block: 4px; }
.faal-product-desc a { color: var(--faal-accent); text-decoration: underline; }
.faal-product-desc img { border-radius: var(--faal-radius-sm); margin: 12px 0; }

.faal-product-desc table,
.faal-product-specs table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 4px 0 12px;
}
.faal-product-desc table td, .faal-product-desc table th,
.faal-product-specs table td, .faal-product-specs table th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--faal-line);
  text-align: start;
  vertical-align: top;
}
.faal-product-desc table tr td:first-child,
.faal-product-specs table tr td:first-child {
  width: 42%;
  color: var(--faal-muted);
  font-weight: 700;
  background: var(--faal-cream);
}
.faal-product-desc dl,
.faal-product-specs dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; }
.faal-product-desc dt,
.faal-product-specs dt {
  padding: 10px 16px; font-weight: 700; color: var(--faal-muted);
  background: var(--faal-cream); border-bottom: 1px solid var(--faal-line);
}
.faal-product-desc dd,
.faal-product-specs dd {
  margin: 0; padding: 10px 16px; color: var(--faal-green-800);
  border-bottom: 1px solid var(--faal-line);
}

/* Read-more clamp (JS toggles .faal-clamp off). */
.faal-product-desc.faal-clamp {
  max-height: 168px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.faal-readmore-btn {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--faal-green);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.faal-product-desc:not(.faal-clamp) + .faal-readmore-btn { display: none; }

/* SKU */
.faal-product-sku {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 22px 0 0;
  font-size: 15px;
}
.faal-product-sku-label { color: var(--faal-muted); font-weight: 700; }
.faal-product-sku-value {
  color: var(--faal-green-800);
  font-weight: 800;
  direction: ltr;
  unicode-bidi: plaintext;
}

/* Specifications card (native <salla-metadata>) */
.faal-product-specs {
  margin: 22px 0 0;
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius-sm);
  overflow: hidden;
  background: var(--faal-card);
}
.faal-product-specs-title {
  margin: 0;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 900;
  color: var(--faal-black);
  background: var(--faal-cream);
  border-bottom: 1px solid var(--faal-line);
}
.faal-product-specs salla-metadata { display: block; padding: 6px 2px; }

.faal-product-main-image {
  width: 100%;
  height: auto;
  border-radius: var(--faal-radius);
  object-fit: cover;
  background: var(--faal-cream);
}

.faal-product-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.faal-product-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid rgba(2, 47, 44, 0.14);
  border-radius: 12px;
  overflow: hidden;
  background: var(--faal-cream);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.faal-product-thumb.is-active { border-color: var(--faal-accent); }
.faal-product-thumb img { width: 100%; height: 100%; object-fit: cover; }

.faal-product-options { display: block; margin-bottom: 4px; }

/* ─────────────────────────────────────────────────────────────────────────
   Native Twilight web components — styled via the REAL light-DOM `s-*` classes
   these components render (verified from the live product page DOM), scoped
   under each `.faal-*` wrapper so other pages aren't affected. Never
   deep/shadow selectors. This hand-built theme has no Twilight Tailwind bundle,
   so these classes ship unstyled — we brand them; color/font come from the
   inherited tokens (--color-primary / --font-main) set in master.twig.
   ───────────────────────────────────────────────────────────────────────── */

/* salla-quantity-input → .s-quantity-input-container / -button / -increase-button /
   -decrease-button + numeric input. SAME styling shared by the product page
   (.faal-product-qty) and the cart page (.faal-cart-qty) so they're consistent. */
.faal-product-qty .s-quantity-input-container,
.faal-cart-qty .s-quantity-input-container {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--faal-line);
  border-radius: 999px;
  background: var(--faal-white);
  overflow: hidden;
}
.faal-product-qty .s-quantity-input-button,
.faal-product-qty .s-quantity-input-increase-button,
.faal-product-qty .s-quantity-input-decrease-button,
.faal-cart-qty .s-quantity-input-button,
.faal-cart-qty .s-quantity-input-increase-button,
.faal-cart-qty .s-quantity-input-decrease-button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--faal-green);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}
.faal-product-qty .s-quantity-input-button:hover,
.faal-product-qty .s-quantity-input-increase-button:hover,
.faal-product-qty .s-quantity-input-decrease-button:hover,
.faal-cart-qty .s-quantity-input-button:hover,
.faal-cart-qty .s-quantity-input-increase-button:hover,
.faal-cart-qty .s-quantity-input-decrease-button:hover { background: rgba(2, 47, 44, 0.08); }
.faal-product-qty input,
.faal-cart-qty input {
  width: 46px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--faal-green-800);
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  text-align: center;
  -moz-appearance: textfield;
}
.faal-product-qty input::-webkit-outer-spin-button,
.faal-product-qty input::-webkit-inner-spin-button,
.faal-cart-qty input::-webkit-outer-spin-button,
.faal-cart-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* salla-product-options (.faal-product-options) → .s-product-options-option-container /
   -option-label (<b> + <small>) / -option-content / select.s-form-control */
.faal-product-options .s-product-options-option-container { margin-bottom: 16px; }
.faal-product-options .s-product-options-option-label {
  display: block;
  margin-bottom: 8px;
  color: var(--faal-black);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
}
.faal-product-options .s-product-options-option-label b { font-weight: 800; }
.faal-product-options .s-product-options-option-label small { margin-inline-start: 6px; color: var(--faal-muted); font-weight: 600; }
/* .s-form-control is Salla's shared control class (select / text / textarea) — base first,
   then a select-only chevron on the correct RTL/LTR side. */
.faal-product-options .s-form-control {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 14px;
  background-color: var(--faal-white);
  color: var(--faal-green-800);
  font-family: inherit;
  font-size: 15px;
}
.faal-product-options textarea.s-form-control { min-height: 110px; padding: 12px 16px; resize: vertical; line-height: 1.6; }
.faal-product-options select.s-form-control {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23022f2c' stroke-width='2' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
[dir="rtl"] .faal-product-options select.s-form-control { padding: 0 16px 0 40px; background-position: left 14px center; }
[dir="ltr"] .faal-product-options select.s-form-control { padding: 0 40px 0 16px; background-position: right 14px center; }
.faal-product-options .s-form-control:focus {
  outline: none;
  border-color: var(--faal-accent);
  box-shadow: 0 0 0 3px rgba(58, 194, 107, 0.16);
}

/* salla-add-product-button (.faal-product-add) → renders <salla-button> as
   button.s-button-element.s-button-solid.s-button-wide.s-button-primary + .s-button-text.
   Color comes from --color-primary (FIX 1); we set shape/size to the Faal pill button. */
.faal-product-add .s-button-element,
.faal-product-add button.s-button-btn {
  min-height: 52px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  transition: background 180ms ease, transform 180ms ease;
}
.faal-product-add .s-button-wide { width: 100%; }
.faal-product-add .s-button-solid.s-button-primary {
  background: var(--color-primary);
  color: var(--color-primary-reverse);
  border-color: var(--color-primary);
}
.faal-product-add .s-button-solid.s-button-primary:hover { background: var(--faal-black); border-color: var(--faal-black); }

/* Purchase card (options + quantity + add-to-cart) */
.faal-product-purchase {
  margin: 26px 0 0;
  padding: clamp(18px, 2.5vw, 26px);
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.05);
}

.faal-product-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--faal-line);
}
.faal-product-buy-price { display: flex; align-items: baseline; gap: 8px; }
.faal-product-buy-price span { color: var(--faal-muted); font-weight: 700; font-size: 14px; }
.faal-product-buy-price b { color: var(--faal-black); font-weight: 900; font-size: 24px; }

.faal-product-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.faal-product-add { min-width: 200px; }

.faal-related-products .faal-section-title,
.faal-product-reviews {
  margin-top: 8px;
}

/* Related products ("خدمات قد تهمّك") use the native <salla-products-slider> with Salla's
   DEFAULT card (custom-salla-product-card) — the theme-raed pattern (no product-card-component
   attribute). Salla renders the card in LIGHT DOM with .s-product-card-* classes; a hand-built
   theme has no Twilight Tailwind bundle to style them, so the card paints unstyled. Theme them
   below (globally — related slider, products-list, cross-sells all use the same card). */
.faal-related-products salla-products-slider {
  display: block;
}

/* ROOT-CAUSE FIX for the related slider layout: the native <salla-products-slider> renders
   slides as `.s-products-slider-card.swiper-slide`, but the twilight-components slide-sizing
   CSS isn't bundled in this hand-built theme, so the slides have NO width and fall back to the
   base Swiper rule `.swiper-slide { width: 100% }` → one oversized card per view. Give the
   slide a constrained, responsive width (Swiper runs slidesPerView:'auto', so slide width is
   CSS-driven). Scoped to this section so other sliders are untouched. */
.faal-related-products .s-products-slider-card {
  box-sizing: border-box;
  flex: 0 0 auto !important;      /* don't stretch to fill the row */
  width: clamp(210px, 22vw, 252px) !important;   /* ~4–5 cards per view on desktop */
  height: auto;
  padding-inline: 8px;           /* gap between cards, independent of Swiper spaceBetween */
}
.faal-related-products .s-product-card-entry { width: 100%; }   /* card fills its slide */

@media (max-width: 1024px) {
  .faal-related-products .s-products-slider-card { width: clamp(200px, 40vw, 240px) !important; } /* ~2–3 */
}
@media (max-width: 600px) {
  .faal-related-products .s-products-slider-card { width: 62vw !important; }   /* ~2 with a peek */
}

/* Related slider nav arrows — round Faal buttons; RTL keeps them on the correct sides
   (the slider container is dir="rtl", so Swiper flows first card → right, leftward). */
.faal-related-products .s-slider-nav-arrow,
.faal-related-products .s-slider-block__title-nav button,
.faal-related-products .swiper-button-prev,
.faal-related-products .swiper-button-next {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(2, 47, 44, 0.14);
  border-radius: 999px;
  background: var(--faal-card);
  color: var(--faal-green);
  transition: background 180ms ease, color 180ms ease;
}
.faal-related-products .s-slider-nav-arrow:hover,
.faal-related-products .s-slider-block__title-nav button:hover,
.faal-related-products .swiper-button-prev:hover,
.faal-related-products .swiper-button-next:hover {
  background: var(--faal-green);
  color: var(--faal-white);
}

/* Related-slider CARD polish. Scoped selectors (higher specificity than Salla's runtime base
   card CSS, which was overriding the global .s-product-card-* rules and flattening the cards).
   Reuses the Faal card aesthetic used across the theme. */
.faal-related-products .s-product-card-entry {
  display: flex;
  flex-direction: column;
  height: 100%;                                  /* equal-height cards, no ragged bottoms */
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(1, 20, 18, 0.05);
}

/* Image: the loaded product image must COVER the base placeholder glyph
   (.s-product-card-image::before content "\ec1f"). Give the container a fixed ratio, drop the
   placeholder to the back, and make the <img> fill + cover on top. */
.faal-related-products .s-product-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--faal-cream);
}
/* Salla injects a placeholder glyph on .s-product-card-image::before (sallaicons
   content "\ec1f"). z-index couldn't hide it — the ::before is STATIC, so z-index
   is inert and the glyph paints as a stray icon over the image. Real products
   always have an image, so remove the pseudo-element outright (global). */
.s-product-card-image::before { display: none !important; }
.faal-related-products .s-product-card-image img,
.faal-related-products .s-product-card-image-cover,
.faal-related-products .s-product-card-image-contain {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content: fill remaining height with a title → price → button rhythm (Figma spacing).
   The body is deliberately NOT painted --faal-accent (#3ac26b) any more. That green
   was set here while every text color in the card was written for a LIGHT surface,
   so the whole block failed contrast at once: white title 2.4:1, muted subtitle
   1.6:1, and .s-product-card-sale-price (also --faal-accent) painted green on green
   — literally invisible. Staying transparent lets .s-product-card-entry's
   --faal-card show through, so "خدمات قد تهمك" matches the cards on every other page. */
.faal-related-products .s-product-card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  padding: 16px;
  text-align: start;                             /* RTL → right-aligned */
  background-color: transparent;
}
.faal-related-products .s-product-card-content-title,
.faal-related-products .s-product-card-content-title a {
  color: var(--faal-black);
  font-family: inherit;
  font-weight: 800;
  font-size: 17px;                               /* was 32px — a page-heading size inside a card */
  line-height: 1.4;
}
.faal-related-products .s-product-card-content-subtitle { color: var(--faal-muted); font-size: 13px; }

/* Price: current prominent (green / accent for sale), old price muted + struck. */
.faal-related-products .s-product-card-price,
.faal-related-products .s-product-card-sale-price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--faal-green-800);
  font-weight: 900;
  font-size: 18px;
}
.faal-related-products .s-product-card-sale-price { color: var(--faal-accent); }
.faal-related-products .s-product-card-starting-price { color: var(--faal-muted); font-size: 13px; font-weight: 700; }
.faal-related-products .s-product-card-price del,
.faal-related-products .s-product-card-price s,
.faal-related-products .s-product-card-sale-price del,
.faal-related-products .s-product-card-sale-price s {
  color: var(--faal-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: line-through;
}

/* Add-to-cart: brand-green pill (--color-primary), pushed to the card bottom for equal height. */
.faal-related-products .s-product-card-entry salla-add-product-button,
.faal-related-products .s-product-card-entry .s-button-element { margin-top: auto; }
.faal-related-products .s-product-card-entry .s-button-element {
  min-height: 44px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
}
.faal-related-products .s-product-card-entry .s-button-solid.s-button-primary,
.faal-related-products .s-product-card-entry .s-button-primary {
  background: var(--color-primary);
  color: var(--color-primary-reverse);
  border-color: var(--color-primary);
}

/* Salla product card (custom-salla-product-card) — themed via documented .s-product-card-*
   classes (doc-422718). Global so cards never paint unstyled anywhere. Button + accents pull
   --color-primary (FIX 1). */
.s-product-card-entry {
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(1, 20, 18, 0.05);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.s-product-card-entry:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(1, 20, 18, 0.1);
}
.s-product-card-image { position: relative; background: var(--faal-cream); } /* anchor for the wishlist button */
.s-product-card-content { padding: 16px; }
.s-product-card-content-title,
.s-product-card-content-title a {
  color: var(--faal-black);
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.4;
}
.s-product-card-content-subtitle { color: var(--faal-muted); font-size: 13px; }
.s-product-card-price { color: var(--faal-green-800); font-weight: 900; font-size: 18px; }
.s-product-card-sale-price { color: var(--faal-accent); font-weight: 900; }
.s-product-card-starting-price { color: var(--faal-muted); font-size: 13px; font-weight: 700; }
.s-product-card-rating { color: var(--faal-muted); }
.s-product-card-promotion-title {
  background: linear-gradient(180deg, rgba(119, 246, 133, 0.92) 0%, rgba(254, 233, 179, 0.95) 100%);
  color: var(--faal-green);
  font-weight: 900;
}
/* Wishlist heart: Salla renders it over the image but hides it until hover via
   `.animated`. Make it an always-visible white circular button in the image
   corner. The <salla-button> wrap is positioned; the inner <button> is the pill. */
.s-product-card-wishlist-btn.s-button-wrap {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 3;
  width: auto;
  min-height: 0;
  opacity: 1 !important;
  transform: none !important;
}
.s-product-card-wishlist-btn.s-button-element {
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--faal-white);
  color: var(--faal-green);
  box-shadow: 0 6px 16px rgba(1, 20, 18, 0.16);
  cursor: pointer;
  opacity: 1 !important;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.s-product-card-wishlist-btn.s-button-element:hover {
  background: var(--faal-green);
  color: var(--faal-white);
  transform: scale(1.06);
}
.s-product-card-wishlist-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
/* The card's add-to-cart (salla-add-product-button → .s-button-*) — pill + Faal green. */
.s-product-card-entry .s-button-element { border-radius: 999px; font-weight: 800; }
.s-product-card-entry .s-button-solid.s-button-primary {
  background: var(--color-primary);
  color: var(--color-primary-reverse);
  border-color: var(--color-primary);
}

@media (max-width: 860px) {
  .faal-product-detail-grid {
    grid-template-columns: 1fr;
  }
  .faal-product-media {
    order: -1; /* gallery on top on mobile */
  }
  .faal-product-add { flex: 1; }
}

.faal-category-services .faal-salla-products-list .s-products-list-wrapper {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.faal-category-products {
  --salla-product-card-radius: 8px;
}

.faal-dynamic-features {
  background: rgba(255, 254, 250, 0.28);
}

.faal-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  /* Keep the Figma left→right card order (شروحات فيديو | تفعيل فوري | شركة
     سعودية); cards restore RTL internally for their Arabic text. */
  direction: ltr;
}

.faal-why-card {
  min-height: 255px;
  padding: 40px;
  border: 1px solid rgba(58, 194, 107, 0.42);
  border-radius: var(--faal-radius-sm);
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.85) 55%, rgba(254, 233, 179, 0.4) 100%);
  direction: rtl;
  text-align: right;
}

.faal-feature-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-inline-end: auto;
  margin-bottom: 32px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(58, 194, 107, 0.14);
}

.faal-icon-box {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-inline-end: auto;
  margin-bottom: 32px;
  border-radius: 16px;
  background: rgba(58, 194, 107, 0.14);
  color: var(--faal-green);
  font-size: 26px;
  font-weight: 900;
}

.faal-icon-box svg {
  width: 28px;
  height: 28px;
}

.faal-why-card h3 {
  margin: 0 0 12px;
  color: var(--faal-black);
  font-size: 26px;
  font-weight: 900;
}

.faal-why-card p {
  margin: 0;
  color: var(--faal-muted);
  font-size: 17px;
}

.faal-testimonials {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.faal-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.faal-testimonial-card {
  min-height: 210px;
  padding: 32px;
  border-radius: 8px;
  background: var(--faal-card);
  box-shadow: 0 12px 35px rgba(1, 20, 18, 0.04);
}

.faal-testimonial-card h3 {
  margin: 0 0 14px;
  color: var(--faal-black);
  font-size: 24px;
  font-weight: 900;
}

.faal-testimonial-card p {
  margin: 0;
  color: var(--faal-muted);
}

.faal-testimonial-highlight {
  min-height: 444px;
  display: flex;
  align-items: end;
  padding: 34px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(1, 20, 18, 0) 35%, rgba(1, 20, 18, 0.62) 100%),
    linear-gradient(135deg, #d8f9dc, #fee9b3);
  color: var(--faal-white);
}

.faal-testimonial-highlight strong {
  display: block;
  font-size: 48px;
  line-height: 1.05;
}

.faal-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(168px, 1fr);
  gap: 24px;
  align-items: stretch;
}

.faal-impact-media {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  border-radius: var(--faal-radius);
  overflow: hidden;
  min-height: 100%;
  box-shadow: 0 22px 60px rgba(1, 20, 18, 0.14);
}

.faal-impact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.faal-impact-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 32px;
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
}

.faal-impact-card h3 {
  margin: 0 0 10px;
  color: var(--faal-black);
  font-size: 22px;
  font-weight: 900;
}

.faal-impact-card p {
  margin: 0;
  color: var(--faal-muted);
  font-size: 16px;
  line-height: 1.6;
}

.faal-impact-highlight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  border-radius: var(--faal-radius-sm);
  text-align: center;
}

.faal-impact-highlight.faal-gradient-card {
  background:
    radial-gradient(circle at 50% 38%, rgba(125, 227, 139, 0.72), transparent 60%),
    linear-gradient(160deg, #fff7e6 0%, #fde7b8 100%);
}

.faal-impact-highlight strong {
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 900;
  line-height: 1;
  color: var(--faal-green);
  direction: ltr;
}

.faal-impact-highlight span {
  font-size: 18px;
  font-weight: 900;
  color: var(--faal-green-800);
}

@media (max-width: 860px) {
  .faal-impact-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .faal-impact-media {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 16 / 10;
    order: -1;
  }
}

.faal-impact-section {
  background: rgba(254, 233, 179, 0.22);
}

.faal-impact-section .faal-testimonials {
  align-items: center;
}

.faal-impact-section .faal-testimonial-card {
  border: 1px solid rgba(2, 47, 44, 0.1);
}

.faal-impact-section .faal-testimonial-highlight {
  min-height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(119, 246, 133, 0.62) 0%, rgba(254, 233, 179, 0.94) 100%),
    var(--faal-yellow);
  color: var(--faal-green);
}

.faal-impact-section .faal-testimonial-highlight span {
  color: var(--faal-green-800);
  font-size: 18px;
  font-weight: 900;
}

.faal-clients-carousel {
  background: rgba(255, 254, 250, 0.38);
}

.faal-clients-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.faal-clients-logos .faal-client-card {
  flex: 0 0 clamp(150px, 17vw, 220px);
  min-height: 140px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.faal-clients-logos .faal-client-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(1, 20, 18, 0.08);
}

@media (max-width: 640px) {
  .faal-clients-logos .faal-client-card {
    flex-basis: clamp(130px, 42vw, 170px);
  }
}

.faal-carousel-shell {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
}

.faal-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 240px);
  gap: 16px;
  direction: ltr;
  overflow-x: auto;
  padding: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.faal-carousel-track::-webkit-scrollbar {
  display: none;
}

.faal-client-card {
  min-height: 140px;
  display: grid;
  place-items: center;
  padding: 26px 24px;
  border: 1px solid rgba(2, 47, 44, 0.06);
  border-radius: 20px;
  background: var(--faal-white);
  color: var(--faal-green);
  direction: rtl;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  scroll-snap-align: start;
  box-shadow: 0 12px 30px rgba(1, 20, 18, 0.05);
}

.faal-client-card img {
  width: auto;
  max-height: 64px;
  object-fit: contain;
}

.faal-carousel-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(2, 47, 44, 0.14);
  border-radius: 999px;
  background: var(--faal-card);
  color: var(--faal-green);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.faal-carousel-btn:hover {
  transform: translateY(-2px);
  background: var(--faal-green);
  color: var(--faal-white);
}

.faal-carousel-btn::before {
  width: 10px;
  height: 10px;
  border-block-start: 2px solid currentColor;
  border-inline-start: 2px solid currentColor;
  content: "";
  transform: rotate(-45deg);
}

.faal-carousel-btn[data-faal-carousel-next]::before {
  transform: rotate(135deg);
}

.faal-cta {
  padding-block: clamp(68px, 8vw, 112px);
}

.faal-cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(36px, 5vw, 70px);
  border-radius: var(--faal-radius);
  background:
    radial-gradient(circle at 14% 18%, rgba(119, 246, 133, 0.78), transparent 28%),
    linear-gradient(135deg, #fff4ce 0%, #fee9b3 55%, #f6de9d 100%);
  overflow: hidden;
}

.faal-cta-copy h2 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.2;
}

.faal-cta-copy p {
  max-width: 560px;
  margin: 18px 0 28px;
  color: var(--faal-green-800);
  font-size: 20px;
}

.faal-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.faal-cta-art {
  transform: scale(1.08);
  transform-origin: center;
}

.faal-footer {
  padding: clamp(72px, 7vw, 112px) 0 36px;
  background: var(--faal-bg);
}

.faal-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr);
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(2, 47, 44, 0.14);
}

/* Footer links: the merchant's footer menu via native <salla-menu source="footer">
   (exactly like theme-raed). Style whatever list it renders; hide a duplicated
   mobile copy ONLY when a desktop (.root-level) twin immediately follows it —
   fail-open, so single-copy menus are never hidden. */
.faal-footer-nav {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

/* Salla's <salla-menu source="footer"> stamps Tailwind classes on each link
   ("!hidden lg:!block root-level lg:!inline-block" + a mobile twin). This theme
   has no Tailwind, so those utilities are inert and the links collapse together
   with no vertical rhythm. Force a block list and put the spacing + tap area on
   the anchors themselves, overriding any inline/utility display with !important. */
.faal-footer-menu {
  display: block;
}

.faal-footer-menu ul {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.faal-footer-menu li {
  display: block !important; /* neutralise root-level's inline-block intent */
  width: 100%;
  margin: 0;
}

/* hide the mobile twin Salla emits before each desktop (root-level) item;
   fail-open so a single-copy menu is never hidden */
.faal-footer-menu li:not(.root-level):has(+ li.root-level) {
  display: none !important;
}

.faal-footer-menu a {
  display: block;
  padding: 8px 0; /* vertical rhythm + comfortable hit area */
  color: var(--faal-muted);
  font-size: 16px;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.faal-footer-menu a:hover,
.faal-footer-menu a:focus-visible {
  color: var(--faal-green-800);
}

.faal-footer-menu .close-mobile-menu,
.faal-footer-menu .btn--close,
.faal-footer-menu .btn--close-sm {
  display: none !important;
}

/* Pre-hydration: reserve height so the footer column doesn't jump when links pop in. */
salla-menu.faal-footer-menu:not(.hydrated) {
  display: block;
  min-height: 132px;
}

@media (max-width: 860px) {
  .faal-footer-grid {
    grid-template-columns: 1fr;
  }
}

.faal-footer h2,
.faal-footer h3 {
  margin: 0 0 20px;
  color: var(--faal-black);
  font-size: 20px;
  font-weight: 900;
}

.faal-footer p,
.faal-footer a {
  color: var(--faal-muted);
  font-size: 16px;
}

.faal-footer-links {
  display: grid;
  gap: 12px;
}

.faal-footer-links a[phone-item] {
  direction: ltr;
  text-align: right;
}

.faal-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.faal-social .faal-social-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(2, 47, 44, 0.14);
  border-radius: 999px;
  color: var(--faal-green);
  font-size: 0;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.faal-social .faal-social-icon::before {
  width: 17px;
  height: 17px;
  background: currentColor;
  content: "";
  -webkit-mask: var(--faal-social-mask) center / contain no-repeat;
  mask: var(--faal-social-mask) center / contain no-repeat;
}

.faal-social .faal-social-icon:hover {
  transform: translateY(-2px);
  background: var(--faal-green);
  color: var(--faal-white);
}

.faal-social-icon.is-x {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cpath fill='black' d='M12.93 10.66 21.2 1h-1.96l-7.18 8.38L6.33 1H0l8.67 12.68L0 23h1.96l7.58-8.86L15.6 23H22L12.93 10.66Zm-2.68 3.13-.88-1.26L2.38 2.48h3.01l5.64 8.1.88 1.26 7.34 10.54h-3.01l-5.99-8.59Z'/%3E%3C/svg%3E");
}

.faal-social-icon.is-instagram {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
}

.faal-social-icon.is-whatsapp {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 19.8 5.5 16A8 8 0 1 1 8 18.4l-3.8 1.4Z'/%3E%3Cpath d='M9.3 8.8c.2-.5.5-.5.8-.5h.6c.2 0 .5.1.6.5l.5 1.2c.1.3.1.5-.1.7l-.4.5c.6 1.1 1.5 2 2.6 2.6l.5-.4c.2-.2.5-.2.7-.1l1.2.5c.4.1.5.4.5.7v.6c0 .3 0 .6-.5.8-.4.2-.8.3-1.4.3-2.9-.1-6.6-3.8-6.7-6.7 0-.6.1-1 .3-1.4Z'/%3E%3C/svg%3E");
}

.faal-social-icon.is-linkedin {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.5 8h4v16h-4V8zm7 0h3.8v2.2h.05c.53-1 1.83-2.2 3.77-2.2 4.03 0 4.78 2.65 4.78 6.1V24h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.65 1.8-2.65 3.65V24h-4V8z'/%3E%3C/svg%3E");
}

.faal-social-icon.is-facebook {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M24 12a12 12 0 1 0-13.875 11.85v-8.385H7.08V12h3.045V9.36c0-3.007 1.79-4.668 4.532-4.668 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.465h-2.796v8.385A12 12 0 0 0 24 12z'/%3E%3C/svg%3E");
}

.faal-social-icon.is-youtube {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M23.5 6.2a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 6.2 31.5 31.5 0 0 0 0 12a31.5 31.5 0 0 0 .5 5.8 3.02 3.02 0 0 0 2.12 2.14c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14A31.5 31.5 0 0 0 24 12a31.5 31.5 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z'/%3E%3C/svg%3E");
}

.faal-footer-brand p {
  margin: 18px 0 0;
  max-width: 320px;
  line-height: 1.6;
}

.faal-footer-col h3 {
  font-size: 24px;
}

.faal-pay-row img {
  height: 28px;
  width: auto;
}

@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .faal-social .faal-social-icon::before {
    width: auto;
    height: auto;
    background: transparent;
    content: attr(aria-label);
    -webkit-mask: none;
    mask: none;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
  }
}

/* Commercial register / freelance certificate (<salla-trust-badges>).
   The component ships its own base styles with its Stencil bundle; these only
   fit it to the footer's palette and type scale.

   :empty is what keeps the row from leaving a gap on a store that has neither
   number — the component's render() returns null there, so the host stays
   childless. It cannot fight this rule: the component's KSA visibility guard
   (which forces display/visibility/opacity back on through the whole ancestor
   chain) bails out early when there is no badge data. Whenever a number DOES
   exist the host has children, :empty stops matching, and the badge shows. */
.faal-trust-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.faal-trust-badges:empty {
  display: none;
}

.faal-trust-badges .s-trust-badges-image {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

.faal-trust-badges .s-trust-badges-label {
  margin: 0 0 2px;
  color: var(--faal-muted);
  font-size: 13px;
}

.faal-trust-badges .s-trust-badges-number {
  color: var(--faal-black);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.faal-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  color: var(--faal-muted);
  font-size: 14px;
}

.faal-content-hero {
  padding: clamp(108px, 12vw, 180px) 0 56px;
  text-align: center;
}

.faal-content-hero h1 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 900;
}

.faal-content-hero p {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--faal-green-800);
  font-size: 21px;
}

.faal-content-hero.is-right {
  text-align: start;
}

.faal-content-hero.is-right p {
  margin-inline: 0;
}

.faal-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* left nav removed → single column */
  gap: 72px;
  align-items: start;
  padding-block: 80px;
  max-width: 920px; /* keep a readable measure, centered in the container */
  margin-inline: auto;
}

.faal-content-layout--about {
  padding-bottom: clamp(28px, 5vw, 56px);
}

.faal-content-layout--about + .faal-youtube-section {
  padding-top: 0;
}

.faal-important-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 984px;
}

.faal-article {
  border-radius: var(--faal-radius-sm);
  background: rgba(255, 252, 244, 0.64);
  padding: clamp(28px, 5vw, 64px);
}

.faal-important-main {
  background: transparent;
  padding: 0;
}

.faal-article h2,
.faal-article h3 {
  color: var(--faal-black);
  font-weight: 900;
}

.faal-article h2 {
  margin: 0 0 18px;
  font-size: 34px;
}

.faal-article h3 {
  margin: 38px 0 12px;
  font-size: 24px;
}

.faal-article p,
.faal-article li {
  color: var(--faal-green-800);
  font-size: 19px;
}

.faal-article p {
  margin: 0 0 18px;
}

.faal-article ul,
.faal-article ol {
  padding-inline-start: 24px;
}

.faal-sidebar {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  box-shadow: 0 10px 30px rgba(1, 20, 18, 0.04);
}

.faal-sidebar a {
  padding: 10px 0;
  color: var(--faal-muted);
  font-weight: 800;
}

.faal-sidebar a.is-active {
  color: var(--faal-green);
}

.faal-important-nav {
  background: transparent;
  box-shadow: none;
}

.faal-important-link {
  display: block;
  border-bottom: 1px solid rgba(2, 47, 44, 0.1);
}

.faal-important-section {
  display: grid;
  gap: 18px;
  padding-block: 0 54px;
}

.faal-important-section + .faal-important-section {
  padding-top: 10px;
}

.faal-term-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 56px;
}

.faal-term-index a {
  padding: 16px 18px;
  border: 1px solid rgba(2, 47, 44, 0.12);
  border-radius: 8px;
  background: var(--faal-card);
  color: var(--faal-green);
  font-weight: 900;
}

.faal-faq-list {
  display: grid;
  gap: 80px;
}

.faal-faq-group {
  display: grid;
  gap: 24px;
}

.faal-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.faal-logo-card {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  color: var(--faal-green);
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}

.faal-clients-page {
  padding-bottom: clamp(48px, 7vw, 88px);
}

.faal-clients-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.8fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: center;
}

.faal-client-visual {
  max-height: 520px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--faal-radius);
  box-shadow: var(--faal-shadow);
}

.faal-client-visual img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: top center;
}

/* Clients logo wall — uniform white cards holding each 312×180 logo. Pure white
   bg so the logo's baked-in white blends seamlessly; contain keeps every logo
   proportional and centered. */
.faal-clients-grid .faal-logo-card {
  min-height: 0;
  aspect-ratio: 312 / 180;
  padding: clamp(10px, 1.4vw, 18px);
  background: var(--faal-white);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.faal-clients-grid .faal-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.faal-clients-grid .faal-logo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(1, 20, 18, 0.08);
}

.faal-clients-cta {
  padding-top: 0;
}

.faal-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.faal-dynamic-blog-preview {
  background: rgba(255, 254, 250, 0.24);
}

/* Blog section heads (title + inline category pills) */
.faal-blog-section-head { margin: 0 0 24px; }
.faal-blog-section-head h2 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 900;
}
.faal-blog-section-head--filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(32px, 5vw, 56px);
}

/* Category filter pills (Figma) — server categories[] via category.url + is_current */
.faal-blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.faal-blog-filters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 999px;
  background: var(--faal-white);
  color: var(--faal-green);
  font-size: 14px;
  font-weight: 800;
  transition: background 180ms ease, color 180ms ease;
}
.faal-blog-filters a:hover,
.faal-blog-filters a.is-active {
  background: var(--faal-green);
  color: var(--faal-white);
}

/* Featured "أحدث المقالات" row */
.faal-blog-featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.faal-blog-meta a { color: inherit; }
.faal-blog-meta i { margin-inline-end: 4px; }
.faal-blog-card h3 a { color: inherit; }
.faal-blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.faal-blog-empty { padding: 60px 20px; text-align: center; color: var(--faal-muted); }
.faal-blog-empty i { display: block; margin-bottom: 12px; font-size: 42px; }

.faal-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.faal-blog-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  margin-bottom: 14px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(58, 194, 107, 0.14);
  color: var(--faal-green);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.faal-blog-meta .faal-blog-badge {
  margin-bottom: 0;
}

.faal-blog-card {
  border-radius: var(--faal-radius-sm);
  overflow: hidden;
  background: var(--faal-card);
  box-shadow: 0 12px 35px rgba(1, 20, 18, 0.05);
}

.faal-blog-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  background: var(--faal-cream);
}

.faal-blog-thumb {
  /* MUST be block: the card links the thumb as an <a> (inline by default), but
     aspect-ratio / min-height / overflow only apply to a block box. As an inline
     element the thumb collapsed and the card's overflow:hidden clipped the content
     (title + meta) to zero height — the title regression. */
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-height: 210px;
  background:
    radial-gradient(circle at 20% 20%, rgba(58, 194, 107, 0.75), transparent 28%),
    linear-gradient(135deg, #fff4ce, #f4ece3);
}

.faal-blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.faal-blog-card-content {
  padding: 22px;
}

.faal-blog-card h3 {
  margin: 0 0 12px;
  color: var(--faal-black);
  font-size: 22px;
  font-weight: 900;
}

.faal-blog-card p {
  margin: 0;
  color: var(--faal-muted);
}

.faal-article-hero {
  padding: clamp(108px, 12vw, 180px) 0 clamp(48px, 7vw, 86px);
  background:
    linear-gradient(180deg, rgba(119, 246, 133, 0.9) 0, rgba(254, 222, 142, 0.5) 42%, rgba(244, 236, 227, 0) 100%),
    var(--faal-bg);
}

.faal-article-hero .faal-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: clamp(28px, 6vw, 76px);
  align-items: center;
}

.faal-article-hero h1 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 900;
  line-height: 1.18;
}

.faal-article-hero p {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--faal-green-800);
  font-size: 21px;
}

.faal-article-hero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--faal-radius-sm);
  object-fit: cover;
  object-position: center;
  box-shadow: var(--faal-shadow);
}

.faal-article-share {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.faal-article-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 999px;
  background: var(--faal-card);
  color: var(--faal-green);
  font-size: 14px;
  font-weight: 900;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.faal-article-share a:hover {
  transform: translateY(-2px);
  background: var(--faal-green);
  color: var(--faal-white);
}

.faal-faq {
  display: grid;
  gap: 12px;
}

.faal-faq-item {
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  overflow: hidden;
}

.faal-faq-item button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border: 0;
  background: transparent;
  color: var(--faal-black);
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
  text-align: start;
}

.faal-faq-item button::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(58, 194, 107, 0.14);
  color: var(--faal-green);
}

.faal-faq-item[data-open="true"] button::after {
  content: "-";
}

.faal-faq-panel {
  display: none;
  padding: 0 28px 24px;
  color: var(--faal-muted);
  font-size: 18px;
}

.faal-faq-item[data-open="true"] .faal-faq-panel {
  display: block;
}

.faal-placeholder {
  padding: 64px;
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  text-align: center;
}

/* ── Contact page (تواصل معنا) — Figma frame 5 ── */
.faal-contact-hours {
  margin-top: 18px !important;
  color: var(--faal-green-800);
  font-weight: 900;
}

.faal-contact-cards-section {
  padding-top: 0;
}

.faal-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.faal-contact-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label icon"
    "value value";
  align-items: center;
  gap: 8px 12px;
  padding: 28px 30px;
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.05);
  text-align: start;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.faal-contact-card .faal-contact-ico { grid-area: icon; }
.faal-contact-card .faal-contact-label { grid-area: label; }
.faal-contact-card .faal-contact-value { grid-area: value; }

.faal-contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(1, 20, 18, 0.1);
}

.faal-contact-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(58, 194, 107, 0.14);
  color: var(--faal-green);
}

.faal-contact-ico svg {
  width: 24px;
  height: 24px;
}

.faal-contact-label {
  color: var(--faal-black);
  font-size: 18px;
  font-weight: 900;
}

.faal-contact-value {
  color: var(--faal-muted);
  font-size: 16px;
  font-weight: 700;
  unicode-bidi: plaintext;
}

/* Contact form */
.faal-contact-form {
  max-width: 640px;
  margin-inline: auto;
  display: grid;
  gap: 22px;
}

.faal-field {
  display: grid;
  gap: 10px;
}

.faal-field label {
  color: var(--faal-black);
  font-size: 16px;
  font-weight: 900;
}

.faal-field input,
.faal-field textarea,
.faal-dial {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 14px;
  background: var(--faal-white);
  color: var(--faal-green-800);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.faal-field textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
}

.faal-field input::placeholder,
.faal-field textarea::placeholder {
  color: rgba(106, 112, 108, 0.7);
}

.faal-field input:focus,
.faal-field textarea:focus,
.faal-dial:focus {
  outline: none;
  border-color: var(--faal-accent);
  box-shadow: 0 0 0 3px rgba(58, 194, 107, 0.16);
}

/* Phone row: country-code select + number. LTR so +966 sits left of the number (Figma). */
.faal-phone-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  direction: ltr;
}

.faal-dial {
  width: auto;
  min-width: 92px;
  padding-inline: 14px;
  font-weight: 800;
  cursor: pointer;
}

.faal-contact-submit {
  justify-self: start;
  min-width: 150px;
}

.faal-contact-form:invalid .faal-contact-submit {
  /* purely cosmetic hint; real validation is native `required` on submit */
  opacity: 1;
}

/* Complaints & suggestions */
.faal-complaints-body {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  color: var(--faal-green-800);
}

.faal-complaints-lead {
  color: var(--faal-black);
  font-size: 20px;
  font-weight: 900;
}

.faal-complaints-body p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.7;
}

.faal-complaints-notes {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.faal-complaints-notes li {
  position: relative;
  padding-inline-start: 18px;
  color: var(--faal-green-800);
  font-size: 17px;
  font-weight: 700;
}

.faal-complaints-notes li::before {
  content: "*";
  position: absolute;
  inset-inline-start: 0;
  color: var(--faal-accent);
  font-weight: 900;
}

@media (max-width: 860px) {
  .faal-contact-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .faal-nav {
    gap: 18px;
    font-size: 14px;
  }

  .faal-header {
    padding-inline: 18px;
  }
}

@media (max-width: 960px) {
  .faal-header-shell {
    width: min(100% - 24px, var(--faal-container));
    margin-top: 16px;
  }

  .faal-header {
    min-height: 66px;
  }

  .faal-nav,
  .faal-header-actions .faal-language,
  .faal-header-actions .faal-btn {
    display: none;
  }

  .faal-menu-toggle {
    display: inline-flex;
  }

  .faal-mobile-menu {
    width: min(100% - 24px, var(--faal-container));
    display: none;
    position: fixed;
    z-index: 30;
    inset-inline: 12px;
    top: 94px;
    padding: 18px;
    border-radius: var(--faal-radius);
    background: var(--faal-cream);
    box-shadow: var(--faal-shadow);
  }

  .faal-mobile-menu[data-open="true"] {
    display: grid;
    gap: 12px;
  }

  .faal-mobile-menu a {
    padding: 14px;
    border-radius: 14px;
    color: var(--faal-green);
    font-weight: 900;
  }

  /* Drawer copy of the language picker: full-width row matching the drawer's
     links. This one lives in the page's RTL flow (unlike the header row, which
     is forced to ltr), so the chevron moves to the other side. */
  .faal-mobile-menu .faal-language {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border-color: var(--faal-line);
    background-color: var(--faal-white);
    background-position: right 14px center;
    font-weight: 900;
  }

  [dir="rtl"] .faal-mobile-menu .faal-language {
    background-position: left 14px center;
  }

  .faal-hero {
    margin-top: -82px;
    padding-top: 112px;
  }

  .faal-stats,
  .faal-services-grid,
  .faal-product-grid,
  .faal-why-grid,
  .faal-testimonials,
  .faal-clients-hero,
  .faal-article-hero .faal-container,
  .faal-content-layout,
  .faal-footer-grid,
  .faal-cta-panel {
    grid-template-columns: 1fr;
  }

  .faal-testimonial-grid,
  .faal-logo-grid,
  .faal-blog-featured,
  .faal-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faal-sidebar {
    position: static;
    order: -1;
  }

  .faal-important-nav {
    order: -1;
  }
}

@media (max-width: 640px) {
  .faal-container,
  .faal-section-image {
    width: min(100% - 24px, var(--faal-container));
  }

  .faal-hero-copy {
    margin-top: 48px;
  }

  .faal-stats {
    gap: 22px;
  }

  .faal-article-share {
    justify-content: stretch;
  }

  .faal-article-share a {
    flex: 1 1 130px;
  }

  .faal-carousel-shell {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
  }

  .faal-carousel-track {
    grid-auto-columns: minmax(160px, 78%);
  }

  .faal-carousel-btn {
    width: 40px;
    height: 40px;
  }

  .faal-testimonial-grid,
  .faal-logo-grid,
  .faal-blog-featured,
  .faal-blog-grid {
    grid-template-columns: 1fr;
  }

  .faal-term-index {
    grid-template-columns: 1fr;
  }

  .faal-service-card,
  .faal-product-card,
  .faal-why-card,
  .faal-testimonial-card,
  .faal-article,
  .faal-placeholder {
    padding: 24px;
  }

  .faal-service-ribbon,
  .faal-product-badge {
    margin-inline: -24px;
    padding-inline: 24px;
  }

  .faal-product-grid .faal-service-ribbon {
    margin-inline: -24px;
    padding-inline: 24px;
  }

  .faal-footer-bottom {
    flex-direction: column;
  }
}


/* ==========================================================================
   GENERAL CONTENT PAGES (الصفحات التعريفية) — FAQ, Terms, Refund policy, Ban
   tips, Contact, About Faal.

   These pages are authored as plain HTML in src/views/pages/general/*.html and
   pasted into Salla's page editor, which has no Twig — so they cannot use the
   asset filter and ship no CSS of their own. Their styles must therefore live
   HERE, because app.css is the only stylesheet the theme loads on every page
   (including the CMS page template).

   Everything is scoped to .gp / .gp-about so it can never leak into the theme.
   Brand tokens come from the :root above — do NOT redeclare them.
   ========================================================================== */
/* Scope everything to .gp so these rules never leak into the theme. */
.gp,
.gp * {
  box-sizing: border-box;
}

.gp {
  margin: 0;
  color: var(--faal-green-800);
  font-family: var(--faal-font);
  line-height: 1.8;
  text-align: right;
  direction: rtl;
}

.gp a {
  color: inherit;
  text-decoration: none;
}

.gp-container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

/* ---------- Hero ---------- */
.gp-hero {
  padding: clamp(72px, 10vw, 150px) 0 clamp(28px, 4vw, 56px);
  text-align: center;
}

.gp-hero h1 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 900;
  line-height: 1.15;
}

.gp-hero-sub {
  margin: 18px 0 0;
  color: var(--faal-muted);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
}

.gp-hero-date {
  margin: 16px 0 0;
  color: var(--faal-green-800);
  font-size: 15px;
  font-weight: 800;
}

/* ---------- Body wrapper ---------- */
.gp-body {
  padding-bottom: clamp(64px, 9vw, 120px);
}

/* ---------- Two-column: main content + sticky TOC sidebar ---------- */
.gp-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.gp-toc {
  position: sticky;
  top: 96px;
  align-self: start;
}

.gp-toc-title {
  margin: 0 0 12px;
  color: var(--faal-green);
  font-size: 15px;
  font-weight: 900;
}

.gp-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gp-toc a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--faal-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s ease, color 0.2s ease;
}

.gp-toc a:hover {
  background: rgba(58, 194, 107, 0.1);
  color: var(--faal-green);
}

.gp-toc a.is-active {
  color: var(--faal-green);
  font-weight: 900;
}

/* ---------- Main content column ---------- */
.gp-main {
  min-width: 0;
}

/* single-column pages (tips / refund) keep a comfortable measure */
.gp-content {
  max-width: 780px;
  margin-inline: auto;
}

/* ---------- Article sections (green heading + body + points) ---------- */
.gp-article {
  padding-block: clamp(20px, 3vw, 34px);
}

.gp-article + .gp-article {
  border-top: 1px solid var(--faal-line);
}

.gp-article h2 {
  margin: 0 0 16px;
  color: var(--faal-green);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 900;
  line-height: 1.4;
}

.gp-article > p {
  margin: 0 0 14px;
  color: var(--faal-green-800);
  font-size: clamp(15px, 1.8vw, 17px);
}

.gp-article > p:last-child {
  margin-bottom: 0;
}

/* numbered / bulleted point lists */
.gp-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.gp-list li {
  color: var(--faal-green-800);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.8;
}

.gp-list.is-bulleted li {
  position: relative;
  padding-inline-start: 22px;
}

.gp-list.is-bulleted li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--faal-accent);
}

.gp-note {
  margin: 6px 0 0;
  color: var(--faal-muted);
  font-size: 14px;
}

.gp-link {
  color: var(--faal-accent);
  font-weight: 700;
  word-break: break-all;
  direction: ltr;
  unicode-bidi: plaintext;
}

/* ---------- Highlight / link box (tips top link) ---------- */
.gp-linkbox {
  margin: 8px 0 12px;
}

.gp-linkbox h2 {
  margin: 0 0 10px;
  color: var(--faal-black);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 900;
  line-height: 1.5;
}

/* ---------- FAQ accordion (native <details>) ---------- */
.gp-faq-group {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.gp-faq-group > h2 {
  margin: 0 0 20px;
  color: var(--faal-black);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
}

.gp-acc {
  margin-bottom: 12px;
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  overflow: hidden;
}

.gp-acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  color: var(--faal-black);
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 800;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.gp-acc > summary::-webkit-details-marker {
  display: none;
}

/* +/- toggle */
.gp-acc > summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--faal-green);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.gp-acc[open] > summary::after {
  content: "\2212"; /* − */
}

.gp-acc-body {
  padding: 0 24px 22px;
  color: var(--faal-green-800);
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.9;
}

.gp-acc-body p {
  margin: 0 0 12px;
}

.gp-acc-body p:last-child {
  margin-bottom: 0;
}

.gp-acc-body ul {
  margin: 6px 0 12px;
  padding-inline-start: 20px;
}

.gp-acc-body li {
  margin-block: 6px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .gp-layout {
    grid-template-columns: 1fr;
  }

  /* On mobile the TOC becomes a horizontally-wrapping pill row above content. */
  .gp-toc {
    position: static;
    order: -1;
  }

  .gp-toc ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .gp-toc a {
    border: 1px solid var(--faal-line);
    border-radius: 999px;
    white-space: normal;
  }
}

/* ==========================================================================
   Contact page (تواصل معنا) — contact cards + WhatsApp form + complaints.
   The form's "إرسال" opens WhatsApp (966533205322) in a new tab, prefilled with
   the fields — handled by the theme's app.js via data-faal-contact-form.
   ========================================================================== */

/* Right-aligned hero (Figma frame), vs the centered gp-hero used by text pages. */
.gp-hero--start {
  text-align: right;
  padding-bottom: clamp(20px, 3vw, 40px);
}
.gp-hero--start .gp-hero-sub,
.gp-hero--start .gp-hero-date {
  /* In RTL a max-width block is already start-aligned (right), so no auto margins needed. */
  max-width: 760px;
}

/* ---------- Contact channel cards ---------- */
.gp-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: clamp(48px, 7vw, 88px);
}

.gp-contact-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label icon"
    "value value";
  align-items: center;
  gap: 8px 12px;
  padding: 26px 28px;
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gp-contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(1, 20, 18, 0.1);
}
.gp-contact-head { grid-area: label; display: inline-flex; align-items: center; gap: 12px; justify-content: space-between; }
.gp-contact-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(58, 194, 107, 0.14);
  color: var(--faal-green);
}
.gp-contact-ico svg { width: 24px; height: 24px; }
.gp-contact-label { color: var(--faal-black); font-size: 18px; font-weight: 900; }
.gp-contact-value {
  grid-area: value;
  color: var(--faal-muted);
  font-size: 16px;
  font-weight: 700;
  unicode-bidi: plaintext;
}

/* ---------- Direct-message form ---------- */
.gp-center-title {
  margin: 0 0 clamp(28px, 4vw, 44px);
  color: var(--faal-black);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  text-align: center;
}
.gp-form-block { padding-block: clamp(24px, 4vw, 48px); }
.gp-form {
  max-width: 640px;
  margin-inline: auto;
  display: grid;
  gap: 22px;
}
.gp-field { display: grid; gap: 10px; }
.gp-field label { color: var(--faal-black); font-size: 16px; font-weight: 900; }
.gp-field input,
.gp-field textarea,
.gp-dial {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 14px;
  background: var(--faal-white);
  color: var(--faal-green-800);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.gp-field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.gp-field input::placeholder,
.gp-field textarea::placeholder { color: rgba(106, 112, 108, 0.7); }
.gp-field input:focus,
.gp-field textarea:focus,
.gp-dial:focus {
  outline: none;
  border-color: var(--faal-accent);
  box-shadow: 0 0 0 3px rgba(58, 194, 107, 0.16);
}
/* Phone row: country code + number, LTR so +966 sits left of the number (Figma). */
.gp-phone-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; direction: ltr; }
.gp-dial { width: auto; min-width: 92px; padding-inline: 14px; font-weight: 800; cursor: pointer; }
.gp-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 150px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--faal-green);
  color: var(--faal-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.gp-btn:hover { background: var(--faal-black); transform: translateY(-2px); }

/* ---------- Complaints & suggestions ---------- */
.gp-complaints { text-align: center; }
.gp-complaints .gp-lead { color: var(--faal-black); font-size: 20px; font-weight: 900; margin: 0 0 16px; }
.gp-complaints p { color: var(--faal-green-800); font-size: clamp(15px, 1.8vw, 17px); margin: 0 0 14px; }
.gp-notes { max-width: 640px; margin-inline: auto; text-align: start; }

@media (max-width: 860px) {
  .gp-contact-cards { grid-template-columns: 1fr; }
}


/* ==========================================================================
   About Faal (عن فال) — page-specific styles, scoped to .gp-about so they can
   never leak into the theme (the old file used global *{} / body{} resets).
   Paste the page's inner <main class="gp gp-about"> … </main> into the Salla
   page editor; every general page shares this one stylesheet.
   ========================================================================== */

/* Scoped stand-in for the old global reset. */
.gp-about,
.gp-about * {
  box-sizing: border-box;
}

.gp-about {
  direction: rtl;
  background: #faf8f3; /* the hero gradient resolves to this */
  color: #011a18;
  font-family: var(--faal-font);
  overflow-x: hidden;
}

.gp-about h1,
.gp-about h2,
.gp-about h3,
.gp-about p {
  margin: 0;
  padding: 0;
}

.gp-about .hero {
    width:100%;
    min-height:100vh;
    padding:40px;

    background:linear-gradient(
        180deg,
        #77E685 0%,
        #FEDE8E 45%,
        #FAF8F3 100%
    );
}

.gp-about .hero-content {
    width:1320px;
    max-width:100%;
    margin:auto;
    text-align:center;
}

.gp-about .hero-content h1 {
    font-size:72px;
    font-weight:900;
    line-height:1.2;
    margin-bottom:24px;
}

.gp-about .hero-content p {
    width:900px;
    max-width:100%;
    margin:0 auto 60px;
    font-size:26px;
    font-weight:500;
    line-height:1.5;
}

.gp-about .hero-video {
    width:950px;
    max-width:100%;
    margin:auto;
}

.gp-about .company-section {
    width:1320px;
    max-width:95%;
    margin:80px auto;

    display:flex;
    flex-direction:column;
    gap:10px;
}

.gp-about .company-title {
    font-size:40px;
    font-weight:900;
    line-height:1.2;
}

.gp-about .company-description {
    width:720px;
    max-width:100%;
    font-size:24px;
    line-height:1.5;
}

.gp-about .vision-section {
    width:1000px;
    max-width:95%;
    margin:100px auto;
}

.gp-about .top {
    display:flex;
    flex-direction:row;
    gap:20px;
    margin-bottom:20px;
}

.gp-about .vision-box {
    flex:2;
    padding:35px;

    background:linear-gradient(
        180deg,
        #8FE87D 0%,
        #F9D98B 70%,
        #FFFFFF 100%
    );

    border-radius:20px;
}

.gp-about .vision-box h2 {
    font-size:42px;
    font-weight:900;
    margin-bottom:20px;
}

.gp-about .vision-box p {
    font-size:22px;
    line-height:1.7;
}

.gp-about .image-box {
    flex:1;
}

.gp-about .image-box img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:20px;
    display:block;
}

.gp-about .bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.gp-about .card {
    background:#FBE5A9;
    border-radius:20px;
    padding:30px;
    text-align:center;
}

.gp-about .card h3 {
    font-size:38px;
    font-weight:900;
    margin-bottom:15px;
}

.gp-about .card p {
    font-size:22px;
    line-height:1.5;
}

.gp-about .values-section {
    width:1000px;
    max-width:95%;
    margin:100px auto;
}

.gp-about .values-title {
    text-align:center;
    font-size:42px;
    font-weight:900;
    margin-bottom:15px;
}

.gp-about .values-subtitle {
    width:600px;
    max-width:100%;
    margin:0 auto 40px;

    text-align:center;
    font-size:20px;
    line-height:1.5;
}

.gp-about .values-container {
    display:flex;
    flex-direction:row-reverse;
    gap:20px;
}

.gp-about .values-image {
    width:300px;
    flex-shrink:0;
}

.gp-about .values-image img {
    width:100%;
    height:380px;
    object-fit:cover;
    border-radius:20px;
    display:block;
}

.gp-about .values-grid {
    flex:1;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
}

.gp-about .value-card {
    background:#FFFFFF;
    border:1px solid #EEEEEE;
    border-radius:20px;
    padding:28px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    box-shadow:0 4px 14px rgba(0,0,0,0.06);
}

.gp-about .value-card h3 {
    font-size:28px;
    font-weight:900;
    margin-bottom:12px;
}

.gp-about .value-card p {
    font-size:18px;
    line-height:1.7;
}

.gp-about .values-message-card {
    padding:0;
    overflow:hidden;
}

.gp-about .values-message-card img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.gp-about .features-section {
    width:1000px;
    max-width:90%;
    margin:70px auto 100px;
}

.gp-about .features-container {
    width:100%;
}

.gp-about .features-title {
    font-size:38px;
    font-weight:900;
    line-height:1.2;
    text-align:center;
    margin-bottom:14px;
}

.gp-about .features-subtitle {
    width:720px;
    max-width:100%;
    margin:0 auto 45px;

    font-size:18px;
    font-weight:500;
    line-height:1.6;
    text-align:center;
}

.gp-about .features-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px 55px;
}

.gp-about .feature-card {
    min-height:210px;
    padding:24px 18px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;

    text-align:center;
}

.gp-about .feature-card img {
    width:70px;
    height:70px;
    object-fit:contain;
    display:block;
    margin-bottom:16px;
}

.gp-about .feature-card h3 {
    font-size:24px;
    font-weight:900;
    margin-bottom:10px;
}

.gp-about .feature-card p {
    max-width:260px;
    font-size:16px;
    line-height:1.7;
}

.gp-about .contact-section {
    padding:0 0 100px;
}

.gp-about .contact-banner {
    width:1320px;
    max-width:95%;
    min-height:420px;
    margin:auto;

    background:linear-gradient(
        90deg,
        #77E685 0%,
        #F2D18A 18%,
        #F3DAA5 100%
    );

    border-radius:32px;
    padding:55px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:60px;
    overflow:hidden;
}

.gp-about .contact-content {
    width:42%;
}

.gp-about .contact-content h2 {
    font-size:52px;
    font-weight:900;
    line-height:1.2;
    margin-bottom:22px;
}

.gp-about .contact-content p {
    font-size:24px;
    line-height:1.7;
    margin-bottom:35px;
}

.gp-about .contact-buttons {
    display:flex;
    gap:16px;
}

.gp-about .contact-btn {
    height:52px;
    padding:0 28px;

    border-radius:999px;
    border:none;

    font-family:inherit;
    font-size:18px;
    font-weight:700;

    cursor:default;
}

.gp-about .contact-btn-dark {
    background:#011A18;
    color:#FFFFFF;
}

.gp-about .contact-btn-light {
    background:transparent;
    color:#011A18;
    border:2px solid #011A18;
}

.gp-about .contact-visual {
    width:58%;
    height:320px;
    position:relative;
    direction:ltr;
}

.gp-about .laptop-wrap {
    position:absolute;
    left:80px;
    bottom:0;
    width:470px;
}

.gp-about .laptop-frame {
    width:100%;
    display:block;
    position:relative;
    z-index:2;
}

.gp-about .dashboard-screen {
    position:absolute;
    left:12%;
    top:8%;
    width:76%;
    height:67%;
    object-fit:cover;
    border-radius:4px;
    z-index:1;
}

.gp-about .phone {
    position:absolute;
    left:0;
    bottom:-18px;
    width:165px;
    z-index:3;
}

@media (max-width:992px) {
  .gp-about .hero {
  
          padding:30px;
  }
  
  .gp-about .hero-content h1 {
  
          font-size:56px;
  }
  
  .gp-about .hero-content p {
  
          font-size:22px;
  }
  
  .gp-about .top {
  
          flex-direction:column;
  }
  
  .gp-about .image-box img {
  
          height:360px;
  }
  
  .gp-about .values-container {
  
          flex-direction:column;
  }
  
  .gp-about .values-image {
  
          width:100%;
  }
  
  .gp-about .values-image img {
  
          height:420px;
  }
  
  .gp-about .features-grid {
  
          grid-template-columns:repeat(2, 1fr);
  
          gap:24px;
  }
  
  .gp-about .contact-banner {
  
          flex-direction:column;
  
          text-align:center;
  }
  
  .gp-about .contact-content {
  
          width:100%;
  }
  
  .gp-about .contact-buttons {
  
          justify-content:center;
  }
  
  .gp-about .contact-visual {
  
          width:100%;
  
          max-width:620px;
  }
}

@media (max-width:768px) {
  .gp-about .hero {
  
          padding:20px;
  }
  
  .gp-about .hero-content h1 {
  
          font-size:40px;
  }
  
  .gp-about .hero-content p {
  
          font-size:18px;
  
          line-height:1.7;
  
          margin-bottom:35px;
  }
  
  .gp-about .hero-video {
  
          width:100%;
  }
  
  .gp-about .company-section,
  .gp-about .vision-section,
  .gp-about .values-section,
  .gp-about .features-section {
  
          width:90%;
  
          margin:60px auto;
  }
  
  .gp-about .company-title {
  
          font-size:30px;
  }
  
  .gp-about .company-description {
  
          font-size:18px;
  
          line-height:1.7;
  }
  
  .gp-about .vision-box {
  
          padding:25px;
  }
  
  .gp-about .vision-box h2 {
  
          font-size:32px;
  }
  
  .gp-about .vision-box p {
  
          font-size:18px;
  }
  
  .gp-about .image-box img {
  
          height:280px;
  }
  
  .gp-about .bottom {
  
          grid-template-columns:1fr;
  }
  
  .gp-about .card h3 {
  
          font-size:28px;
  }
  
  .gp-about .card p {
  
          font-size:18px;
  }
  
  .gp-about .values-title,
  .gp-about .features-title {
  
          font-size:32px;
  }
  
  .gp-about .values-subtitle,
  .gp-about .features-subtitle {
  
          width:100%;
  
          font-size:17px;
  }
  
  .gp-about .values-grid {
  
          grid-template-columns:1fr;
  }
  
  .gp-about .values-image img {
  
          height:auto;
  }
  
  .gp-about .features-grid {
  
          grid-template-columns:1fr;
  }
  
  .gp-about .feature-card {
  
          min-height:auto;
  
          padding:20px 10px;
  }
  
  .gp-about .contact-banner {
  
          padding:35px 20px;
  
          gap:25px;
  }
  
  .gp-about .contact-content h2 {
  
          font-size:34px;
  }
  
  .gp-about .contact-content p {
  
          font-size:18px;
  }
  
  .gp-about .contact-buttons {
  
          flex-direction:column;
  }
  
  .gp-about .contact-btn {
  
          width:100%;
  }
  
  .gp-about .contact-visual {
  
          height:240px;
  }
  
  .gp-about .laptop-wrap {
  
          width:330px;
  
          max-width:80%;
  
          left:50%;
  
          transform:translateX(-50%);
  }
  
  .gp-about .phone {
  
          width:110px;
  
          left:5px;
  }
}

@media (max-width:480px) {
  .gp-about .hero-content h1 {
  
          font-size:34px;
  }
  
  .gp-about .hero-content p {
  
          font-size:16px;
  }
  
  .gp-about .company-title,
  .gp-about .vision-box h2,
  .gp-about .values-title,
  .gp-about .features-title {
  
          font-size:28px;
  }
  
  .gp-about .contact-content h2 {
  
          font-size:28px;
  }
  
  .gp-about .contact-visual {
  
          height:210px;
  }
  
  .gp-about .laptop-wrap {
  
          width:280px;
  }
  
  .gp-about .phone {
  
          width:95px;
  }
}

/* ---------- Hero video (Cloudinary-hosted MP4) ----------
   The source is 720×1280 — exactly 9:16 PORTRAIT (verified from the file itself).
   The original 950×535 landscape frame cropped it to a thin middle band, so the
   frame matches the video's own ratio and is centred instead: no crop, no
   letterbox. Overrides the 950px .hero-video width above, so it must stay AFTER
   it (and after the 768px block, which sets .hero-video to width:100%). */
.gp-about .hero-video {
  width: min(360px, 100%);
  max-width: 100%;
  margin-inline: auto;
}

.gp-about .hero-video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: cover;
  border-radius: 32px;
  display: block;
  background: var(--faal-green-800); /* fills the frame until the poster paints */
}

@media (max-width: 768px) {
  .gp-about .hero-video {
    width: min(320px, 88%);
  }

  .gp-about .hero-video video {
    border-radius: 24px;
  }
}

/* The contact CTAs are links now (they were inert <button>s with cursor:default),
   so make the pill centre its text and behave like a button. */
.gp-about .contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.gp-about .contact-btn:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

/* ==========================================================================
   Thank-you page — order confirmation built on Salla's `order` data and the
   native <salla-order-shipments> / <salla-next-order-coupon> components.
   ========================================================================== */

.faal-thanks {
  text-align: center;
}

.faal-thanks-badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: var(--faal-mint);
  color: var(--faal-green-800);
}

.faal-thanks-badge svg {
  width: 30px;
  height: 30px;
}

.faal-thanks-ref {
  margin: 0 0 18px;
  color: var(--faal-muted);
  font-size: 16px;
}

.faal-thanks-copy {
  display: inline-block;
  margin-inline-start: 6px;
}

.faal-thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.faal-thanks-instructions,
.faal-thanks-message {
  margin: 22px auto 0;
  max-width: 640px;
  color: var(--faal-muted);
  font-size: 16px;
  line-height: 1.7;
}

.faal-thanks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.faal-thanks-block p {
  margin: 0 0 12px;
}

.faal-thanks-email {
  unicode-bidi: plaintext;
}

.faal-thanks-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faal-thanks-form input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
}

.faal-thanks-support {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.faal-thanks-support a {
  color: var(--faal-green-800);
  font-weight: 700;
  text-decoration: none;
}

.faal-thanks-support a:hover {
  text-decoration: underline;
}

.faal-order-shipments:not(:empty),
salla-next-order-coupon:not(:empty),
salla-order-branch:not(:empty) {
  display: block;
  margin-top: 24px;
}

@media (max-width: 720px) {
  .faal-thanks-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Loyalty page — Salla `loyalty` data plus the native <salla-loyalty> widget.
   ========================================================================== */

.faal-loyalty-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 4vw, 40px);
}

.faal-loyalty-banner-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.faal-loyalty-star {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--faal-yellow);
  color: #8a6a15;
}

.faal-loyalty-star svg {
  width: 26px;
  height: 26px;
}

.faal-loyalty-points {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 900;
  line-height: 1;
}

.faal-loyalty-title {
  margin-top: 40px;
}

.faal-loyalty-way {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faal-loyalty-copy span {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.faal-loyalty-done {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--faal-mint);
  color: var(--faal-green-800);
  font-weight: 700;
  font-size: 15px;
}

.faal-loyalty-prizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.faal-loyalty-prize img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--faal-radius-sm);
  margin-bottom: 14px;
}

.faal-loyalty-prize a {
  color: inherit;
  text-decoration: none;
}

.faal-loyalty-cost {
  display: inline-block;
  margin-top: 12px;
  font-weight: 900;
  color: var(--faal-green-800);
}

.faal-loyalty-empty {
  text-align: center;
  color: var(--faal-muted);
}