/*
 * Refinements layer (October 2026): loaded after every other stylesheet.
 * Styles the server-rendered SEO additions and tidies spacing, legibility and
 * motion on desktop and mobile. Content and order of the CMS text are unchanged.
 */

/* ---------- Home hero: the h1 keeps the brand line and adds the Jeddah line ---------- */
.clarity-hero-copy h1 .hero-display { display:block; }
.clarity-hero-copy h1 .hero-seo-line {
  display:block;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(215,181,109,.55);
  color:rgba(255,255,255,.88);
  font-size:clamp(13px,1.05vw,16px);
  font-weight:600;
  line-height:1.6;
  letter-spacing:0;
  width:fit-content;
  white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}

@media (max-width:860px) {
  .clarity-hero-copy h1 .hero-seo-line { width:max-content; max-width:100%; margin:8px auto 0; padding-top:6px; font-size:13px; white-space:normal; }
  .copy-left { top:236px; }
}
@media (max-width:650px) {
  .copy-left { top:216px; }
  .clarity-hero-copy h1 .hero-seo-line { margin-top:6px; font-size:12.5px; line-height:1.6; }
  /* CTA text was 10px; keep the buttons the same size but readable. */
  .hero-cta { font-size:12.5px; }
}

/* ---------- Detail pages: "في جدة" beside the procedure/device name ---------- */
.bs-h1-geo {
  display:inline-block;
  margin-inline-start:.2em;
  color:#a17b3c;
  font-size:.52em;
  font-weight:600;
  letter-spacing:0;
  vertical-align:.18em;
}

/* ---------- Additional SEO copy block ---------- */
.site-shell > .bs-seo { order:10; }
.bs-seo {
  position:relative;
  padding:clamp(56px,7vw,96px) max(20px,calc((100% - 1120px) / 2));
  color:#102d3d;
  background:linear-gradient(180deg,#faf9f6 0%,#f3efe6 100%);
  border-top:1px solid rgba(16,45,61,.08);
}
.compliance-body .bs-seo { margin-top:24px; border-radius:28px; }
.bs-seo-inner { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:24px clamp(32px,5vw,72px); align-items:start; }
.bs-seo-inner > header,
.bs-seo-inner > .bs-seo-body,
.bs-seo-inner > .bs-seo-points { grid-column:1; }
.bs-seo-inner > .bs-seo-faq { grid-column:2; grid-row:1 / span 4; }
.bs-seo-inner > .bs-seo-links,
.bs-seo-inner > .bs-seo-note { grid-column:1 / -1; }
.bs-seo-inner:not(:has(.bs-seo-faq)) { grid-template-columns:minmax(0,1fr); max-width:860px; }
.bs-seo header small {
  display:inline-block;
  padding:5px 14px;
  border-radius:999px;
  color:#765522;
  background:rgba(226,199,147,.24);
  font-size:12px;
  font-weight:600;
}
.bs-seo header h2 { margin:14px 0 0; color:#07182c; font-size:clamp(26px,2.6vw,38px); line-height:1.4; letter-spacing:-.5px; }
.bs-seo-body p { margin:0 0 14px; color:#3d5466; font-size:16px; line-height:2; }
.bs-seo-points { margin:6px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.bs-seo-points li { position:relative; padding:14px 18px; padding-inline-start:44px; border:1px solid rgba(161,123,60,.18); border-radius:16px; color:#24394a; background:rgba(255,255,255,.72); font-size:14.5px; line-height:1.85; }
.bs-seo-points li::before { content:'✦'; position:absolute; inset-inline-start:18px; top:14px; color:#b08a46; font-size:13px; }
.bs-seo-faq { padding:clamp(20px,2.4vw,30px); border:1px solid rgba(16,45,61,.08); border-radius:26px; background:#fff; box-shadow:0 24px 60px rgba(40,31,17,.07); }
.bs-seo-faq h3 { margin:0 0 10px; color:#07182c; font-size:19px; }
.bs-seo-faq details { border-top:1px solid rgba(16,45,61,.08); }
.bs-seo-faq details:first-of-type { border-top:0; }
.bs-seo-faq summary {
  position:relative;
  padding:16px 0;
  padding-inline-end:34px;
  color:#0c2740;
  font-size:15px;
  font-weight:700;
  line-height:1.7;
  list-style:none;
  cursor:pointer;
}
.bs-seo-faq summary::-webkit-details-marker { display:none; }
.bs-seo-faq summary::after {
  content:'+';
  position:absolute;
  inset-inline-end:0;
  top:50%;
  width:24px;
  height:24px;
  margin-top:-12px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#8b6730;
  background:rgba(226,199,147,.26);
  font-size:16px;
  line-height:1;
  transition:transform .25s ease;
}
.bs-seo-faq details[open] summary::after { transform:rotate(45deg); }
.bs-seo-faq summary:focus-visible { outline:2px solid #b08a46; outline-offset:4px; border-radius:6px; }
.bs-seo-faq details p { margin:0 0 16px; color:#4a5f70; font-size:14.5px; line-height:1.95; }
.bs-seo-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:8px; }
.bs-seo-links b { margin-inline-end:6px; color:#6b5a43; font-size:13px; }
.bs-seo-links a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:9px 18px;
  border:1px solid rgba(16,45,61,.14);
  border-radius:999px;
  color:#0c2740;
  background:#fff;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.bs-seo-links a span { color:#a17b3c; }
.bs-seo-links a:hover { border-color:#b08a46; background:#fffaf0; transform:translateY(-1px); }
.bs-seo-note { margin:4px 0 0; color:#7a8794; font-size:12.5px; line-height:1.8; }
html.is-english .bs-seo-inner { direction:ltr; text-align:left; }

@media (max-width:900px) {
  .bs-seo-inner { grid-template-columns:minmax(0,1fr); }
  .bs-seo-inner > .bs-seo-faq { grid-column:1; grid-row:auto; }
  .bs-seo-body p { font-size:15px; }
}
@media (max-width:600px) {
  .bs-seo { padding:48px 16px; }
  .bs-seo-points li { padding:12px 14px; padding-inline-start:38px; font-size:14px; }
  .bs-seo-points li::before { inset-inline-start:14px; top:12px; }
  .bs-seo-faq { padding:14px 18px; border-radius:20px; }
  .bs-seo-links a { flex:1 1 calc(50% - 10px); justify-content:space-between; }
}

/* ---------- Inner pages: one full footer instead of the small strip ---------- */
body.has-site-footer .inner-footer,
body.has-site-footer .bs-page-footer { display:none; }
body.has-site-footer > .site-footer { margin-top:0; }

/* ---------- Empty "before & after" placeholders stay out of home and detail pages ---------- */
[data-home-results]:has(.results-empty),
.catalog-detail .catalog-results:has(.results-empty) { display:none; }

/* ---------- Blog topics now filter the grid ---------- */
.blog-topics a[aria-pressed="true"] { color:#fff; border-color:#0c2740; background:#0c2740; }
.blog-topics a { font-size:12px; cursor:pointer; }

/* ---------- Home: About card sat under a 330px gap kept for the (now faint) 3D emblem ---------- */
@media (min-width:861px) {
  .about-section { padding-top:150px; }
}

/* ---------- Reviews: the card clipped its footer; slides no longer overlap mid-fade ---------- */
.review-stage { min-height:360px; }
.review-slide { transition:opacity .28s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s; }
.review-slide.is-active { transition:opacity .45s ease .22s,transform .55s cubic-bezier(.2,.8,.2,1) .22s,visibility 0s; }
.review-slide footer small,
.review-slide footer a { font-size:11px; }
.review-slide footer b { font-size:13px; }
@media (max-width:860px) { .review-stage { min-height:420px; } }

/* ---------- Legibility: lift labels that were 8–10px ---------- */
.section-chip { font-size:11px; }
.testimonial-score small { font-size:11px; }
.team-card p,
.team-card small { font-size:12px; line-height:1.85; }
@media (max-width:650px) {
  .about-copy > p:not(.section-chip) { font-size:13px; }
  .team-card p { font-size:12.5px; }
}

/* ---------- Article body: "## ", "### ", "- " and [text](link) written in the dashboard (renderer.php articleNodes()) ---------- */
.article-detail > article > h2 { margin:46px 0 14px; color:#07182c; font-size:clamp(21px,2vw,26px); line-height:1.65; }
.article-detail > article > h3 { margin:30px 0 10px; color:#173f68; font-size:clamp(17px,1.5vw,19px); line-height:1.7; }
.article-detail > article > ul { margin:0 0 24px; padding-inline-start:22px; color:#3d535d; font-size:17px; line-height:2.1; }
.article-detail > article > ul > li { margin:4px 0; }
.article-detail > article > ul > li::marker { color:#c59645; }
.article-detail > article > :is(p, ul, h2, h3) a { color:#173f68; font-weight:700; text-decoration:underline; text-decoration-color:rgba(197,150,69,.7); text-underline-offset:5px; }
.article-detail > article > :is(p, ul, h2, h3) a:hover { color:#a57a35; }
@media (max-width:600px) {
  .article-detail > article > h2 { margin-top:36px; }
  .article-detail > article > ul { font-size:15px; }
}

/* ---------- Home hero: service tags readable (were 8px, 72% opaque over the photo) ---------- */
.clarity-hero .treatment-tag {
  height:32px;
  padding:0 14px;
  color:#3f2d12;
  background:rgba(255,252,245,.94);
  border-color:rgba(177,126,51,.45);
  box-shadow:0 10px 24px rgba(20,14,6,.18);
  font-size:12px;
}
.clarity-hero .treatment-tag > i { flex-basis:6px; width:6px; height:6px; }

/* ---------- Top menu over the hero: one dark glass bar instead of translucent pills ---------- */
@media (min-width:861px) {
  .clarity-header:not(.is-compact):not(.menu-open) {
    background:rgba(4,16,30,.62);
    border-color:rgba(231,200,132,.16);
    box-shadow:0 18px 40px rgba(2,12,25,.22);
    backdrop-filter:blur(16px);
  }
  .clarity-header:not(.is-compact):not(.menu-open) .clarity-nav > a,
  .clarity-header:not(.is-compact):not(.menu-open) .nav-menu > a {
    color:rgba(255,255,255,.9);
    border-color:transparent;
    background:transparent;
    box-shadow:none;
    font-size:13.5px;
  }
  .clarity-header:not(.is-compact):not(.menu-open) .clarity-nav > a:hover,
  .clarity-header:not(.is-compact):not(.menu-open) .nav-menu:hover > a { color:#fff; background:rgba(255,255,255,.1); }
  .clarity-header:not(.is-compact):not(.menu-open) .clarity-nav > a.is-active,
  .clarity-header:not(.is-compact):not(.menu-open) .nav-menu > a.is-active { color:#06182e; background:#fff; border-color:#fff; }
  .clarity-header:not(.is-compact):not(.menu-open) .clarity-brand { border-color:rgba(231,200,132,.28); background:transparent; box-shadow:none; }
  .clarity-nav > a,
  .nav-menu > a { font-size:13.5px; }
}

/* ---------- Mobile hero: nothing floats over the face or the booking buttons ---------- */
@media (max-width:860px) {
  .clarity-hero .treatment-tag,
  .clarity-hero .beautystar-face-scan { display:none; }
  .clarity-slide-rail { display:none; }
  .clarity-hero-copy h1 .hero-seo-line { color:#fff; font-size:13.5px; }
  .hero-cta { font-size:13px; }
}
@media (max-width:650px) {
  /* WhatsApp sits above the two hero buttons instead of on top of them. */
  .whatsapp-float { bottom:96px; width:48px; height:48px; }
}

/* ---------- Inner pages: one page head for every page except home ----------
   List pages show a real room photo from the clinic's official gallery in an arch
   (assets/clinic-official, see ASSET-SOURCES-2026-10-12.md); detail and policy
   pages use the same head without a photo. Text and order come from the CMS unchanged. */
body.inner-body .bs-catalog-intro,
body.inner-body .inner-hero,
body.compliance-body .compliance-hero,
body.compliance-body .compliance-hero {
  --bs-head-ink:#04101e;
  position:relative;
  min-height:0;
  margin:0;
  padding:clamp(150px,13vw,184px) max(24px,calc((100% - 1180px) / 2)) clamp(52px,5.5vw,76px);
  display:block;
  overflow:hidden;
  isolation:isolate;
  text-align:start;
  color:#fff;
  background:
    radial-gradient(ellipse 55% 85% at 18% 35%,rgba(197,150,69,.24),transparent 62%),
    radial-gradient(ellipse 35% 55% at 96% 105%,rgba(197,150,69,.14),transparent 70%),
    linear-gradient(118deg,#04101e 0%,#0a1f33 52%,#11283c 100%);
  border:0;
  border-radius:0 0 44px 44px;
  box-shadow:0 26px 60px rgba(4,16,30,.16);
}
/* fine gold hairline along the bottom curve */
body.inner-body .bs-catalog-intro::before,
body.inner-body .inner-hero::before,
body.compliance-body .compliance-hero::before,
body.compliance-body .compliance-hero::before {
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  width:auto;
  height:1px;
  margin:0 44px;
  background:linear-gradient(90deg,transparent,rgba(231,200,132,.55),transparent);
  border:0;
  border-radius:0;
  box-shadow:none;
  clip-path:none;
  transform:none;
  opacity:1;
  z-index:0;
  pointer-events:none;
}
/* faint star mark on pages without a photo */
body.inner-body .bs-catalog-intro::after,
body.inner-body .inner-hero::after,
body.compliance-body .compliance-hero::after,
body.compliance-body .compliance-hero::after {
  content:'✦';
  position:absolute;
  inset:auto;
  left:max(32px,calc((100% - 1180px) / 2 + 40px));
  top:50%;
  width:auto;
  height:auto;
  transform:translateY(-30%);
  color:rgba(231,200,132,.18);
  background:none;
  font-size:clamp(96px,10vw,160px);
  line-height:1;
  z-index:-1;
  pointer-events:none;
}
body.inner-body :is(.bs-catalog-intro > span, .inner-hero .eyebrow),
body.compliance-body :is(.compliance-hero .eyebrow) {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:7px 15px;
  border:1px solid rgba(231,200,132,.34);
  border-radius:999px;
  color:#e9cb88;
  background:rgba(231,200,132,.08);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0;
}
body.inner-body :is(.bs-catalog-intro, .inner-hero) h1,
body.compliance-body :is(.compliance-hero) h1 {
  max-width:820px;
  margin:20px 0 0;
  color:#fff;
  font-size:clamp(34px,3.9vw,56px);
  font-weight:700;
  line-height:1.32;
  letter-spacing:-.5px;
  text-shadow:none;
}
body.inner-body :is(.bs-catalog-intro, .inner-hero) h1::after,
body.compliance-body :is(.compliance-hero) h1::after {
  content:'';
  display:block;
  width:72px;
  height:3px;
  margin-top:20px;
  border-radius:3px;
  background:linear-gradient(90deg,#b08a46,#ecd08f);
}
body.inner-body .bs-catalog-intro .bs-h1-geo { color:#e9cb88; }
body.inner-body .bs-catalog-intro > p,
body.inner-body .inner-hero > p:not(.eyebrow),
body.compliance-body .compliance-hero > p:not(.eyebrow) {
  max-width:600px;
  margin:18px 0 0;
  color:rgba(255,255,255,.78);
  font-size:16.5px;
  line-height:2;
}
body.inner-body .inner-hero > b,
body.inner-body .inner-hero-orbit { display:none; }
body.compliance-body .compliance-hero .company-identity { position:relative; z-index:1; margin-top:26px; color:rgba(255,255,255,.72); }
body.compliance-body .compliance-hero .company-identity * { color:inherit; border-color:rgba(231,200,132,.22); }

/* ---------- List pages: clinic photo in a gold-framed arch ---------- */
body[data-page="services"],
body[data-page="doctors"],
body[data-page="about"],
body[data-page="offers"] { --bs-head-img:url('/assets/clinic-official/treatment-room.jpg'); }
body[data-page="devices"],
body[data-page="blog"],
body[data-page="before-after"] { --bs-head-img:url('/assets/clinic-official/care-room.jpg'); }

@media (min-width:861px) {
  body:is([data-page="services"],[data-page="offers"],[data-page="devices"],[data-page="doctors"],[data-page="blog"],[data-page="about"],[data-page="before-after"]) :is(.bs-catalog-intro, .inner-hero) {
    min-height:500px;
    padding-bottom:84px;
  }
  body:is([data-page="services"],[data-page="offers"],[data-page="devices"],[data-page="doctors"],[data-page="blog"],[data-page="about"],[data-page="before-after"]) :is(.bs-catalog-intro, .inner-hero) > * {
    max-width:min(560px,52%);
    position:relative;
    z-index:1;
  }
  /* the arch */
  body:is([data-page="services"],[data-page="offers"],[data-page="devices"],[data-page="doctors"],[data-page="blog"],[data-page="about"],[data-page="before-after"]) :is(.bs-catalog-intro, .inner-hero)::after {
    content:'';
    left:max(28px,calc((100% - 1180px) / 2));
    top:118px;
    bottom:0;
    width:min(36%,430px);
    height:auto;
    transform:none;
    border-radius:230px 230px 0 0;
    background:var(--bs-head-img) center 40% / cover no-repeat;
    box-shadow:0 0 0 9px rgba(4,16,30,.9),0 0 0 10px rgba(231,200,132,.55),0 30px 70px rgba(0,0,0,.35);
    z-index:0;
  }
  /* caption on the arch: these are real clinic rooms */
  body:is([data-page="services"],[data-page="offers"],[data-page="devices"],[data-page="doctors"],[data-page="blog"],[data-page="about"],[data-page="before-after"]) :is(.bs-catalog-intro, .inner-hero)::before {
    content:'من داخل عيادات نجمة الجمال';
    inset:auto;
    left:calc(max(28px,calc((100% - 1180px) / 2)) + min(18%,215px));
    bottom:26px;
    width:max-content;
    height:auto;
    margin:0;
    padding:7px 14px;
    transform:translateX(-50%);
    border:1px solid rgba(231,200,132,.4);
    border-radius:999px;
    color:#f3dfae;
    background:rgba(4,16,30,.72);
    backdrop-filter:blur(8px);
    font-size:12px;
    font-weight:600;
    z-index:1;
  }
  html.is-english body:is([data-page="services"],[data-page="offers"],[data-page="devices"],[data-page="doctors"],[data-page="blog"],[data-page="about"],[data-page="before-after"]) :is(.bs-catalog-intro, .inner-hero)::before { content:'Inside Beauty Star Clinics'; }
  html.is-english body:is([data-page="services"],[data-page="offers"],[data-page="devices"],[data-page="doctors"],[data-page="blog"],[data-page="about"],[data-page="before-after"]) :is(.bs-catalog-intro, .inner-hero)::after { left:auto; right:max(28px,calc((100% - 1180px) / 2)); }
  html.is-english body:is([data-page="services"],[data-page="offers"],[data-page="devices"],[data-page="doctors"],[data-page="blog"],[data-page="about"],[data-page="before-after"]) :is(.bs-catalog-intro, .inner-hero)::before { left:auto; right:calc(max(28px,calc((100% - 1180px) / 2)) + min(18%,215px)); transform:translateX(50%); }
}

@media (max-width:860px) {
  body.inner-body .bs-catalog-intro,
  body.inner-body .inner-hero,
  body.compliance-body .compliance-hero { padding:116px 20px 46px; border-radius:0 0 30px 30px; text-align:center; }
  body.inner-body :is(.bs-catalog-intro, .inner-hero) h1,
  body.compliance-body .compliance-hero h1 { margin-inline:auto; font-size:clamp(28px,7.6vw,38px); }
  body.inner-body :is(.bs-catalog-intro, .inner-hero) h1::after,
  body.compliance-body .compliance-hero h1::after { margin-inline:auto; }
  body.inner-body .bs-catalog-intro > p,
  body.inner-body .inner-hero > p:not(.eyebrow),
  body.compliance-body .compliance-hero > p:not(.eyebrow) { margin-inline:auto; font-size:14.5px; }
  body.inner-body .bs-catalog-intro::after,
  body.inner-body .inner-hero::after,
  body.compliance-body .compliance-hero::after { left:50%; top:auto; bottom:-24px; transform:translateX(-50%); color:rgba(231,200,132,.09); font-size:120px; }
  /* list pages: the clinic photo sits behind the text */
  body:is([data-page="services"],[data-page="offers"],[data-page="devices"],[data-page="doctors"],[data-page="blog"],[data-page="about"],[data-page="before-after"]) :is(.bs-catalog-intro, .inner-hero) {
    padding-top:128px;
    padding-bottom:54px;
    background:
      linear-gradient(180deg,rgba(4,16,30,.9) 0%,rgba(4,16,30,.72) 45%,rgba(4,16,30,.92) 100%),
      var(--bs-head-img) center / cover no-repeat;
  }
}

/* ---------- Policy and contact pages (compliance-pages.js / renderer.php): these classes had no styles ---------- */
.compliance-body .policy-document {
  width:min(980px,calc(100% - 40px));
  margin:44px auto 64px;
  padding:clamp(22px,3.4vw,44px);
  border:1px solid rgba(16,45,61,.08);
  border-radius:28px;
  color:#24394a;
  background:#fff;
  box-shadow:0 24px 60px rgba(40,31,17,.06);
}
.compliance-body .policy-meta {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(16,45,61,.08);
  color:#7a8794;
  font-size:13px;
}
.compliance-body .policy-meta a { padding:8px 16px; border-radius:999px; color:#fff; background:#0c2740; font-weight:600; text-decoration:none; }
.compliance-body .policy-language-en { display:none; }
html.is-english .compliance-body .policy-language-ar { display:none; }
html.is-english .compliance-body .policy-language-en { display:block; }
.compliance-body .policy-section { padding:22px 0; border-top:1px solid rgba(16,45,61,.07); }
.compliance-body .policy-language > .policy-section:first-child,
.compliance-body .contact-compliance-grid + .policy-section { border-top:0; }
.compliance-body .policy-section h2 { margin:0 0 10px; color:#07182c; font-size:clamp(18px,1.7vw,21px); line-height:1.7; }
.compliance-body .policy-section p,
.compliance-body .policy-section li { margin:0 0 10px; color:#3d5466; font-size:15.5px; line-height:2; }
.compliance-body .policy-section ul { margin:0; padding-inline-start:20px; }
.compliance-body .policy-section a { color:#173f68; font-weight:700; text-decoration:underline; text-decoration-color:rgba(197,150,69,.7); text-underline-offset:4px; }
.compliance-body .contact-compliance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:26px; }
.compliance-body .contact-compliance-grid a {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:22px;
  border:1px solid rgba(161,123,60,.2);
  border-radius:22px;
  color:#0c2740;
  background:linear-gradient(180deg,#fffdf8,#f7f1e6);
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.compliance-body .contact-compliance-grid a:hover { transform:translateY(-3px); border-color:#b08a46; box-shadow:0 18px 36px rgba(52,37,18,.1); }
.compliance-body .contact-compliance-grid i { width:42px; height:42px; margin-bottom:6px; border-radius:50%; display:grid; place-items:center; color:#e7c884; background:#0c2740; font-size:16px; }
.compliance-body .contact-compliance-grid span { color:#8b6730; font-size:13px; font-weight:600; }
.compliance-body .contact-compliance-grid b { font-size:18px; }
.compliance-body .contact-compliance-grid small { color:#6b7a88; font-size:12.5px; line-height:1.8; }
body.compliance-body .compliance-hero .company-identity { display:flex; flex-wrap:wrap; gap:8px; }
body.compliance-body .compliance-hero .company-identity span { padding:6px 13px; border:1px solid rgba(231,200,132,.22); border-radius:999px; color:rgba(255,255,255,.72); font-size:12.5px; }
body.compliance-body .compliance-hero .eyebrow > span:empty { display:none; }
@media (max-width:860px) {
  .compliance-body .contact-compliance-grid { grid-template-columns:1fr; }
  body.compliance-body .compliance-hero .company-identity { justify-content:center; }
  .compliance-body .policy-section p, .compliance-body .policy-section li { font-size:14.5px; }
}

/* ---------- Mobile menu: the label opens the page, the round arrow opens the sub-list (prototype-shell.js / prototype-home.js) ---------- */
@media (max-width:940px) {
  .clarity-header.menu-open .nav-menu > a { position:relative; }
  .clarity-header.menu-open .nav-menu > a > i {
    position:absolute;
    inset-inline-end:6px;
    top:50%;
    width:34px;
    height:34px;
    margin:0;
    transform:translateY(-50%);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#e7c884;
    background:rgba(255,255,255,.1);
    font-style:normal;
    line-height:1;
    cursor:pointer;
  }
  .clarity-header.menu-open .nav-menu.submenu-open > a > i { transform:translateY(-50%) rotate(180deg); background:rgba(231,200,132,.22); }
}

/* ---------- Phones: two cards per row on services, offers, devices and "related" grids ---------- */
@media (max-width:650px) {
  .bs-service-grid,
  .bs-catalog-grid,
  .inner-body .bs-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px; }
  .bs-service-grid > .catalog-card,
  .bs-catalog-grid > .catalog-card { min-width:0; border-radius:18px; }
  :is(.bs-service-grid, .bs-catalog-grid) > .catalog-card figure { height:auto; aspect-ratio:1 / 1; margin:0; }
  :is(.bs-service-grid, .bs-catalog-grid) > .catalog-card figure img { width:100%; height:100%; object-fit:cover; }
  :is(.bs-service-grid, .bs-catalog-grid) > .catalog-card figure > span { display:none; }
  :is(.bs-service-grid, .bs-catalog-grid) > .catalog-card > div { padding:12px 12px 14px; }
  :is(.bs-service-grid, .bs-catalog-grid) > .catalog-card :is(h2, h3) { margin:0 0 4px; font-size:15.5px !important; line-height:1.5; }
  :is(.bs-service-grid, .bs-catalog-grid) > .catalog-card > div > :is(b, small, em, strong) { font-size:12px; }
  :is(.bs-service-grid, .bs-catalog-grid) > .catalog-card p {
    margin:0;
    font-size:12.5px !important;
    line-height:1.7;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* ---------- Login / sign-up: brand panel beside the form (prototype-pages.js login, form from beautystar-api.js hydrateLogin) ---------- */
body[data-page="login"] .auth-layout {
  width:min(1080px,calc(100% - 40px));
  margin:-40px auto 80px;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  border:1px solid rgba(161,123,60,.18);
  border-radius:32px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 30px 80px rgba(4,16,30,.14);
}
body[data-page="login"] .auth-brand {
  order:2;
  position:relative;
  isolation:isolate;
  min-height:660px;
  padding:clamp(32px,4vw,52px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:16px;
  color:#fff;
  background:linear-gradient(180deg,rgba(4,16,30,.1) 0%,rgba(4,16,30,.15) 48%,rgba(4,16,30,.9) 70%,#04101e 100%),url('/beautystar-hero-champagne.png') center top / cover no-repeat;
  background-color:#04101e;
}
body[data-page="login"] .auth-brand-logo { position:absolute; top:28px; inset-inline-start:clamp(28px,4vw,48px); width:210px; height:76px; object-fit:cover; object-position:center; }
body[data-page="login"] .auth-brand h2 { margin:0; color:#fff; font-size:clamp(22px,2.2vw,28px); line-height:1.5; }
body[data-page="login"] .auth-brand ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
body[data-page="login"] .auth-brand li { position:relative; padding-inline-start:30px; color:rgba(255,255,255,.86); font-size:15px; line-height:1.8; }
body[data-page="login"] .auth-brand li::before { content:'✓'; position:absolute; inset-inline-start:0; top:3px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; color:#04101e; background:#e7c884; font-size:11px; font-weight:700; }
body[data-page="login"] .auth-brand small { color:rgba(255,255,255,.62); font-size:12.5px; }
body[data-page="login"] .auth-brand small a { color:#e7c884; }
body[data-page="login"] .auth-layout > .auth-card {
  order:1;
  width:auto;
  margin:0;
  padding:clamp(28px,4vw,52px);
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#fff;
}
body[data-page="login"] .auth-card .customer-auth-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin:0 0 26px;
  padding:5px;
  border-radius:999px;
  background:#f3eee4;
}
body[data-page="login"] .auth-card .customer-auth-tabs button {
  min-height:44px;
  border:0;
  border-radius:999px;
  color:#5b6774;
  background:transparent;
  font:700 14px Cairo,sans-serif;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
body[data-page="login"] .auth-card .customer-auth-tabs button[aria-pressed="true"] { color:#fff; background:#0c2740; box-shadow:0 8px 18px rgba(12,39,64,.22); }
body[data-page="login"] .auth-card h2 { margin:0 0 6px; color:#07182c; font-size:clamp(22px,2vw,26px); }
body[data-page="login"] .auth-card .auth-intro { margin:0 0 22px; color:#5b6774; font-size:15px; }
body[data-page="login"] .auth-card form { display:grid; gap:16px; }
body[data-page="login"] .auth-card form > label { margin:0; display:block; color:#173042; font-size:14px; font-weight:600; }
body[data-page="login"] .auth-card form > label > input:not([type="checkbox"]) { display:block; margin-top:8px; }
body[data-page="login"] .auth-card form > label > span { color:#c0392b; }
body[data-page="login"] .auth-card form input:not([type="checkbox"]) {
  width:100%;
  min-height:52px;
  padding:12px 16px;
  border:1px solid #dcd3c3;
  border-radius:14px;
  color:#07182c;
  background:#fbfaf7;
  font:500 16px Cairo,sans-serif;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
body[data-page="login"] .auth-card form input:not([type="checkbox"]):focus { outline:0; border-color:#b08a46; background:#fff; box-shadow:0 0 0 4px rgba(197,150,69,.16); }
body[data-page="login"] .auth-card form > p { margin:-4px 0 0; color:#7a8794; font-size:13px; line-height:1.8; }
body[data-page="login"] .auth-card form > label.customer-consent { position:relative; display:block; padding-inline-start:28px; color:#3d5466; font-size:13.5px; font-weight:500; line-height:1.8; }
body[data-page="login"] .auth-card .customer-consent input { position:absolute; inset-inline-start:0; top:4px; width:18px; height:18px; margin:0; accent-color:#0c2740; }
body[data-page="login"] .auth-card .customer-consent a { color:#173f68; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
body[data-page="login"] .auth-card form button[type="submit"] {
  min-height:54px;
  border:0;
  border-radius:999px;
  color:#1d1407;
  background:linear-gradient(135deg,#ecd08f,#c59645);
  font:700 16px Cairo,sans-serif;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(176,138,70,.3);
  transition:transform .2s ease,box-shadow .2s ease;
}
body[data-page="login"] .auth-card form button[type="submit"]:hover { transform:translateY(-2px); box-shadow:0 18px 36px rgba(176,138,70,.36); }
body[data-page="login"] .auth-card form button[type="submit"]:disabled { opacity:.6; cursor:wait; transform:none; }
body[data-page="login"] .auth-card form button[data-login-restart] { min-height:46px; border:1px solid #dcd3c3; border-radius:999px; color:#173042; background:#fff; font:600 14px Cairo,sans-serif; cursor:pointer; }
body[data-page="login"] .auth-card form output { color:#b03a2e; font-size:13.5px; }
@media (max-width:860px) {
  body[data-page="login"] .auth-layout { grid-template-columns:1fr; margin-top:-24px; border-radius:26px; width:calc(100% - 28px); }
  body[data-page="login"] .auth-brand { min-height:0; padding:330px 24px 26px; background-size:cover, 100% auto; background-position:center, center top; background-color:#04101e; }
  body[data-page="login"] .auth-brand-logo { top:20px; inset-inline-start:50%; transform:translateX(50%); width:180px; height:64px; }
  html.is-english body[data-page="login"] .auth-brand-logo { transform:translateX(-50%); }
  body[data-page="login"] .auth-brand h2 { text-align:center; }
  body[data-page="login"] .auth-layout > .auth-card { padding:26px 20px 30px; }
}

/* ---------- Price selector: consultation-only prices (catalog-ui.js, offers.is_consult_only) ---------- */
.choice-summary strong > small.choice-from { margin-inline-end:6px; color:#8b6730; font-size:15px; }
.choice-summary em { display:block; margin-top:8px; color:#8b6730; font-size:13px; font-style:normal; line-height:1.8; }
.choice-actions a[data-choice-book] { display:inline-flex; align-items:center; padding:12px 20px; border-radius:24px; color:#fff; background:#0b263e; font:700 13px Cairo,sans-serif; text-decoration:none; }

/* ---------- 404 / 410 page ---------- */
.bs-not-found-links { justify-content:center; padding:36px 16px 80px; }

/* ---------- Price list on treatment & device pages (sizes grouped, section chips, sticky booking bar) ---------- */
.catalog-detail-top > .choice-panel { min-width:0; }
.price-chips { display:flex; gap:8px; overflow-x:auto; margin:0 0 14px; padding-bottom:4px; scrollbar-width:none; }
.price-chips::-webkit-scrollbar { display:none; }
.price-chips button { flex:none; font:600 13px Cairo,sans-serif; border:1px solid #e3d9c6; background:#fff; color:#0b263e; border-radius:999px; padding:7px 15px; cursor:pointer; }
.price-chips button small { opacity:.6; margin-inline-start:3px; }
.price-chips button[aria-pressed="true"] { background:#0b263e; border-color:#0b263e; color:#fff; }
.price-list { list-style:none; margin:0; padding:0; background:#fff; border:1px solid #e6dfd1; border-radius:20px; overflow:hidden; }
.price-row { border-bottom:1px solid #eee6d8; transition:background .15s; }
.price-row:last-child { border-bottom:0; }
.price-row[hidden], .price-panel:not(.is-open) .price-row.is-more { display:none; }
.price-row.is-selected { background:#fffaf1; }
.price-pick { display:flex; align-items:center; gap:12px; width:100%; padding:15px 18px; background:none; border:0; font-family:inherit; text-align:right; color:#0b263e; cursor:pointer; }
.price-pick::before { content:""; flex:none; width:20px; height:20px; border-radius:50%; border:2px solid #ddd3c1; box-sizing:border-box; }
.price-row.is-selected .price-pick::before { border-color:#b78a39; background:radial-gradient(circle,#b78a39 0 45%,transparent 50%); }
.price-name { flex:1; font-weight:700; font-size:15px; line-height:1.55; }
.price-name small { display:block; font-weight:500; font-size:12px; color:#7a8794; }
.price-tag { white-space:nowrap; font-size:13px; text-align:left; }
.price-tag b { font-size:17px; font-weight:800; margin-inline-end:3px; }
.price-tag small { display:block; font-size:11px; font-weight:700; color:#a47d38; }
.price-options { display:none; flex-wrap:wrap; gap:8px; padding:0 50px 14px 18px; }
[aria-expanded="true"] + .price-options { display:flex; }
.price-options button { font:600 13px Cairo,sans-serif; border:1px solid #e6dfd1; background:#f8f5ef; border-radius:12px; padding:7px 12px; cursor:pointer; color:#0b263e; text-align:center; line-height:1.5; }
.price-options button b { display:block; font-size:12px; color:#a47d38; }
.price-options button[aria-pressed="true"] { border-color:#b78a39; background:#f3ead9; }
.price-note { padding:0 50px 14px 18px; }
.price-note p { margin:0 0 4px; font-size:12.5px; line-height:1.8; color:#607184; }
.price-more { display:block; width:100%; margin-top:10px; background:#fff; border:1px dashed #d8b875; border-radius:16px; padding:12px; font:700 14px Cairo,sans-serif; color:#8b6730; cursor:pointer; }
.price-more[hidden] { display:none; }
.price-chips button:focus-visible, .price-pick:focus-visible, .price-options button:focus-visible, .price-more:focus-visible { outline:3px solid #a47c39; outline-offset:2px; }
.choice-dock { position:sticky; bottom:12px; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:16px; padding:14px 16px; background:#fff; border:1px solid #e6dfd1; border-radius:20px; box-shadow:0 12px 34px rgba(7,24,44,.14); }
.choice-dock[hidden] { display:none; }
.choice-dock .choice-summary { flex:1 1 170px; margin:0; padding:0; min-height:0; background:none; }
.choice-dock .choice-summary h3 { margin:0 0 2px; font-size:14px; line-height:1.5; }
.choice-dock .choice-summary strong { font-size:24px; line-height:1.3; }
.choice-dock .choice-actions { margin:0; gap:8px; }
.choice-dock .choice-actions output:empty { display:none; }
@media (max-width:800px) {
  .price-pick { padding:14px; gap:10px; }
  .price-name { font-size:14px; }
  .price-options, .price-note { padding-inline:44px 14px; }
  .choice-dock { bottom:8px; padding:12px; }
  .choice-dock .choice-actions { flex:1 1 100%; }
  .choice-dock .choice-actions > * { flex:1 1 auto; padding:11px 12px; font-size:12.5px; justify-content:center; }
}

/* ---------- Time-limited offers («العروض»): home carousel, offers page, «عرض خاص» on treatment pages ---------- */
.promo-card { display:flex; flex-direction:column; background:#fff; border:1px solid #e6dfd1; border-radius:24px; overflow:hidden; color:#0b263e; text-decoration:none; box-shadow:0 14px 34px rgba(7,24,44,.07); transition:transform .2s, box-shadow .2s; }
.promo-card:hover { transform:translateY(-3px); box-shadow:0 20px 40px rgba(7,24,44,.12); }
.promo-card figure { position:relative; margin:0; aspect-ratio:5/4; background:#f3ead9; overflow:hidden; }
.promo-card figure img { width:100%; height:100%; object-fit:cover; display:block; }
.promo-card figure .catalog-image-empty { display:flex; align-items:center; justify-content:center; height:100%; font-weight:700; color:#8b6730; }
.promo-badge { display:inline-block; background:#c2457a; color:#fff; font:800 12px Cairo,sans-serif; border-radius:999px; padding:4px 12px; }
.promo-card .promo-badge { position:absolute; top:14px; right:14px; }
.promo-save { position:absolute; top:14px; left:14px; background:#fff; color:#c2457a; font:800 12px Cairo,sans-serif; border-radius:999px; padding:4px 11px; }
.promo-card > div { display:flex; flex-direction:column; gap:4px; padding:16px 18px 18px; flex:1; }
.promo-card > div > small { color:#7a8794; font-size:12px; font-weight:600; }
.promo-card h3 { margin:0; font-size:18px; line-height:1.5; }
.promo-price { display:flex; align-items:baseline; gap:10px; margin:6px 0 0; }
.promo-price b { font-size:22px; font-weight:800; color:#c2457a; }
.promo-price s { font-size:14px; color:#9a9a9a; }
.promo-ends { display:block; color:#a47d38; font-size:12px; font-weight:700; }
.promo-card .promo-cta { display:block; margin-top:auto; text-align:center; background:#0b263e; color:#fff; border-radius:14px; padding:10px; font-weight:800; font-size:14px; }
.bs-home-track > .promo-card { flex:0 0 calc((100% - 44px)/3); scroll-snap-align:start; min-width:0; text-align:right; }
.bs-icon { width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em; }
.promo-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:clamp(400px,36vw,520px); padding:clamp(112px,9vw,128px) clamp(20px,5vw,72px) 44px; border-radius:0 0 36px 36px; color:#0b263e;
  background:
    radial-gradient(ellipse 60% 70% at 72% 40%, rgba(255,255,255,.85) 0, rgba(255,255,255,0) 70%),
    linear-gradient(135deg, #fde9f1 0%, #fbd6e4 50%, #f7c2d6 100%); }
.promo-hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 14px 7px at 58% 22%, rgba(236,120,163,.55) 0 98%, transparent 100%),
    radial-gradient(ellipse 11px 6px at 92% 30%, rgba(236,120,163,.45) 0 98%, transparent 100%),
    radial-gradient(ellipse 16px 8px at 84% 78%, rgba(236,120,163,.5) 0 98%, transparent 100%),
    radial-gradient(ellipse 10px 5px at 64% 86%, rgba(236,120,163,.4) 0 98%, transparent 100%),
    radial-gradient(ellipse 12px 6px at 97% 62%, rgba(236,120,163,.45) 0 98%, transparent 100%); }
.promo-hero-visual { position:absolute; top:0; bottom:0; left:0; width:54%;
  background:url("campaigns/pink-october-hero.jpg") 30% 22% / cover no-repeat;
  background-image:image-set(url("campaigns/pink-october-hero.webp") type("image/webp"), url("campaigns/pink-october-hero.jpg") type("image/jpeg"));
  -webkit-mask-image:linear-gradient(to right, #000 58%, transparent 100%); mask-image:linear-gradient(to right, #000 58%, transparent 100%); }
.promo-hero-copy { grid-column:1; position:relative; z-index:1; text-align:center; }
.promo-hero-brand { margin:0; font:700 13px Cairo,sans-serif; letter-spacing:3px; color:#4b5563; }
.promo-hero h1 { margin:10px 0 10px; font-size:clamp(36px,4.6vw,64px); font-weight:800; line-height:1.25; color:#0b263e; }
.promo-hero-accent { background:linear-gradient(90deg,#d6457f,#b8326b); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; }
.promo-ribbon { width:.5em; height:.7em; margin-inline-start:.12em; vertical-align:.05em; fill:none; stroke:#e46a9b; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.promo-hero p { margin:0 auto; max-width:520px; font-size:17px; line-height:1.9; color:#334155; }
.promo-hero-cta { display:inline-flex; align-items:center; gap:10px; margin-top:24px; background:linear-gradient(135deg,#d94d88,#b8326b); color:#fff; border-radius:999px; padding:14px 34px; font:800 16px Cairo,sans-serif; text-decoration:none; box-shadow:0 12px 28px rgba(194,69,122,.35); transition:transform .2s; }
.promo-hero-cta:hover { transform:translateY(-2px); }
.promo-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:1260px; margin:26px auto 0; padding:0 24px; }
.promo-tabs a { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:#fff; border:1px solid #f0d6e1; color:#0b263e; border-radius:18px; padding:12px 20px; font:700 15px Cairo,sans-serif; text-decoration:none; box-shadow:0 6px 18px rgba(194,69,122,.06); transition:border-color .2s, background .2s; }
.promo-tabs a .bs-icon { font-size:22px; color:#c2457a; }
@media (min-width:801px) { .promo-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } .promo-tabs a { padding:12px 10px; font-size:14px; } .promo-tabs a[aria-pressed="true"] { padding:11px 9px; } }
@media (min-width:1101px) { .promo-tabs { grid-template-columns:repeat(7,minmax(0,1fr)); } }
.promo-tabs a:hover { border-color:#e79ab9; }
.promo-tabs a[aria-pressed="true"] { border:2px solid #c2457a; background:#fff6fa; color:#c2457a; padding:11px 19px; }
.promo-list { max-width:1260px; margin:0 auto; padding:8px 24px 24px; }
.promo-section { scroll-margin-top:100px; padding-top:30px; }
.promo-section[hidden] { display:none; }
.promo-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px; }
.promo-section-head h2 { margin:0; font-size:28px; color:#0b263e; display:flex; align-items:center; gap:10px; }
.promo-section-head h2::before { content:""; width:10px; height:10px; border-radius:50%; background:#c2457a; box-shadow:0 0 0 5px #fbe1eb; }
.promo-section-head p { margin:4px 0 0; color:#64748b; font-size:13.5px; }
.promo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.promo-offer { display:flex; flex-direction:column; overflow:hidden; border-radius:22px; border:1px solid #f3d6e1; background:#fff; color:#0b263e; text-decoration:none; box-shadow:0 12px 30px rgba(194,69,122,.08); transition:transform .2s, box-shadow .2s; }
.promo-offer:hover { transform:translateY(-3px); box-shadow:0 18px 38px rgba(194,69,122,.16); }
.promo-offer figure { position:relative; margin:0; aspect-ratio:4/3; overflow:hidden; background:#fbe3ec url("campaigns/pink-october-face.jpg") center 25% / cover no-repeat; }
.promo-offer figure img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.promo-offer:hover figure img { transform:scale(1.04); }
/* Device photos on white: show the whole device instead of cropping it */
.promo-offer figure img[src*="-device."], .promo-card figure img[src*="-device."] { object-fit:contain; background:#fff; padding:8px; box-sizing:border-box; }
.promo-offer:hover figure img[src*="-device."] { transform:scale(1.02); }
.promo-offer figure .catalog-image-empty { display:none; }
.promo-offer figure::after { content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(to top, rgba(194,69,122,.22), transparent); pointer-events:none; }
.promo-offer .promo-tag { position:absolute; top:12px; right:12px; z-index:1; background:rgba(255,255,255,.94); box-shadow:0 4px 14px rgba(7,24,44,.12); }
.promo-tag { display:inline-flex; align-items:center; gap:6px; border:1px solid #f6cfe0; color:#c2457a; border-radius:999px; padding:4px 12px; font:700 12px Cairo,sans-serif; }
.promo-tag .bs-icon { font-size:15px; }
.promo-offer-body { flex:1; display:flex; flex-direction:column; gap:6px; padding:16px; background:linear-gradient(180deg,#fff 0%,#fff7fa 100%); }
.promo-offer h3 { margin:0; font-size:16px; line-height:1.6; color:#0b263e; }
.promo-offer-summary { margin:0; font-size:12.5px; line-height:1.7; color:#64748b; }
.promo-offer .promo-price { margin:2px 0 0; }
.promo-offer .promo-price b { font-size:24px; }
.promo-offer .promo-cta { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px; background:#0b263e; color:#fff; border-radius:14px; padding:11px 14px; font:800 14px Cairo,sans-serif; }
.promo-offer:focus-visible, .promo-tabs a:focus-visible, .promo-hero-cta:focus-visible { outline:3px solid #a47c39; outline-offset:3px; }
.promo-prices { max-width:1260px; margin:12px auto 0; padding:10px 0 0; }
.promo-prices > header { padding:0 24px; }
.promo-prices > header small { color:#a47d38; font-weight:700; font-size:13px; }
.promo-prices > header h2 { margin:2px 0 6px; font-size:26px; }
.promo-deals { display:flex; gap:12px; margin:0 0 24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.promo-deals::-webkit-scrollbar { display:none; }
.promo-deal { position:relative; flex:0 0 88%; scroll-snap-align:start; display:flex; min-height:176px; overflow:hidden; border:1.5px solid #e79ab9; border-radius:22px; background:linear-gradient(135deg,#fff 0%,#fff4f8 60%,#fde4ee 100%); }
.promo-deal:only-child { flex-basis:100%; }
.promo-deal-visual { position:absolute; top:0; bottom:0; left:0; width:42%;
  background:url("campaigns/pink-october-face.jpg") 40% 25% / cover no-repeat;
  background-image:image-set(url("campaigns/pink-october-face.webp") type("image/webp"), url("campaigns/pink-october-face.jpg") type("image/jpeg"));
  -webkit-mask-image:linear-gradient(to right, #000 50%, transparent 100%); mask-image:linear-gradient(to right, #000 50%, transparent 100%); }
.promo-deal-body { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 18px; padding-inline-end:38%; }
.promo-deal .promo-badge { display:inline-flex; align-items:center; gap:6px; }
.promo-deal h3 { margin:2px 0 0; font-size:18px; line-height:1.5; color:#0b263e; }
.promo-deal-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:auto; }
.promo-deal .promo-price { margin:0; }
.promo-deal .promo-price b { font-size:28px; }
.promo-pick { display:inline-flex; align-items:center; gap:8px; background:#0b263e; color:#fff; border:0; border-radius:14px; padding:11px 18px; font:800 14px Cairo,sans-serif; cursor:pointer; }
.promo-pick[aria-pressed="true"] { background:#c2457a; }
.promo-pick:focus-visible, .promo-card:focus-visible { outline:3px solid #a47c39; outline-offset:3px; }
.choice-panel > small::before { content:""; display:inline-block; width:22px; height:2px; margin-inline-end:8px; vertical-align:middle; background:currentColor; }
.choice-dock.is-promo { border-color:#f3cfe0; background:linear-gradient(135deg,#fff 0%,#fff4f8 100%); overflow:hidden; }
.choice-dock.is-promo .choice-summary strong { color:#c2457a; }
.choice-dock .choice-actions button i { margin-inline-end:4px; }
@media (max-width:800px) {
  .bs-home-track > .promo-card { flex-basis:78%; }
  .promo-hero { display:flex; flex-direction:column; min-height:0; gap:18px; padding:108px 14px 30px; border-radius:0 0 28px 28px; }
  .promo-hero-visual { position:relative; order:-1; top:auto; bottom:auto; left:auto; width:100%; aspect-ratio:1/1; max-height:360px; border-radius:26px; background:url("campaigns/pink-october-hero-m.jpg") center 18% / cover no-repeat; background-image:image-set(url("campaigns/pink-october-hero-m.webp") type("image/webp"), url("campaigns/pink-october-hero-m.jpg") type("image/jpeg")); background-position:center 18%; background-size:cover; -webkit-mask-image:none; mask-image:none; box-shadow:0 18px 40px rgba(194,69,122,.2); }
  .promo-hero-copy { width:100%; }
  .promo-hero-brand { font-size:11.5px; letter-spacing:2px; }
  .promo-hero h1 { font-size:32px; margin:6px 0 6px; }
  .promo-hero p { font-size:14.5px; max-width:330px; }
  .promo-hero-cta { padding:12px 30px; font-size:15px; margin-top:16px; }
  .promo-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:20px; padding:0 14px; }
  .promo-tabs a { min-height:50px; padding:10px 8px; font-size:13.5px; border-radius:16px; gap:7px; text-align:center; line-height:1.4; }
  .promo-tabs a:first-child { grid-column:1 / -1; }
  .promo-tabs a[aria-pressed="true"] { padding:9px 7px; }
  .promo-tabs a .bs-icon { font-size:18px; }
  .promo-list { padding:4px 14px 18px; }
  .promo-section { padding-top:24px; }
  .promo-section-head h2 { font-size:21px; }
  .promo-section-head p { font-size:12px; }
  .promo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .promo-offer { border-radius:18px; }
  .promo-offer .promo-tag { top:8px; right:8px; padding:3px 8px; font-size:10.5px; gap:4px; }
  .promo-offer .promo-tag .bs-icon { font-size:12px; }
  .promo-offer-body { padding:11px 11px 12px; gap:4px; }
  .promo-offer h3 { font-size:13.5px; line-height:1.55; }
  .promo-offer .promo-price b { font-size:19px; }
  .promo-offer .promo-cta { padding:9px 6px; font-size:12.5px; border-radius:12px; gap:6px; }
  .promo-deal { flex-basis:90%; min-height:160px; }
  .promo-deal-body { padding:14px; padding-inline-end:36%; }
  .promo-deal h3 { font-size:16px; }
  .promo-deal .promo-price b { font-size:24px; }
  .promo-pick { padding:9px 14px; font-size:13px; }
  .promo-prices > header { padding:0 14px; }
  .promo-prices > header h2 { font-size:22px; }
}

/* ---------- Header: «حجز موعد» in the logo gold, next to «دخول» ---------- */
.clarity-header .clarity-actions > a.clarity-book { width:auto; height:42px; padding:0 18px; border-radius:23px; display:inline-flex; align-items:center; gap:8px; direction:rtl; color:#06182e; background:linear-gradient(135deg,#f0d894 0%,#d8b66f 45%,#c9a250 100%); font:800 12.5px Cairo,sans-serif; text-decoration:none; white-space:nowrap; box-shadow:0 8px 22px rgba(201,162,80,.35), inset 0 1px 0 rgba(255,255,255,.45); overflow:visible; }
.clarity-header .clarity-actions > a.clarity-book::after { display:none; }
.clarity-header .clarity-actions > a.clarity-book i { font-size:14px; }
.clarity-header .clarity-actions > a.clarity-book:hover { color:#06182e; background:linear-gradient(135deg,#f5e2a8 0%,#e0c27c 45%,#d1ab5c 100%); transform:translateY(-2px); }
.clarity-header .clarity-actions > a.clarity-book:focus-visible { outline:3px solid #f0d894; outline-offset:3px; }
@media (min-width:901px) and (max-width:1240px) {
  /* make room for the booking button on small laptops */
  .clarity-header:not(.is-compact):not(.menu-open) .clarity-nav > a, .clarity-header:not(.is-compact):not(.menu-open) .nav-menu > a { padding-inline:5px; }
  .clarity-header .clarity-actions > a.clarity-book { width:42px; padding:0; justify-content:center; }
  .clarity-header .clarity-actions > a.clarity-book span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (max-width:900px) {
  .clarity-header .clarity-actions > a.clarity-book { display:inline-flex; height:38px; padding:0 12px; font-size:12px; gap:6px; }
}
@media (max-width:480px) { .clarity-header .clarity-actions > a.clarity-book { width:40px; height:40px; padding:0; justify-content:center; border-radius:50%; } .clarity-header .clarity-actions > a.clarity-book i { font-size:16px; } .clarity-header .clarity-actions > a.clarity-book span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } }
/* «دخول» moves into the phone menu so the bar keeps room for «حجز موعد» */
.clarity-header .clarity-nav > a.clarity-login-menu { display:none; }
@media (max-width:900px) {
  .clarity-header .clarity-actions > a.clarity-login { display:none; }
  .clarity-header .clarity-nav > a.clarity-login-menu { display:flex; align-items:center; justify-content:center; width:auto; min-width:0; height:auto; min-height:44px; margin-top:8px; padding:10px 18px; border-radius:23px; background:#fff; color:#06182e !important; font-size:14px; font-weight:800; }
}

/* ---------- Blog: device articles use the device-page photo; show product shots whole on white, like the device pages ---------- */
.blog-card-media img:is([src*="-device."], [src*="catalog-images/exilis"], [src*="catalog-images/cristalfit"]),
.article-cover img:is([src*="-device."], [src*="catalog-images/exilis"], [src*="catalog-images/cristalfit"]),
.article-slide img:is([src*="-device."], [src*="catalog-images/exilis"], [src*="catalog-images/cristalfit"]) { object-fit:contain; background:#fff; padding:10px; box-sizing:border-box; }

/* ---------- Checkout & booking: order summary, terms acceptance, privacy note (payment-gateway review) ---------- */
.checkout-tools .checkout-note { margin:4px 0 12px; color:#665b4d; font-size:12px; line-height:1.8; }
.checkout-tools > label.checkout-terms { position:relative; display:block; padding-inline-start:26px; color:#3d3528; font-size:12.5px; line-height:1.8; }
.checkout-tools .checkout-terms input { position:absolute; inset-inline-start:0; top:4px; width:17px; height:17px; padding:0; margin:0; accent-color:#0c2740; }
.checkout-tools .checkout-terms a, .booking-form .booking-terms a, .booking-form .booking-privacy a { color:#173f68; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.checkout-tools [data-checkout-summary] { margin:10px 0 4px; padding:14px; border:1px solid #e2d5c2; border-radius:14px; background:#fffaf2; }
.checkout-tools [data-checkout-summary] h3 { margin:0 0 8px; font-size:13px; }
.checkout-tools [data-checkout-summary] ul { margin:0; padding:0; list-style:none; }
.checkout-tools [data-checkout-summary] li, .checkout-tools [data-checkout-summary] p { display:flex; justify-content:space-between; gap:12px; font-size:12px; line-height:1.9; }
.checkout-tools [data-checkout-summary] p { margin:8px 0 0; padding-top:8px; border-top:1px solid #e2d5c2; font-weight:800; }
.booking-form .booking-terms { position:relative; display:block; padding-inline-start:28px; font-size:13.5px; line-height:1.8; }
.booking-form .booking-terms input { position:absolute; inset-inline-start:0; top:4px; width:18px; height:18px; min-height:0; padding:0; margin:0; accent-color:#0c2740; }
.booking-form .booking-terms[hidden] { display:none; }
.booking-form .booking-privacy { grid-column:1 / -1; margin:0; color:#6b7c8c; font-size:12.5px; line-height:1.8; text-align:center; }
.checkout-tools [data-checkout-summary] .checkout-contract { display:block; margin-top:6px; color:#665b4d; font-size:11.5px; line-height:1.7; }