/* ==========================================================================
   Mawzona — main.css
   Gold + deep-green wellness system. RTL-first. No framework.
   ========================================================================== */

:root {
  /* EXACT live-site tokens (Elementor global kit) */
  --gold:      #B59650;  /* --e-global-color-primary */
  --gold-2:    #D19D4E;  /* --e-global-color-secondary */
  --gold-dk:   #9c7a48;
  --green-900: #0c524c;
  --green-800: #2D4F41;  /* --e-global-color-accent */
  --green-600: #427460;
  --green-500: #0C524C;
  --cyan-100:  #aaeef9;
  --ink:       #2D4F41;  /* headings = accent green */
  --muted:     #7A7A7A;  /* --e-global-color-text (body) */
  --paper:     #ffffff;
  --paper-2:   #f7f6f1;
  --paper-3:   #f1efe6;
  --line:      #e6e2d5;

  --grad-gold: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 55%, var(--gold-dk) 100%);
  /* Figma paints every green surface with #0C524C (the heading green #2D4F41 is
     text only, plus the small header buttons). The ramp is the card ramp, so the
     hero band, لماذا موزونة, page heroes and the sample tiles all read as one green. */
  --grad-green: linear-gradient(180deg, rgba(12,82,76,.74) 0%, rgba(12,82,76,.83) 28%, rgba(12,82,76,1) 84.8%);

  --shadow-sm: 0 4px 14px rgba(12,82,76,.06);
  --shadow:    0 14px 40px rgba(12,82,76,.10);
  --shadow-lg: 0 24px 60px rgba(12,82,76,.16);

  --radius:    18px;
  --radius-sm: 12px;
  --pill:      999px;

  --container: 1200px;
  --gap:       clamp(20px, 4vw, 40px);

  --font-display: 'Almarai', system-ui, sans-serif;  /* live uses Almarai throughout */
  --font-body:    'Almarai', system-ui, sans-serif;

  /* ---- SIZING TOKENS — matched to live desktop kit (mobile tuned via Figma) ---- */
  --fs-body:    16px;
  --fs-small:   0.875rem;
  --fs-h1:      clamp(1.9rem, 4vw, 2.5rem);
  --fs-h2:      clamp(1.7rem, 3.6vw, 2.5rem);   /* ~40px live section titles */
  --fs-h3:      clamp(1.15rem, 1.8vw, 1.375rem); /* ~22px card titles */
  --fs-hero:    clamp(2rem, 5.5vw, 2.9rem);      /* ~46px live hero */
  --lh-body:    1.85;
  --lh-head:    1.25;
  --sp-section: clamp(56px, 8vw, 104px);
  --card-radius: var(--radius);
  --card-pad:   30px;
  --product-thumb-ratio: 4 / 3;
}

/* ---------- live-content parity pages ---------- */
.live-sample-hero,
.live-policy-hero {
  padding: clamp(92px, 12vw, 150px) 0 clamp(42px, 7vw, 80px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(181,150,80,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,248,245,.95));
}
.live-sample-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  text-align: right;
}
.live-sample-hero h1,
.live-policy-hero h1 {
  color: var(--gold);
  font-size: clamp(34px, 5vw, 62px);
  margin-bottom: .35em;
}
.live-sample-hero p,
.live-policy-hero h2 {
  color: var(--green-900);
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.9;
  font-weight: 700;
}
.live-sample-hero__media img {
  width: min(100%, 420px);
  border-radius: 34px 34px 120px 34px;
  box-shadow: 0 24px 60px rgba(14,78,69,.16);
}
.live-sample-card,
.live-policy-card,
.testimonial-card,
.live-video-placeholder {
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(181,150,80,.18);
  box-shadow: 0 18px 44px rgba(13,67,61,.08);
}
.live-sample-card {
  max-width: 860px;
  margin: 0 auto 30px;
  padding: clamp(24px, 5vw, 44px);
  text-align: center;
}
.live-sample-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
}
.live-sample-steps article,
.live-sample-types .card {
  padding: 28px;
}
.live-sample-steps h2,
.live-sample-card h2,
.live-policy-card h2,
.testimonial-card h3 {
  color: var(--gold);
}
.live-sample-steps h3,
.live-sample-card p,
.live-sample-steps p,
.live-policy-card p,
.testimonial-card p {
  color: var(--green-900);
  line-height: 1.9;
}
.live-video-placeholder {
  max-width: 780px;
  margin: 0 auto;
  min-height: 240px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 34px;
  color: var(--green-900);
}
.live-video-placeholder span {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-900);
  color: #fff;
  margin-bottom: 14px;
}
.live-policy-icon {
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  margin: 0 auto 26px;
  border-radius: 34px;
  background: var(--green-900);
  color: var(--gold);
}
.live-policy-icon svg {
  width: 104px;
  height: 104px;
}
.live-policy-content {
  display: grid;
  gap: 22px;
}
.live-policy-card {
  padding: clamp(22px, 4vw, 38px);
}
.live-services-page .section-head p {
  max-width: 850px;
  margin-inline: auto;
  color: var(--green-900);
  font-weight: 700;
}
.live-services-grid {
  align-items: stretch;
}
.live-services-title {
  margin: 0 auto 28px;
  color: var(--green-900);
  text-align: center;
}
.live-services-page .products-section {
  overflow: hidden;
}
.live-services-page .products-section:nth-child(odd),
.live-services-page .products-section:nth-child(even) {
  background: #fff;
}
.live-services-page .section-head {
  margin-bottom: 34px;
}
.live-services-page .section-head h2 {
  color: var(--green-900);
}
.live-services-page .section-head h2 span {
  color: var(--gold);
}
/* Figma الخدمات heading breaks before «وأسعار» — it leads the second line, in green */
.live-services-page .section-head h2 .head-l2 {
  color: var(--green-900);
}
.testimonial-grid {
  align-items: stretch;
}
.testimonial-card {
  padding: 24px;
  text-align: center;
}
.testimonial-card span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(14,78,69,.1);
  color: var(--green-900);
  margin: 0 auto 12px;
}

@media (max-width: 760px) {
  .live-sample-hero__grid,
  .live-sample-steps {
    grid-template-columns: 1fr;
  }
  .live-sample-hero__grid {
    text-align: center;
  }
  .live-sample-hero__media {
    order: -1;
  }
  .live-policy-icon {
    width: 160px;
    height: 160px;
  }
  .live-policy-icon svg {
    width: 86px;
    height: 86px;
  }
}

/* ---------- hair sample collection: live page parity ---------- */
.samples-live-page { background:#fff; color:var(--green-800); }
.samples-live-page h1,
.samples-live-page h2,
.samples-live-page p { margin-top:0; }
.samples-hero {
  padding:clamp(72px,9vw,118px) 0 clamp(48px,7vw,84px);
  background:linear-gradient(180deg,#fff 0%,#f7f7f4 100%);
}
.samples-hero__inner {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(280px,430px);
  align-items:center;
  gap:clamp(30px,6vw,78px);
}
.samples-hero__copy { text-align:right; }
.samples-hero h1 { color:var(--gold); font-size:clamp(38px,5vw,64px); margin-bottom:22px; }
.samples-hero p { color:var(--green-800); font-size:clamp(17px,2vw,23px); line-height:2; font-weight:700; }
.samples-hero__image { width:100%; max-width:430px; margin-inline:auto; }
.samples-square-button { border-radius:8px; margin-top:10px; }
.samples-instructions { padding:clamp(58px,8vw,100px) 0; }
/* Figma جمع عينات الشعر: each stage is a dark-green card — 358 wide, r30, #0C524C,
   with a gold circled number, white bullet lines and the photos stacked between them. */
.samples-step {
  position:relative;
  width:min(100%, 363px);
  margin:0 auto 46px;
  padding:26px 22px 30px;
  border-radius:30px;
  background:#0C524C;
  color:#fff;
  text-align:center;
}
.samples-step__num {
  display:grid;
  place-items:center;
  width:41px;            /* Figma step ring 41 */
  height:41px;
  margin:0 auto 18px;
  border:2px solid #B59650;
  border-radius:50%;
  color:#B59650;
  font-weight:800;
  font-size:18px;
  line-height:1;
}
.samples-step__points {
  margin:0 0 18px;
  padding:0;
  list-style:none;
}
.samples-step__points li {
  margin:0 0 12px;
  color:#fff;
  font-size:13.7px;
  font-weight:400;
  line-height:27px;      /* Figma bullet leading */
}
/* RTL: the dot leads the line on the right and sits next to the text, not pinned
   to the card edge — so it stays put when the copy is centred. */
.samples-step__points li::before {
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-inline-end:8px;
  vertical-align:middle;
  border-radius:50%;
  background:#fff;
}
.samples-step__points li:last-child { margin-bottom:0; }
.samples-step__figure {
  width:min(100%, 241px);      /* Figma step photo 241×241 r50 */
  margin:0 auto 18px;
}
.samples-step__figure:last-child { margin-bottom:0; }
/* short-hair card: white title lines above the guidance, photo last */
.samples-step--short h3 {
  margin:0 0 4px;
  color:#fff;
  font-size:16px;
  font-weight:800;
  line-height:24px;
}
.samples-step__sub {
  margin:0 0 16px;
  color:#fff;
  font-size:13px;
  font-weight:400;
}
.samples-step__points--plain li { text-align:justify; text-align-last:justify; }
/* ---------- طريقة أخذ العينة (the two dedicated sampling pages) ----------
   Measured off live: headings 23/600 dark green on white, intro copy 18-20/300,
   list items 12/300 dark green on a light grey panel. No dark-green cards here. */
.sample-method { padding:16px 0 60px; background:#fff; }
.sample-method__title { margin:0 0 26px; text-align:center; }
.sample-method__title span {
  display:block;
  color:var(--green-800);
  font-weight:300;
  font-size:19px;
  line-height:24px;
}
.sample-method__title strong {
  display:block;
  color:#B59650;
  font-weight:700;
  font-size:22px;
  line-height:30px;
}
.sample-method__body h2 {
  margin:34px auto 14px;
  color:var(--green-800);
  font-size:23px;
  font-weight:600;
  line-height:30px;
  text-align:center;
}
.sample-method__body p {
  width:min(100%, 380px);
  margin:0 auto 16px;
  color:var(--green-800);
  font-size:18px;
  font-weight:300;
  line-height:30px;
  text-align:justify;
  text-align-last:center;
}
.sample-method__body .mz-note {
  font-weight:700;
  font-size:16px;
  text-align:center;
}
.sample-method__body .mz-list {
  width:min(100%, 392px);
  margin:0 auto;
  padding:20px 22px;
  border-radius:22px;
  background:#F0EEEE;
  list-style:none;
  counter-reset:mzm;
}
.sample-method__body .mz-list li {
  counter-increment:mzm;
  margin:0 0 12px;
  color:var(--green-800);
  font-size:12px;
  font-weight:300;
  line-height:22px;
  text-align:justify;
  text-align-last:right;
}
.sample-method__body .mz-list li:last-child { margin-bottom:0; }
.sample-method__body .mz-list:not(.mz-list--plain) li::before {
  content:counter(mzm, arabic-indic) "- ";
  font-weight:700;
}
.sample-method__body .mz-list--terms li::before,
.sample-method__body .mz-list--food li::before {
  content:"• ";
  color:#B59650;
  font-weight:700;
}
/* live sizes each list and heading differently on these pages */
.sample-method__body .mz-list { background:#F8F8F8; }
.sample-method__body .mz-list--terms { background:#F0EEEE; }
/* the numbered steps sit in live's dark-green card, white copy at 12/300, and the
   heading above them is part of the same card */
.sample-method__body .mz-h2--card {
  width:min(100%, 392px);
  margin:34px auto 0;
  padding:24px 22px 8px;
  border-radius:22px 22px 0 0;
  background:#0C524C;
  color:#fff;
  font-size:14px;
  font-weight:300;
  line-height:22px;
}
/* live keeps the head photo inside the green card, 241 wide */
.sample-method__body .mz-figure--card {
  width:min(100%, 392px);
  margin:0 auto 26px;
  padding:6px 22px 26px;
  border-radius:0 0 22px 22px;
  background:#0C524C;
}
.sample-method__body .mz-figure--card img {
  width:min(100%, 241px);
  margin-inline:auto;
}
/* live: «عند الانتهاء» 40/600 gold, «فيديو توضيحي» 35/600 green */
.sample-method__body .mz-h2--gold { font-size:40px; font-weight:600; color:#B59650; line-height:1.3; }
.sample-method__body .mz-h2--goldsm { font-size:19px; font-weight:700; color:#B59650; }
.sample-method__body .mz-cta { text-align:center; }
.sample-method__body .mz-cta a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:95px;
  min-height:34px;
  padding:0 16px;
  border-radius:10px;
  background:#B59650;
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}
.sample-method__body .mz-h2--video { font-size:35px; font-weight:600; line-height:1.3; }
.sample-method__body .mz-list--num {
  border-radius:0;
  background:#0C524C;
  padding-top:6px;
  padding-bottom:6px;
}
.sample-method__body .mz-list--num li {
  color:#fff;
  font-size:12px;
  font-weight:300;
}
.sample-method__body .mz-list--terms li { font-size:11px; font-weight:400; }
.sample-method__body .mz-list--food li { font-size:12px; font-weight:300; }
.sample-method__body .mz-h2--sm { font-size:16px; }
.sample-method__body .mz-h2--md { font-size:18px; }
.sample-method__body .mz-p--lg { font-size:20px; }
.sample-method__body .mz-p--sm { font-size:12px; line-height:22px; }
.sample-method__body .mz-p--md { font-size:17px; }
/* live leaves the closing note on the food page at body weight, not bold */
.sample-method__body .mz-note--plain { font-size:12px; font-weight:300; }
.sample-method__body .mz-figure {
  width:min(100%, 392px);
  margin:26px auto;
}
.sample-method__body .mz-figure img {
  display:block;
  width:100%;
  height:auto;
  border-radius:22px;
}
.sample-method__body .mz-video video {
  display:block;
  width:100%;
  border-radius:22px;
  background:#000;
}
.sample-method__body .mz-video--sm video { width:min(100%, 332px); margin-inline:auto; }

/* the six short-hair steps carry their own Arabic-Indic numerals */
.samples-step__points--num {
  margin:0 0 18px;
  padding:0;
  list-style:none;
  counter-reset:mzstep;
}
.samples-step__points--num li {
  counter-increment:mzstep;
  margin:0 0 10px;
  color:#fff;
  text-align:justify;
  text-align-last:right;
}
.samples-step__points--num li::before {
  /* the base bullet paints a 5px white disc; reset it so only the numeral shows */
  content:counter(mzstep, arabic-indic) "- ";
  width:auto;
  height:auto;
  margin-inline-end:4px;
  background:none;
  border-radius:0;
  vertical-align:baseline;
  font-weight:700;
}
.samples-step__points--plain li::before { content:none; }
/* Every heading in the Figma frame runs gold line 1 + dark-green line 2 — there is no
   gold-only heading in the design, so this one matches the rest. */
.samples-step__figure img {
  display:block;
  width:100%;
  border-radius:50px;
}
.samples-instructions__inner { max-width:960px; }
/* Figma: the rosette sits beside the two-line title on the RTL start side (right),
   not stacked above it — the block is 50 tall, i.e. two 25px lines. */
.samples-heading {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  margin-bottom:34px;
}
.samples-heading__text { display:block; }
.samples-heading__text h2,
.samples-heading__text p { margin:0; }
.samples-heading img { width:72px; height:72px; object-fit:contain; margin-bottom:14px; }
.samples-heading h2,
.samples-finish h2,
.samples-video-section h2,
.samples-types h2 { color:var(--gold); font-size:clamp(28px,4vw,46px); }
.samples-heading p,
.samples-lead { color:var(--green-800); font-size:clamp(17px,2.2vw,24px); line-height:1.9; text-align:center; }
.samples-visual-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:center; }
.samples-visual-pair figure,
.samples-detail-image { margin:0; text-align:center; }
.samples-visual-pair img,
.samples-detail-image img { width:min(100%,428px); border-radius:22px; }
.samples-detail-image { margin:28px auto 70px; }
.samples-heading--after { margin-top:70px; }
.samples-finish { padding:clamp(58px,8vw,96px) 0; text-align:center; background:#f7f7f5; }
.samples-finish p { max-width:860px; margin:0 auto 30px; color:var(--green-800); font-size:clamp(17px,2vw,22px); line-height:2; }
.samples-finish img { width:min(100%,980px); border-radius:18px; }
.samples-video-section { padding:clamp(58px,8vw,96px) 0; text-align:center; }
.samples-video { display:block; width:min(100%,900px); margin:28px auto 0; border-radius:20px; background:#111; box-shadow:var(--shadow-lg); }
.samples-short-hair { padding:clamp(46px,7vw,84px) 0; background:#f5f4ef; }
.samples-short-hair__card { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,428px); gap:40px; align-items:center; }
.samples-short-hair__card h2 { color:var(--gold); font-size:clamp(30px,4vw,48px); }
.samples-short-hair__card p { font-size:clamp(16px,2vw,21px); line-height:2; }
.samples-short-hair__card img { width:100%; border-radius:22px; }
.samples-eyebrow { color:var(--gold); font-weight:800; margin-bottom:4px; }
.samples-types { padding:clamp(58px,8vw,96px) 0; text-align:center; }
.samples-types__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:900px; margin:34px auto 0; }
.samples-types__grid a { min-height:220px; padding:34px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border:3px solid var(--gold); border-radius:26px; background:var(--grad-green); color:#fff; box-shadow:var(--shadow); }
.samples-types__grid span { color:var(--gold-2); font-weight:700; }
.samples-types__grid strong { color:#fff; font-size:clamp(22px,3vw,34px); }
@media (max-width:760px) {
  .samples-hero { padding-top:16px; background:#fff; }   /* Figma: white, and only 16 above the title */
  .samples-short-hair__card { grid-template-columns:1fr; text-align:center; }
  /* Figma order on this frame is title → photo → copy → button, so the copy block
     dissolves into the column and each child takes its own place. */
  .samples-hero__inner {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
    text-align:center;
  }
  .samples-hero__copy { display:contents; }
  .samples-hero h1 { order:1; margin-bottom:30px; }
  .samples-hero__image {
    order:2;
    width:calc(238 / 440 * 100vw);   /* Figma photo 238×243 (was a 340 square) */
    max-width:238px;
    margin-bottom:40px;
  }
  .samples-hero p { order:3; }
  .samples-hero .samples-square-button { order:4; }
  /* Figma mobile (440 frame): headings 22.5/700/25, body 12–13.7/400, image radii 50 */
  .samples-hero h1 { font-size:22.5px; font-weight:700; line-height:25px; color:var(--green-800); }
  .samples-hero p {
    /* Figma fits this copy in 5 lines (3 + 2) inside the 334 column with no gap
       between the paragraphs. 12.5 is the largest size that still holds 3 + 2. */
    font-size:12.5px;
    font-weight:400;
    line-height:24px;
    margin-block:0;
    width:calc(334 / 440 * 100vw);   /* Figma copy column is 334, not the full 400 */
    max-width:334px;
    margin-inline:auto;
    /* Figma sets this copy as a solid rectangle: every line flush, last one included */
    text-align:justify;
    text-align-last:justify;
  }
  /* Figma runs the second hero paragraph bold */
  .samples-hero__copy p + p { font-weight:700; }
  /* Figma «اطلبها الآن» = 95×34 r10 (was 139×61) */
  .samples-hero .samples-square-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:calc(95 / 440 * 100vw);
    min-width:calc(95 / 440 * 100vw);
    max-width:95px;
    height:calc(34 / 440 * 100vw);
    min-height:calc(34 / 440 * 100vw);
    max-height:34px;
    margin-top:16px;
    padding:0;
    border-radius:10px;
    font-size:calc(13.7 / 440 * 100vw);
    font-weight:800;
    line-height:1;
  }
  .samples-heading h2,
  .samples-finish h2,
  .samples-video-section h2 { font-size:22.5px; font-weight:700; line-height:25px; }
  .samples-heading img { width:43px; height:43px; margin-bottom:0; flex:0 0 43px; }
  .samples-heading p,
  .samples-lead { font-size:13.7px; font-weight:400; line-height:27px; }
  /* Figma heading: both lines 20/25 — line 1 gold, line 2 dark green.
     Must sit after «.samples-heading p» above, which otherwise wins on source order. */
  .samples-heading__text h2,
  .samples-heading__text p {
    font-size:20px;
    font-weight:700;
    line-height:25px;
  }
  .samples-heading__text p { color:var(--green-800); }
  /* Figma «عند الانتهاء»: same 334 justified column as the hero copy, not a 400
     centred block at 20px (which ran to 5 loose lines). */
  .samples-finish p {
    font-size:13px;      /* largest size that still holds Figma's 4 lines */
    font-weight:400;
    line-height:24px;
    width:calc(334 / 440 * 100vw);
    max-width:334px;
    margin-inline:auto;
    text-align:justify;
    text-align-last:justify;
  }
  .samples-finish p.samples-finish__note {
    margin-top:22px;
    font-size:15px;
    font-weight:700;
    text-align:center;
  }
  .samples-finish h2 { font-size:20px; font-weight:700; line-height:25px; }
  /* Figma: the frame is #FFFFFF the whole way down to the footer, so no tinted bands */
  .samples-finish,
  .samples-short-hair,
  .samples-video-section,
  .samples-types { background:#fff; }
  /* every heading on this frame is the same 20/25 scale */
  .samples-video-section h2,
  .samples-types h2 { font-size:20px; font-weight:700; line-height:25px; }
  /* Amer: one green unit, line 1 thin and line 2 bold, both flush right beside the icon */
  .samples-heading__text {
    text-align:right;
  }
  /* set it on the lines themselves: «.samples-heading p» matches them directly and
     would otherwise beat the parent's inherited alignment */
  .samples-heading__text h2,
  .samples-heading__text p {
    color:var(--green-800);
    text-align:right;
  }
  /* Figma renders both lines at 161 wide; at a flat 20px staging gave 152 / 177 */
  .samples-heading__text h2 { font-weight:300; font-size:21px; line-height:26px; }
  .samples-heading__text p  { font-weight:700; font-size:18px; line-height:24px; }
  .samples-finish h2,
  .samples-video-section h2,
  .samples-types h2 { color:#B59650; }
  .samples-short-hair__card h2 { font-size:23.3px; font-weight:300; }
  .samples-short-hair__card p { font-size:13.7px; line-height:27px; }
  .samples-detail-image img,
  .samples-short-hair__card img { border-radius:50px; }
  .samples-video { border-radius:30px; }
  .samples-square-button { border-radius:12px; }
  .samples-visual-pair { gap:12px; }
  .samples-heading--after { margin-top:48px; }
  /* Figma: 60 between «اطلبها الآن» and the heading below it (was 106) */
  .samples-instructions { padding-top:12px; }
  .samples-heading--gold .samples-heading__text p { font-size:20px; line-height:25px; }
  .samples-types__grid { grid-template-columns:1fr; }
  /* live: light grey cards, dark-green type, gold «اختيار» button (not dark-green
     cards with a gold border). This section is not in Figma, so it follows live. */
  .samples-types__grid { gap:18px; margin-top:22px; }
  .samples-types__grid a {
    min-height:0;
    padding:26px 22px 20px;
    align-items:center;
    gap:4px;
    border:0;
    border-radius:26px;
    background:#F5F5F5;
    box-shadow:none;
    color:var(--green-800);
  }
  .samples-types__grid span {
    color:var(--green-800);
    font-weight:300;
    font-size:14px;
    line-height:20px;
  }
  .samples-types__grid strong {
    color:var(--green-800);
    font-weight:700;
    font-size:16px;
    line-height:22px;
  }
  .samples-types__cta {
    align-self:flex-end;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:16px;
    min-width:74px;
    min-height:32px;
    padding:0 16px;
    border-radius:9px;
    background:#B59650;
    color:#fff;
    font-style:normal;
    font-weight:700;
    font-size:13px;
    line-height:1;
  }

  /* iOS shapes Arabic wider than headless Chromium does, so text that measures right
     against Figma here still runs long on the device. Amer's reference is the
     simulator: every type size on this page is stepped down (10% + a further 10%). */
  .samples-hero h1 { font-size:18.25px; line-height:21px; }
  .samples-hero p { font-size:10.1px; line-height:20px; }
  .samples-heading__text h2 { font-size:17px; line-height:21px; }
  .samples-heading__text p { font-size:14.4px; line-height:20px; }
  .samples-step__points li { font-size:11px; line-height:22px; }
  .samples-step--short h3 { font-size:13px; line-height:20px; }
  .samples-step__sub { font-size:10.5px; }
  .samples-finish p { font-size:10.5px; line-height:20px; }
  .samples-finish p.samples-finish__note { font-size:12px; }
  .samples-finish h2,
  .samples-video-section h2,
  .samples-types h2 { font-size:16px; line-height:21px; }
  .samples-hero .samples-square-button { font-size:calc(11 / 440 * 100vw); }
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-width: auto;
  scrollbar-color: #2D4F41 #f1f1f1;
}
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #2D4F41; border-radius: 50px; }
::-webkit-scrollbar-thumb:hover { background: #0C524C; border-radius: 50px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s, opacity .2s; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-head); color: var(--green-800); margin: 0 0 .5em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- layout ---------- */
.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.section { padding-block: var(--sp-section); position: relative; }
.section--tint { background: var(--paper-2); }
.section--paper3 { background: var(--paper-3); }
.section-head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head .eyebrow { color: var(--gold-dk); font-weight: 700; letter-spacing: .04em; font-size: .95rem; }
.section-head h2 { margin-top: .35rem; }
.section-head h2::after {
  content: ""; display: block; width: 68px; height: 4px; border-radius: 4px;
  background: var(--grad-gold); margin: .7rem auto 0;
}
.section-head p { color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.8em; border-radius: var(--pill); font-family: var(--font-display);
  font-weight: 600; font-size: 1rem; cursor: pointer; border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .2s ease, background .2s;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--grad-gold); color: #fff; box-shadow: 0 10px 24px rgba(181,150,80,.35); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(181,150,80,.42); }
.btn--green { background: var(--green-800); color: #fff; }
.btn--green:hover { background: var(--green-900); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--green-800); border-color: var(--green-800); }
.btn--ghost:hover { background: var(--green-800); color: #fff; }
.btn--sm { padding: .6em 1.2em; font-size: .9rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding-top: env(safe-area-inset-top);
  background: rgba(255,255,255,.9); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* homepage: transparent header floating over the hero (matches live) */
.is-front .site-header,
.is-live-contact .site-header {
  position: absolute; inset-inline: 0; top: 0;
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
}
/* becomes solid white once you scroll, so it stays readable over the sections */
.is-front .site-header.scrolled,
.is-live-contact .site-header.scrolled {
  position: fixed;
  background: rgba(255,255,255,.96); backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(12,82,76,.07);
}
.is-front .hero2 { padding-top: 0; }
.site-header .bar { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.site-brand .brand-logo { display: inline-flex; align-items: center; }
.site-brand .brand-logo-full { display: block; height: 46px; width: auto; }
.site-brand .brand-logo-mark { display: none; width: 30px; height: 30px; object-fit: contain; }
.site-brand img, .site-brand .logo-text { height: 46px; width: auto; }
.site-brand .logo-text { display: flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--green-800); }
.site-brand .logo-text b { color: var(--gold); }
.primary-nav { margin-inline-start: auto; }
.nav-menu { display: flex; align-items: center; gap: 6px; }
.nav-menu a { padding: .55em 1em; border-radius: var(--pill); font-family: var(--font-display); font-weight: 600; color: var(--green-800); }
.nav-menu a:hover { color: var(--gold-dk); }
.nav-menu .current-menu-item > a, .nav-menu .current_page_item > a, .nav-menu .current-menu-parent > a {
  color: var(--gold-dk); background: rgba(181,150,80,.14);
}
.header-actions { display: flex; align-items: center; gap: 12px; }
/* login = green pill button (matches live) */
.header-login { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-display); font-weight: 600; color: #fff; background: var(--green-800); padding: .6em 1.2em; border-radius: var(--pill); }
.header-login:hover { background: var(--green-900); color: #fff; }
.mobile-login { display: none; }
/* cart = price + icon pill (matches live) */
.cart-link { display: inline-flex; align-items: center; gap: 10px; padding: .3em .4em .3em 1em; border-radius: var(--pill); background: var(--paper-2); color: var(--green-800); font-family: var(--font-display); font-weight: 700; }
.cart-link:hover { background: #efece1; }
/* Basket reads as «has items»: gold button, gold-ringed counter (client note). */
.cart-link--filled .cart-ico { background: #B59650; }
.cart-link .count[aria-hidden="true"] { display: none; }
.cart-link .cart-total { font-size: .88rem; white-space: nowrap; }
.cart-link .cart-total .amount, .cart-link .cart-total bdi { color: var(--green-800); }
.cart-link .cart-ico { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--green-800); color: #fff; }
.cart-link .count { position: absolute; inset-block-start: -3px; inset-inline-start: -3px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: var(--pill); background: var(--gold); color: #fff; font-size: .68rem; font-weight: 700; }
.nav-toggle { display: none; width: 46px; height: 46px; border: 0; background: var(--paper-2); border-radius: 12px; cursor: pointer; }
.nav-toggle img { display: block; width: 29px; height: 29px; object-fit: contain; }

/* ---------- live-style mini cart ---------- */
body.cart-drawer-open { overflow: hidden; }
.cart-drawer-shell {
  position: fixed;
  inset: 0;
  z-index: 3000;
  visibility: hidden;
  pointer-events: none;
}
.cart-drawer-shell.is-open { visibility: visible; pointer-events: auto; }
.cart-drawer-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(27,42,38,.54);
  opacity: 0;
  cursor: default;
  transition: opacity .22s ease;
}
.cart-drawer-shell.is-open .cart-drawer-overlay { opacity: 1; }
.cart-drawer {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: min(347px, calc(100vw - 20px));
  padding: calc(58px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: #1f2926;
  direction: rtl;
  outline: 0;
  transform: translateX(-102%);
  transition: transform .25s ease;
  box-shadow: 18px 0 45px rgba(0,0,0,.18);
}
.cart-drawer-shell.is-open .cart-drawer { transform: translateX(0); }
/* the drawer lists services, not physical goods — no thumbnails (Amer) */
.cart-drawer .woocommerce-mini-cart li img,
.cart-drawer .cart_list li img { display: none; }
.cart-drawer-close {
  position: absolute;
  top: 14px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green-800);
  cursor: pointer;
  font: 300 38px/1 Arial, sans-serif;
}
.cart-drawer .woocommerce-mini-cart__empty-message {
  margin: 0;
  color: #1f2926;
  font-size: .9rem;
  font-weight: 700;
  text-align: right;
}
/* Drawer rows follow live's compact shape: name on the right, a circled remove
   control on the left, a hairline between items. The stepper and the price row
   are the client's addition, so the whole cart is controlled from the drawer. */
.cart-drawer .woocommerce-mini-cart { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cart-drawer .mz-cart-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  padding: 14px 34px 14px 0;
  border-bottom: 1px solid var(--line);
}
.cart-drawer .mz-cart-row:last-of-type { border-bottom: 0; }
.cart-drawer .mz-cart-row__name {
  grid-column: 1 / -1;
  color: var(--green-800);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
.cart-drawer .mz-cart-row__remove {
  position: absolute;
  top: 14px;
  right: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1.5px solid var(--green-800);
  border-radius: 50%;
  background: transparent;
  color: var(--green-800);
  font: 400 15px/1 Arial, sans-serif;
  cursor: pointer;
}
.cart-drawer .mz-cart-row__remove:hover { background: var(--green-800); color: #fff; }
.cart-drawer .mz-cart-row__qty {
  justify-self: start;   /* hug the stepper, don't stretch it across the row */
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.cart-drawer .mz-qty-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: #f4f2ec;
  color: var(--green-800);
  font: 700 15px/1 var(--font-display), Arial, sans-serif;
  cursor: pointer;
}
.cart-drawer .mz-qty-btn:disabled { opacity: .35; cursor: default; }
.cart-drawer .mz-qty-btn:not(:disabled):hover { background: var(--gold); color: #fff; }
.cart-drawer .mz-qty-val {
  min-width: 30px;
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
  color: var(--green-800);
}
.cart-drawer .mz-cart-row__price {
  justify-self: end;
  color: var(--green-800);
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
}

/* «الإجمالي قبل الخصم» struck, «قيمة الخصم» negative in red, «الإجمالي النهائي». */
.cart-drawer .mz-cart-totals {
  display: grid;
  gap: 8px;
  margin: 18px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cart-drawer .mz-cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .92rem;
}
.cart-drawer .mz-cart-total-row__label { color: var(--ink-soft); }
.cart-drawer .mz-cart-total-row__value { font-weight: 700; color: var(--green-800); white-space: nowrap; }
.cart-drawer .mz-cur { font-size: .85em; font-weight: 400; }
.cart-drawer .mz-cart-total-row__value--was,
.cart-drawer .mz-cart-total-row__value--was .amount,
.cart-drawer .mz-cart-total-row__value--was bdi {
  color: var(--ink-soft);
  font-weight: 400;
  text-decoration: line-through;
}
.cart-drawer .mz-cart-total-row--save .mz-cart-total-row__value,
.cart-drawer .mz-cart-total-row--save .amount,
.cart-drawer .mz-cart-total-row--save bdi { color: #C0392B; }
.cart-drawer .mz-cart-total-row--final { font-size: 1.02rem; }
.cart-drawer .mz-cart-total-row--final .mz-cart-total-row__label { color: var(--green-800); font-weight: 700; }

/* Live pairs the two buttons on one row; the labels come from the client's mockup. */
.cart-drawer .mz-cart-actions { display: flex; gap: 10px; margin: 0; }
.cart-drawer .mz-cart-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  text-align: center;
  text-decoration: none;
}
.cart-drawer .mz-cart-btn--browse { background: #2D4F41; }
.cart-drawer .mz-cart-btn--checkout { background: #B59650; }
.cart-drawer.is-busy { opacity: .6; pointer-events: none; }

/* WooCommerce appends a «عرض السلة» link after every ajax add. The drawer is the
   cart control here, and the link lands on top of the card's price row. */
.product-card .added_to_cart,
.hair-package-card .added_to_cart,
.live-services-grid .added_to_cart { display: none !important; }

@media (min-width: 761px) {
  .is-front .site-header .container,
  .is-live-contact .site-header .container { width: min(100% - 56px, 1330px); }
  .is-front .site-brand .brand-logo-full,
  .is-live-contact .site-brand .brand-logo-full { height: 38px; }
  .is-front .site-brand .logo-text,
  .is-live-contact .site-brand .logo-text { height: 38px; }
  .is-front .primary-nav,
  .is-live-contact .primary-nav {
    margin-inline: auto;
    background: var(--green-800);
    border-radius: 12px;
    padding: 0 12px;
    box-shadow: 0 8px 22px rgba(45,79,65,.14);
  }
  .is-front .nav-menu,
  .is-live-contact .nav-menu { gap: 0; }
  .is-front .nav-menu li,
  .is-live-contact .nav-menu li { position: relative; }
  .is-front .nav-menu li + li::before,
  .is-live-contact .nav-menu li + li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 1px;
    height: 22px;
    background: rgba(209,157,78,.72);
    transform: translateY(-50%);
  }
  .is-front .nav-menu a,
  .is-live-contact .nav-menu a {
    color: #fff;
    border-radius: 0;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    padding: 0 1.05em;
    font-size: .94rem;
  }
  .is-front .nav-menu a:hover,
  .is-front .nav-menu .current-menu-item > a,
  .is-front .nav-menu .current_page_item > a,
  .is-front .nav-menu .current-menu-parent > a,
  .is-live-contact .nav-menu a:hover,
  .is-live-contact .nav-menu .current-menu-item > a,
  .is-live-contact .nav-menu .current_page_item > a,
  .is-live-contact .nav-menu .current-menu-parent > a {
    color: #fff;
    background: rgba(255,255,255,.1);
  }
  .is-front .header-login,
  .is-live-contact .header-login { display: none; }
  .is-front .cart-link,
  .is-live-contact .cart-link {
    min-height: 52px;
    padding: .45em .85em;
    background: var(--green-800);
    color: #fff;
    border-radius: 10px;
  }
  .is-front .cart-link .cart-total .amount,
  .is-front .cart-link .cart-total bdi,
  .is-live-contact .cart-link .cart-total .amount,
  .is-live-contact .cart-link .cart-total bdi { color: #fff; }
  .is-front .cart-link .cart-ico,
  .is-live-contact .cart-link .cart-ico {
    width: auto;
    height: auto;
    background: transparent;
  }
  /* the counter and the gold «has items» fill apply on these headers too */
  .is-front .cart-link--filled,
  .is-live-contact .cart-link--filled { background: #B59650; }
  .is-front .cart-link--filled .cart-ico,
  .is-live-contact .cart-link--filled .cart-ico { background: transparent; }
  .is-front .cart-link .count,
  .is-live-contact .cart-link .count {
    inset-block-start: -6px;
    inset-inline-start: -8px;
    background: #fff;
    color: #2D4F41;
  }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--grad-green); color: #fff; }
.hero::before { content:""; position:absolute; inset:0; background:
  radial-gradient(60% 80% at 90% 10%, rgba(181,150,80,.35), transparent 60%),
  radial-gradient(50% 60% at 5% 90%, rgba(170,238,249,.14), transparent 60%); }
.hero .container { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--gap); padding-block: clamp(48px, 8vw, 96px); }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.hero .lede { font-size: 1.18rem; color: rgba(255,255,255,.9); max-width: 44ch; }
.hero .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.4rem; }
.hero .hero-badges { display: flex; gap: 22px; margin-top: 2rem; flex-wrap: wrap; }
.hero .hero-badges b { display:block; font-family: var(--font-display); font-size: 1.5rem; color: var(--cyan-100); }
.hero .hero-badges span { color: rgba(255,255,255,.75); font-size: .9rem; }
.hero-media { position: relative; }
.hero-media img { margin-inline: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.35)); }
.hero-media .blob { position: absolute; inset: 8% 6%; background: var(--grad-gold); border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; opacity:.22; filter: blur(6px); z-index:-1; }

/* ---------- generic cards grid ---------- */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .25s, border-color .25s;
  position: relative;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #e3d7b8; }
.card .ico { width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center; background: var(--paper-2); margin-bottom: 18px; }
.card .ico img { width: 38px; height: 38px; }
.card h3 { color: var(--green-800); }
.card p { color: var(--muted); font-size: .98rem; }

/* category (feature) cards with gradient top */
.feature-card {
  text-align: center;
  padding-top: 42px;
}
.feature-card .ico {
  position: absolute;
  inset-block-start: -25px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  margin: 0;
  background: #f7f6f1;
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(12,82,76,.08);
  z-index: 2;
}
.feature-card .ico img { filter: none; }

/* lab division split cards */
.lab-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; overflow: hidden; }
.lab-card .lab-img { width: 120px; height: 120px; border-radius: 16px; object-fit: cover; }

/* ---------- product cards (Woo + static) ---------- */
.product-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.product-card .thumb { aspect-ratio: 4/3; background: var(--paper-2); overflow: hidden; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .save-badge { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; background: var(--grad-gold); color: #fff; font-weight: 700; font-size: .8rem; padding: .35em .8em; border-radius: var(--pill); z-index: 2; }
.product-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.product-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.product-card .desc { color: var(--muted); font-size: .92rem; flex: 1; }
.product-card .feat { list-style: none; margin: 0 0 4px; padding: 0; flex: 1; text-align: right; }
.product-card .feat li { position: relative; padding-inline-start: 22px; margin-bottom: 7px; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.product-card .feat li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--gold); font-weight: 700; }
.product-card .price { display: flex; align-items: baseline; gap: 8px; margin: .6rem 0 1rem; }
.product-card .price .now { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--gold-dk); }
.product-card .price .was { color: var(--muted); text-decoration: line-through; font-size: 1rem; }
.product-card .price .cur { font-size: .95rem; color: var(--muted); }
.product-card .actions { display: flex; gap: 10px; }
.product-card .actions .btn { flex: 1; }
.product-card .product-add-icon { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }

.featured-products {
  align-items: stretch;
}
.featured-products .product-card {
  min-height: 430px;
  padding: 34px 26px 30px;
  /* Figma: every service card carries the same vertical gradient — it lands on the
     flat #0C524C at ~85% and stays there for the rest of the card. */
  background: linear-gradient(180deg,
    rgba(12,82,76,.74) 0%,
    rgba(12,82,76,.83) 28%,
    rgba(12,82,76,1) 84.8%);
  border: 1px solid rgba(45,79,65,.14);
  border-radius: 26px;
  box-shadow: 0 18px 34px rgba(12,82,76,.18);
  color: #fff;
}
.featured-products .product-card > .body {
  position: relative;
  z-index: 1;
}
/* Tap flips the card (Figma interaction). The back face carries the title, the document
   mark, «تحقق من النموذج» and a repeat of the price + «إضافة» row, so nothing is hidden. */
.featured-products .product-card--has-sample { perspective: 1200px; }
.featured-products .product-card--has-sample > .body,
.featured-products .product-card--has-sample > .product-card-back {
  transition: transform .55s cubic-bezier(.4, .16, .2, 1), opacity .28s ease;
  backface-visibility: hidden;
}
.featured-products .product-card-back {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(14 / 440 * 100vw);
  padding: calc(34 / 440 * 100vw) calc(21 / 440 * 100vw) calc(20 / 440 * 100vw);
  border-radius: inherit;
  text-align: center;
  transform: rotateY(180deg);
  opacity: 0;
  pointer-events: none;
}
.featured-products .product-card--has-sample.is-flipped > .body {
  transform: rotateY(180deg);
  opacity: 0;
  pointer-events: none;
}
.featured-products .product-card--has-sample.is-flipped > .product-card-back {
  transform: rotateY(360deg);
  opacity: 1;
  pointer-events: auto;
}
.featured-products .product-card-back h3 { margin: 0; color: #fff; }
.featured-products .product-card-back__doc {
  display: grid;
  place-items: center;
  width: calc(46 / 440 * 100vw);
  height: calc(46 / 440 * 100vw);
  color: #B59650;
}
.featured-products .product-card-back__doc svg { width: 100%; height: 100%; }
.featured-products .product-card-back__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: auto;
}
/* The mobile block later in this file stretches .actions to the full row; the back face
   needs it to hug the button so the price keeps its half. Extra class = higher specificity. */
.featured-products .product-card .product-card-back__foot .actions {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}
.featured-products .product-card .product-card-back__foot .price {
  flex: 0 0 auto;
  margin: 0;
  align-self: center;
}
.featured-products .product-card .product-card-back__foot .price .was,
.featured-products .product-card .product-card-back__foot .price .now { white-space: nowrap; }

/* «تحقق من النموذج» — live's gold pill (#b59650, r10). */
.featured-products .product-card-sample {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
  padding: .55em 1.3em;
  border: 0;
  border-radius: 10px;
  background: #b59650;
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
.featured-products .product-card .thumb { display: none; }
.featured-products .product-card .body {
  padding: 0;
  align-items: center;
  text-align: center;
}
.featured-products .product-card-icon {
  display: grid;
  /* a bare auto row grows to the icon's intrinsic height, so a tall SVG (diet-health is
     55×72) overflowed the box and landed on the title — pin the row to the box instead */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  color: #d8f5ff;
  filter: none;
}
.featured-products .product-card-icon-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* letterbox inside the box — never spill past it */
}
.featured-products .product-card .save-badge {
  position: static;
  align-self: center;
  display: inline-flex;
  margin-bottom: 18px;
  background: var(--gold);
  color: #fff;
  box-shadow: 0 8px 18px rgba(181,143,91,.25);
}
.featured-products .product-card h3 {
  color: #f4c97a;
  font-size: 1.32rem;
  line-height: 1.45;
  margin-bottom: 1rem;
  text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(244,201,122,.16);
}
.featured-products .product-card .desc,
.featured-products .product-card .feat {
  color: rgba(255,255,255,.88);
  font-size: .98rem;
  line-height: 1.85;
  width: 100%;
  margin-bottom: 18px;
}
.featured-products .product-card .feat {
  text-align: center;
}
.featured-products .product-card .feat li {
  padding-inline-start: 0;
  margin-bottom: 5px;
  color: rgba(255,255,255,.9);
  font-size: .98rem;
}
.featured-products .product-card .feat li::before {
  content: none;
}
.featured-products .product-card .feature-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  text-align: right;
}
.featured-products .product-card .feature-row__icon {
  width: 14px;
  height: 14px;
  margin-top: .35em;
  color: #fff;
}
.featured-products .product-card .feature-row__icon svg.feature-row__warn {
  fill: currentColor;
  stroke: none;
}
.featured-products .product-card .feature-row__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.featured-products .product-card .actions {
  width: auto;
  justify-content: center;
  margin-top: auto;
}
.featured-products .product-card .actions .btn {
  flex: 0 0 auto;
  min-width: 112px;
  border-radius: 14px;
  padding: .68em 1.35em;
  background: linear-gradient(180deg, #d7ad68 0%, #B59650 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.featured-products .product-card .price {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 14px 0 0;
}
.featured-products .product-card .price .was {
  color: rgba(255,255,255,.78);
  font-size: 1rem;
}
.featured-products .product-card .price .now {
  color: #fff;
  font-size: 1.45rem;
}
.featured-products .product-card .price .cur {
  color: inherit;
  font-size: .9em;
}

/* ---------- why-us ---------- */
.why { background: var(--grad-green); color: #fff; overflow: hidden; }
.why h2, .why h3 { color: #fff; }
.why .why-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--gap); align-items: center; }
.why .why-list { display: grid; gap: 18px; margin-top: 1.4rem; }
.why .why-list li { display: flex; gap: 14px; align-items: flex-start; }
.why .why-list .dot { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: var(--cyan-100); }
.why .why-list b { font-family: var(--font-display); display: block; }
.why .why-list span { color: rgba(255,255,255,.78); font-size: .95rem; }

/* ---------- support CTA band ---------- */
.support { text-align: center; }
.support .band { background: var(--grad-gold); color: #fff; border-radius: 26px; padding: clamp(32px, 5vw, 56px); box-shadow: var(--shadow); }
.support .band h2 { color: #fff; }
.support .band .contacts { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.support .band .contacts a { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); padding: .75em 1.4em; border-radius: var(--pill); font-family: var(--font-display); font-weight: 600; }
.support .band .contacts a:hover { background: #fff; color: var(--gold-dk); }

/* ---------- footer ---------- */
.site-footer { background: #0c524c; color: rgba(255,255,255,.88); padding-block: clamp(48px, 6vw, 72px); border-radius: 72px 72px 0 0; text-align: center; }
.site-footer .cols { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 64px; align-items: start; direction: rtl; }
.site-footer .brand-col { grid-column: 1; grid-row: 1; min-height: 272px; padding: 34px 26px; border: 1px solid rgba(255,255,255,.65); border-radius: 24px; }
.site-footer .cols > :nth-child(2) { grid-column: 2; }
.site-footer .cols > :nth-child(3) { grid-column: 3; }
.site-footer .footer-contact-col { grid-column: 1; grid-row: 1; z-index: 1; padding: 116px 28px 20px; }
.site-footer h4 { color: #fff; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: var(--gold-2); }
.site-footer .fmenu li { margin-bottom: .6rem; }
.site-footer .brand-col .logo-text { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; }
.site-footer .brand-col p { font-size: .95rem; margin-top: .8rem; }
.site-footer .socials { display: flex; gap: 10px; margin-top: 1rem; }
.site-footer .socials a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.site-footer .socials a:hover { background: var(--gold); color: var(--green-900); }
.footer-contact-list { display: grid; gap: .6rem; }
.footer-contact-row { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); }
.footer-contact-icon { width: 22px; height: 22px; display: inline-grid; place-items: center; color: currentColor; flex: 0 0 auto; }
.footer-contact-icon svg { width: 22px; height: 22px; display: block; }
.footer-social-links { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.footer-social-links a { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; }
.footer-social-links svg { width: 24px; height: 24px; }
.site-footer .foot-bottom { display: none; }

/* ---------- page/content ---------- */
.page-hero { background: var(--grad-green); color:#fff; text-align:center; padding-block: clamp(48px,6vw,84px); }
.page-hero h1 { color:#fff; }
.page-hero .crumbs { color: rgba(255,255,255,.7); font-size:.9rem; }
.entry { padding-block: clamp(40px,6vw,72px); }
.entry .prose { max-width: 760px; margin-inline: auto; }
.entry .prose h2 { margin-top: 1.6em; }
.entry .prose img { border-radius: var(--radius-sm); margin-block: 1.4em; }

/* Article details mirror the quiet editorial layout used on the live site. */
.article-detail {
	padding: clamp(54px, 7vw, 110px) 0 clamp(72px, 9vw, 140px);
	background: #fff;
}
.article-detail__article {
	max-width: 1120px;
	margin-inline: auto;
}
.article-detail__header {
	max-width: 880px;
	margin: 0 auto clamp(42px, 6vw, 82px);
	text-align: center;
}
.article-detail__header h1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	color: var(--green-800);
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.3vw, 4rem);
	line-height: 1.35;
}
.article-detail__rule {
	display: block;
	width: 84px;
	height: 5px;
	margin: 24px auto 0;
	border-radius: 3px;
	background: var(--gold);
}
.article-detail__body.has-image {
	display: grid;
	grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 92px);
	align-items: center;
}
.article-detail__media {
	margin: 0;
	order: 2;
}
.article-detail__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 58px 58px 58px 8px;
}
.article-detail__content {
	order: 1;
	color: var(--green-800);
	font-size: clamp(1.08rem, 1.7vw, 1.38rem);
	line-height: 2.1;
}
.article-detail__content p {
	margin: 0 0 1.35em;
}
.article-detail__content p:last-child {
	margin-bottom: 0;
}
.article-detail__content h2,
.article-detail__content h3 {
	color: var(--green-800);
}

/* Body of the articles imported from live: a lead paragraph, then one gray panel per
   section, matching Figma's stacked #EEEEEE blocks. */
.article-detail__content .post-lead {
	font-weight: 700;
}
.article-detail__content .post-section {
	margin: 0 0 18px;
	padding: 22px 20px;
	border-radius: 30px;
	background: #eeeeee;
}
.article-detail__content .post-section > *:last-child {
	margin-bottom: 0;
}
.article-detail__content .post-section h2 {
	margin: 0 0 .6em;
	font-size: 1.12em;
	font-weight: 800;
	text-align: center;
}
.article-detail__content .post-section ul {
	margin: 0 0 1.2em;
	padding-inline-start: 1.1em;
}
.article-detail__content .post-section li {
	margin-bottom: .35em;
}
.article-detail__content .post-figure {
	margin: 24px auto;
	width: min(100%, 234px);
}
.article-detail__content .post-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 30px;
}

@media (max-width: 720px) {
	.article-detail {
		/* Figma: the article title sits 97 from the frame top, the photo at 160 */
		padding-top: 16px;
	}
	.article-detail__header {
		margin-bottom: 14px;
	}
	/* Figma article title = the same 22.5/700/25 section scale as «المقالات» (was 35) */
	.article-detail__header h1 {
		font-size: 22.5px;
		font-weight: 700;
		line-height: 25px;
	}
	/* Figma has no gold rule under an article title */
	.article-detail__header .article-detail__rule {
		display: none;
	}
	/* Figma: every text column is 334 — the intro insets 30 inside the 394 body,
	   and the panels carry the same 30 as inner padding */
	.article-detail__content > p {
		padding-inline: 30px;
	}
	.article-detail__content .post-section {
		padding: 22px 30px;
	}
	.article-detail__body.has-image {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}
	.article-detail__media,
	.article-detail__content {
		order: initial;
	}
	.article-detail__media {
		/* Figma article photo = 234×233 (was a full-width 360) */
		width: min(100%, 234px);
		margin-inline: auto;
	}
	.article-detail__media img {
		height: calc(233 / 234 * 100%);
		object-fit: cover;
	}
	.article-detail__media img {
		border-radius: 38px 38px 38px 6px;
	}
	/* Figma: no outer box — the intro sits on plain white and the #EEEEEE panels
	   are the only containers (this rule used to paint the box that swallowed it).
	   Body runs 394 wide with a 334 text column (53 side margins) at 15/30. */
	.article-detail__content {
		width: calc(394 / 440 * 100vw);
		max-width: 394px;
		margin-inline: auto;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		font-size: 15px;
		line-height: 30px;
	}
}

/* ---------- live contact page ---------- */
.live-contact-page {
  --contact-green: #2D4F41;
  --contact-ocean: #0C524C;
  --contact-gold: #BB9442;
  --contact-cream: #F6F1E4;
  background: #fff;
  overflow-x: hidden;
}
.live-contact-banner {
  min-height: clamp(230px, 34vw, 430px);
  aspect-ratio: 2.7;
  background-image: url("https://mawzona.com.sa/wp-content/uploads/2024/01/mawzona-contact-1.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}
.live-contact {
  display: grid;
  align-items: center;
  padding-block: 48px clamp(64px, 8vw, 110px);
  background: #fff;
}
.live-contact .container {
  width: min(100% - 76px, 1280px);
}
.live-contact__panel {
  max-width: 1280px;
  margin-inline: auto;
  text-align: right;
}
.live-contact__panel--split {
  display: grid;
  grid-template-columns: 626px 334px;
  column-gap: 256px;
  row-gap: 42px;
  align-items: start;
  justify-content: center;
  direction: rtl;
}
.live-contact__form-column,
.live-contact__content-column {
  direction: rtl;
}
.live-contact__form-column {
  grid-column: 1;
}
.live-contact__content-column {
  grid-column: 2;
}
.live-contact__panel h1 {
  margin-bottom: 16px;
  color: var(--green-800);
  font-size: 35px;
  line-height: 40px;
  font-weight: 700;
}
.live-contact__panel h1.to-reveal {
  position: relative;
  animation: mzShowBottom .7s cubic-bezier(.215,.61,.355,1) both;
}
.live-contact__lead {
  margin: 0 0 6px;
  color: var(--contact-green);
  font-size: 16px;
  line-height: 1.85;
}
.live-contact__success {
  min-height: 30px;
  margin: 0 0 10px;
  color: var(--contact-gold);
  font-weight: 700;
}
.live-contact__details {
  margin-top: 0;
  margin-bottom: 28px;
}
.live-contact__details h2,
.live-contact__social h2 {
  margin: 0 0 22px;
  color: var(--contact-ocean);
  font-size: 25px;
  line-height: 30px;
  font-weight: 700;
}
.live-contact__detail-link {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
}
.live-contact__detail-link--phone {
  direction: ltr;
  justify-content: flex-end;
}
.live-contact__detail-link a {
  color: var(--muted);
}
.live-contact__small-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  color: var(--contact-gold);
  flex: 0 0 auto;
}
.live-contact__small-icon svg {
  width: 24px;
  height: 24px;
}
.live-contact__detail-link a:hover,
.live-contact__social-links a:hover {
  color: var(--contact-gold);
}
.live-contact__social {
  margin-top: 18px;
}
.live-contact__social-links {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 190px;
}
.live-contact__social-links a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--contact-green);
  background: #fff;
  border: 1px solid rgba(32,80,64,.12);
  border-radius: 50%;
  box-shadow: 0 7px 16px rgba(32,80,64,.08);
  transition: transform .2s linear, color .2s linear, background-color .2s linear, border-color .2s linear;
}
.live-contact__social-links a:hover {
  transform: translateY(-3px);
  background: var(--contact-cream);
  border-color: rgba(187,148,66,.36);
}
.live-contact__social-links svg {
  width: 24px;
  height: 24px;
}
.live-contact__form {
  display: grid;
  gap: 15px;
}
.live-contact__form input,
.live-contact__form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--green-800);
  border-radius: 19px;
  padding: 21px 18px;
  color: #212529;
  background: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  outline: none;
  text-align: right;
  box-shadow: none;
  transition: border-color .2s linear, box-shadow .2s linear;
}
.live-contact__form input::placeholder,
.live-contact__form textarea::placeholder {
  color: rgba(0,0,0,.68);
}
.live-contact__form input:focus,
.live-contact__form textarea:focus {
  border-color: var(--contact-gold);
  box-shadow: 0 0 0 3px rgba(187,148,66,.14);
}
.live-contact__form textarea {
  min-height: 118px;
  resize: vertical;
}
.live-contact__form .custom-btn {
  width: fit-content;
  min-width: 181px;
  min-height: 71px;
  border: 0;
  border-radius: 15px;
  background: var(--contact-gold);
  color: #fff;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 30px;
  cursor: pointer;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s linear, transform .2s linear, box-shadow .2s linear;
}
.live-contact__form .custom-btn:hover {
  background: var(--green-600);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(32,80,64,.12);
}
.js .live-contact-page [data-reveal].from-left {
  opacity: 0;
  transform: translate(-30px, 15px);
  transition: all .4s .1s cubic-bezier(.45,.05,.55,.95);
}
.js .live-contact-page [data-reveal].from-right {
  opacity: 0;
  transform: translate(30px, 15px);
  transition: all .4s .1s cubic-bezier(.45,.05,.55,.95);
}
.js .live-contact-page [data-reveal].in {
  opacity: 1;
  transform: translate(0, 0);
}
@keyframes mzShowBottom {
  0% { transform: translateY(35px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---------- Arabic live contact page (/تواصل-معنا/) ---------- */
.ar-contact-page {
  --ar-green: #2D4F41;
  --ar-gold: #B59650;
  --ar-input: #eeeeee;
  background: #fff;
  overflow-x: hidden;
}
.ar-contact-mobile-title { display: none; }
.ar-contact-hero {
  margin-top: 190px;
}
.ar-contact-hero__inner {
  width: min(100% - 80px, 1018px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 348px 519px;
  gap: 146px;
  align-items: center;
  direction: ltr;
}
.ar-contact-hero__image,
.ar-contact-hero__copy {
  direction: rtl;
}
.ar-contact-hero__image img {
  width: 348px;
  height: 348px;
  object-fit: cover;
  border-radius: 0;
}
.ar-contact-hero__copy h2 {
  margin: 0;
  color: var(--ar-green);
  font-size: 46px;
  line-height: 1.55;
  font-weight: 800;
  letter-spacing: 0;
}
.ar-contact-hero__copy h2 span {
  color: var(--ar-gold);
}
.ar-contact-section {
  margin-top: 80px;
  padding: 0 10px 70px;
}
.ar-contact-section__inner {
  width: min(100% - 80px, 1020px);
  min-height: 618px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 401px 360px;
  gap: 250px;
  align-items: start;
  direction: rtl;
}
.ar-contact-form {
  width: 401px;
  direction: rtl;
  margin-top: 10px;
}
.ar-contact-form h2 {
  margin: 0 0 18px;
  color: var(--ar-gold);
  font-size: 35px;
  line-height: 40px;
  font-weight: 700;
}
.ar-contact-form p {
  margin: 0 0 20px;
  color: #111;
  font-size: 18px;
  line-height: 1.7;
}
.ar-contact-form__success {
  min-height: 24px;
  color: var(--ar-gold) !important;
  font-weight: 700;
}
.ar-contact-form form {
  display: grid;
  gap: 25px;
}
.ar-contact-form input,
.ar-contact-form textarea {
  width: 401px;
  border: 0;
  border-radius: 15px;
  background: var(--ar-input);
  color: #373a3c;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 30px;
  padding: 10px;
  text-align: right;
  outline: 0;
}
.ar-contact-form input {
  height: 50px;
}
.ar-contact-form textarea {
  min-height: 170px;
  resize: vertical;
}
.ar-contact-form input::placeholder,
.ar-contact-form textarea::placeholder {
  color: rgba(55,58,60,.35);
}
.ar-contact-form button {
  width: 401px;
  height: 45px;
  border: 0;
  border-radius: 15px;
  background: var(--ar-green);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s linear, transform .2s linear;
}
.ar-contact-form button:hover {
  background: var(--ar-gold);
  transform: translateY(-2px);
}
.ar-contact-info {
  direction: rtl;
  width: 360px;
  margin-top: 190px;
  text-align: center;
}
.ar-contact-info h2 {
  margin: 0 0 24px;
  color: var(--ar-green);
  font-size: 33px;
  line-height: 33px;
  font-weight: 600;
  text-align: center;
}
.ar-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 18px;
  color: var(--ar-green);
  font-size: 27px;
  line-height: 32.4px;
  font-weight: 500;
  justify-content: center;
  text-align: center;
  direction: ltr;
}
.ar-contact-link--phone {
  font-size: 29px;
  line-height: 34.8px;
  font-weight: 400;
  direction: ltr;
  justify-content: center;
}
.ar-contact-link--phone .ar-contact-link__num {   /* the number, not whichever span is last: the WhatsApp hint follows it now */
  word-spacing: 11px;
}
.ar-contact-icon {
  width: 33px;
  height: 33px;
  color: var(--ar-green);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.ar-contact-icon svg {
  width: 33px;
  height: 33px;
}
.ar-contact-follow {
  margin-top: 44px !important;
  color: #D19D4E !important;
  font-size: 35px !important;
  line-height: 35px !important;
  font-weight: 600 !important;
}
.ar-contact-social {
  display: flex;
  gap: 34px;
  justify-content: center;
  color: var(--ar-green);
}
.ar-contact-social a {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--ar-green);
}
.ar-contact-social svg {
  width: 24px;
  height: 24px;
}

/* ---------- live about page ---------- */
.live-about-page {
  background: #fff;
  overflow: hidden;
}
.about-visual-hero {
  position: relative;
  overflow: hidden;
  min-height: min(760px, 82vh);
  padding-top: 96px;
  background: #fff url("../img/hero-live-composite.png") center top / cover no-repeat;
}
.about-visual-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: #fff url("../img/hero-live-bg1.jpeg") center top / cover no-repeat;
  animation: heroCrossfade 16s ease-in-out infinite;
}
.about-mobile-eyebrow {
  display: none;
}
.about-visual-hero__inner {
  position: relative;
  z-index: 2;
  min-height: 650px;
}
.about-visual-hero__title {
  position: absolute;
  z-index: 2;
  inset-block-start: 46%;
  inset-inline-start: auto;
  inset-inline-end: 7%;
  transform: translateY(-50%);
  margin: 0;
  color: var(--gold);
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1.4;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .about-visual-hero::after { animation: none; opacity: 0; }
}
.about-visual-hero__title span,
.about-visual-hero__title b { display: block; font-weight: 700; }
.about-visual-hero__title strong { color: var(--green-800); }
.about-visual-hero__title b { font-size: 1.3em; }
.live-about-hero,
.live-founder,
.live-qualifications {
  padding-block: clamp(70px, 8vw, 120px);
}
.live-about-hero__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(34px, 7vw, 90px);
  align-items: center;
}
.live-about-band__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.5vw, 26px);
}
.live-about-band__grid .eyebrow {
  display: block;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 6px;
}
.live-about-hero__title span,
.live-founder__head span,
.live-about-hero__copy .eyebrow {
  color: var(--gold);
  font-weight: 700;
}
.live-about-hero__title h1 {
  max-width: 10ch;
  color: var(--green-800);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.45;
}
.live-about-hero__media {
  display: block;
  width: min(100%, 360px);
  height: auto;
  border-radius: 22px;
  margin-bottom: 22px;
  box-shadow: 0 18px 40px rgba(12, 82, 76, .14);
}
.live-about-hero__copy h2,
.live-about-band h2,
.live-founder__head h2,
.live-qualifications h2 {
  color: var(--green-800);
  font-size: clamp(1.8rem, 4vw, 3rem);
}
.live-about-hero__copy p,
.live-about-band p,
.live-founder__body p,
.live-qualifications__list p {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 2.15;
}
.live-howwork,
.live-lab {
  padding-block: clamp(58px, 7vw, 96px);
}
.live-lab {
  background: #f7f6f1;
}
.live-howwork__body,
.live-lab__body {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.live-howwork__body p,
.live-lab__body p {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 2.15;
  margin-bottom: 14px;
}
.live-howwork__body .btn {
  margin-top: 10px;
}
.live-lab h2 {
  color: var(--green-800);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
}
.live-about-band {
  padding-block: clamp(58px, 7vw, 96px);
  background: #f7f6f1;
}
.live-about-band article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
  background: #fff;
  border: 1px solid rgba(12, 82, 76, .28);
  border-radius: 30px;
  padding: clamp(26px, 4vw, 46px);
  box-shadow: 0 8px 26px rgba(12, 82, 76, .05);
}
.live-about-band h3 {
  color: var(--gold-dk);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}
.live-about-card__main h2 {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}
.live-about-card__main p {
  margin: 0;
}
.live-about-card__icon {
  align-self: center;
}
.live-about-card__icon img,
.live-about-card__icon svg {
  display: block;
  width: clamp(42px, 3.6vw, 52px);
  height: auto;
}
@media (max-width: 760px) {
  .live-about-band article {
    gap: 16px;
    padding: 24px 20px;
  }
  .live-about-card__icon img,
  .live-about-card__icon svg {
    width: clamp(34px, 10vw, 44px);
  }
}
.live-founder {
  text-align: center;
}
.live-founder__head {
  margin-bottom: clamp(28px, 5vw, 56px);
}
.live-founder__head p {
  margin-bottom: .2rem;
  color: var(--muted);
  font-weight: 700;
}
.live-founder__head h3 {
  color: var(--gold-dk);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
}
.live-founder__body,
.live-qualifications__list {
  max-width: 920px;
  margin-inline: auto;
  text-align: right;
}
.live-founder__body p {
  background: #f5f4f0;
  border-radius: 18px;
  padding: clamp(20px, 3vw, 30px) clamp(22px, 3.5vw, 36px);
  margin: 0 0 18px;
}
.testimonial-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 12px 4px 26px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card--visual {
  flex: 0 0 min(78vw, 292px);
  padding: 0;
  overflow: hidden;
  scroll-snap-align: center;
}
.testimonial-card--visual img {
  display: block;
  width: 100%;
  aspect-ratio: 292 / 346;
  object-fit: cover;
}
.testimonial-card--visual h3 {
  margin: 0;
  padding: 14px;
}
.testimonial-card--audio {
  flex: 0 0 min(82vw, 300px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(12, 82, 76, .06);
  scroll-snap-align: center;
}
.testimonial-card--audio h3 {
  margin: 0;
  color: var(--green-800);
  text-align: center;
  font-size: 1.05rem;
}
.testimonial-audio {
  width: 100%;
  height: 42px;
}
.about-analysis {
  padding-block: clamp(70px, 9vw, 130px);
  background: #fff;
}
.about-analysis__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(36px, 8vw, 100px);
}
.about-analysis__media img {
  width: 100%;
  height: auto;
}
.about-analysis__copy span { color: var(--gold); font-weight: 700; }
.about-analysis__copy h2 { color: var(--green-800); font-size: clamp(2rem, 4vw, 3.4rem); }
.about-analysis__copy p { color: var(--muted); font-size: 1.08rem; line-height: 2; }
.live-founder__body strong,
.live-qualifications__list strong {
  color: var(--green-800);
}
.live-qualifications {
  background: #f7f6f1;
}
.live-qualifications h2 {
  text-align: center;
  margin-bottom: clamp(26px, 4vw, 46px);
}
.live-qualifications__list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow-sm);
}

/* ---------- blog listing ---------- */
.blog-hero {
  /* Figma المقالات: heading sits 14 under the header and 50 above the first photo
     (was 96 + 72 — that void was the "too much white space") */
  padding-block: 14px 8px;
  background: #fff;
  text-align: center;
}
.blog-hero + .site-main.section {
  padding-top: 24px;
}
.blog-hero h1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--green-800);
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  line-height: 1;
}
.blog-hero-icon {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  fill: var(--gold-500, #b59650);
}
@media (max-width: 720px) {
  /* Figma: the notebook mark reads ~26 beside the 22.5 heading, not the 45 desktop size */
  .blog-hero-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }
}
.blog-grid {
  align-items: start;
}
.blog-card {
  position: relative;
  padding-top: 0;
  text-align: center;
}
.blog-card .post-thumb {
  position: relative;
  z-index: 2;
  display: block;
  width: min(82%, 300px);
  aspect-ratio: 1 / 1.05;
  margin: 0 auto -84px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 16px 28px rgba(12,82,76,.18);
}
.blog-card .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card-body {
  min-height: 320px;
  padding: 116px 26px 30px;
  border-radius: 30px;
  background: var(--grad-green);   /* the one #0C524C surface ramp */
  box-shadow: 0 18px 34px rgba(12,82,76,.18);
}
.blog-card h2 {
  color: #fff;
  font-size: 22.5px;   /* article card title = 22.5 (measured on live @440) */
  margin-bottom: .7rem;
}
.blog-card p {
  color: rgba(255,255,255,.86);
  font-size: .95rem;
  line-height: 1.8;
}
.blog-card .btn {
  margin-top: 8px;
}
.home-posts {
  background: #fff;
}
.home-posts-panel {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 54px);
  overflow: hidden;
  border-radius: 42px;
  background: #ededed;
}
.home-posts-grid {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.home-posts-grid::-webkit-scrollbar { display: none; }
.home-posts-grid .blog-card {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: minmax(260px, .72fr) 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 58px);
  min-width: 100%;
  padding: 0;
  text-align: right;
  scroll-snap-align: center;
}
.home-posts-grid .blog-card .post-thumb {
  width: 100%;
  max-width: 330px;
  aspect-ratio: .78;
  margin: 0;
  border: 5px solid #d2a04d;
  border-radius: 36px;
  box-shadow: none;
}
.home-posts-grid .blog-card .post-thumb img {
  object-fit: cover;
  object-position: center;
}
.home-posts-grid .blog-card-body {
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.home-posts-grid .blog-card h2 {
  color: var(--green-800);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.35;
}
.home-posts-grid .blog-card h2 a { color: inherit; }
.home-posts-grid .blog-card p {
  color: #646464;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.9;
}
.home-posts-grid .blog-card .btn { display: none; }
.home-posts-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  direction: ltr;
}
.home-posts-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 4px solid var(--green-800);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.home-posts-dot.is-active {
  border-color: #efbd37;
  background: #efbd37;
}
.muted-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  text-align: center;
}

/* whatsapp float */
.wa-float { position: fixed; inset-block-end: calc(22px + env(safe-area-inset-bottom)); inset-inline-start: calc(22px + env(safe-area-inset-right)); width: 46px; height: 46px; border-radius: 50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow: 0 10px 30px rgba(37,211,102,.5); z-index: 90; }
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 24px; height: 24px; }

/* ---------- HERO v2 (faithful: photo + gold/teal heading) ---------- */
/* hero: photo is the background layer (real img = correct aspect); heading overlaid; fades to white */
.hero-benefits {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}
/* iOS status-bar / safe-area tint (front page): soft lab gray over the hero,
   flips to white once scrolled (the body background is what fills the safe-area). */
.is-front { background: #e4e1da; }
.is-front.tint-scrolled { background: #fff; }
.hero-benefits::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: #fff url('../img/hero-live-composite.png') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,.55) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,.55) 90%, transparent 100%);
}
/* second hero slide (ghost model + report brochure + line-art) — desktop crossfade to match live */
.hero-benefits::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  display: none;
  pointer-events: none;
  opacity: 0;
  background: #fff url('../img/hero-live-bg1.jpeg') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,.55) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,.55) 90%, transparent 100%);
}
@media (min-width: 901px) {
  .hero-benefits::after { display: block; animation: heroCrossfade 16s ease-in-out infinite; }
}
@keyframes heroCrossfade {
  0%, 6%    { opacity: 0; }
  44%, 50%  { opacity: 1; }
  88%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-benefits::after { animation: none; opacity: 0; }
}
.hero2 { position: relative; z-index: 2; overflow: hidden; background: transparent; }
.hero2-media { position: relative; z-index: 0; height: 100%; }
.hero2-media .hero-img-d, .hero2-media .hero-img-m { width: 100%; height: auto; margin: 0 auto; }
.hero-benefits .hero2-media img { opacity: 0; }
.hero2-media .hero-img-m { display: none; }   /* desktop shows landscape */
.hero2-inner { position: absolute; inset-inline: 0; top: 0; z-index: 2; }
.hero2-copy { text-align: center; padding-top: 96px; }
.hero2::after { display: none; }
@media (min-width: 901px) {
  .hero2 { height: clamp(700px, 52vw, 820px); }
  .hero2-media .hero-img-d {
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .hero2-copy {
    width: min(50%, 620px);
    margin-left: clamp(72px, 9vw, 135px);
    margin-right: auto;
    padding-top: clamp(250px, 22vw, 320px);
    text-align: center;
  }
}
@media (min-width: 761px) and (max-width: 1240px) {
  .live-contact .container { width: min(100% - 56px, 1100px); }
  .live-contact__panel--split {
    grid-template-columns: minmax(420px, 1fr) minmax(280px, 334px);
    column-gap: clamp(48px, 8vw, 96px);
  }
}
.hero2-copy h1 { font-size: clamp(2.4rem, 4.8vw, 4.55rem); line-height: 1.15; color: var(--gold); letter-spacing: 0; }
.hero-title-line { display: block; }
.hero2-copy h1 .gd { color: var(--green-900); }
.hero2-copy .lede { color: var(--muted); font-size: 1.12rem; max-width: 46ch; margin-top: .4rem; }
.hero2-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.5rem; }
.hero2-media img { width: 100%; height: auto; margin-inline: auto; }
.hero-img-m { display: none; }

.is-front .hero2 + .section {
  margin-top: -42px;
  padding-top: 0;
  z-index: 3;
  background: transparent;
}
.is-front .hero2 + .section .section-head h2::after {
  display: none;
}

/* section head on light/dark variants */
.section-head--light h2 { color: #fff; }
.section-head--light h2::after { background: var(--grad-gold); }
.section-mark {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin: 0 auto 18px;
}
.section-head--lab { margin-bottom: clamp(26px, 4vw, 42px); }
.section-head--lab h2 { color: var(--gold); }
.section-head--lab p {
  color: var(--muted);
  max-width: 64ch;
  margin-inline: auto;
}

/* ---------- icon as image ---------- */
.card .ico--img { background: linear-gradient(160deg,#f3efe1,#eef3ef); }
.card .ico--img img { width: 40px; height: 40px; object-fit: contain; }

/* ---------- أقسامنا المخبرية : dark green section ---------- */
.lab-section { background: #fff; }
.lab-dark {
  background: var(--grad-green);   /* the one #0C524C surface ramp */
  border: 1px solid rgba(45,79,65,.14); border-radius: 26px;
  padding: 36px 34px 34px; color: #fff; text-align: center; transition: transform .2s, border-color .25s, box-shadow .25s;
  box-shadow: 0 18px 34px rgba(12,82,76,.18);
  overflow: visible;
}
.lab-dark:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 24px 42px rgba(12,82,76,.24); }
.lab-dark .lab-ic {
  width: min(76%, 250px);
  height: auto;
  max-height: 205px;
  object-fit: contain;
  margin: -58px auto 18px;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.18));
}
.lab-dark h3 {
  color: #f4c97a;
  font-size: 1.25rem;
  text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(244,201,122,.16);
}
.lab-dark p { color: rgba(255,255,255,.86); font-size: .98rem; }
.lab-dark .btn { margin-top: 8px; }

.department-section {
  overflow: hidden;
  background: #fff;
}
.department-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 58px);
  max-width: 960px;
  margin-inline: auto;
  padding-top: 44px;
}
.department-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 510px;
  padding: 150px clamp(24px, 4vw, 42px) 34px;
  overflow: visible;
  border: 0;
  border-radius: 38px;
  background: var(--grad-green);   /* the one #0C524C surface ramp */
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 34px rgba(12,82,76,.2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.department-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 42px rgba(12,82,76,.26);
}
.department-card__image {
  position: absolute;
  z-index: 1;
  top: -54px;
  left: 50%;
  width: min(82%, 330px);
  height: 220px;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.18));
}
.department-card__image--paper { width: min(88%, 360px); }
.department-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}
.department-card h3 {
  color: #f4c97a;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.4;
}
.department-card p {
  color: rgba(255,255,255,.9);
  line-height: 1.9;
  text-align: justify;          /* rectangle (justified) alignment */
  text-align-last: center;      /* keep the last line centred */
}
.department-card .btn {
  min-width: 126px;
  min-height: 46px;
  margin-top: 18px;             /* sits right under the text (was auto → pushed to card bottom) */
  border-radius: 10px;
}

/* ---------- nutrition cards ---------- */
.nut-card { text-align: center; }
.nut-card .nut-img { width: 92px; height: 92px; object-fit: contain; margin: 0 auto 14px; }

/* ---------- لماذا موزونة + gallery ---------- */
.why2-head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px,4vw,44px); }
.why2-head h2 { position: relative; }
.why2-head h2::after { content:""; display:block; width: 72px; height: 4px; border-radius: 4px; background: var(--grad-gold); margin: .7rem auto 0; }
.why2-head p { color: var(--muted); }
.gallery { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.gslide { flex: 0 0 clamp(220px, 26vw, 300px); scroll-snap-align: center; }
.gslide img { width: 100%; height: 320px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-benefits {
  }
  .hero-benefits::before {
    inset-block-end: auto;
    height: 138.3vw;                     /* = 162.2vw image height − 23.9vw offset, so the fade completes at the image bottom (vw-based → scales at any width) */
    background-image: url('../img/hero-photo.png');
    background-position: center -23.9vw; /* woman raised (≈ -105px at 440) — vw so it tracks the image */
    background-size: 100% auto;          /* Figma-natural 440-wide */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
  }
  .hero2 { height: 720px; }
  .hero2-media { max-width: 480px; margin-inline: auto; }
  .hero2-media .hero-img-d { display: none; }
  .hero2-media .hero-img-m {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: translateY(-34px);
  }
  .hero2-inner {
    width: min(100% - 4px, 386px);
  }
  .hero2-copy {
    width: 100%;
    margin-inline: auto;
    padding-top: 60px;   /* clears the 60px header (was 40 → title overlapped it in browsers with no status-bar inset); matches live */
  }
  .hero2-copy h1 {
    min-height: 97px;
    margin: 0;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0;
    font-family: var(--font-display);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0;
  }
  /* Figma mobile hero: sub «تحاليل موزونة» 20/500/33 · main «لصحة موزونة» 32/800/52 */
  .hero-title-line--top {
    font-size: 20px;
    font-weight: 500;
    line-height: 33px;
  }
  .hero-title-line--main {
    font-size: 32px;
    font-weight: 800;
    line-height: 52px;
    /* pull up to cancel the stacked line-height leading — matches Figma's near-touching lines */
    margin-top: -11px;
  }
  .hero2-copy .lede { margin-inline: auto; }
  .hero2-cta { justify-content: center; }
  .is-front .hero2 + .section {
    position: relative;
    /* The woman's frame bottom sits at ≈91.8vw; .hero2 is a fixed 720px, so this keeps a
       constant ~30px gap under her at any mobile width (was fixed px → overlapped at 440). */
    margin-top: calc(91.8vw - 696px);
    padding-bottom: 16px;
    background: transparent;
  }
}

@media (max-width: 360px) {
  .hero-benefits::before {
    height: calc(145.8vw + 40px);
    background-position: center 40px;
    background-size: 90% auto;
  }
  .is-front .hero2 + .section {
    margin-top: -282px;
  }
}

/* ---------- scroll-reveal animations (progressive; only when JS on) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); }
.js .department-section [data-reveal].reveal-from-top { transform: translateY(-28px); }
.js [data-reveal].in {
  opacity: 1; transform: none;
  /* Figma spring entrance ~810ms (transform overshoots, opacity eases in) */
  transition: opacity .81s ease-out, transform .81s cubic-bezier(.34,1.4,.64,1);
}
.js .department-section [data-reveal].in {
  transform: none;
  transition-duration: 1.25s;
}
/* stagger children inside a grid */
.js .grid [data-reveal].in:nth-child(2) { transition-delay: .08s; }
.js .grid [data-reveal].in:nth-child(3) { transition-delay: .16s; }
.js .grid [data-reveal].in:nth-child(4) { transition-delay: .24s; }
.js .department-grid [data-reveal].in:nth-child(2) { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Motion polish — "طريقة تحرّك المنتجات والصور"
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Figma keeps the landing hero image static. */
}

/* product image zoom on hover (static cards + Woo grid) */
.product-card .thumb, .woocommerce ul.products li.product a { overflow: hidden; display: block; }
.product-card .thumb img,
.woocommerce ul.products li.product a img { transition: transform .55s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.product-card:hover .thumb img,
.woocommerce ul.products li.product:hover a img { transform: scale(1.07); }

/* icons lift on card hover */
.feature-card .ico, .lab-dark .lab-ic, .nut-card .nut-img { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.feature-card:hover .ico, .lab-dark:hover .lab-ic, .nut-card:hover .nut-img { transform: translateY(-5px) scale(1.06); }

/* gold button shimmer sweep */
.btn--gold { position: relative; overflow: hidden; }
.btn--gold::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform: translateX(-130%);
}
.btn--gold:hover::after { transform: translateX(130%); transition: transform .75s ease; }

/* gallery slides scale toward center on hover */
.gslide img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.gslide:hover img { transform: scale(1.04); }

/* (nav uses the gold pill for active state, matching the live site) */

@media (max-width: 980px) {
  .hero .container, .why .why-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 420px; margin-inline: auto; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* clean mobile header: logo (right) · cart-icon · hamburger (left) */
  .is-front .site-header,
  .is-live-contact .site-header { position: absolute; background: transparent; border-bottom: 0; }
  body.nav-open { overflow: hidden; }
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0,0,0,.5);
  }
  .site-header { z-index: 1600; }
  /* full-width header with Figma 20px edge margin — icons hug the screen edges on all widths */
  .site-header .container { width: 100%; max-width: none; margin-inline: 0; padding-inline: calc(20/440*100vw); box-sizing: border-box; }
  .site-header .bar { min-height: 60px; gap: 13px; }
  /* Figma header (440 frame): icon tiles 40×40, hamburger glyph 21, logo mark 30 — scaled 1:1 to viewport */
  .site-brand .brand-logo,
  .nav-toggle { width: calc(40/440*100vw); height: calc(40/440*100vw); }
  .site-brand .brand-logo {
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .site-brand .brand-logo-full { display: none; }
  .site-brand .brand-logo-mark { display: block; width: calc(30/440*100vw); height: calc(30/440*100vw); }
  .nav-toggle img { width: calc(21/440*100vw); height: auto; }
  .header-actions { order: 1; margin-inline-start: auto; gap: 13px; }
  .nav-toggle {
    display: grid;
    place-items: center;
    order: 2;
    padding: 5px;
    margin-left: 0;   /* hug the screen edge (Figma has no extra inset) */
    background: transparent;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .cart-link {
    width: calc(40/440*100vw);
    height: calc(40/440*100vw);
    padding: 0;
    display: grid;
    place-items: center;
    background: #2D4F41;
    color: #fafffd;
    border-radius: 9px;
    box-shadow: none;
    gap: 0;
  }
  .cart-link .cart-total { display: none; }   /* cart icon only on mobile */
  .cart-link .cart-ico {
    display: grid;
    place-items: center;
    width: calc(19/440*100vw);
    height: calc(19/440*100vw);
    background: transparent;
    color: inherit;
  }
  .cart-link .cart-ico svg { width: calc(19/440*100vw); height: calc(19/440*100vw); display: block; }
  /* filled basket goes gold, and the counter rides on its corner */
  .cart-link--filled { background: #B59650; }
  .cart-link .count {
    display: grid;
    position: absolute;
    inset-block-start: calc(-9 / 440 * 100vw);
    inset-inline-start: calc(-9 / 440 * 100vw);
    min-width: calc(17 / 440 * 100vw);
    height: calc(17 / 440 * 100vw);
    padding: 0 calc(4 / 440 * 100vw);
    place-items: center;
    border-radius: var(--pill);
    background: #fff;
    color: #2D4F41;
    font-size: calc(10 / 440 * 100vw);
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
  }
  .cart-link .count[aria-hidden="true"] { display: none; }
  /* Partial panel: the page stays visible beside it, so tapping it resumes
     shopping. Live leaves ~90 of 440 showing; match that. */
  .cart-drawer { width: calc(350 / 440 * 100vw); padding: 54px 20px 24px; }
  .header-login { display: none; }             /* login lives in the menu on mobile */
  .primary-nav {
    position: fixed;
    inset: 0 0 auto 0;
    min-height: 430px;
    background: #eee;
    border: 0;
    border-radius: 0 0 70px 70px;
    padding: 62px 0 50px;
    transform: translateY(-112%);
    transition: transform .3s ease;
    margin: 0;
    z-index: 1400;
    overflow: hidden;
  }
  .primary-nav.open { transform: translateY(0); box-shadow: none; }
  .nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-menu a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1em;
    border-radius: 0;
    color: #2D4F41;
    font-size: 16px;
    font-weight: 600;
  }
  .mobile-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0;
    text-align: center;
    background: transparent;
    color: #2D4F41;
    padding: 0 1em;
    border-radius: 0;
    font-family: var(--font-display);
    font-weight: 600;
  }
  .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .live-contact-banner {
    min-height: 430px;
    aspect-ratio: .8;
    background-image: url("https://mawzona.com.sa/wp-content/uploads/2024/03/contact-mobile.png");
  }
  .live-contact {
    min-height: auto;
    padding-block: 34px 58px;
  }
  .live-contact__panel--split,
  .live-about-hero__grid,
  .live-about-band__grid {
    grid-template-columns: 1fr;
  }
  .live-contact__panel--split {
    row-gap: 34px;
    column-gap: 0;
  }
  .live-contact__form-column,
  .live-contact__content-column {
    grid-column: auto;
  }
  .live-contact__panel h1 {
    font-size: 27px;
    line-height: 30px;
    display: none;
  }
  .live-contact__content-column {
    order: -1;
    padding: 0;
  }
  .live-contact__detail-link--phone {
    justify-content: flex-start;
  }
  .live-contact__social-links {
    justify-content: flex-start;
  }
  .live-contact__details h2,
  .live-contact__social h2 {
    font-size: 20px;
    line-height: 27px;
  }
  .live-contact__detail-link {
    font-size: 16px;
    line-height: 26px;
  }
  .live-contact__form input,
  .live-contact__form textarea {
    max-width: 100%;
    font-size: 16px;
    line-height: 32px;
    border-radius: 18px 0;
    padding: 8px 14px;
  }
  .live-contact__form .custom-btn {
    font-size: 13px;
    min-height: 42px;
    min-width: 112px;
    padding: 10px 30px;
  }
  .js .live-contact-page [data-reveal].from-left,
  .js .live-contact-page [data-reveal].from-right {
    transform: translateY(24px);
  }
  .ar-contact-mobile-title {
    display: block;
    padding-top: 112px;
    text-align: center;
  }
  .ar-contact-mobile-title h1 {
    margin: 0;
    color: var(--green-800);
    font-size: 23px;
    line-height: 25px;
    font-weight: 800;
  }
  .ar-contact-hero {
    margin-top: 20px;
  }
  .ar-contact-hero__inner {
    width: min(100% - 10px, 380px);
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
  }
  .ar-contact-hero__image img {
    width: 236px;
    height: 241px;
    object-fit: cover;
  }
  .ar-contact-hero__copy {
    width: 250px;
    margin-top: 10px;
    text-align: center;
  }
  .ar-contact-hero__copy h2 {
    font-size: 25px;
    line-height: 1.4;
    font-weight: 800;
  }
  .ar-contact-section {
    margin-top: 20px;
    padding: 0 0 58px;
  }
  .ar-contact-section__inner {
    width: min(100% - 40px, 340px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
  }
  .ar-contact-form {
    width: 340px;
    order: 1;
    padding: 10px;
  }
  .ar-contact-form h2 {
    font-size: 25px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 8px;
  }
  .ar-contact-form p {
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    margin-bottom: 22px;
  }
  .ar-contact-form form {
    gap: 24px;
  }
  .ar-contact-form input,
  .ar-contact-form textarea {
    width: 310px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 22.5px;
    padding: 12px;
  }
  .ar-contact-form input {
    height: 47px;
  }
  .ar-contact-form textarea {
    min-height: 126px;
  }
  .ar-contact-form button {
    width: 310px;
    height: 45px;
    border-radius: 10px;
  }
  .ar-contact-info {
    width: 360px;
    margin-top: 0;
    order: 2;
    text-align: center;
  }
  /* Figma: «للإستفسار والدعم» 23/400 · phone 18.7/700 (same as home footer, verified) */
  .ar-contact-info h2 {
    font-size: 23px;
    font-weight: 400;
    line-height: 46px;
    text-align: center;
  }
  .ar-contact-link {
    font-size: 24px;
    line-height: 28.8px;
    justify-content: center;
    font-weight: 500;
    gap: 25px;
  }
  .ar-contact-link--phone {
    font-size: 18.7px;
    line-height: 20px;
    font-weight: 700;
  }
  .live-about-hero,
  .live-founder,
  .live-qualifications {
    padding-block: 62px;
  }
  /* Figma من نحن: mission «تقديم اختيارات…» 22.5/800 #2d4f41 */
  .live-about-hero__title h1 {
    max-width: none;
    font-size: 22.5px;
    font-weight: 800;
    line-height: 1.35;
  }
  /* card headings «عن موزونة / رسالتنا / رؤيتنا» 16/800 · body 12/400 · cards r30 */
  .live-about-band h3,
  .live-about-band article h3 { font-size: 16px; font-weight: 800; }
  .live-about-band p { font-size: 12px; font-weight: 400; }
  /* the About band sits on white (was #f7f6f1) */
  .live-about-band { background: #fff; }

  /* Figma: compact lockup — «من» over «انا», the ؟ tight beside them */
  .live-founder__head {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: calc(6 / 440 * 100vw);
    row-gap: 0;
    justify-content: center;
    align-items: center;
    width: max-content;
    margin-inline: auto;
  }
  .live-founder__head::after {
    content: "؟";
    grid-column: 2;            /* RTL: column 2 renders to the left */
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    color: #2d4f41;
  }
  .live-founder__head span {
    grid-column: 1; grid-row: 1;
    font-size: 20px; font-weight: 700; line-height: 1.1;
    color: #2d4f41; text-align: center;
  }
  .live-founder__head h2 {
    grid-column: 1; grid-row: 2;
    margin: 0;
    font-size: 20px; font-weight: 700; line-height: 1.1;
    color: #b59650; text-align: center;
  }

  /* Figma: two boxes — a green tint holding the intro, then a gray box for the rest */
  .live-founder__body { background: none; padding: 0; }
  .live-founder__body p:first-of-type {
    background: linear-gradient(180deg, rgba(223,234,228,0) 0%, rgba(223,234,228,.95) 100%);
    border-radius: calc(35 / 440 * 100vw);
    padding: calc(20 / 440 * 100vw);
    margin: 0 0 calc(26 / 440 * 100vw);
  }
  .live-founder__body p:not(:first-of-type) {
    background: #e9e9e9;
    padding: 0 calc(20 / 440 * 100vw);
    margin: 0;
    border-radius: 0;
  }
  .live-founder__body p:nth-of-type(2) {
    padding-top: calc(22 / 440 * 100vw);
    border-radius: calc(35 / 440 * 100vw) calc(35 / 440 * 100vw) 0 0;
  }
  .live-founder__body p:last-of-type {
    padding-bottom: calc(26 / 440 * 100vw);
    border-radius: 0 0 calc(35 / 440 * 100vw) calc(35 / 440 * 100vw);
  }
  /* the name reads inline in the story text, bold at the same 12px (Figma) */
  .live-founder__body p strong { font-weight: 800; color: #2d4f41; }

  /* Figma من نحن cards: 397×199 r30, white, visible thin border, heading 16/800, body 12/400 justified */
  .live-about-band article {
    width: calc(397 / 440 * 100vw);
    max-width: 397px;
    margin-inline: auto;
    padding: calc(16 / 440 * 100vw) calc(18 / 440 * 100vw);
    background: #fff;
    border: 1px solid rgba(45, 79, 65, .55);
    border-radius: 30px;
  }
  .live-about-band article h3 {
    font-size: 16px;
    font-weight: 800;
    color: #2d4f41;
    margin-bottom: .4em;
  }
  .live-about-band article p {
    font-size: 12px;
    font-weight: 400;
    color: #2d4f41;
    line-height: 1.8;
    text-align: justify;
    text-align-last: right;
  }
  .live-about-card__icon { width: calc(44 / 440 * 100vw); align-self: center; }
  .live-about-card__icon img,
  .live-about-card__icon svg { width: 100%; height: auto; }
  /* Figma من نحن: one #e9e9e9 rounded panel (393 r35) behind the founder story
     and behind مؤهلاتي — the paragraphs sit on it plainly, no inner boxes. */
  .live-founder__body,
  .live-qualifications__list {
    width: calc(393 / 440 * 100vw);
    max-width: 393px;
    margin-inline: auto;
    padding: calc(24 / 440 * 100vw) calc(20 / 440 * 100vw);
    border: 0;
    border-radius: calc(35 / 440 * 100vw);
  }
  .live-qualifications__list { background: #e9e9e9; }
  /* ---- Testimonials: match live (gray band, gray rounded cards, right-aligned heads) ---- */
  .live-testimonials { position: relative; background: #eeeeee; padding-block: calc(62 / 440 * 100vw) calc(26 / 440 * 100vw); }
  .live-testimonials .section-head { margin-bottom: calc(16 / 440 * 100vw); text-align: right; }
  .live-testimonials .section-head h2 {
    font-size: 22.5px;
    font-weight: 800;
    color: #2d4f41;
    text-align: right;
  }
  .live-testimonials .section-head h2::after { display: none; }   /* live has no gold underline */
  /* live: card #d9d9d9 r50, padding 0 37px · name 20/600 right · body 15/400 justify, lh 22.5 */
  .live-testimonials .testimonial-card,
  .live-testimonials .testimonial-card--audio,
  .live-testimonials .testimonial-card--visual {
    background: #d9d9d9;
    border: 0;
    border-radius: 34px;
    box-shadow: none;
    padding: calc(18 / 440 * 100vw) 24px;
  }
  .live-testimonials .testimonial-card h3 {
    font-size: 17px;
    font-weight: 600;
    color: #2d4f41;
    text-align: right;
    margin-bottom: calc(8 / 440 * 100vw);
  }
  .live-testimonials .testimonial-card p {
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: #2d4f41;
    text-align: justify;
    text-align-last: right;
  }
  /* the audio card keeps its name centred over the player */
  .live-testimonials .testimonial-card--audio h3 { text-align: center; }
  /* heading lockup: gold icon beside the two-line title, certificate badge top-right */
  .testi-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(10 / 440 * 100vw);
    padding-inline-end: 0;
  }
  .testi-head__icon { flex: 0 0 auto; width: 46px; height: 46px; display: block; order: 2; }
  .testi-head__icon svg { width: 100%; height: 100%; display: block; }
  .testi-head h2 { order: 1; margin: 0; line-height: 1.15; }
  .testi-badge { position: absolute; top: calc(14 / 440 * 100vw); right: calc(14 / 440 * 100vw); width: 38px; height: 38px; }
  .testi-badge img, .testi-badge svg { width: 100%; height: 100%; display: block; }

  /* audio card like live: big round play, progress bar, duration */
  .live-testimonials .testimonial-card--audio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(9 / 440 * 100vw);
    min-height: calc(150 / 440 * 100vw);
  }
  /* hidden without display:none — some iOS builds will not play a fully undisplayed element */
  .live-testimonials .testimonial-card--audio .testimonial-audio {
    display: block;   /* the UA hides a controls-less <audio>; keep it in the layout */
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
  }
  .voice-controls { display: flex; align-items: center; gap: 14px; }
  .voice-play {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: #fff; border: 0; border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    cursor: pointer;
  }
  .voice-play svg { width: 20px; height: 20px; }
  .voice-next {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    padding: 0;
    background: transparent; border: 0; border-radius: 50%;
    color: #2d4f41;
    cursor: pointer;
  }
  .voice-next svg { width: 18px; height: 18px; }
  .voice-next:hover { background: rgba(255,255,255,.6); }
  /* the clip failed to start (usually a blocked or missing file): show it plainly */
  .testimonial-card--audio.is-audio-error .voice-play { box-shadow: 0 0 0 2px #C0392B; }
  /* Safari ignores the CSS 'd' property, so the icon is two paths and the class
     picks which one shows. */
  .voice-play .voice-icon-pause { display: none; }
  .voice-play.is-playing .voice-icon-play { display: none; }
  .voice-play.is-playing .voice-icon-pause { display: block; }
  .voice-bar {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: rgba(12,82,76,.16);
    cursor: pointer;
    touch-action: none;   /* let the bar own the drag instead of scrolling the strip */
  }
  /* invisible 22px tall hit area so the 4px bar is actually draggable with a thumb */
  .voice-bar::before {
    content: "";
    position: absolute;
    inset: -9px 0;
  }
  /* '.testimonial-card span' turns every span into a 50px circle; the player's
     spans are progress and timing, so they opt out of that treatment. */
  .live-testimonials .testimonial-card .voice-bar__fill {
    display: block;
    width: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: inherit;
    background: #b59650;
    place-items: initial;
    pointer-events: none;
  }
  .live-testimonials .testimonial-card .voice-time__cur,
  .live-testimonials .testimonial-card .voice-time__dur {
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: none;
  }
  /* live: duration in gold, current time in white */
  .voice-time {
    width: 100%;
    display: flex; justify-content: flex-end; gap: 4px;
    font-size: 15px; font-weight: 700;
    direction: ltr;
    background: none;
  }
  .voice-time span { background: none; padding: 0; border-radius: 0; }
  .live-testimonials .testimonial-card .voice-time__dur { color: #b59650; order: 1; }
  .live-testimonials .testimonial-card .voice-time__cur { color: #fff; order: 2; }
  /* progress track: white with a gold fill, like live */
  .live-testimonials .testimonial-card .voice-bar { background: rgba(255,255,255,.85); }
  .live-testimonials .testimonial-card .voice-bar__fill { background: #b59650; }
  /* text reviews slide horizontally like the voice ones (live behaviour) */
  .live-testimonials .testimonial-grid {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    gap: calc(14 / 440 * 100vw);
    padding-block: calc(4 / 440 * 100vw);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .live-testimonials .testimonial-grid::-webkit-scrollbar { display: none; }
  /* live: 1 slide per view on mobile, 40px gap, 52px side offset so neighbours peek */
  .live-testimonials .testimonial-grid,
  .live-testimonials .testimonial-track {
    gap: 40px;
    padding-inline: 52px;
    scroll-padding-inline: 52px;
  }
  .live-testimonials .testimonial-grid .testimonial-card,
  .live-testimonials .testimonial-track .testimonial-card {
    flex: 0 0 calc(100vw - 104px);
    min-width: calc(100vw - 104px);
    max-width: none;
    scroll-snap-align: center;
  }
  /* lab title matches live: 22.5/700, no underline */
  .live-lab .section-head h2 { font-size: 22.5px; font-weight: 700; color: #2d4f41; }
  .live-lab .section-head h2::after { display: none; }
  /* breathing room between the reviews and the articles block */
  .live-testimonials + .home-posts { margin-top: calc(46 / 440 * 100vw); }
  /* live: white section · photo 210×160 r30 · lead 17/700 right · rest 17/300 justify */
  .live-lab { background: #fff; }
  .live-lab__photo { width: 210px !important; height: auto; border-radius: 30px !important; }
  .live-lab__body p { font-size: 17px; font-weight: 300; text-align: justify; line-height: 1.9; }
  .live-lab__body p:first-of-type { font-size: 17px; font-weight: 700; text-align: right; }


  /* مختبرنا المفضل: lab photo like live (210×160, rounded) */
  .live-lab__photo {
    display: block;
    width: min(100% - 40px, 210px);
    height: auto;
    margin: 0 auto calc(18 / 440 * 100vw);
    border-radius: 18px;
  }
  /* Figma: the مؤهلاتي section sits on white; only the list is gray. Rosette 42×42 above the title. */
  .live-qualifications { background: #fff; }
  /* Figma: rosette straddles the box's top-right corner (half in, half out) */
  .live-qualifications {
    position: relative;
    padding-top: 24px;          /* was 62 → 124px of white before the box */
    padding-bottom: 34px;
  }
  .live-qualifications__icon {
    position: absolute;
    top: 3px;                   /* box starts at 24 → 21 above / 21 below = exactly half */
    right: calc(26 / 440 * 100vw);
    z-index: 2;
    width: 42px;
    height: 42px;
    margin: 0;
  }
  /* «مؤهلاتي» now sits inside the gray box */
  .live-qualifications__list h2 {
    margin: 0 0 calc(14 / 440 * 100vw);
    font-size: 18.5px;
    font-weight: 700;
    color: #2d4f41;
    text-align: center;
  }
  .live-founder__body p {
    font-size: 12px;
    font-weight: 400;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0 0 1em;
    text-align: justify;
    text-align-last: right;
  }
  .live-qualifications__list p,
  .live-qualifications__list li { font-size: 12px; font-weight: 400; }
  /* «من انا» 26/700 gold · «مؤهلاتي» 18.5/700 */
  .live-founder__head h3 { font-size: 26px; font-weight: 700; color: #b59650; }
  .live-qualifications h2 { font-size: 18.5px; font-weight: 700; }
  /* Figma mobile scale: «لماذا/كيف يتم العمل»-type section headings 24, body 13.7/27 (was desktop clamp leaking 28.8 / 16) */
  .live-founder__head h2 {
    font-size: 24px;
    line-height: 1.15;
  }
  .live-qualifications h2 { font-size: 18.5px; font-weight: 700; line-height: 1.15; }
  .live-founder__head h3 { font-size: 26px; font-weight: 700; color: #b59650; }
  /* Figma من نحن: card + founder body 12/400 */
  .live-about-hero__copy p,
  .live-about-band p,
  .live-founder__body p,
  .live-qualifications__list p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.9;
  }
  /* «مهمتنا» eyebrow 22.5/700 gold */
  .live-about-hero__title span {
    font-size: 22.5px;
    font-weight: 700;
    color: #b59650;
  }
  .live-founder__body,
  .live-qualifications__list {
    text-align: right;
  }
  /* live hides the microscope banner on mobile — About starts at "من نحن" + mission */
  .about-visual-hero {
    display: none;
  }
  .about-mobile-eyebrow {
    display: block;
    text-align: center;
    color: var(--gold);
    font-weight: 700;
    font-size: 22.5px;   /* «من نحن» = 22.5 (measured on live @440) */
    margin: 6px auto 4px;
  }
  /* Figma: hero image 236×236 (was 320 → oversized) */
  .live-about-hero__media {
    width: calc(236 / 440 * 100vw);
    max-width: 236px;
    margin-inline: auto;
    box-shadow: none;
    border-radius: 14px;
  }
  .live-about-hero__title {
    text-align: center;
  }
  .about-analysis__grid {
    grid-template-columns: 1fr;
  }
  .about-analysis__copy { text-align: center; }
  .lab-section {
    padding-top: 0;
  }
  .section-head--lab {
    width: min(100% - 24px, 420px);
    margin: 0 auto 26px;
    padding: 0 10px 14px;
    text-align: center;
  }
  .section-head--lab .section-mark {
    width: 20px;
    height: 20px;
    box-sizing: content-box;
    padding: 8px;
    margin: 0 auto 18px;
    background: #fff;
    border: 2px solid #2D4F41;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(45,79,65,.16);
  }
  .section-head--lab h2 {
    margin: 0 0 10px;
    color: #B59650;
    font-size: 22.5px;
    line-height: 25px;
    font-weight: 700;
  }
  .section-head--lab h2::after {
    display: none;
  }
  .section-head--lab p {
    width: 100%;                      /* Figma: description sits on 2 lines */
    max-width: 100%;
    margin: 0 auto;
    color: #2D4F41;
    font-size: 13.7px;
    line-height: 20px;
    font-weight: 400;
    text-align: justify;        /* rectangle (justified) alignment */
    text-align-last: center;    /* last line stays centred */
  }
  /* category cards stay 3-in-a-row on mobile (matches live) — Figma card 122×120 r15 */
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 0; }
  .cat-grid .feature-card {
    min-height: calc(120 / 440 * 100vw);
    padding: 0 3px 8px;
    background: #fff;
    border: 0;
    border-radius: calc(15 / 440 * 100vw);
    box-shadow: rgb(208, 208, 208) 0 2px 5px 2px;
  }
  .cat-grid .feature-card:hover {
    transform: none;
    box-shadow: rgb(208, 208, 208) 0 2px 5px 2px;
    border-color: transparent;
  }
  .cat-grid .feature-card .ico {
    position: static;
    transform: none;
    width: 26px;
    height: 26px;
    margin: -13px auto 4px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .cat-grid .feature-card .ico img,
  .cat-grid .feature-card .ico svg { width: 24px; height: 24px; object-fit: contain; }
  .cat-grid .feature-card h3 { font-size: calc(12 / 440 * 100vw); font-weight: 700; line-height: calc(13 / 440 * 100vw); margin-bottom: .45em; color: #2D4F41; }
  .cat-grid .feature-card p { font-size: calc(9.2 / 440 * 100vw); font-weight: 400; line-height: calc(16 / 440 * 100vw); color: #2b2b2b; }
  .products-section {
    background: rgba(217, 217, 217, .9);
    border-radius: 48px 48px 0 0;
    overflow: hidden;
    /* Figma: gray band = 506 tall on the 440 frame */
    height: calc(506 / 440 * 100vw);
    padding-top: calc(36 / 440 * 100vw);
    padding-bottom: 0;
  }
  .department-section {
    padding-block: 58px 72px;
  }
  /* Figma: only 22px between the «الأكثر طلبًا» band and the next section's icon (was 58) */
  .products-section + .department-section--nutrition {
    padding-top: calc(22 / 440 * 100vw);
  }
.is-front .hero-benefits + .department-section {
    position: relative;
    z-index: 2;
    padding-top: 0;
  }
  .department-section .section-head--lab {
    margin-bottom: 8px;
  }
  .department-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: calc(401 / 440 * 100vw);          /* Figma dept card 401 wide on the 440 frame */
    max-width: none;
    /* Figma: card-to-card 72, and the next card's image overhangs 50 of it, so the real
       white band between two cards is ~22. At 90 it was 42 and the section read as empty. */
    gap: 72px;
    margin-inline: auto;
    padding: 62px 0 28px;
    overflow: visible;
  }
  .department-card {
    width: 100%;
    /* Figma (both cards measured): card 421 tall, image bottom at 203.5, title line at
       232, three body lines from 276, button 362..393.5, 29 below it. */
    min-height: calc(421 / 440 * 100vw);
    padding: calc(232 / 440 * 100vw) 22px calc(29 / 440 * 100vw);
    border-radius: calc(50 / 440 * 100vw);   /* Figma dept card radius 50 */
  }
  .department-card h3 { margin: 0 0 calc(18 / 440 * 100vw); }
  .department-card p  { margin: 0; }
  /* Figma department-card button «اطلبها الآن» = 94×32 r12 (was 126×46 r10 — oversized vs its label) */
  .department-card .btn {
    min-width: calc(94 / 440 * 100vw);
    width: calc(94 / 440 * 100vw);
    min-height: calc(32 / 440 * 100vw);
    height: calc(32 / 440 * 100vw);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(12 / 440 * 100vw);
    font-size: calc(13.7 / 440 * 100vw);
    font-weight: 800;
    line-height: 1;
  }
  /* Figma: the image runs the card's full width, 235.5 tall, hanging 32 over the top edge */
  .department-card__image {
    top: calc(-32 / 440 * 100vw);
    width: calc(400 / 440 * 100vw);
    height: calc(235.5 / 440 * 100vw);
  }
  .department-card__image--paper { width: calc(400 / 440 * 100vw); }
  /* the scale image is drawn taller in Figma: same bottom edge, 50.5 over the top */
  .department-card__image--tall {
    top: calc(-50.5 / 440 * 100vw);
    height: calc(254 / 440 * 100vw);
  }
  /* Figma department card heading 22.5/700/25 */
  .department-card h3 {
    font-size: 22.5px;
    font-weight: 700;
    line-height: 25px;
  }
  /* Figma department card body 12/400/24 */
  .department-card p {
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
  }
  .products-section .container {
    width: 100%;
  }
  .products-section .section-head {
    margin-bottom: 30px;
  }
  .products-section .section-head h2 {
    color: #2D4F41;
    font-size: 22.5px;
    line-height: 25px;
  }
  .products-section .section-head h2 strong { font-weight: 800; font-size: 1.18em; }
  .products-section .section-head h2::after { display: none; }   /* no golden bar under the heading */
  .featured-products {
    display: flex;
    align-items: stretch;      /* one size for every card, like Figma */
    overflow-x: auto;
    gap: calc(16 / 440 * 100vw);   /* Figma: 16 between cards, so the next card's corner peeks */
    padding: 12px calc(74 / 440 * 100vw) 28px;   /* Figma: card 293 centred with 74 margins each side */
    margin-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(74 / 440 * 100vw);
  }
  .featured-products::-webkit-scrollbar { display: none; }
  /* Figma mobile sizes (440px frame) — «الأكثر طلبًا» product card = 293×367 r39.3, margins 74 */
  .featured-products .product-card {
    flex: 0 0 calc(290 / 440 * 100vw);
    width: calc(290 / 440 * 100vw);
    /* Figma draws the card at 290x366. That is the floor, not a ceiling: the client's
       two-line title on الشاملة (batch 3) plus five visible features (batch 2) overrun
       it, and a card that clips its own copy fails both instructions. */
    height: auto;
    min-height: calc(366 / 440 * 100vw);
    scroll-snap-align: center;
    padding: calc(26 / 440 * 100vw) calc(21 / 440 * 100vw) calc(20 / 440 * 100vw);
    /* Figma: #0C524C with alpha ramping .74 -> .83 @28% -> 1 @84.8% (one colour, not two) */
    background: linear-gradient(180deg,
    rgba(12,82,76,.74) 0%,
    rgba(12,82,76,.83) 28%,
    rgba(12,82,76,1) 84.8%);
    border: calc(4 / 440 * 100vw) solid #d19d4e;   /* Figma card stroke #d19d4e (was #b59650) */
    border-radius: calc(39.275 / 440 * 100vw);   /* Figma cornerRadius 39.275 */
    box-shadow: 0 16px 28px rgba(0,0,0,.26);
    overflow: hidden;
    /* Figma motion: neighbours shrink + dim, focused card comes forward — slow ease (~1.25s) */
    transform: scale(.81);   /* Figma: inactive cards 238 wide vs 293 active */
    transform-origin: center bottom;  /* Figma: bottoms aligned → the middle card rises higher, neighbours sit lower */
    opacity: .55;
    transition: transform 1.25s ease-in-out, opacity 1.25s ease-in-out, box-shadow 1.25s ease-in-out;
    will-change: transform, opacity;
  }
  @media (prefers-reduced-motion: reduce) {
    .featured-products .product-card { transition: none; transform: none; opacity: 1; }
  }
  .featured-products .product-card h3 { font-size: calc(24 / 440 * 100vw); font-weight: 800; line-height: 1.15; }
  .featured-products .product-card .feat li { font-size: calc(11.5 / 440 * 100vw); line-height: 1.35; margin-bottom: calc(4 / 440 * 100vw); padding-inline-start: calc(20 / 440 * 100vw); }
  .featured-products .product-card .desc { font-size: calc(12.66 / 440 * 100vw); font-weight: 300; line-height: 1.65; text-align: justify; text-align-last: center; }
  .featured-products .product-card .feat li span:last-child { text-align: justify; text-align-last: right; }
  .featured-products .product-card .price .now { font-size: calc(15 / 440 * 100vw); }   /* Figma price 81×18 */
  .featured-products .product-card .price .was { font-size: calc(12 / 440 * 100vw); }
  .featured-products .product-card .price .cur { font-size: calc(12 / 440 * 100vw); }
  .featured-products .product-card .actions .btn { font-size: calc(13.7 / 440 * 100vw); padding: calc(11 / 440 * 100vw) calc(16 / 440 * 100vw); }
  /* Figma «وفر …» badge = 111×34 r9.43, label 15.71/800 */
  /* Figma وفر badge: 110x33 r9.426, gold #B59650. It hangs over the card's top edge,
     so the card must not clip it: the base .product-card sets overflow:hidden for the
     .thumb image, which these carousel cards do not render at all. */
  .featured-products .product-card { overflow: visible; }
  /* Live anchors the badge to the card's right (= inline-start in RTL), not centred. */
  .featured-products .product-card .save-badge {
    position: absolute;
    z-index: 3;
    inset-block-start: calc(-16 / 440 * 100vw);
    inset-inline-start: calc(18 / 440 * 100vw);
    inset-inline-end: auto;
    margin-inline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: calc(110 / 440 * 100vw);
    min-height: calc(33 / 440 * 100vw);
    padding: 0 calc(10 / 440 * 100vw);
    border-radius: calc(9.426 / 440 * 100vw);
    background: #B59650;
    font-size: calc(15.71 / 440 * 100vw);
    font-weight: 800;
    text-align: center;
  }
  .featured-products .product-card-icon { width: calc(80 / 440 * 100vw); height: calc(80 / 440 * 100vw); }
  .featured-products .product-card.is-carousel-active {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 22px 40px rgba(0,0,0,.34);
    z-index: 2;
  }
  .featured-products .product-card .body {
    height: 100%;
    justify-content: flex-start;
  }
  .featured-products .product-card-icon {
    width: calc(76 / 440 * 100vw);    /* Figma icon 76×81 */
    height: calc(81 / 440 * 100vw);
    margin: 0 auto calc(10 / 440 * 100vw);
    color: #0876a3;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
  }
  /* the old corner-tab badge treatment lived here and silently overrode the Figma
     rule above (same specificity, later in the file); only the shadow reset stays */
  .featured-products .product-card .save-badge { box-shadow: none; }
  .featured-products .product-card h3 {
    color: #f3f3f3;
    font-size: 21px;
    line-height: 1.35;
    margin: 0 0 10px;
  }
  .featured-products .product-card .desc,
  .featured-products .product-card .feat,
  .featured-products .product-card .feat li {
    color: #fff;
    font-size: 15px;
    line-height: 1.42;
    margin-bottom: 8px;
  }
  .featured-products .product-card .desc {
    display: block;
    overflow: visible;
    flex: 0 0 auto;          /* don't stretch — flex:1 was padding the card with dead space */
  }
  .featured-products .product-card .feat {
    display: grid;
    flex-shrink: 0;
    flex-grow: 0;
    gap: 2px;
  }
  .featured-products .product-card .feat li {
    padding-inline-start: 0;
    position: relative;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.32;
  }
  .featured-products .product-card .feat li::before {
    content: none;
  }
  .featured-products .product-card .actions {
    margin-top: auto;
    justify-content: flex-start;
    width: 100%;
  }
  /* Figma product-card button «إضافة» = 96×33 */
  .featured-products .product-card .actions .btn {
    min-width: calc(97 / 440 * 100vw);   /* Figma إضافة button 97x33 */
    width: calc(97 / 440 * 100vw);
    min-height: calc(33 / 440 * 100vw);
    height: calc(33 / 440 * 100vw);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 / 440 * 100vw);
    border-radius: calc(9.426 / 440 * 100vw);   /* Figma r9.426 */
    background: #B59650;
    box-shadow: none;
    font-size: calc(12 / 440 * 100vw);
    font-weight: 800;
    line-height: 1;
  }
  .featured-products .product-card .price {
    align-items: flex-start;
    margin-top: 0;
    gap: 1px;
    align-self: flex-end;
  }
  .featured-products .product-card .price .was {
    font-size: calc(12 / 440 * 100vw);
  }
  .featured-products .product-card .price .now {
    color: #fff;
    font-size: calc(15 / 440 * 100vw);   /* Figma price 81×18 */
    line-height: 1.2;
  }
  /* Keep everything inside the Figma 367 card: text area flexes, button + price stay pinned */
  /* Figma: every card the same height. Copy area takes the slack and clips with a fade
     when it's long; price + button always share the bottom row. */
  .featured-products .product-card > .body {
    display: grid;
    grid-template-columns: 1fr auto;   /* only the footer row uses both columns */
    grid-template-rows: auto auto 1fr auto auto;
    height: 100%;
    min-height: 0;
    align-items: start;
  }
  /* icon, title and copy always span the full width */
  .featured-products .product-card > .body > .product-card-icon,
  .featured-products .product-card > .body > h3,
  .featured-products .product-card > .body > .desc,
  .featured-products .product-card > .body > .feat { grid-column: 1 / -1; }
  .featured-products .product-card > .body > .product-card-sample {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: calc(8 / 440 * 100vw) auto 0;
    min-height: calc(30 / 440 * 100vw);
    padding: 0 calc(14 / 440 * 100vw);
    border-radius: calc(10 / 440 * 100vw);
    font-size: calc(12.5 / 440 * 100vw);
  }
  .featured-products .product-card .desc,
  .featured-products .product-card .feat {
    grid-row: 3;
    min-height: 0;
    overflow: hidden;
    align-self: stretch;
    /* No bottom fade. It was meant for copy that overflows, but no card's copy does
       (every .feat/.desc measures scrollHeight == clientHeight), so all it did was
       dissolve the real last line: on الخدمة الشاملة it ate «طوال الفترة العلاجية».
       Figma shows every feature row in full. */
  }
  /* Figma card copy: desc 12.66/300, feature rows ~11.5 — tight leading so it fits the 367 card */
  .featured-products .product-card .desc {
    font-size: calc(12.66 / 440 * 100vw);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
  }
  .featured-products .product-card .feat li {
    font-size: calc(11.5 / 440 * 100vw);
    line-height: 1.25;
    margin-bottom: calc(2 / 440 * 100vw);
  }
  /* Figma: the ⚠ note line is bold (fw 700) */
  .featured-products .product-card .feat li.feature-row--warning { font-weight: 700; }
  /* price + «إضافة» on one row: button right, price left (Figma) */
  .featured-products .product-card .actions {
    grid-row: 5;
    grid-column: 1;      /* RTL column 1 = right */
    justify-self: start;
    align-self: center;
    margin-top: 0;
  }
  .featured-products .product-card .price {
    grid-row: 5;
    grid-column: 2;      /* RTL column 2 = left */
    justify-self: end;
    align-self: center;
    margin: 0;
  }
  /* Figma articles band: #eeeeee, 231 tall */
  .home-posts {
    padding: 0;
  }
  .home-posts .container {
    width: 100%;
    padding-inline: 0;
  }
  .home-posts-panel {
    width: 100%;
    min-height: calc(231 / 440 * 100vw);
    padding: calc(20 / 440 * 100vw) 0 calc(14 / 440 * 100vw);
    border-radius: calc(50 / 440 * 100vw);   /* rounded top + bottom */
    background: #eeeeee;
  }
  /* Figma: text stays put on the left, only the thumbnail strip scrolls on the right */
  .home-posts-panel { position: relative; }
  .home-posts-grid {
    direction: ltr;                 /* strip runs left→right so the next image peeks at the right edge (Figma) */
    width: calc(228 / 440 * 100vw); /* Figma: strip spans x212→440 */
    margin-left: auto;
    margin-right: 0;
    scroll-snap-type: x mandatory;  /* every article stops in the same place */
    gap: calc(14 / 440 * 100vw);
    scroll-padding-inline: 0;
    /* runway so the LAST article can still scroll to the start position (we have fewer posts than Figma) */
    padding-left: 0;
    padding-right: calc(130 / 440 * 100vw);
  }
  .home-posts-grid .blog-card {
    position: static;         /* pinned text anchors to the panel, not the scrolling card */
    scroll-snap-align: start;
    overflow: visible;
    transform: none;          /* a transformed card would become the containing block */
    flex: 0 0 auto;           /* card = thumbnail width only (body is pinned) */
    width: auto;
    min-width: 0;
    padding: 0;
    min-height: 0;
  }
  .home-posts-grid .blog-card-body {
    position: absolute;
    top: calc(31 / 440 * 100vw);
    left: calc(18 / 440 * 100vw);
    width: calc(178 / 440 * 100vw);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .home-posts-grid .blog-card.is-post-active .blog-card-body {
    opacity: 1;
    pointer-events: auto;
  }
  /* Figma home articles: thumbnail 126×159 r20 on the right, title 11/700 + excerpt 9.2/700 on the left */
  .home-posts-grid .blog-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;      /* card = thumbnail only; the text is pinned to the panel */
    min-width: 0;
    grid-template-columns: none;
    gap: calc(16 / 440 * 100vw);
    min-height: calc(180 / 440 * 100vw);
    padding: calc(10 / 440 * 100vw);
    overflow: hidden;
    border-radius: 0;
    background: transparent;     /* Figma: no card — content sits on the #eeeeee panel */
    box-shadow: none;
    scroll-snap-align: start;
    /* Figma dissolve 300ms between slides */
    opacity: .5;
    transition: opacity .3s ease;
  }
  .home-posts-grid .blog-card.is-post-active { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .home-posts-grid .blog-card { opacity: 1; transition: none; }
  }
  /* Figma: current article thumbnail 126×159, the next ones 102×123 */
  .home-posts-grid .blog-card .post-thumb {
    flex: 0 0 calc(102 / 440 * 100vw);
    width: calc(102 / 440 * 100vw);
    height: calc(123 / 440 * 100vw);
    transform-origin: center center;
    max-width: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: calc(20 / 440 * 100vw);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease;
  }
  /* Active thumbnail grows visually only — changing its width re-flowed the strip after the
     browser had snapped, so slides 2 and 3 came to rest in the wrong place. */
  .home-posts-grid .blog-card.is-post-active .post-thumb {
    transform: scale(1.235);     /* 102 → 126 (Figma) without touching layout */
    border: 2px solid #d19d4e;   /* Figma: gold stroke on the current article's image */
    z-index: 2;
  }
  .home-posts-grid .blog-card .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .home-posts-grid .blog-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    text-align: right;
  }
  /* Figma article title 11/700/12 · #2d4f41 */
  .home-posts-grid .blog-card h2 {
    margin-bottom: calc(6 / 440 * 100vw);
    color: #2d4f41;
    font-size: calc(11 / 440 * 100vw);
    font-weight: 700;
    line-height: calc(12 / 440 * 100vw);
  }
  .home-posts-grid .blog-card h2 a { color: inherit; }
  /* Figma excerpt 9.2/700/14 · #656565 */
  .home-posts-grid .blog-card p {
    display: -webkit-box;
    overflow: hidden;
    color: #656565;
    font-size: calc(9.2 / 440 * 100vw);
    font-weight: 700;
    line-height: calc(14 / 440 * 100vw);
    text-align: justify;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
  }
  .home-posts-grid .blog-card .btn { display: none; }   /* Figma has no button on the article item */
  /* ---- المقالات landing page (Figma frame 1:7622) ----
     card 393×428 r50 · image 287×293 r50 · title 22.5/700 · body 12/400 · button 94×32 r12 */
  .blog-grid:not(.home-posts-grid) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: calc(28 / 440 * 100vw);
  }
  .blog-grid:not(.home-posts-grid) .blog-card {
    width: calc(393 / 440 * 100vw);
    max-width: 393px;
    min-height: calc(428 / 440 * 100vw);
    padding: calc(18 / 440 * 100vw) calc(20 / 440 * 100vw) calc(22 / 440 * 100vw);
    border-radius: calc(50 / 440 * 100vw);
    overflow: hidden;
  }
  .blog-grid:not(.home-posts-grid) .blog-card .post-thumb {
    width: calc(287 / 440 * 100vw);
    height: calc(293 / 440 * 100vw);
    max-width: none;
    aspect-ratio: auto;
    margin-inline: auto;
    border: 0;
    border-radius: calc(50 / 440 * 100vw);
    overflow: hidden;
  }
  .blog-grid:not(.home-posts-grid) .blog-card .post-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .blog-grid:not(.home-posts-grid) .blog-card h2 {
    font-size: calc(22.5 / 440 * 100vw);
    font-weight: 600;                        /* live: 600, not bold */
    line-height: calc(22.5 / 440 * 100vw);   /* live: a 22.5 line box */
    color: #fff;
  }
  .blog-grid:not(.home-posts-grid) .blog-card h2 a { color: inherit; }
  .blog-grid:not(.home-posts-grid) .blog-card p {
    font-size: calc(12 / 440 * 100vw);
    font-weight: 300;                      /* live: 300 */
    line-height: calc(24 / 440 * 100vw);   /* live: 24 over 12px copy */
    color: #fff;
    text-align: justify;
    text-align-last: center;
  }
  .blog-grid:not(.home-posts-grid) .blog-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(111 / 440 * 100vw);    /* live: 111x34 */
    min-height: calc(34 / 440 * 100vw);
    padding: 0 calc(12 / 440 * 100vw);
    border-radius: calc(12 / 440 * 100vw);
    font-size: calc(13.7 / 440 * 100vw);
    font-weight: 800;
    line-height: 1;
  }
  /* Figma dots: active 14, rest 10 */
  .home-posts-dots {
    gap: calc(5 / 440 * 100vw);
    margin-top: calc(16 / 440 * 100vw);
  }
  .home-posts-dot {
    width: calc(10 / 440 * 100vw);
    height: calc(10 / 440 * 100vw);
    border-width: 2px;
  }
  .home-posts-dot.is-active {
    width: calc(14 / 440 * 100vw);
    height: calc(14 / 440 * 100vw);
  }
  .lab-card { grid-template-columns: 1fr; text-align:center; }
  .lab-card .lab-img { margin-inline:auto; }
  .site-footer .cols { grid-template-columns: 1fr; gap: 28px; }
  .site-footer {
    margin-top: calc(34 / 440 * 100vw);   /* Figma gap before the footer (was 92 → white band) */
    padding: 34px 24px 26px;
    background: #0c524c;
    border-radius: 82px 82px 0 0;
    color: rgba(255,255,255,.9);
    text-align: center;
  }
  .ar-contact-page + .site-footer {
    margin-top: 22px;
  }
  .site-footer .container {
    width: 100%;
  }
  .site-footer .cols {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .site-footer .brand-col {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0;
    border: 0;
  }
  .site-footer .footer-logo {
    width: 171px;
    height: auto;
    margin-inline: auto;
    filter: brightness(0) invert(1);
  }
  .site-footer .brand-col p,
  .site-footer .brand-col .socials {
    display: none;
  }
  /* Figma footer: heading (خدماتنا/روابط) 18.5/800/30 · link 13.7/400/27 */
  .site-footer h4 {
    color: #fff;
    font-size: 18.5px;
    font-weight: 800;
    line-height: 30px;
    margin: 0 0 12px;
    text-align: center;
  }
  .site-footer .fmenu {
    display: grid;
    justify-items: center;
    gap: 8px;
  }
  .site-footer .fmenu li {
    margin: 0;
    text-align: center;
  }
  .site-footer a {
    color: rgba(255,255,255,.92);
    text-align: center;
  }
  .site-footer .fmenu a {
    font-size: 13.7px;
    font-weight: 400;
    line-height: 27px;
  }
  .site-footer .footer-contact-col h4 {
    font-size: 23px;
    line-height: 46px;
    font-weight: 400;
    margin-bottom: 20px;
  }
  .site-footer .footer-contact-col {
    padding: 0;
  }
  .site-footer .footer-contact-list {
    gap: 10px;
    justify-items: center;
  }
  .site-footer .footer-contact-row {
    width: max-content;
    max-width: 100%;
    display: grid;
    grid-template-columns: 22px auto;
    column-gap: 9px;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    direction: ltr;
    color: #fff;
    text-align: left;
  }
  .site-footer .footer-contact-icon {
    width: 22px;
    height: 22px;
    color: #fff;
  }
  .site-footer .footer-contact-text {
    width: auto;
    color: #fff;
    text-align: left;
  }
  .site-footer .footer-contact-row--phone .footer-contact-text {
    font-size: 13px;
    line-height: 15.6px;
    font-weight: 700;
    letter-spacing: 3.8px;
  }
  .site-footer .footer-contact-row--email .footer-contact-text {
    font-size: 14px;
    line-height: 16.8px;
    font-weight: 300;
    letter-spacing: .7px;
  }
  .site-footer .foot-bottom {
    display: none;
  }
}

@media (max-width: 760px) {
  .live-services-page .products-section {
    padding: 42px 0 58px;
    border-radius: 0;
    background: #fff;
    /* the home band is a fixed 506 with overflow:hidden — الخدمات must grow with its cards */
    height: auto;
    overflow: visible;
  }
  .live-services-page .products-section .container {
    width: min(100% - 28px, 430px);
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
  /* «الخدمات» title 22.5 (measured on live @440 = verified Figma section scale) */
  .live-services-title {
    margin-bottom: 22px;
    font-size: 22.5px;
    font-weight: 700;
  }
  /* Figma الخدمات: gray band 383 r50 #e9e9e9 · cards 291×366 r39.3 */
  .live-services-page .live-services-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 44px;
    overflow: hidden;
    padding: calc(28 / 440 * 100vw) 0 calc(32 / 440 * 100vw);
    margin: 0;
    width: calc(383 / 440 * 100vw);
    max-width: 383px;
    margin-inline: auto;
    border-radius: calc(50 / 440 * 100vw);
    background-clip: padding-box;
    background: #e9e9e9;
    scroll-snap-type: none;
  }
  .live-services-page .live-services-grid .product-card {
    width: calc(291 / 440 * 100vw);
    max-width: 291px;
    height: auto;
    min-height: calc(366 / 440 * 100vw);
    margin-inline: auto;
    padding: calc(26 / 440 * 100vw) calc(21 / 440 * 100vw) calc(20 / 440 * 100vw);
    border-radius: calc(39.275 / 440 * 100vw);   /* Figma cornerRadius 39.275 */
    scroll-snap-align: none;
    overflow: visible;
    transform: none;          /* no carousel scaling on this page */
    opacity: 1;
  }
  /* Figma card type on الخدمات */
  .live-services-page .live-services-grid .product-card h3 { font-size: calc(18.38 / 440 * 100vw); font-weight: 800; }
  .live-services-page .live-services-grid .product-card .price .now { font-size: calc(18.85 / 440 * 100vw); font-weight: 800; }
  .live-services-page .live-services-grid .product-card .actions .btn {
    min-width: calc(97 / 440 * 100vw);
    min-height: calc(34 / 440 * 100vw);
    border-radius: calc(9.43 / 440 * 100vw);
    font-size: calc(15.71 / 440 * 100vw);
    font-weight: 800;
  }
  .live-services-page .live-services-grid .save-badge {
    min-width: calc(111 / 440 * 100vw);
    min-height: calc(34 / 440 * 100vw);
    border-radius: calc(9.43 / 440 * 100vw);
    font-size: calc(15.71 / 440 * 100vw);
    font-weight: 800;
  }
  .live-services-page .live-services-grid .product-card .desc,
  .live-services-page .live-services-grid .product-card .feat {
    overflow: visible;
    -webkit-line-clamp: unset;
    /* الخدمات shows the whole description — the bottom fade belongs to the home carousel only */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .live-services-page .live-services-grid .product-card .feat {
    display: grid;
    align-content: start;
    gap: 12px;
    flex: 0 0 auto;
    margin: 0 0 18px;
  }
  .live-services-page .live-services-grid .product-card .feat li {
    margin: 0;
  }
  .live-services-page .live-services-grid .product-card .feat li::before {
    content: none !important;
  }
  .live-services-page .product-card-icon {
    width: 84px;
    height: 82px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #aaeef9;
    filter: none;
  }
  .live-services-page .product-card-icon-svg {
    stroke-width: 1.45;
  }
  .live-services-page .live-services-grid .feature-row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 8px;
    padding-inline-start: 0;
    text-align: right;
  }
  .live-services-page .live-services-grid .feature-row--warning .feature-row__icon {
    color: #fff;
  }
  .live-services-page .live-services-grid .feature-row__icon {
    width: 13px;
    height: 13px;
    color: #fff;
  }
  .live-services-page .live-services-grid .feature-row::before {
    content: none;
  }

  .live-services-page .section-head {
    margin-bottom: 28px;
  }
  .live-services-page .section-head h2 .head-l2 {
    display: block;
  }
  .live-services-page .live-services-title {
    margin-bottom: 28px;
  }
  .live-services-page .live-services-grid .product-card .save-badge {
    position: absolute;
    inset-block-start: -18px;
    inset-inline-start: 18px;
    align-self: auto;
    margin: 0;
    min-height: 38px;
    border-radius: 10px;
    padding: .45em 1em;
  }
  .live-services-page .live-services-grid .product-card .actions {
    margin-top: 20px;
  }
  .live-services-page .live-services-grid .product-card .price .was,
  .live-services-page .live-services-grid .product-card .price .now {
    font-size: 1.45rem;
  }
  .live-services-page .live-services-grid .product-card .price .was {
    line-height: 1.1;
  }
  /* client 2026-10-18: the old price reads like the home card's, smaller than the
     new one and with «ر.س» the same size as the number, so one strike crosses both */
  .live-services-page .live-services-grid .product-card .price .was { font-size: 1.16rem; }
  .live-services-page .live-services-grid .product-card .price .was .cur { font-size: inherit; }
}

/* ---------- checkout agreements (live parity) ---------- */
.mawzona-agreements { display:grid; gap:12px; margin:6px 0 16px; }
.mawzona-agreement { display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:22px; color:#fff; cursor:pointer; }
.woocommerce-checkout .mawzona-agreement { color:inherit; }
.mawzona-agreement input { margin-top:5px; accent-color:#B59650; flex:0 0 auto; }
.mawzona-agreement a { color:inherit; text-decoration:underline; font-weight:700; }

/* cases-we-do-not-accept list */
.mz-cases { margin:18px auto 0; padding:0; list-style:none; max-width:392px; }
.mz-cases li { position:relative; margin:0 0 10px; padding-inline-start:26px; color:var(--green-800); font-size:14px; line-height:24px; text-align:right; }
.mz-cases li::before { content:"\274C"; position:absolute; inset-inline-start:0; top:0; font-size:13px; }

/* ---------- cases-we-do-not-accept (live parity) ---------- */
.mz-cases-page { padding:26px 0 70px; background:#fff; }
.mz-cases-panel {
  width:min(100%, 400px);
  margin-inline:auto;
  padding:34px 24px 30px;
  border-radius:26px;
  background:#2D4F41;
}
.mz-cases-panel h2 {
  margin:0 0 22px;
  color:#fff;
  font-size:22px;
  font-weight:500;
  line-height:32px;
  text-align:center;
}
.mz-cases-panel .mz-cases { max-width:none; margin-top:0; }
.mz-cases-panel .mz-cases li { color:#fff; }

@media (max-width:760px) {
  /* live privacy at 440: green eyebrow + photo, gold title, bold lead, grey #E9E9E9
     section panels with 14/600 gold titles and 12/400 justified items */
  .live-policy-hero { padding:20px 0 6px; }
  .live-policy-icon { display:none; }
  .live-policy-eyebrow { margin:0 0 14px; color:var(--green-800); font-size:23px; font-weight:600; text-align:center; }
  .live-policy-photo { width:min(100%, 236px); margin:0 auto 20px; }   /* live renders the icon at 236 */
  .live-policy-photo img { width:100%; height:auto; border-radius:22px; }
  .live-policy-page h1 { color:#D19D4E; font-size:23px; font-weight:600; line-height:30px; }
  .live-policy-hero h2 { color:var(--green-800); font-size:23px; font-weight:800; line-height:32px; }
  .live-policy-card {
    width:min(100%, 397px);        /* Figma 1:868 */
    margin-inline:auto;
    padding:22px 20px;
    border:0;
    border-radius:30px;            /* Figma 1:868 */
    background:#E9E9E9;
    box-shadow:none;
  }
  .live-policy-card h2 { margin:0 0 12px; color:#D19D4E; font-size:14px; font-weight:600; text-align:right; }
  .live-policy-card p { margin:0 0 14px; color:#0C524C; font-size:12px; font-weight:400; line-height:22px; text-align:justify; text-align-last:right; }
  .live-policy-card p:last-child { margin-bottom:0; }
}

/* ---------- نموذج: per-product sample report pages (live parity) ---------- */
.mz-sample-page { padding: 20px 0 60px; background: #fff; }
.mz-sample-title {
  margin: 0 0 14px;
  color: var(--green-800);
  font-size: 23px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}
/* Live: the description sits in a #F0F0F1 panel, r30, with a red ⚠ overlapping its
   top-right corner, and the service title sits directly above it. */
.mz-sample-desc {
  position: relative;
  width: min(100% - 40px, 400px);
  margin: 0 auto 30px;
  padding: calc(26 / 440 * 100vw) calc(22 / 440 * 100vw);
  border-radius: calc(30 / 440 * 100vw);
  background: #F0F0F1;
  color: var(--green-800);
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  text-align: justify;
  text-align-last: right;
}
.mz-sample-desc p { margin: 0 0 1.1em; }
.mz-sample-desc p:last-child { margin-bottom: 0; }
.mz-sample-desc::before {
  content: "";
  position: absolute;
  inset-block-start: calc(-14 / 440 * 100vw);
  inset-inline-start: calc(14 / 440 * 100vw);   /* RTL: the physical right */
  width: calc(30 / 440 * 100vw);
  height: calc(30 / 440 * 100vw);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E03131' d='M10.9 2.6a1.3 1.3 0 0 1 2.2 0l9.7 16.8a1.3 1.3 0 0 1-1.1 1.9H2.3a1.3 1.3 0 0 1-1.1-1.9L10.9 2.6Z'/%3E%3Cpath fill='%23fff' d='M12.9 8.4a.9.9 0 0 0-1.8 0v5a.9.9 0 0 0 1.8 0v-5ZM12 18a1.05 1.05 0 1 0 0-2.1 1.05 1.05 0 0 0 0 2.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Figma/live: the tile is 207x274 with a 4px #B59650 border at r20, far smaller than
   the 300 it was rendering at. */
.mz-sample {
  margin: 0 auto 30px;
  width: calc(207 / 440 * 100vw);
  max-width: 207px;
}
.mz-sample__view {
  position: relative;
  display: block;
  border: 4px solid #B59650;
  border-radius: calc(20 / 440 * 100vw);
  overflow: hidden;
  background: var(--green-900);
}
.mz-sample__view img { display: block; width: 100%; height: auto; }
/* Live's «شاهد النموذج الان» treatment, matched to its own rules: #2D4F41 at 40%,
   r18, icon 68px, caption pinned 10px above the bottom edge. */
.mz-sample__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10px;
  border-radius: 18px;
  background: rgba(45, 79, 65, .4);
  color: #fff;
  text-align: center;
  transition: background .3s ease-in-out;
}
.mz-sample__view:hover .mz-sample__overlay,
.mz-sample__view:focus-visible .mz-sample__overlay { background: rgba(45, 79, 65, 0); }
.mz-sample__eye {
  width: 68px;
  height: 68px;
  margin-bottom: 8px;
  background: url("../img/sample-watch.svg") center / contain no-repeat;
}
.mz-sample__cta { width: 90%; font-size: 16px; font-weight: 700; line-height: 1.35; }
.mz-sample figcaption {
  margin-top: 12px;
  color: var(--green-800);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

/* ---------- static article pages ---------- */
/* Sizes and colours reproduce live's per-article layout at 440: title and section
   headings 20/700 #2D4F41, body 12/400 #205040 justified, content column 408. */
.mz-article { padding: 18px 0 56px; background: #fff; }
.mz-article__inner { width: min(100% - 32px, 408px); margin-inline: auto; }
/* Figma 1:401: the title is CENTRED with a gold document mark beside it, then the
   article's image as a 235x241 rounded hero, 37 below the title. */
.mz-article__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 37px;
  color: #2D4F41;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.mz-article__mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: #B59650;
}
.mz-article__mark svg { width: 100%; height: 100%; }
.mz-article__hero {
  display: block;
  width: calc(236 / 440 * 100vw);
  max-width: 236px;
  aspect-ratio: 236 / 241;
  margin: 0 auto 26px;
  border-radius: min(calc(50 / 440 * 100vw), 50px);   /* Figma 1:401 sets r50 */
  object-fit: cover;
}
/* Figma 1:459: section headings centred */
.mz-article__h2 {
  margin: 26px 0 12px;
  color: #2D4F41;
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 800;
  line-height: 30px;
  text-align: center;
}
/* Figma: a heading + list group sits in a #0C524C panel, r32, white copy, 396 wide */
.mz-article__panel {
  position: relative;
  margin: 22px 0 0;
  padding: 24px 20px 18px;
  border-radius: 32px;
  background: #0C524C;
  color: #fff;
}
.mz-article__panel .mz-article__h2 { margin: 0 0 16px; color: #fff; }
.mz-article__panel .mz-article__list { margin: 0; }
.mz-article__panel .mz-article__list li { color: #fff; font-size: 13.5px; line-height: 1.9; margin-bottom: 9px; }
.mz-article__panel .mz-article__list li::before { background: #fff; }
.mz-article__list li strong { font-weight: 800; }
.mz-article__h3 {
  margin: 20px 0 8px;
  color: #2D4F41;
  font-family: var(--font-display);
  font-size: 13.7px;
  font-weight: 800;
  line-height: 27.4px;
  text-align: right;
}
.mz-article__p {
  margin: 0 0 12px;
  color: #205040;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  text-align: justify;      /* Figma 1:459 sets the body justified */
  text-align-last: right;
}
.mz-article__p--strong { font-weight: 700; }
.mz-article__note {
  margin: 0 0 12px;
  color: #205040;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: right;
}
.mz-article__list { margin: 0 0 14px; padding: 0; list-style: none; }
.mz-article__list li {
  position: relative;
  margin: 0 0 7px;
  padding-inline-start: 16px;   /* RTL: the dot leads the line on the RIGHT, beside the text */
  color: #205040;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.85;
  text-align: right;
}
.mz-article__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2D4F41;
}
/* Figma: in-article images are centred rounded squares, like the hero */
.mz-article__img {
  display: block;
  width: min(100%, 236px);
  height: auto;
  margin: 40px auto 30px;
  border-radius: min(calc(50 / 440 * 100vw), 50px);
}

/* ------------------------------------------------------------------
   Figma 1:338 / 1:401 / 1:459: an article body is grouped into boxes 397 wide
   with a 30 radius. The opening summary sits in a bordered #EEEEEE card, the
   sections that follow in a plain #E9E9E9 panel, and a highlighted list in the
   dark-green one. The intro above them runs larger, at 18.5/30.
   ------------------------------------------------------------------ */
.mz-article__lead {
  width: min(100%, 338px);
  margin: 0 auto 18px;
  color: #205040;
  font-size: 18.5px;
  font-weight: 400;
  line-height: 30px;
  text-align: justify;
  text-align-last: right;
}
.mz-article__lead strong { font-weight: 700; color: #2D4F41; }
.mz-article__box {
  position: relative;
  width: min(100%, 397px);
  margin: 0 auto 26px;
  padding: 32px 29px 28px;   /* Figma: 397 - 2x29 leaves the 338 text column */
  border-radius: 30px;
}
/* Figma hangs a mark over the panel's top corner, on the RTL start side */
.mz-article__box-icon {
  position: absolute;
  inset-inline-start: 29px;   /* RTL: 29 in from the panel's right edge, as Figma sets it */
  display: block;
}
.mz-article__box-icon--doc { top: -13px; width: 21px; height: 24px; }
.mz-article__box-icon--bio { top: -19px; inset-inline-start: 28px; width: 40px; height: 40px; }
.mz-article__box--card { background: #EEEEEE; border: 1.5px solid #2D4F41; }
.mz-article__box--grey { background: #E9E9E9; }
.mz-article__box > *:last-child { margin-bottom: 0; }
.mz-article__box > :first-child,
.mz-article__box > .mz-article__box-icon + * { margin-top: 0; }

/* Live's pull-out block: image beside a short heading and one or two lines. */
.mz-article-card {
  margin: 34px 0 26px;
  text-align: center;
}
/* Figma 1:338 y2586 / 1:459 y1720: the photo is a 236x241 rounded square on its
   own line, with the heading centred under it, exactly like the article hero. */
.mz-article-card__img {
  display: block;
  width: calc(236 / 440 * 100vw);
  max-width: 236px;
  margin: 0 auto 18px;
  aspect-ratio: 236 / 241;
  border-radius: min(calc(50 / 440 * 100vw), 50px);
  object-fit: cover;
}
.mz-article-card__body { flex: 1 1 auto; min-width: 0; }
.mz-article-card__head {
  margin: 0 0 10px;
  color: #2D4F41;
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}
.mz-article-card__p {
  margin: 0 0 8px;
  color: #205040;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  text-align: justify;
  text-align-last: right;
}
.mz-article-card__p--strong { font-weight: 700; }
/* Figma 1:459 sets this one pull-out larger: heading 22.5/25.1, body 15/30 */
.mz-article-card--lg .mz-article-card__head { font-size: 22.5px; line-height: 25.1px; font-weight: 700; }
.mz-article-card--lg .mz-article-card__p { font-size: 15px; line-height: 30px; }

/* ------------------------------------------------------------------
   Account screens, Figma 1:1443 (تسجيل الدخول) and 1:1496 (تسجيل حساب جديد):
   a centred title, 343x46 fields outlined 1px in #2D4F41 with a 15 radius,
   then a 151x46 gold button and a small link under it. 8 between each row.
   ------------------------------------------------------------------ */
.mz-auth { padding: 48px 0 64px; background: #fff; }
.mz-auth__inner { width: min(100% - 32px, 343px); margin-inline: auto; }
.mz-auth__title {
  margin: 0 0 56px;
  color: #2D4F41;
  font-family: var(--font-display);
  font-size: 22.5px;
  font-weight: 700;
  line-height: 25.1px;
  text-align: center;
}
.mz-auth__errors {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 15px;
  background: #FDECEC;
  color: #8A1C1C;
  font-size: 12px;
  line-height: 24px;
  text-align: right;
}
.mz-auth__errors p { margin: 0; }
.mz-auth__errors p + p { margin-top: 4px; }
.mz-auth__form { display: block; }
/* the Figma fields carry their label as placeholder only */
.mz-auth__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mz-auth__field {
  display: block;
  width: 100%;
  height: 46px;
  margin: 0 0 8px;
  padding: 0 20px;
  border: 1px solid #2D4F41;
  border-radius: 15px;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 13.7px;
  line-height: 27.4px;
  text-align: right;
}
.mz-auth__field::placeholder { color: #000; opacity: 1; }
.mz-auth__field:focus { outline: 2px solid #B59650; outline-offset: 1px; }
.mz-auth__forgot {
  display: block;
  margin: 0 0 8px;
  color: #2D4F41;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: right;
  text-decoration: none;
}
.mz-auth__submit {
  display: block;
  width: 151px;
  height: 46px;
  margin: 0 auto 8px;
  border: 0;
  border-radius: 15px;
  background: #B59650;
  color: #fff;
  font-family: inherit;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 30px;
  cursor: pointer;
}
.mz-auth__submit:hover { background: #9C7F3E; }
.mz-auth__submit--register { margin-top: 30px; }   /* collapses with the field's 8, Figma 1:1496 wants 30 */
/* honeypot: off-screen, never shown, never focusable */
.mz-auth__hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.mz-auth__alt {
  display: block;
  color: #2D4F41;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
}
.mz-auth__forgot:hover, .mz-auth__alt:hover { text-decoration: underline; }

/* ---------- in-page agreement modal (checkout) ---------- */
body.mz-modal-open { overflow: hidden; }
.mz-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}
.mz-modal[hidden] { display: none; }
.mz-modal__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(12, 82, 76, .55);
  cursor: pointer;
}
.mz-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  max-height: min(78vh, 620px);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  outline: 0;
  overflow: hidden;
}
.mz-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.mz-modal__title {
  margin: 0;
  color: #2D4F41;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
}
.mz-modal__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f4f2ec;
  color: #2D4F41;
  font: 300 26px/1 Arial, sans-serif;
  cursor: pointer;
}
.mz-modal__body {
  padding: 16px 20px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #205040;
  font-size: 13px;
  line-height: 1.9;
  text-align: right;
}
.mz-modal__body h1,
.mz-modal__body h2,
.mz-modal__body h3 {
  margin: 16px 0 8px;
  color: #2D4F41;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}
.mz-modal__body p, .mz-modal__body li { margin: 0 0 10px; font-size: 13px; }
.mz-modal__body ul, .mz-modal__body ol { margin: 0 0 12px; padding-inline-start: 0; padding-inline-end: 18px; }
.mz-modal__body img { max-width: 100%; height: auto; border-radius: 12px; }
.mz-modal__loading { color: var(--ink-soft); text-align: center; }
/* the injected markup carries the source page's section spacing; the dialog supplies its own */
.mz-modal__body .section,
.mz-modal__body > section { padding-block: 0; }
.mz-modal__body > *:first-child { margin-top: 0; padding-top: 0; }
.mz-modal__body .container { width: 100%; padding: 0; }

/* ---------- testimonial dot navigation ---------- */
.testi-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
}
/* The button is a 30px touch target; the visible dot is drawn inside it. A bare
   9px dot is far too small to hit with a thumb, which is the reachability the
   client reported. */
.testi-dot {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.testi-dot::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(45, 79, 65, .25);
  transition: background .2s ease, width .2s ease;
}
.testi-dot.is-active::before {
  width: 22px;
  border-radius: 5px;
  background: #B59650;
}

/* ---------- home information slider (Figma: 7 slides, text right, image left) ---------- */
/* ------------------------------------------------------------------
   Home information slider. Measured off the Figma mobile frame (440):
   panel pinned 4 from the physical left and bleeding off the right edge,
   copy column 168 wide at 23, active shot 129.5x163 at 206, then a 12 gap
   and the NEXT shot peeking, smaller (123 tall) and bottom-aligned.
   The strip runs LTR in Figma: slide 1's dot is the leftmost and the
   following slide peeks on the right, so the direction is set explicitly
   rather than inherited from the RTL document.
   ------------------------------------------------------------------ */
.home-info { padding: 8px 0 40px; overflow-x: hidden; overflow-x: clip; }
.home-info > .container { width: 100%; max-width: none; padding: 0; }
.home-info-panel {
  position: relative;
  margin-left: calc(4 / 440 * 100vw);
  margin-right: calc(-70 / 440 * 100vw);   /* bleeds past the frame so the peek has room */
  padding: calc(20.5 / 440 * 100vw) 0 calc(10 / 440 * 100vw);
  border-radius: calc(30 / 440 * 100vw);   /* Figma 1:131 */
  background: #F1F1F1;                     /* Figma 1:131 */
}
.home-info-track {
  display: flex;
  direction: ltr;
  align-items: flex-start;
  gap: calc(14 / 440 * 100vw);
  padding-left: calc(23 / 440 * 100vw);
}

/* Copy column: every slide stays in the DOM. The inactive ones are stacked
   underneath at opacity 0 so the active one alone takes part in layout and
   the panel grows with whichever copy is showing. */
/* Locked to the shot height so the grey panel always measures Figma's 222, whatever
   the copy length. Four of the seven bodies are longer than the design allows for,
   so those scroll inside the column rather than stretching the box or being cut. */
.home-info-copies {
  position: relative;
  flex: 0 0 calc(220 / 440 * 100vw);
  height: calc(188 / 440 * 100vw);
  direction: rtl;
}
.home-info-slide {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #B59650 transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.home-info-slide.is-active { opacity: 1; pointer-events: auto; }
.home-info-slide::-webkit-scrollbar { width: 3px; }
.home-info-slide::-webkit-scrollbar-track { background: transparent; }
.home-info-slide::-webkit-scrollbar-thumb { background: #B59650; border-radius: 3px; }
.home-info-slide__copy h3 {
  margin: 0 0 calc(6 / 440 * 100vw);
  color: #2D4F41;
  font-family: var(--font-display);
  font-size: calc(13 / 440 * 100vw);
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
}
.home-info-slide__copy p {
  margin: 0;
  color: #6B6B6B;
  font-size: calc(11 / 440 * 100vw);
  font-weight: 400;
  /* Figma sets the body lines 14 apart, not the 20.35 that 1.85 was giving */
  line-height: calc(14 / 440 * 100vw);
  text-align: justify;
}

/* Image rail: all shots in a row, translated so the active one lands in the
   slot beside the copy and the next one peeks past the panel's right edge. */
/* Clipped, or the translated strip slides straight over the copy column. The rail's
   own box still runs to the panel's bled right edge, so the peek survives the clip. */
.home-info-rail { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.home-info-rail__strip {
  display: flex;
  align-items: flex-end;                    /* Figma bottom-aligns the peek with the active shot */
  gap: calc(12 / 440 * 100vw);
  transition: transform .45s cubic-bezier(.4, .16, .2, 1);
  will-change: transform;
}
.home-info-slide__media {
  flex: 0 0 calc(91 / 440 * 100vw);
  width: calc(91 / 440 * 100vw);
  margin: 0;
  transition: flex-basis .45s cubic-bezier(.4, .16, .2, 1), width .45s cubic-bezier(.4, .16, .2, 1);
}
.home-info-slide__media.is-active {
  flex-basis: calc(110 / 440 * 100vw);
  width: calc(110 / 440 * 100vw);
}
.home-info-slide__media img {
  display: block;
  width: 100%;
  height: calc(156 / 440 * 100vw);
  border: 0;
  border-radius: calc(18 / 440 * 100vw);
  object-fit: cover;
  transition: height .45s cubic-bezier(.4, .16, .2, 1);
}
.home-info-slide__media.is-active img {
  height: calc(188 / 440 * 100vw);
  border: 1.5px solid #B59650;
}

/* Dots. Figma: active 13 filled #D19D4E, the rest 8 hollow with a #0C524C ring,
   7 apart, first one on the left. The button stays 30 tall so it is tappable. */
.home-info-dots {
  display: flex;
  direction: ltr;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: calc(14 / 440 * 100vw);
  margin-right: calc(70 / 440 * 100vw);     /* re-centre on the frame, not on the bled panel */
  /* Figma gives the dot row 14 of height. The buttons stay 30 tall to be tappable and
     the negative margin keeps that extra out of the panel's height. */
  margin-block: calc(14 / 440 * 100vw) 0;
}
.home-info-dot {
  width: calc(15 / 440 * 100vw);
  height: 30px;
  margin-block: -8px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.home-info-dot::before {
  content: "";
  display: block;
  width: calc(8 / 440 * 100vw);
  height: calc(8 / 440 * 100vw);
  border: 1.5px solid #0C524C;
  border-radius: 50%;
  background: transparent;
  transition: width .2s ease, height .2s ease, background .2s ease, border-color .2s ease;
}
.home-info-dot.is-active::before {
  width: calc(13 / 440 * 100vw);
  height: calc(13 / 440 * 100vw);
  border-color: #D19D4E;
  background: #D19D4E;
}

@media (min-width: 761px) {
  .home-info-panel { padding: 34px 0 26px; margin-left: 20px; margin-right: -70px; }
  .home-info-track { gap: 26px; padding-left: 30px; }
  .home-info-copies { flex-basis: 380px; min-height: 340px; }
  .home-info-slide__copy h3 { font-size: 20px; }
  .home-info-slide__copy p { font-size: 15px; }
  .home-info-slide__media { flex-basis: 210px; width: 210px; }
  .home-info-slide__media.is-active { flex-basis: 280px; width: 280px; }
  .home-info-slide__media img { height: 256px; }
  .home-info-slide__media.is-active img { height: 340px; }
  .home-info-dots { margin-right: 70px; }
  .home-info-dot { width: 22px; }
  .home-info-dot::before { width: 10px; height: 10px; }
  .home-info-dot.is-active::before { width: 16px; height: 16px; }
}
}

/* Articles listing content column = 328 at 440, as measured on live. */
.blog-grid:not(.home-posts-grid) .blog-card-body { padding-inline: calc(12.5 / 440 * 100vw); }

/* Global card pieces (used on the home carousel too, which does not load woocommerce.css) */
.product-card { position: relative; }


/* The whole-card link carries its label for screen readers only; without this
   rule the label painted as white text at the top of every card. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	border: 0; white-space: nowrap;
}

/* «اتصلوا بنا»: the number is a tappable WhatsApp link, replacing the email line. */
.live-policy-wa { margin-top: 10px; }
.live-policy-wa a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.live-policy-wa svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* تواصل معنا: the number is a WhatsApp link and says so */
.ar-contact-link--wa .ar-contact-icon { color: #25D366; }
.ar-contact-link--wa .ar-contact-icon svg { width: 100%; height: 100%; }
.ar-contact-link--wa { flex-wrap: wrap; }
.ar-contact-link .ar-contact-link__hint,
.ar-contact-link--phone .ar-contact-link__hint {   /* outranks the number's span spacing rule */
  flex-basis: 100%;
  margin-top: 2px;
  color: #25D366;
  font-size: .82em;
  font-weight: 700;
  text-align: center;
  text-align-last: center;   /* the link inherits justify; a one-line hint must not stretch */
  word-spacing: normal;
  letter-spacing: normal;
  justify-content: center;
}

/* ------------------------------------------------------------------
   جمع عينات الشعر, client batch 3
   ------------------------------------------------------------------ */
/* note 10: the intro reads like the service-page lead (large, bold, dark green,
   centred), not a small justified block with stretched word gaps */
@media (max-width:760px) {
  .samples-hero p,
  .samples-hero__copy p + p {
    width: calc(380 / 440 * 100vw);
    max-width: 380px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.55;
    color: #2D4F41;
    text-align: center;
    text-align-last: center;
  }
}
/* note 13: the chooser looks the same on desktop as on the phone: light cards,
   dark-green type, gold «اختيار». The dark bordered cards were never in the design. */
.samples-types__grid a {
  min-height: 0;
  padding: 38px 30px 28px;
  gap: 6px;
  border: 0;
  border-radius: 30px;
  background: #F5F5F5;
  color: var(--green-800);
  box-shadow: none;
}
.samples-types__grid span { color: var(--green-800); font-weight: 300; font-size: clamp(16px, 1.8vw, 24px); line-height: 1.3; }
.samples-types__grid strong { color: var(--green-800); font-weight: 700; font-size: clamp(20px, 2.6vw, 34px); line-height: 1.3; }
.samples-types__cta {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  min-width: 96px;
  min-height: 38px;
  padding: 0 20px;
  border-radius: 10px;
  background: #B59650;
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}

/* ------------------------------------------------------------------
   طريقة أخذ عينة تحليل معادن الشعر, client batch 3 (Figma desktop 4031-3072,
   carried to the phone): a hero photo, a lead paragraph, then the approved شروط
   panel, then numbered steps on light panels: gold ring, caption, photo.
   ------------------------------------------------------------------ */
.sample-method__body .mz-figure--hero {
  width: min(100%, 300px);
  margin: 0 auto 22px;
}
.sample-method__body .mz-figure--hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(26 / 440 * 100vw);
}
.sample-method__body .mz-lead strong { font-weight: 800; color: var(--green-800); }
.sample-method__body .sample-method__step {
  position: relative;
  width: min(100%, 392px);
  margin: 0 auto 18px;
  padding: 22px 20px 20px;
  border-radius: 26px;
  background: #F0F0F1;
  color: var(--green-800);
  text-align: right;
}
.sample-method__body .sample-method__step-num {
  position: absolute;
  top: 18px;
  inset-inline-start: 18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid #B59650;
  border-radius: 50%;
  color: #B59650;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}
.sample-method__body .sample-method__step h3 {
  margin: 0 0 6px;
  padding-inline-start: 48px;
  color: var(--green-800);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  text-align: right;
}
.sample-method__body .sample-method__step p {
  width: auto;
  margin: 0 0 16px;
  padding-inline-start: 48px;
  color: var(--green-800);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.9;
  text-align: justify;
  text-align-last: right;
}
.sample-method__body .sample-method__step img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

/* ------------------------------------------------------------------
   طريقة أخذ العينة pages, client batch 4 (2026-10-13).
   The design is the Figma جمع عينات frame (1:648): each section is ONE
   dark-green card (.samples-step) holding its own steps, so nothing is
   separated inside a section; the only break is before the next heading.
   ------------------------------------------------------------------ */
/* Figma hero on these frames is 236x240, not the 300 it was rendering at */
.sample-method__body .mz-figure--hero {
  width: calc(236 / 440 * 100vw);
  max-width: 236px;
  margin: 0 auto 22px;
}
.sample-method__body .mz-figure--hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 236 / 241;
  object-fit: cover;
  border-radius: min(calc(50 / 440 * 100vw), 50px);
}
/* the lead paragraph: Figma body on these frames is ~13.7/27, not 18/30 */
.sample-method__body .mz-lead {
  width: calc(340 / 440 * 100vw);
  max-width: 340px;
  margin: 0 auto 30px;
  font-size: 13.7px;
  font-weight: 400;
  line-height: 27px;
  text-align: justify;
  text-align-last: center;
}
.sample-method__body .mz-lead strong { font-weight: 800; }

/* a step inside the dark-green card: its own caption, optional bold title, photo */
.samples-step__item { margin: 0 0 18px; }
.samples-step__item:last-child { margin-bottom: 0; }
.samples-step__item h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
}
.samples-step__item p {
  width: auto;
  margin: 0 0 14px;
  color: #fff;
  font-size: 13.7px;
  font-weight: 400;
  line-height: 27px;
  text-align: justify;
  text-align-last: center;
}
.samples-step__item img {
  display: block;
  width: min(100%, 241px);
  height: auto;
  margin: 0 auto;
  border-radius: min(calc(50 / 440 * 100vw), 50px);
}

/* شروط وتعليمات: Figma light panel #EFEDEF r22, gold dot, bold dark-green lead */
.sample-method__body .mz-terms {
  width: calc(362 / 440 * 100vw);
  max-width: 362px;
  margin: 0 auto;
  padding: 22px 20px;
  border-radius: 22px;
  background: #EFEDEF;
  list-style: none;
}
.sample-method__body .mz-terms li {
  position: relative;
  margin: 0 0 14px;
  padding-inline-start: 16px;
  color: var(--green-800);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 23px;
  text-align: justify;
  text-align-last: right;
}
.sample-method__body .mz-terms li:last-child { margin-bottom: 0; }
/* client 2026-10-18: this design is the approved one, gold dot and bold lead */
.sample-method__body .mz-terms li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .8em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #B59650;
}
.sample-method__body .mz-terms li strong { font-weight: 800; color: var(--green-800); }

/* عند الانتهاء: gold heading, dark-green body, bold sign-off, then the envelope art */
.sample-method__body .mz-finish { margin-top: 34px; text-align: center; }
.sample-method__body .mz-finish h2 {
  margin: 0 0 12px;
  color: #B59650;
  font-size: 19px;
  font-weight: 700;
  line-height: 28px;
}
.sample-method__body .mz-finish p {
  width: calc(340 / 440 * 100vw);
  max-width: 340px;
  margin: 0 auto 14px;
  font-size: 13.7px;
  font-weight: 400;
  line-height: 27px;
  text-align: justify;
  text-align-last: center;
}
.sample-method__body .mz-finish .mz-finish__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 14px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}
.sample-method__body .mz-finish .mz-finish__wa svg { width: 20px; height: 20px; flex: 0 0 auto; }
.sample-method__body .mz-finish .mz-finish__sign {
  margin: 0 auto;
  color: var(--green-800);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  text-align-last: center;
}
.sample-method__body .mz-envelope {
  width: calc(392 / 440 * 100vw);
  max-width: 392px;
  margin: 26px auto 0;
}
.sample-method__body .mz-envelope img { display: block; width: 100%; height: auto; border-radius: 22px; }
/* client 2026-10-18: the envelope sits directly under the «عند الانتهاء» heading */
.sample-method__body .mz-finish .mz-envelope { margin: 0 auto 18px; }