/**
 * Polyclinic design layer — ALWATANI MEDICAL POLYCLINIC.
 *
 * Every value here is taken from Figma via get_design_context, not estimated.
 * Node ids are cited so any value can be traced back to the design.
 * Loaded last in martis/global so it wins without !important.
 */

:root {
  /* Colour — from Figma fills */
  --pc-navy: #0C274B;        /* nav text, buttons, headings */
  --pc-gold: #B68D49;        /* active nav item, hero eyebrow */
  --pc-muted: #555555;       /* hero description (174:1836) */
  --pc-red: #D40004;         /* emergency badge */
  --pc-page-bg: #F5F4F2;
  --pc-white: #FFFFFF;

  /* Type — Figma reports Rubik throughout */
  --pc-font: 'Rubik', 'Muli', system-ui, sans-serif;
  --pc-lh: 1.5;              /* every text node in the header and hero */

  /* Geometry */
  --pc-container: 1440px;    /* design frame width; gutter is padding inside it */
  --pc-gutter: 80px;
  --pc-radius: 8px;          /* 174:1828, 174:1838, 174:1840 */
  --pc-btn-h: 40px;
  --pc-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M5 8h14l-1 12H6L5 8Zm3.5 0V6a3.5 3.5 0 0 1 7 0v2'/%3E%3C/svg%3E");
}

/* Base type — the design uses Rubik everywhere; Martis ships Muli. */
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pc-font);
}

/* Martis strips normalize.css, so border-box is not universal. */
.pc-hero,
.pc-hero__inner,
.pc-hero__copy,
.pc-topbar__contact,
.pc-header__actions,
.mobile-header__container,
.pc-btn,
.pc-header__login {
  box-sizing: border-box;
}

/* ==========================================================================
   Buttons — 174:1838 (filled) / 174:1840 (outline)
   h 40px · radius 8px · Rubik Medium 14px/1.5
   ========================================================================== */

.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pc-btn-h);
  padding: 0 16px;
  border-radius: var(--pc-radius);
  font-family: var(--pc-font);
  font-size: 14px;
  font-weight: 500;
  line-height: var(--pc-lh);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.pc-btn--primary {
  background: var(--pc-navy);
  border: 1px solid var(--pc-navy);
  color: var(--pc-white);
}

.pc-btn--primary:hover,
.pc-btn--primary:focus { background: #163A6B; border-color: #163A6B; color: var(--pc-white); }

.pc-btn--ghost {
  background: transparent;
  border: 1px solid var(--pc-navy);
  color: var(--pc-navy);
}

.pc-btn--ghost:hover,
.pc-btn--ghost:focus { background: var(--pc-navy); color: var(--pc-white); }

/* ==========================================================================
   Header top bar — Rectangle 1 (174:1813) 1440×40, fill #0C274B
   Text: Rubik Regular 12px/1.5 white (198:1792)
   x-positions: العربية 80 · mail icon 188 · mail text 215.19
                phone icon 355 · phone text 373.81
   ========================================================================== */

.header .header-top {
  background: var(--pc-navy);
  color: var(--pc-white);
  height: 40px;
  font-family: var(--pc-font);
  font-size: 12px;
  font-weight: 400;
  line-height: var(--pc-lh);
}

.header .header-top .container {
  direction: ltr;               /* design anchors this row at the left edge */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 75px;                    /* العربية ends 113 → mail icon 188 */
  height: 40px;
  width: 100%;
  max-width: var(--pc-container);
  padding: 0 var(--pc-gutter);
  margin: 0 auto;
}

.header .header-top .row,
.header .header-top [class^="col-"] { display: contents; }
.header .header-top .header-top-second { order: -1; }

/* English (LTR): contact starts at the gutter and the language switch sits at
   the right edge, the mirror of the Arabic bar where it leads. */
[dir="ltr"] .header .header-top .container { justify-content: space-between; }
[dir="ltr"] .header .header-top .header-top-second { order: 1; }

.pc-topbar__contact {
  gap: 50.81px;                 /* mail text ends 304.19 → phone icon 355 */
}

/* Martis `.header-top .block` forces inline-block + 15px side padding + a
   divider border, which discarded the flex gap above and shifted the row 15px. */
.header .header-top .block.pc-topbar__contact {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}

.pc-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 11.19px;                 /* icon 188–204 → text 215.19 */
  color: var(--pc-white);
  font-size: 12px;
  font-weight: 400;
  line-height: var(--pc-lh);
  text-decoration: none;
}

.pc-topbar__item:hover,
.pc-topbar__item:focus { color: var(--pc-white); text-decoration: none; }

.pc-topbar__icon { flex: 0 0 auto; width: 16px; height: 16px; }

/* Language switcher: plain text, same type as the rest of the bar. */
.header .header-top .block-language .container-wrap,
.header .header-top .block-language .block-content { padding: 0; margin: 0; border: 0; }

.header .header-top .block-language ul.links {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header .header-top .block-language ul.links li { margin: 0; padding: 0; border: 0; }

.header .header-top .block-language ul.links a,
.header .header-top a {
  border: 0;
  background: none;
  padding: 0;
  color: var(--pc-white);
  font-family: var(--pc-font);
  font-size: 12px;
  font-weight: 400;
  line-height: var(--pc-lh);
  text-decoration: none;
}

.header .header-top .block-language ul.links a:hover { color: var(--pc-gold); }

/* ==========================================================================
   Header main bar — Rectangle 2 (174:1814) 1440×80, fill #FFFFFF
   Menu: Rubik Medium 14px/1.5 #0C274B · active Rubik Bold #B68D49
   Item gap measured at 59px between every pair.
   Logo (204:1852): x 1158.54–1360, y 17.22, 201.46×45.55
   Actions: 92.4 / 91.91 / 40 wide, 16px apart, all outlined
   ========================================================================== */

.header .header-wrap { background: var(--pc-white); }

.header .navbar.header-center > .container {
  display: flex;
  flex-wrap: nowrap;            /* Bootstrap wraps .navbar > .container by default */
  align-items: center;
  justify-content: space-between;
  height: 80px;
  width: 100%;
  max-width: var(--pc-container);
  padding: 0 var(--pc-gutter);
  margin: 0 auto;
}

.header .navbar.header-center > .container > .navbar-brand { flex: 0 0 auto; order: 1; margin: 0; padding: 0; }

.header .navbar.header-center > .container > .header-main-wrap {
  flex: 1 1 auto; order: 2;
  display: flex; align-items: center; justify-content: center;
}

.header .navbar.header-center > .container > .header-right-wrap {
  flex: 0 0 auto; order: 3;
  display: flex; align-items: center; gap: 16px;
  direction: ltr;               /* design orders booking · login · cart from the left */
}

.header .header-right-wrap .header-item { margin: 0; padding: 0; }

/* Martis adds `.header-item .block { margin-left: 30px }` and 15px padding on
   the cart summary, so the actions were 16 + 30 + 15 = 61px from the cart
   instead of the design's 16px, and the group overflowed the left gutter. */
.header .header-right-wrap .header-item .block { margin: 0; }

/* Same trap on the menu side: `.header-main-wrap` carries 15px padding and the
   nav block (inline-block) a 30px margin, inflating the menu's min-content by
   45px and pushing the actions past the left gutter below ~1400px. */
.header .header-main-wrap { padding: 0; min-width: 0; }
.header .header-main .block { display: block; margin: 0; }
.header .header-right-wrap .cart-block--summary { padding: 0; }

.header .main-menu-wrap,
.header .region-header,
.header .main-menu > .container-wrap { width: 100%; padding: 0; margin: 0; }

.header .navbar-brand img { width: 201.46px; height: 45.55px; object-fit: contain; display: block; }

/* Menu */
.header .header-main ul.menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;      /* centred between logo and actions in both directions */
  gap: 59px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header .header-main ul.menu > li { margin: 0; padding: 0; white-space: nowrap; flex: 0 0 auto; }

/* Clearfix ::before/::after become empty flex items, and each one drags a
   59px gap with it — 118px of phantom width that pushed the menu over the cart. */
.header .header-main ul.menu::before,
.header .header-main ul.menu::after { content: none; display: none; }

.header .header-main ul.menu > li > a,
.header .header-main ul.menu > li:last-child > a {
  display: inline-block;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 14px;
  font-weight: 500;
  line-height: var(--pc-lh);
  white-space: nowrap;
  text-decoration: none;
}

/* Hover changes colour only. Bolding on hover made the label wider and
   shifted the whole menu, so the weight change is reserved for the active
   item, which is bold in the design and never re-flows. */
.header .header-main ul.menu > li > a:hover,
.header .header-main ul.menu > li > a:focus {
  background: none;
  color: var(--pc-gold);
}

.header .header-main ul.menu > li.menu-item--active-trail > a,
.header .header-main ul.menu > li > a.is-active {
  background: none;
  color: var(--pc-gold);
  font-weight: 700;
}

/* Actions */
.pc-header__actions { display: flex; align-items: center; gap: 16px; direction: ltr; }
.pc-header__actions .pc-btn,
.pc-header__login { direction: rtl; }

/* In the header every action is an OUTLINE button (229:172, 248:1752, 290:2622). */
.pc-header__actions .pc-btn--primary {
  background: transparent;
  border: 1px solid var(--pc-navy);
  color: var(--pc-navy);
  width: 92.4px;
  padding: 0;
}

.pc-header__actions .pc-btn--primary:hover,
.pc-header__actions .pc-btn--primary:focus { background: var(--pc-navy); color: var(--pc-white); }

.pc-header__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 91.91px;
  height: var(--pc-btn-h);
  padding: 0;
  border: 1px solid var(--pc-navy);
  border-radius: var(--pc-radius);
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 14px;
  font-weight: 500;
  line-height: var(--pc-lh);
  text-decoration: none;
}

.pc-header__login:hover,
.pc-header__login:focus { background: var(--pc-navy); color: var(--pc-white); }
.pc-header__login svg { width: 21px; height: 21px; flex: 0 0 auto; }

:is(.header .header-cart, .mobile-header__actions) .cart-block--link__expand a,
.header .header-cart a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: var(--pc-btn-h);
  border: 1px solid var(--pc-navy);
  border-radius: var(--pc-radius);
  color: var(--pc-navy);
}

/* ==========================================================================
   Hero — image 174:1811 (y 62.83, h 961.17), copy group 174:1844
   Copy box x 728–1360 (632 wide), right-aligned.
   eyebrow  174:1833  Rubik Medium 24/1.5   #B68D49  top 319.03  h 36
   title    174:1832  Rubik ExtraBold 40/1.5 #0C274B top 392.33  h 84.08  w 583
   desc     174:1836  Rubik Medium 20/1.5   #555     top 522.91  h 41.01  w 632.24
   buttons  174:1838/1840  201.638×40, radius 8, 16px apart, top 601.22
   Measured gaps: eyebrow→title 37.3 · title→desc 46.5 · desc→buttons 37.3
   ========================================================================== */

.pc-hero {
  position: relative;
  /* Image spans y 62.83–1024; the 80px nav covers its first 57px. */
  min-height: 904px;
  overflow: hidden;
  background: var(--pc-page-bg);
  font-family: var(--pc-font);
}

.pc-hero__bg { position: absolute; inset: 0; z-index: 0; }

.pc-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.pc-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 199px var(--pc-gutter) 0;  /* eyebrow top 319.03 − hero top 120 */
}

.pc-hero__copy {
  width: 632px;
  max-width: 100%;
  margin-inline-start: 0;
  margin-inline-end: auto;
  text-align: start;
}

.pc-hero__eyebrow {
  margin: 0;
  color: var(--pc-gold);
  font-size: 24px;
  font-weight: 500;
  line-height: var(--pc-lh);
}

.pc-hero__title {
  margin: 20px 0 0;          /* 37.3 design gap − 17px half-leading */
  max-width: 583px;
  color: var(--pc-navy);
  font-size: 40px;
  font-weight: 800;
  line-height: var(--pc-lh);
}

.pc-hero__desc {
  margin: 22px 0 0;          /* 46.5 design gap − 24px half-leading */
  color: var(--pc-muted);
  font-size: 20px;
  font-weight: 500;
  line-height: var(--pc-lh);
}

.pc-hero__desc p { margin: 0; font: inherit; color: inherit; }

.pc-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 46px;          /* 37.3 design gap + 9px, desc has no descender leading */
}

.pc-hero__cta .pc-btn { width: 201.638px; padding: 0; }

/* ==========================================================================
   Responsive — the design supplies desktop 1440 only; these steps keep the
   type ratios and step the gutter 80 → 40 → 16.
   ========================================================================== */

@media (max-width: 1199px) {
  :root { --pc-gutter: 40px; }
  .pc-hero { min-height: 720px; }
  .pc-hero__inner { padding-top: 150px; }
  .pc-hero__title { font-size: 34px; }
  .pc-hero__desc { font-size: 18px; }
}

/* The 1280-wide content (logo + menu + actions) needs ~1086px at the design's
   59px menu gap; below 1280 that no longer fits inside the gutters. */
@media (max-width: 1279px) {
  .header .header-main ul.menu { gap: 32px; }
}

/* Desktop header is swapped for the mobile header at 1099 (Martis used 991,
   which left 992–1099 with clipped actions and no menu toggle). */
@media (max-width: 1099px) {
  .mobile-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
    height: 100%;
    max-width: 100%;
  }
  .mobile-header__logo img { width: auto; height: 40px; object-fit: contain; }
}

@media (max-width: 991px) {
  .layout-wrap { overflow-x: hidden; }
  .pc-hero { min-height: 620px; width: 100%; max-width: 100vw; }
  .pc-hero__inner { padding-top: 110px; width: 100%; max-width: 100vw; }
  .pc-hero__copy { width: 100%; }
  .pc-hero__title { font-size: 30px; max-width: 100%; }
  .pc-hero__eyebrow { font-size: 20px; }
  .pc-hero__desc { font-size: 17px; }
  .header .header-top .container { gap: 24px; }
  .pc-topbar__contact { gap: 24px; }
}

@media (max-width: 767px) {
  :root { --pc-gutter: 16px; }
  .pc-hero { min-height: 0; padding: 56px 0 64px; }
  .pc-hero__inner { padding-top: 0; }
  /* Photo becomes a scrim so the copy stays legible at small sizes. */
  .pc-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(245,244,242,.82) 0%, rgba(245,244,242,.94) 100%);
  }
  .pc-hero__title { font-size: 25px; margin-top: 20px; }
  .pc-hero__eyebrow { font-size: 17px; }
  .pc-hero__desc { font-size: 15px; margin-top: 24px; }
  .pc-hero__cta { gap: 12px; margin-top: 26px; }
  .pc-hero__cta .pc-btn { width: auto; flex: 1 1 auto; padding: 0 14px; }
  .header .header-top .container { flex-wrap: wrap; gap: 12px 18px; height: auto; padding: 8px var(--pc-gutter); }
  .pc-topbar__contact { gap: 18px; flex-wrap: wrap; }
}

/* Martis clamps .brand.logo to 160px; the design logo is 201.46×45.55 (204:1852). */
.header .navbar-brand .brand.logo {
  max-width: 201.46px;
  width: 201.46px;
  line-height: normal;
}

/* Martis' .content-wide .block adds 45px vertical and 15px horizontal padding,
   which pushed the hero copy 15px off the 80px design gutter. */
#content-wide-top .region,
.content-wide .block.pc-hero,
.content-wide .block.pc-emergency,
.content-wide .block-views-blockstats-block-1 {
  padding: 0;
  margin: 0;
}

/* Restore the badge's own horizontal padding after the reset above. */
.content-wide .block.pc-emergency { padding: 0 8px 0 20px; }

/* Martis pads .navbar (15px) and .header-top (10px), making the bars 110px and
   60px. The design specifies exactly 80px and 40px (174:1814 / 174:1813). */
.header .navbar.header-center { padding: 0; margin: 0; min-height: 80px; }
.header .header-top { padding: 0; }

/* ---------- Cart (290:2621) ----------
   Design shows a plain 40×40 outlined bag with no count badge. Martis renders
   a themify cart glyph plus a counter, so swap the glyph for the design's
   basil:shopping-bag-outline and drop the badge. */

:is(.header .header-cart, .mobile-header__actions) .cart-block--summary__count { display: none; }

:is(.header .header-cart, .mobile-header__actions) .cart-block--link__expand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: var(--pc-btn-h);
  border: 1px solid var(--pc-navy);
  border-radius: var(--pc-radius);
  color: var(--pc-navy);
  text-decoration: none;
}

:is(.header .header-cart, .mobile-header__actions) .cart-block--link__expand i.ti-shopping-cart { display: none; }

:is(.header .header-cart, .mobile-header__actions) .cart-block--link__expand::before {
  content: "";
  width: 21px;
  height: 21px;
  background-color: currentColor;
  -webkit-mask: var(--pc-bag) center / 21px 21px no-repeat;
  mask: var(--pc-bag) center / 21px 21px no-repeat;
}

:is(.header .header-cart, .mobile-header__actions) .cart-block--link__expand:hover { background: var(--pc-navy); color: var(--pc-white); }

/* Language link sits flush at the 80px gutter in the design. */
.header .header-top .block-language,
.header .header-top .region-header-top-second { margin: 0; padding: 0; }

/* ==========================================================================
   Hero overlays — stat counters (right) and emergency badge (left)
   Both sit inside the hero band, so they are positioned against
   #content-wide-top, which starts at the design's y=120.
   ========================================================================== */

#content-wide-top { position: relative; }

/* ---- Stat counters — 174:1845/1846/1847 ----
   Cards 200×202 at x 728 / 944 / 1160 (16px apart), y 742.
   Card fill rgba(245,244,242,0.57), radius 8.
   Icon 48 at y 777 · number 32 Bold #B68D49 at y 839 · label 14 SemiBold at y 884.57 */

.block-views-blockstats-block-1 {
  position: absolute;
  top: 622px;                      /* 742 − 120 */
  inset-inline-start: max(80px, calc((100% - 1440px) / 2 + 80px));
  z-index: 2;
  width: 632px;                    /* 3×200 + 2×16 */
  padding: 0;
  margin: 0;
}

.block-views-blockstats-block-1 .container-wrap,
.block-views-blockstats-block-1 .block-content { padding: 0; margin: 0; }

.block-views-blockstats-block-1 .view-item {
  display: flex;
  gap: 16px;
}

.pc-stat {
  box-sizing: border-box;
  width: 200px;
  height: 202px;
  padding: 35px 12px 0;
  border-radius: var(--pc-radius);
  background: rgba(245, 244, 242, 0.57);
  text-align: center;
  font-family: var(--pc-font);
}

.pc-stat__icon { width: 48px; height: 48px; display: block; margin: 0 auto 14px; }

.pc-stat__value {
  color: var(--pc-gold);
  font-size: 32px;
  font-weight: 700;
  line-height: var(--pc-lh);        /* 48px */
  direction: ltr;                   /* keeps the leading + on "+5,000" */
}

.pc-stat__label {
  color: var(--pc-navy);
  font-size: 14px;
  font-weight: 600;
  line-height: var(--pc-lh);        /* 21px */
}

/* ---- Emergency badge — 269:370 ----
   200×73 at x 80, y 847.74 · fill #D40004 · radius 8
   shadow 0 0 20px rgba(212,0,4,.2) · icon 56 at x 215.6 (start side in RTL) */

.pc-emergency {
  position: absolute;
  /* Aligned to the counters' top line (742) rather than Figma's 847.74,
     per client direction. */
  top: 622px;
  inset-inline-end: max(80px, calc((100% - 1440px) / 2 + 80px));
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 200px;
  height: 73px;
  padding: 0 8px 0 20px;
  border-radius: var(--pc-radius);
  background: var(--pc-red);
  box-shadow: 0 0 20px 0 rgba(212, 0, 4, 0.2);
  color: var(--pc-white);
  font-family: var(--pc-font);
  text-decoration: none;
}

.pc-emergency:hover,
.pc-emergency:focus { background: #b80004; color: var(--pc-white); }

.pc-emergency__icon {
  width: 40.25px;                  /* the SVG's own size — do not upscale */
  height: 40.25px;
  flex: 0 0 auto;
  /* Figma centres it inside a 56px slot (269:371). */
  margin: 0 7.875px;
}

.pc-emergency__copy {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-align: start;
}

.pc-emergency__value { font-size: 32px; font-weight: 700; line-height: 1.05; }
.pc-emergency__text  { font-size: 12px; font-weight: 600; line-height: var(--pc-lh); }

/* ---- Overlay responsive ----
   Below the desktop frame the overlays leave the photo and stack in flow. */

@media (max-width: 1199px) {
  .block-views-blockstats-block-1 { inset-inline-start: max(40px, calc((100% - 1440px) / 2 + 40px)); top: 520px; }
  .pc-emergency { inset-inline-end: max(40px, calc((100% - 1440px) / 2 + 40px)); top: 520px; }
}

@media (max-width: 991px) {
  .block-views-blockstats-block-1,
  .pc-emergency {
    position: static;
    inset: auto;
    width: 100%;
    margin: 0 auto;
  }
  /* matches the .content-wide .block… reset above, which is 0,2,0 */
  .content-wide .block-views-blockstats-block-1 { padding: 24px 16px 0; height: auto; }
  .block-views-blockstats-block-1 .view-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .block-views-blockstats-block-1 .view-item > .pc-stat {
    flex: 0 0 calc(33.333% - 11px);
    width: auto;
    height: auto;
    padding: 24px 10px;
  }
  .pc-emergency { max-width: 320px; margin: 24px auto 0; height: 73px; }
}

@media (max-width: 575px) {
  .block-views-blockstats-block-1 .view-item > .pc-stat { flex: 0 0 100%; }
  .block-views-blockstats-block-1 .view-item { gap: 12px; }
}

/* ==========================================================================
   Trust strip — above the footer
   Strip 1440×160 fill #EEE9DF (198:1745, y 6731).
   Cards 416×80 at x 80 / 512 / 944, 16px apart, y 6771 (40px inset).
   Icons 42×42 at x 436 / 868 / 1300 — 18px from the card's start edge.
   Text box x 95.97 w 324, 16px clear of the icon.
   Type sizes are measured from the design render (Figma MCP quota reached).
   ========================================================================== */

.content-wide .block-views-blocktrust-items-block-1,
.block-views-blocktrust-items-block-1 {
  background: #EEE9DF;
  padding: 40px 0;
  margin: 0;
}

/* media.css caps .container-wrap at 1220px, which clamped the strip's inner
   container to 1220 and (with margin reset) pushed the cards off the 80px
   gutter. The strip needs the full 1440 frame; .view-item does the gutters. */
.block-views-blocktrust-items-block-1 .container-wrap,
.block-views-blocktrust-items-block-1 .block-content {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.block-views-blocktrust-items-block-1 .view-item {
  box-sizing: border-box;
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 0 var(--pc-gutter);
}

.pc-trust {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 80px;
  padding: 0 18px 0 16px;
  border-radius: var(--pc-radius);
  background: var(--pc-white);
  font-family: var(--pc-font);
}

.pc-trust__icon { width: 42px; height: 42px; flex: 0 0 auto; }

.pc-trust__copy { flex: 1 1 auto; min-width: 0; text-align: start; }

.pc-trust__title {
  color: var(--pc-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-trust__text {
  color: var(--pc-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: var(--pc-lh);
}

.pc-trust__text p { margin: 0; font: inherit; color: inherit; }

@media (max-width: 991px) {
  .content-wide .block-views-blocktrust-items-block-1,
  .block-views-blocktrust-items-block-1 { padding: 28px 0; }
  .block-views-blocktrust-items-block-1 .view-item { flex-wrap: wrap; gap: 12px; }
  .pc-trust { flex: 1 1 100%; height: auto; padding: 16px; }
}

/* ==========================================================================
   Footer — 229:260, 1440×418 at y 6891
   Body #0C274B · bottom bar #00204A · headings gold · text white
   Columns RTL: about (right) · quick links · contact (left)
   Geometry measured from the design render (Figma MCP quota reached).
   ========================================================================== */

.footer {
  background: var(--pc-navy);
  color: var(--pc-white);
  font-family: var(--pc-font);
}

.footer .footer-widget { padding: 100px 0 56px; }

.footer .footer-widget .container,
.footer .footer-bottom .container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pc-container);
  padding: 0 var(--pc-gutter);
  margin: 0 auto;
}

/* Neutralise Martis' bootstrap columns — the three blocks sit in one region. */
.footer .footer-widget .row { display: block; margin: 0; }
.footer .footer-widget [class^="col-"] { width: 100%; max-width: 100%; flex: none; padding: 0; }

.footer .region-footer-second {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.footer .region-footer-second > .block { margin: 0; padding: 0; }

/* ---- Column headings ---- */
.footer .pc-fcol__title,
.footer .region-footer-second h2 {
  margin: 0 0 22px;
  color: var(--pc-gold);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

/* ---- Column 1: logo + intro ---- */
.pc-fabout { flex: 0 0 320px; text-align: start; }
.pc-fabout__logo { display: block; width: 131px; height: auto; margin: 0 0 26px auto; }

.pc-fabout__text {
  color: var(--pc-white);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
}

.pc-fabout__text p { margin: 0; font: inherit; color: inherit; }

/* ---- Column 2: quick links ---- */
.footer #block-footer-quick-menu { flex: 0 0 auto; }

.footer .region-footer-second ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .region-footer-second ul.menu li { margin: 0 0 18px; padding: 0; }
.footer .region-footer-second ul.menu li:last-child { margin-bottom: 0; }

.footer .region-footer-second ul.menu a {
  color: var(--pc-white);
  font-size: 14px;
  font-weight: 400;
  line-height: var(--pc-lh);
  text-decoration: none;
  transition: color .2s ease;
}

.footer .region-footer-second ul.menu a:hover,
.footer .region-footer-second ul.menu a:focus { color: var(--pc-gold); }

/* ---- Column 3: contact ---- */
.pc-fcontact { flex: 0 0 auto; }

.pc-fcontact__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.pc-fcontact__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--pc-gold);
}

.pc-fcontact__label {
  color: var(--pc-white);
  font-size: 14px;
  font-weight: 400;
  line-height: var(--pc-lh);
  text-decoration: none;
}

a.pc-fcontact__label:hover { color: var(--pc-gold); }

.pc-fcontact__social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.pc-fcontact__note {
  color: var(--pc-white);
  font-size: 13px;
  font-weight: 400;
  line-height: var(--pc-lh);
}

.pc-fsocial { display: inline-flex; align-items: center; gap: 12px; }

.pc-fsocial__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  opacity: .92;
  transition: opacity .2s ease;
}

.pc-fsocial__link:hover { opacity: 1; }
.pc-fsocial__link img { display: block; width: 18px; height: 18px; }

/* ---- Bottom bar ---- */
.footer .footer-bottom {
  background: #00204A;
  padding: 20px 0;
}

.footer .footer-bottom .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

.footer .footer-bottom [class^="col-"] { width: auto; max-width: none; flex: none; padding: 0; }

.footer .footer-bottom ul.menu {
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .footer-bottom ul.menu li { margin: 0; padding: 0; }

.footer .footer-bottom a,
.pc-fcopy {
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-weight: 400;
  line-height: var(--pc-lh);
  text-decoration: none;
}

.footer .footer-bottom a:hover { color: var(--pc-white); }

/* ---- Footer responsive ---- */
@media (max-width: 991px) {
  .footer .footer-widget { padding: 56px 0 40px; }
  .footer .region-footer-second { flex-wrap: wrap; gap: 36px; }
  .pc-fabout { flex: 1 1 100%; }
  .pc-fabout__logo { margin-inline-start: 0; }
  .footer #block-footer-quick-menu,
  .pc-fcontact { flex: 1 1 calc(50% - 18px); }
  .footer .footer-bottom .row { flex-wrap: wrap; gap: 14px; justify-content: center; text-align: center; }
  .footer .footer-bottom ul.menu { gap: 24px; }
}

@media (max-width: 575px) {
  .footer #block-footer-quick-menu,
  .pc-fcontact { flex: 1 1 100%; }
  .pc-fcontact__social { flex-wrap: wrap; gap: 12px; }
}

/* Martis renders footer menu items inline; the design stacks them. */
.footer .region-footer-second ul.menu,
.footer .region-footer-second .menu {
  display: block;
}

.footer .region-footer-second ul.menu > li,
.footer .region-footer-second .menu > li {
  display: block;
  width: 100%;
  float: none;
}

.footer .region-footer-second ul.menu > li > a {
  display: inline-block;
  padding: 0;
}

/* The quick-links column heading comes from the menu block label. */
.footer .region-footer-second .block > h2,
.footer .region-footer-second .block-title {
  margin: 0 0 22px;
  color: var(--pc-gold);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

/* Design spacing: the three columns sit far apart rather than evenly. */
.footer .region-footer-second { gap: 90px; }
.footer #block-footer-quick-menu { flex: 0 0 auto; margin-inline-end: 40px; }

@media (max-width: 991px) {
  .footer .region-footer-second { gap: 36px; }
  .footer #block-footer-quick-menu { margin-inline-end: 0; }
}

/* The quick-links heading spans two columns of links in the design. */
.footer #block-footer-quick-menu ul.menu {
  columns: 2;
  column-gap: 64px;
}

.footer #block-footer-quick-menu ul.menu > li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

@media (max-width: 575px) {
  .footer #block-footer-quick-menu ul.menu { columns: 1; }
}

/* ==========================================================================
   About section — 184:74
   Image 524×592.41 at x 80, y 1123.79 · copy column x 728–1360 (632)
   Gold rule 28.74×2.87 at x 1331.26 · eyebrow y 1144.71 · heading y 1202.55
   Desc y 1245.48 · feature tiles 92×92 at x 1268, y 1345.12 / 1454.65 / 1563.27
   Icons 34×34 centred · text right edge 1252 (16px clear of the tile)
   Button 201.64×40 at y 1676.19
   Type sizes measured from the design render (Figma MCP quota reached).
   ========================================================================== */

.pc-about,
.content-wide .block.pc-about {
  background: var(--pc-page-bg);
  padding: 100px 0 120px;
  font-family: var(--pc-font);
}

.pc-about__inner {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 124px;                       /* 728 − (80 + 524) */
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 0 var(--pc-gutter);
}

/* RTL: the image is on the LEFT, so it comes last in the inline direction. */
.pc-about__media { order: 2; flex: 0 0 524px; }

.pc-about__media img {
  display: block;
  width: 524px;
  height: 592px;
  object-fit: cover;
  border-radius: 16px;
}

.pc-about__copy { order: 1; flex: 0 0 632px; text-align: start; }

.pc-about__rule {
  display: block;
  width: 28.74px;
  height: 2.87px;
  /* A block element already sits at the inline-start edge, which is the
     right in RTL — no auto margin needed. */
  margin: 0;
  background: #A97C00;              /* accent gold, darker than the text gold */
}

.pc-about__eyebrow {
  margin: 15.6px 0 0;
  color: var(--pc-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-about__title {
  margin: 29.5px 0 0;               /* glyph top 1202.5, less 7px half-leading */
  color: var(--pc-gold);
  font-size: 28px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-about__text {
  margin: 0;                        /* glyph top 1245.5 */
  color: var(--pc-muted);
  font-size: 21px;                  /* node h 67.54 over 2 lines = 33.77 lh -> 21px at 1.6 */
  font-weight: 400;
  line-height: 1.6;
}

.pc-about__text p { margin: 0; font: inherit; color: inherit; }

.pc-about__features { margin-top: 39.3px; }  /* tile top 1345.12 */

/* ---- Feature row ---- */

.pc-feature {
  display: flex;
  align-items: center;
  gap: 16px;                        /* tile 1268 − text right edge 1252 */
}

/* Each .pc-feature is the only child of its own .field-item wrapper, so
   .pc-feature:last-child matched ALL of them and zeroed every gap. The
   spacing belongs on the wrapper, where :last-child is meaningful. */
.pc-about__features .field-item { margin-bottom: 16.6px; }
.pc-about__features .field-item:last-child { margin-bottom: 0; }

.pc-feature__tile {
  flex: 0 0 auto;                   /* first in DOM = right in RTL */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  background: #F1ECE5;
}

.pc-feature__icon { width: 34px; height: 34px; display: block; }

.pc-feature__copy { flex: 1 1 auto; min-width: 0; text-align: start; }

.pc-feature__title {
  color: var(--pc-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-feature__text {
  margin-top: 4px;
  color: var(--pc-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: var(--pc-lh);
}

.pc-feature__text p { margin: 0; font: inherit; color: inherit; }

.pc-about__cta { margin-top: 21px; }
.pc-about__cta .pc-btn { width: 201.638px; padding: 0; }

/* ---- About responsive ---- */

@media (max-width: 1199px) {
  .pc-about { padding: 72px 0 80px; }
  .pc-about__inner { gap: 48px; }
  .pc-about__media { flex: 0 1 44%; }
  .pc-about__media img { width: 100%; height: auto; }
  .pc-about__copy { flex: 1 1 auto; }
  .pc-about__title { font-size: 24px; }
}

@media (max-width: 991px) {
  .pc-about__inner { flex-wrap: wrap; gap: 36px; }
  .pc-about__media { order: 1; flex: 1 1 100%; }
  .pc-about__copy { order: 2; flex: 1 1 100%; }
  .pc-about__media img { max-height: 420px; }
}

@media (max-width: 575px) {
  .pc-about { padding: 48px 0 56px; }
  .pc-about__title { font-size: 21px; }
  .pc-about__text { font-size: 15px; }
  .pc-feature__tile { width: 68px; height: 68px; border-radius: 10px; }
  .pc-feature__icon { width: 28px; height: 28px; }
  .pc-about__cta .pc-btn { width: 100%; }
}

/* ==========================================================================
   Services band — 174:1487 (photo) + 174:1488 (overlay), y 1835.98, h 1021.13
   Overlay rgba(12,39,75,.8) · gold rule 28.74×2.87 at x 1331.26, y 1944.54
   Heading 174:1491  Rubik SemiBold 36/1.5  #B68D49, right-aligned, y 1968.76
   Subtitle 174:1490 right edge 1360, y 2027.07
   CTA 187:185 200×40 at x 80, y 2018.94
   Cards 308×200 radius 12 rgba(12,39,75,.8), 16px gaps
     rows y 2115.58 / 2331.58 / 2548.10 · cols x 1052 / 728 / 404 / 80
     last row is centred (x 728, 404)
   Card icon 46 slot, SVG drawn at its own 38.33 · title 20 SemiBold #B68D49
   Card text 14/2 Regular #8EAED9
   ========================================================================== */

.pc-services,
.content-wide .block.pc-services {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 108.56px 0 109px;
  margin: 0;
  font-family: var(--pc-font);
}

.pc-services__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-services__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 39, 75, .8);
}

.pc-services__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 0 var(--pc-gutter);
}

/* ---- Head: intro on the right, CTA on the left ---- */

.pc-services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.pc-services__intro { flex: 1 1 auto; text-align: start; }

.pc-services__rule {
  display: block;
  width: 28.74px;
  height: 2.87px;
  margin: 0;                        /* block sits at the inline-start (right) */
  background: #A97C00;
}

.pc-services__title {
  margin: 12.8px 0 0;               /* glyph top 1968.76, less 9px half-leading */
  color: var(--pc-gold);
  font-size: 36px;
  font-weight: 600;
  line-height: var(--pc-lh);
}

.pc-services__sub {
  /* NOTE: colour not read from Figma (MCP quota) — verify against 174:1490. */
  margin: 9px 0 0;                  /* glyph top 2027.07 */
  color: var(--pc-white);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--pc-lh);
}

.pc-services__cta { flex: 0 0 auto; margin-bottom: -12px; }  /* CTA top 2018.94 */
.pc-services__cta .pc-btn { width: 200px; padding: 0; }

/* ---- Grid ---- */

.pc-services__grid { margin-top: 68.8px; }   /* first card row at y 2115.58 */

.pc-services__grid .view-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;          /* centres the short last row (x 728 / 404) */
  gap: 16px;
}

.pc-dep {
  box-sizing: border-box;
  flex: 0 0 308px;
  width: 308px;
  height: 200px;
  padding: 26.55px 6.36px 0;
  border-radius: 12px;
  background: rgba(12, 39, 75, .8);
  text-align: center;
}

.pc-dep__icon {
  width: 38.33px;                   /* the SVG's own size — do not upscale */
  height: 38.33px;
  display: block;
  margin: 3.8px auto 0;             /* centred in the 46px slot */
}

.pc-dep__title {
  margin: 24px 0 0;
  color: var(--pc-gold);
  font-size: 20px;
  font-weight: 600;
  line-height: var(--pc-lh);
}

.pc-dep__text {
  margin: 8px 0 0;
  color: #8EAED9;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
}

.pc-dep__text p { margin: 0; font: inherit; color: inherit; }

/* ---- Services responsive ---- */

@media (max-width: 1199px) {
  .pc-services,
  .content-wide .block.pc-services { padding: 72px 0; }
  .pc-services__title { font-size: 30px; }
  .pc-services__grid { margin-top: 44px; }
  .pc-dep { flex: 1 1 calc(33.333% - 11px); width: auto; }
}

@media (max-width: 991px) {
  .pc-services__head { flex-wrap: wrap; align-items: flex-start; gap: 24px; }
  .pc-services__cta { flex: 1 1 100%; }
  .pc-services__cta .pc-btn { width: 200px; }
  .pc-services__title { font-size: 26px; }
  .pc-dep { flex: 1 1 calc(50% - 8px); height: auto; padding: 24px 12px 28px; }
}

@media (max-width: 575px) {
  .pc-services,
  .content-wide .block.pc-services { padding: 48px 0 56px; }
  .pc-services__title { font-size: 22px; }
  .pc-services__sub { font-size: 15px; }
  .pc-dep { flex: 1 1 100%; }
  .pc-services__cta .pc-btn { width: 100%; }
}

/* ==========================================================================
   Emergency banner — 276:401, card 1280×392.165 at x 80, y 3597.14
   Inner right edge 1311.9 → 48px card padding · rule 274:387 at y 3650.90
   Eyebrow y 3674.03 · heading y 3730.39 (w 524) · desc y 3798.58 (w 632)
   Call button 201.638×40 at x 1109.5, y 3859.34 · numbers y 3907.50
   Directions button 256.736×40 at x 836 · 16.76px between the two
   NOTE: card fill and text colours were NOT read from Figma (MCP quota).
   They follow the established dark-band system — verify against 273:383.
   ========================================================================== */

.pc-emg,
.content-wide .block.pc-emg {
  background: var(--pc-page-bg);
  padding: 0;
  margin: 0;
  font-family: var(--pc-font);
}

.pc-emg__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  width: 1280px;
  max-width: calc(100% - (var(--pc-gutter) * 2));
  min-height: 392.165px;
  margin: 0 auto;
  padding: 53.76px 48px 51.8px;
  border-radius: 12px;
  background: var(--pc-navy);
}

.pc-emg__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-emg__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 39, 75, .8);
}

.pc-emg__body { text-align: start; }

.pc-emg__rule {
  display: block;
  width: 28.74px;
  height: 2.87px;
  margin: 0;
  background: #A97C00;
}

.pc-emg__eyebrow {
  margin: 16px 0 0;                 /* glyph top 3674.03 */
  color: var(--pc-gold);
  font-size: 16px;
  font-weight: 600;
  line-height: var(--pc-lh);
}

.pc-emg__title {
  margin: 23px 0 0;                 /* glyph top 3730.39 */
  color: var(--pc-red);
  font-size: 36px;
  font-weight: 600;
  line-height: var(--pc-lh);
}

.pc-emg__text {
  margin: 20px 0 0;                 /* glyph top 3798.58 */
  max-width: 632px;
  color: #8EAED9;
  font-size: 15px;                  /* sized so the card lands on its 392px height */
  font-weight: 400;
  line-height: 1.6;
}

.pc-emg__text p { margin: 0; font: inherit; color: inherit; }

/* ---- Actions ---- */

.pc-emg__actions {
  display: flex;
  align-items: flex-start;
  gap: 16.76px;                     /* 1109.5 − 1092.74 */
  margin-top: 36px;                 /* buttons top 3859.34 */
}

.pc-emg__callwrap { flex: 0 0 auto; }

.pc-emg__call {
  width: 201.638px;
  gap: 8px;
  padding: 0;
  background: transparent;
  color: var(--pc-white);
  border-color: rgba(255, 255, 255, .6);
}

.pc-emg__call:hover,
.pc-emg__call:focus { background: var(--pc-red); color: var(--pc-white); border-color: var(--pc-red); }

.pc-emg__numbers {
  margin: 8.16px 0 0;               /* numbers top 3907.50 */
  width: 201.638px;
  color: #8EAED9;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
}

/* One phone number per line (274:394 is a 2-line box, h 30). */
.pc-emg__numbers span { display: block; }

.pc-emg__dir {
  flex: 0 0 auto;
  width: 256.736px;
  gap: 8px;
  padding: 0;
  color: var(--pc-white);
  border-color: rgba(255, 255, 255, .6);
}

.pc-emg__dir:hover,
.pc-emg__dir:focus { background: var(--pc-white); color: var(--pc-navy); border-color: var(--pc-white); }

.pc-emg__call svg,
.pc-emg__dir svg { flex: 0 0 auto; }

/* ---- Emergency responsive ---- */

@media (max-width: 991px) {
  .pc-emg__card { padding: 40px 28px; min-height: 0; }
  .pc-emg__title { font-size: 26px; }
  .pc-emg__actions { flex-wrap: wrap; gap: 14px; }
}

@media (max-width: 575px) {
  .pc-emg__card { padding: 32px 20px; border-radius: 10px; }
  .pc-emg__title { font-size: 21px; }
  .pc-emg__text { font-size: 15px; }
  .pc-emg__callwrap,
  .pc-emg__dir { flex: 1 1 100%; }
  .pc-emg__call,
  .pc-emg__numbers,
  .pc-emg__dir { width: 100%; }
}

/* ==========================================================================
   At-home services — الخدمات الطبية المنزلية
   Aside x 728–1360 (632) · grid x 80–712 (632) · 16px between them
   rule 187:158 y 4090.17 · eyebrow y 4113.30 · heading y 4169.66
   desc y 4237.85 · CTA 201.638×40 at y 4296.72 · media 632×244 at y 4353.03
   badge 191.9×60.67 at x 1160, y 4527.57 (inset in the media)
   Cards 308×244 at x 404 / 80, rows y 4093.03 / 4353.03, 16px gaps
   Card art: circle 43.79 behind a 69.07 icon, icon centre 21.85 lower
   NOTE: card fill, circle fill and text colours were NOT read from Figma
   (MCP quota) — verify against 174:1552 / 174:1554.
   ========================================================================== */

.pc-hsec,
.content-wide .block.pc-hsec {
  background: var(--pc-page-bg);
  padding: 100px 0 115px;
  margin: 0;
  font-family: var(--pc-font);
}

.pc-hsec__inner {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 0 var(--pc-gutter);
}

/* First in DOM = right in RTL. */
.pc-hsec__aside { flex: 0 0 632px; text-align: start; }
.pc-hsec__grid  { flex: 0 0 632px; }

.pc-hsec__rule {
  display: block;
  width: 28.74px;
  height: 2.87px;
  margin: 0;
  background: #A97C00;
}

.pc-hsec__eyebrow {
  margin: 16px 0 0;                 /* glyph top 4113.30 */
  color: var(--pc-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-hsec__title {
  margin: 23px 0 0;                 /* glyph top 4169.66 */
  color: var(--pc-gold);
  font-size: 36px;
  font-weight: 600;
  line-height: var(--pc-lh);
}

.pc-hsec__text {
  margin: 18px 0 0;                 /* glyph top 4237.85 */
  color: var(--pc-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

.pc-hsec__text p { margin: 0; font: inherit; color: inherit; }

.pc-hsec__cta { margin-top: 30px; }
.pc-hsec__cta .pc-btn { width: 201.638px; padding: 0; }

/* ---- Side image with availability badge ---- */

.pc-hsec__media {
  position: relative;
  margin-top: 16.31px;              /* media top 4353.03 */
  width: 632px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.pc-hsec__media img {
  display: block;
  width: 100%;
  height: 244px;
  object-fit: cover;
}

.pc-hsec__badge {
  position: absolute;
  inset-inline-start: 8px;          /* RTL: 8px in from the right */
  bottom: 8.79px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 191.9px;
  min-height: 60.67px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(12, 39, 75, .55);
  backdrop-filter: blur(2px);
  color: var(--pc-white);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.pc-hsec__badge span { display: block; }
.pc-hsec__badge span:last-child { color: var(--pc-gold); font-weight: 700; }

/* ---- Cards ---- */

.pc-hsec__grid .view-item {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.pc-hs {
  box-sizing: border-box;
  flex: 0 0 308px;
  width: 308px;
  min-height: 244px;
  padding: 0 26px 24px;
  border-radius: 12px;
  background: var(--pc-white);
  box-shadow: 0 2px 14px rgba(12, 39, 75, .05);
  text-align: center;
}

.pc-hs__badge {
  position: relative;
  display: block;
  width: 69.07px;
  height: 78.33px;
  margin: 30.06px auto 0;
}

/* The circle sits behind the upper part of the icon (174:1554). */
.pc-hs__badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 43.79px;
  height: 43.79px;
  border-radius: 50%;
  background: #F1ECE5;
}

.pc-hs__icon {
  position: absolute;
  top: 9.25px;                      /* 39.31 − 30.06 */
  left: 0;
  width: 69.07px;
  height: 69.07px;
}

.pc-hs__title {
  margin: 23px 0 0;                 /* title top 131.38 within the card */
  color: var(--pc-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-hs__text {
  margin: 15px 0 0;                 /* desc top 170.69 */
  color: var(--pc-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

.pc-hs__text p { margin: 0; font: inherit; color: inherit; }

/* ---- Responsive ---- */

@media (max-width: 1199px) {
  .pc-hsec,
  .content-wide .block.pc-hsec { padding: 72px 0 80px; }
  .pc-hsec__inner { flex-wrap: wrap; gap: 36px; }
  .pc-hsec__aside,
  .pc-hsec__grid { flex: 1 1 100%; }
  .pc-hsec__media { width: 100%; }
  .pc-hsec__grid .view-item { justify-content: flex-start; }
  .pc-hs { flex: 1 1 calc(50% - 8px); width: auto; }
  .pc-hsec__title { font-size: 28px; }
}

@media (max-width: 575px) {
  .pc-hsec,
  .content-wide .block.pc-hsec { padding: 48px 0 56px; }
  .pc-hsec__title { font-size: 22px; }
  .pc-hs { flex: 1 1 100%; min-height: 0; padding: 0 12px 8px; }
  .pc-hsec__cta .pc-btn { width: 100%; }
  .pc-hsec__badge { width: auto; inset-inline: 8px; }
}

/* ==========================================================================
   Partner band — شريكك الدائم للصحة والعافية
   Photo 194:1693 full-bleed 1440×598.25 at y 4712.69 (no overlay — the
   supplied export is already the final treatment, mean brightness 177).
   Panel 174:1714  632×437.33 at x 728, y 4793.62 → 80.93 from band top
     padding 67px vertical / 80.76px horizontal (heading x 808.77, right 1279.24)
   Eyebrow y 4860.68 (white) · heading y 4920.75 (gold)
   List items y 4992.85 + 49.01 each · tick 24×24 at x 1255.23,
     text right edge 1236.7 → 18.53 gap
   Chip 174:1715 64×64 at x 696, y 5198.95 → 32px outside the panel corner
   ========================================================================== */

.pc-partner,
.content-wide .block.pc-partner {
  position: relative;
  isolation: isolate;
  padding: 0;
  margin: 0;
  /* Native photo height: at 1440 the image renders 1:1, so nothing is
     cropped or upscaled. Wider screens get the edge colour at the sides. */
  min-height: 598.25px;
  display: flex;
  align-items: center;
  background: #C0C1C3;                   /* shows only until the photo loads */
  font-family: var(--pc-font);
}

.pc-partner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;                           /* full-bleed, as in the design */
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Darkens the photo roughly 0.5, per client direction. */
.pc-partner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 39, 75, .5);
  pointer-events: none;
}

.pc-partner__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 80.93px var(--pc-gutter) 0;   /* panel top 4793.62 */
}

.pc-partner__panel {
  position: relative;
  box-sizing: border-box;
  width: 632px;
  max-width: 100%;
  min-height: 437.33px;
  margin-inline-start: 0;                /* inline-start is the right in RTL */
  padding: 67px 80.76px;
  border-radius: 12px;
  background: var(--pc-navy);
  text-align: start;
}

.pc-partner__eyebrow {
  margin: 0;
  color: var(--pc-white);
  font-size: 16px;
  font-weight: 600;
  line-height: var(--pc-lh);
}

.pc-partner__title {
  margin: 24px 0 0;                      /* glyph top 4920.75 */
  color: var(--pc-gold);
  font-size: 30px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-partner__list {
  margin: 36px 0 0;                      /* first tick y 4992.85 */
  padding: 0;
  list-style: none;
}

.pc-partner__list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18.53px;                          /* text right edge 1236.7 → tick 1255.23 */
  margin-bottom: 25px;                   /* 49.01 pitch − 24px tick */
}

.pc-partner__list li:last-child { margin-bottom: 0; }

/* RTL: tick sits at the start (right), text runs to its left. */
.pc-partner__tick { flex: 0 0 auto; order: -1; color: var(--pc-gold); }

.pc-partner__text {
  flex: 1 1 auto;
  color: var(--pc-white);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--pc-lh);
  text-align: start;
}

.pc-partner__chip {
  position: absolute;
  inset-inline-end: -32px;               /* outside the panel's far corner */
  bottom: -32px;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--pc-white);
}

/* ---- Partner responsive ---- */

@media (max-width: 1199px) {
  .pc-partner,
  .content-wide .block.pc-partner { min-height: 0; }
  .pc-partner__inner { padding: 56px var(--pc-gutter); }
  .pc-partner__panel { padding: 48px; min-height: 0; }
  .pc-partner__title { font-size: 26px; }
}

@media (max-width: 991px) {
  .pc-partner__panel { width: 100%; }
  .pc-partner__chip { display: none; }
}

@media (max-width: 575px) {
  .pc-partner__inner { padding: 40px var(--pc-gutter); }
  .pc-partner__panel { padding: 28px 20px; border-radius: 10px; }
  .pc-partner__title { font-size: 21px; }
  .pc-partner__text { font-size: 15px; }
  .pc-partner__list li { gap: 12px; margin-bottom: 18px; align-items: flex-start; }
}

/* ==========================================================================
   Medical team — فريقنا الطبي
   Head is centred: rule 192:1672 y 5388.57 · eyebrow y 5411.71
   heading 192:1669 y 5467.07 · subtitle 192:1670 y 5526.01
   Cards 307.53×336.94 at x 80.47 / 404.94 / 728.47 / 1052.47, y 5580.50
     (16.94 gaps) · name y 5846.996 · specialty y 5870.73
   NOTE: caption colours not read from Figma (MCP quota) — verify 193:1678/1679.
   ========================================================================== */

.pc-docs,
.content-wide .block.pc-docs {
  background: var(--pc-page-bg);
  padding: 78px 0 100px;
  margin: 0;
  font-family: var(--pc-font);
}

.pc-docs__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 0 var(--pc-gutter);
}

.pc-docs__head { text-align: center; }

.pc-docs__rule {
  display: block;
  width: 28.74px;
  height: 2.87px;
  margin: 0 auto;
  background: #A97C00;
}

.pc-docs__eyebrow {
  margin: 16px 0 0;                 /* glyph top 5411.71 */
  color: var(--pc-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-docs__title {
  margin: 23px 0 0;                 /* glyph top 5467.07 */
  color: var(--pc-gold);
  font-size: 36px;
  font-weight: 600;
  line-height: var(--pc-lh);
}

.pc-docs__text {
  margin: 12px 0 0;                 /* glyph top 5526.01 */
  color: var(--pc-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--pc-lh);
}

.pc-docs__text p { margin: 0; font: inherit; color: inherit; }

/* ---- Grid ---- */

.pc-docs__grid { margin-top: 38px; }   /* first card row y 5580.50 */

.pc-docs__grid .view-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 4 × 307.53 + 3 × 16.94 = 1280.94 — a fraction over the 1280 content
     width, which wrapped the last card. The design's real gap is 16.47. */
  gap: 16.47px;
}

.pc-doc {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  height: 336.94px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #E7E6E4;              /* shows through until a photo is set */
}

.pc-doc__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Name and specialty sit over a gradient at the foot of the photo. */
.pc-doc__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 48px 16px 23px;
  background: linear-gradient(180deg, rgba(12, 39, 75, 0) 0%, rgba(12, 39, 75, .85) 62%);
  text-align: center;
}

.pc-doc__name {
  display: block;
  color: var(--pc-white);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-doc__role {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, .85);  /* design shows this light, not gold */
  font-size: 14px;
  font-weight: 400;
  line-height: var(--pc-lh);
}

/* ---- Team responsive ---- */

@media (max-width: 1199px) {
  .pc-docs,
  .content-wide .block.pc-docs { padding: 64px 0 72px; }
  .pc-docs__title { font-size: 28px; }
  .pc-doc { flex: 1 1 calc(50% - 9px); width: auto; }
}

@media (max-width: 575px) {
  .pc-docs,
  .content-wide .block.pc-docs { padding: 48px 0 56px; }
  .pc-docs__title { font-size: 22px; }
  .pc-doc { flex: 1 1 100%; height: 300px; }
}

/* ==========================================================================
   FAQ — الأسئلة الشائعة
   Home card 194:1692  1280×606.12 at x 80, y 6045.65 (content 848 centred,
   so 216px side padding) · rule 197:1699 y 6118.62 · eyebrow y 6141.76
   heading 197:1697 y 6191.10 · CTA 201.638×40 at x 296, y 6184.76
   Rows 197:1702  848×66.287, pitch 82.55 → 16.27 gap
   Toggle 24×24 at x 317 (left) · question right edge 1118.14
   Shared by the /faq page so both read identically.
   ========================================================================== */

.pc-faqs,
.content-wide .block.pc-faqs {
  background: var(--pc-page-bg);
  padding: 128px 0 79px;
  margin: 0;
  font-family: var(--pc-font);
}

.pc-faqs__card {
  box-sizing: border-box;
  /* The card is the CONTENT width (1280 = 1440 frame − 2×80 gutter),
     so it starts at x=80 like the design. */
  width: calc(100% - (var(--pc-gutter) * 2));
  max-width: calc(var(--pc-container) - (var(--pc-gutter) * 2));
  margin: 0 auto;
  padding: 72.97px 216px 84.84px;   /* 216 keeps the inner column at 848 */
  border-radius: 16px;
  background: var(--pc-white);
}

.pc-faqs__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;              /* first row y 6252.98 */
}

.pc-faqs__intro { flex: 1 1 auto; text-align: start; }

.pc-faqs__rule {
  display: block;
  width: 28.74px;
  height: 2.87px;
  margin: 0;
  background: #A97C00;
}

.pc-faqs__eyebrow {
  margin: 16px 0 0;
  color: var(--pc-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-faqs__title {
  margin: 17px 0 0;
  color: var(--pc-gold);
  font-size: 28px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-faqs__cta { flex: 0 0 auto; }
.pc-faqs__cta .pc-btn { width: 201.638px; padding: 0; }

/* ---- Accordion row (shared: home block + /faq page) ---- */

.pc-faq {
  border: 1px solid #E8E6E2;
  border-radius: 8px;
  background: var(--pc-white);
  margin-bottom: 16.27px;
}

.pc-faq:last-child { margin-bottom: 0; }

.pc-faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 66.287px;
  padding: 12px 21px;               /* toggle 21px in from the item edge */
  cursor: pointer;
  list-style: none;
}

/* Remove the native disclosure marker. */
.pc-faq__q::-webkit-details-marker { display: none; }
.pc-faq__q::marker { content: ""; }

.pc-faq__text {
  flex: 1 1 auto;
  color: var(--pc-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
  text-align: start;
}

/* Plus that becomes a minus when the row is open (bi:plus-square). */
.pc-faq__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid var(--pc-gold);
  border-radius: 4px;
}

.pc-faq__toggle::before,
.pc-faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--pc-gold);
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}

.pc-faq__toggle::before { width: 10px; height: 1.6px; }
.pc-faq__toggle::after  { width: 1.6px; height: 10px; }

.pc-faq[open] .pc-faq__toggle::after { opacity: 0; }

.pc-faq__a {
  padding: 0 21px 20px;
  color: var(--pc-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  text-align: start;
}

.pc-faq__a strong { color: var(--pc-navy); font-weight: 700; }

.pc-faq__a p { margin: 0 0 8px; font: inherit; color: inherit; }
.pc-faq__a p:last-child { margin-bottom: 0; }
.pc-faq__a ul { margin: 0; padding-inline-start: 18px; }
.pc-faq__a li { margin-bottom: 6px; }

/* ---- The /faq page reuses the same rows ---- */

.view-faqs.view-display-id-page_1 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 56px var(--pc-gutter) 80px;
}

/* ---- FAQ responsive ---- */

@media (max-width: 1199px) {
  .pc-faqs,
  .content-wide .block.pc-faqs { padding: 72px 0; }
  .pc-faqs__card { padding: 48px 40px 56px; }
  .pc-faqs__title { font-size: 24px; }
}

@media (max-width: 767px) {
  .pc-faqs__card { padding: 32px 20px 40px; border-radius: 12px; }
  .pc-faqs__head { flex-wrap: wrap; align-items: flex-start; }
  .pc-faqs__cta { flex: 1 1 100%; }
  .pc-faqs__cta .pc-btn { width: 100%; }
  .pc-faqs__title { font-size: 21px; }
  .pc-faq__q { gap: 12px; padding: 12px 14px; min-height: 58px; }
  .pc-faq__text { font-size: 15px; }
  .pc-faq__a { padding: 0 14px 16px; font-size: 14px; }
}

/* ---- Landing-page intro banner (FAQ page and reusable elsewhere) ---- */

.pc-banner,
.content-wide .block.pc-banner {
  background: var(--pc-page-bg);
  padding: 18px 0 40px;
  margin: 0;
  font-family: var(--pc-font);
}

/* The banner is a white card on the page background, like the FAQ card. */
.pc-banner__inner {
  box-sizing: border-box;
  width: calc(100% - (var(--pc-gutter) * 2));
  max-width: calc(var(--pc-container) - (var(--pc-gutter) * 2));
  margin: 0 auto;
  padding: 44px 48px 48px;
  border-radius: 16px;
  background: var(--pc-white);
  text-align: center;
}

.pc-banner__title {
  margin: 0;
  color: var(--pc-gold);
  font-size: 36px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-banner__text {
  max-width: 860px;
  margin: 16px auto 0;
  color: var(--pc-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
}

.pc-banner__text p { margin: 0; font: inherit; color: inherit; }

@media (max-width: 767px) {
  .pc-banner,
  .content-wide .block.pc-banner { padding: 40px 0 28px; }
  .pc-banner__title { font-size: 24px; }
  .pc-banner__text { font-size: 15px; }
}

/* ---- Breadcrumb (above landing-page banners) ---- */

.breadcrumb-wrap,
.region-breadcrumb {
  background: var(--pc-page-bg);
  font-family: var(--pc-font);
}

.region-breadcrumb .breadcrumb,
.region-breadcrumb nav {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 16px var(--pc-gutter) 0;
  background: none;
  text-align: start;
}

.region-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.region-breadcrumb li {
  color: var(--pc-muted);
  font-size: 12px;
  line-height: var(--pc-lh);
}

.region-breadcrumb a {
  color: var(--pc-muted);
  text-decoration: none;
}

.region-breadcrumb a:hover { color: var(--pc-gold); }

@media (max-width: 767px) {
  .region-breadcrumb .breadcrumb,
  .region-breadcrumb nav { padding: 12px var(--pc-gutter) 0; }
  .pc-banner__inner { padding: 28px 20px 32px; border-radius: 12px; }
}

/* ---- Page background ----
   Inner pages sit on the light page colour, not white; sections that need
   their own background (services, partner, footer) set it themselves. */

body,
.wrapper,
.wrapper .layout-wrap,
#page-wrapper,
.page-wrapper {
  background: var(--pc-page-bg);
}

/* The views page output keeps the page colour behind its white rows. */
.view-faqs.view-display-id-page_1 { background: transparent; }

/* ==========================================================================
   Form sections (booking, contact)
   Image on one side, a white form card on the other that overlaps it.
   ========================================================================== */

.pc-form,
.content-wide .block.pc-form {
  background: var(--pc-page-bg);
  padding: 8px 0 72px;
  margin: 0;
  font-family: var(--pc-font);
}

.pc-form__inner {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - (var(--pc-gutter) * 2));
  max-width: calc(var(--pc-container) - (var(--pc-gutter) * 2));
  margin: 0 auto;
}

.pc-form__media {
  flex: 0 0 auto;
  width: 640px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.pc-form__media img { display: block; width: 100%; height: 420px; object-fit: cover; }

/* The card overlaps the photo's inner edge, as in the design. */
.pc-form__card {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding: 36px 40px 40px;
  border-radius: 12px;
  background: var(--pc-white);
  box-shadow: 0 6px 30px rgba(12, 39, 75, .08);
  text-align: start;
}

.pc-form__lead {
  margin: 0;
  color: var(--pc-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: var(--pc-lh);
  text-align: center;
}

.pc-form__note {
  margin: 4px 0 24px;
  color: var(--pc-muted);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

.pc-form__note p { margin: 0; font: inherit; color: inherit; }

/* ---- Webform controls ---- */

.pc-form .webform-submission-form { margin: 0; }

.pc-form .form-item,
.pc-form .js-form-item { margin: 0 0 12px; }

.pc-form input[type="text"],
.pc-form input[type="email"],
.pc-form input[type="tel"],
.pc-form input[type="date"],
.pc-form select,
.pc-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid #E3E1DD;
  border-radius: 8px;
  background: var(--pc-white);
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 14px;
  line-height: var(--pc-lh);
}

.pc-form textarea { min-height: 96px; resize: vertical; }

.pc-form input::placeholder,
.pc-form textarea::placeholder { color: #9AA3AE; }

.pc-form input:focus,
.pc-form select:focus,
.pc-form textarea:focus {
  outline: none;
  border-color: var(--pc-gold);
}

.pc-form .form-actions { margin: 20px 0 0; }

.pc-form .form-actions input[type="submit"],
.pc-form .webform-button--submit {
  width: 100%;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--pc-navy);
  color: var(--pc-white);
  font-family: var(--pc-font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease;
}

.pc-form .form-actions input[type="submit"]:hover,
.pc-form .webform-button--submit:hover { background: #163A6B; }

/* ---- Form responsive ---- */

@media (max-width: 991px) {
  .pc-form__inner { flex-wrap: wrap; }
  .pc-form__media { flex: 1 1 100%; width: 100%; }
  .pc-form__media img { height: 260px; }
  .pc-form__card { flex: 1 1 100%; margin-top: -40px; }
}

@media (max-width: 575px) {
  .pc-form,
  .content-wide .block.pc-form { padding: 8px 0 48px; }
  .pc-form__card { padding: 24px 18px 28px; }
}

/* Martis renders form-item wrappers inline, which collapsed the tel, select
   and submit to their content width. Force the whole form to a single column. */
.pc-form .webform-submission-form > div,
.pc-form .form-item,
.pc-form .js-form-item,
.pc-form .form-actions,
.pc-form .js-form-wrapper {
  display: block;
  width: 100%;
  float: none;
  margin-inline: 0;
}

.pc-form .form-actions input[type="submit"],
.pc-form .webform-button--submit {
  display: block;
  width: 100%;
  float: none;
}

/* Webform wraps selects in .select-wrapper, which shrinks to content. */
.pc-form .select-wrapper { display: block; width: 100%; }

/* Native date control keeps its own alignment in RTL. */
.pc-form input[type="date"] { direction: rtl; text-align: start; }

/* The submit keeps Martis' inline button sizing; pin it to the card width. */
.pc-form .form-actions .webform-button--submit,
.pc-form input.form-submit,
.pc-form .webform-actions .button {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Martis ships `.webform-submission-form .webform-button--submit { width:auto
   !important }`, so this needs !important too — scoped to our form sections
   only, leaving other webforms on the site untouched. */
.pc-form .webform-submission-form .webform-button--submit {
  width: 100% !important;
}

/* ---- Banner eyebrow (contact page) ---- */

.pc-banner__eyebrow {
  margin: 0 0 8px;
  color: var(--pc-gold);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

/* ---- Contact form: first three fields sit on one row ---- */

@media (min-width: 768px) {
  .pc-form--contact-us .webform-submission-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 12px;
  }
  /* name / email / phone take one column each; the rest span the row. */
  .pc-form--contact-us .webform-submission-form > .js-form-item:nth-of-type(n + 4),
  .pc-form--contact-us .webform-submission-form > .form-actions,
  .pc-form--contact-us .webform-submission-form > .js-form-wrapper {
    grid-column: 1 / -1;
  }
}

/* Booking: a large photo on the left with a narrower card overlapping its
   inner edge. The export is 1064×710, its natural size in the design.
   1064 + 525 − 310 overlap = 1279 ≈ the 1280 content width. */
.pc-form--booking .pc-form__inner { align-items: center; }

.pc-form--booking .pc-form__media {
  flex: 0 0 1064px;
  width: 1064px;
  max-width: 100%;
}

.pc-form--booking .pc-form__media img { height: 710px; }

.pc-form--booking .pc-form__card {
  flex: 0 0 525px;
  margin-inline-end: -310px;
}

@media (max-width: 1199px) {
  .pc-form--booking .pc-form__media { flex: 1 1 auto; width: auto; }
  .pc-form--booking .pc-form__media img { height: 520px; }
  .pc-form--booking .pc-form__card { flex: 0 0 440px; margin-inline-end: -160px; }
}

@media (max-width: 991px) {
  .pc-form--booking .pc-form__media img { height: 320px; }
  .pc-form--booking .pc-form__card { flex: 1 1 100%; margin-inline-end: 0; }
}

/* Contact: two equal columns, and the photo matches the form's full height. */
.pc-form--contact-us .pc-form__inner {
  align-items: stretch;
  gap: 16px;
}

.pc-form--contact-us .pc-form__card {
  flex: 1 1 0;
  min-width: 0;
  margin-inline-start: 0;
  box-shadow: none;
  padding: 0;
  background: none;
}

.pc-form--contact-us .pc-form__media {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.pc-form--contact-us .pc-form__media img {
  height: 100%;
  min-height: 415px;                /* the supplied photo is 632×415 */
}

/* The details field is a tall box in the design. */
.pc-form--contact-us textarea { min-height: 160px; }

@media (max-width: 991px) {
  .pc-form--contact-us .pc-form__card { margin-inline-start: 0; margin-top: 24px; }
  .pc-form--contact-us .pc-form__media { width: 100%; }
}

/* ==========================================================================
   Contact details — addresses, email, socials and the map
   ========================================================================== */

.pc-cd,
.content-wide .block.pc-cd {
  background: var(--pc-page-bg);
  padding: 0 0 80px;
  margin: 0;
  font-family: var(--pc-font);
}

.pc-cd__inner {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: calc(100% - (var(--pc-gutter) * 2));
  max-width: calc(var(--pc-container) - (var(--pc-gutter) * 2));
  margin: 0 auto;
}

/* First in DOM = right in RTL, matching the design. */
.pc-cd__list { flex: 0 0 340px; }

.pc-cd__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #F1ECE5;
}

.pc-cd__icon { flex: 0 0 auto; display: inline-flex; color: var(--pc-navy); }

.pc-cd__label {
  color: var(--pc-navy);
  font-size: 14px;
  font-weight: 500;
  line-height: var(--pc-lh);
  text-decoration: none;
}

a.pc-cd__label:hover { color: var(--pc-gold); }

.pc-cd__social { display: flex; gap: 10px; margin-top: 16px; }

.pc-cd__soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #F1ECE5;
  transition: background-color .2s ease;
}

.pc-cd__soc:hover { background: #E4DCD0; }

.pc-cd__map {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

.pc-cd__map iframe { display: block; width: 100%; border: 0; }

@media (max-width: 991px) {
  .pc-cd__inner { flex-wrap: wrap; }
  .pc-cd__list { flex: 1 1 100%; }
  .pc-cd__map { flex: 1 1 100%; }
  .pc-cd__map iframe { height: 320px; }
}

/* Martis swaps every <select> for a jQuery niceSelect widget at runtime, so
   the real control is 0×0 and this div is what the user sees. It needs the
   same sizing and skin as the other fields. */
.pc-form .select-wrapper,
.pc-form .nice-select {
  display: block;
  width: 100% !important;
}

.pc-form .nice-select {
  box-sizing: border-box;
  height: auto;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid #E3E1DD;
  border-radius: 8px;
  background: var(--pc-white);
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 14px;
  line-height: var(--pc-lh);
  float: none;
}

.pc-form .nice-select .current { color: var(--pc-navy); }
.pc-form .nice-select .list { width: 100%; }
.pc-form .nice-select .option { font-family: var(--pc-font); font-size: 14px; }

/* ==========================================================================
   About page
   Intro reuses .pc-about (no feature rows or CTA on this page).
   Then: value cards · لماذا نحن dark band · كلمة الإدارة · closing CTA.
   ========================================================================== */

/* ---- Vision / mission / values ---- */

.block-views-blockvalue-cards-block-1 {
  background: var(--pc-page-bg);
  padding: 0 0 72px;
}

.block-views-blockvalue-cards-block-1 .container-wrap,
.block-views-blockvalue-cards-block-1 .block-content {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.block-views-blockvalue-cards-block-1 .view-item {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 0 var(--pc-gutter);
}

.pc-val {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  padding: 28px 28px 32px;
  border-radius: 12px;
  background: var(--pc-white);
  text-align: center;
}

.pc-val__title {
  margin: 0 0 12px;
  color: var(--pc-gold);
  font-size: 20px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-val__text {
  color: var(--pc-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
}

.pc-val__text p { margin: 0; font: inherit; color: inherit; }

/* ---- لماذا نحن ---- */

.pc-whys,
.content-wide .block.pc-whys {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 0 80px;
  margin: 0;
  background: var(--pc-navy);
  font-family: var(--pc-font);
}

.pc-whys__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.pc-whys__veil {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(12, 39, 75, .85);
}

.pc-whys__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 0 var(--pc-gutter);
}

.pc-whys__head { text-align: center; }

.pc-whys__rule {
  display: block; width: 28.74px; height: 2.87px;
  margin: 0 auto; background: #A97C00;
}

.pc-whys__title {
  margin: 17px 0 0;
  color: var(--pc-gold);
  font-size: 30px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-whys__grid { margin-top: 44px; }

.pc-whys__grid .view-item {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.pc-why {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.pc-why__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
}

.pc-why__icon { width: 34px; height: 34px; display: block; }

.pc-why__title {
  margin: 0 0 10px;
  color: var(--pc-gold);
  font-size: 17px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-why__text {
  color: #8EAED9;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
}

.pc-why__text p { margin: 0; font: inherit; color: inherit; }

/* ---- كلمة الإدارة ---- */

.pc-quote,
.content-wide .block.pc-quote {
  background: var(--pc-page-bg);
  padding: 80px 0;
  margin: 0;
  font-family: var(--pc-font);
}

.pc-quote__inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: calc(100% - (var(--pc-gutter) * 2));
  max-width: calc(var(--pc-container) - (var(--pc-gutter) * 2));
  margin: 0 auto;
}

/* Card first => right in RTL; photo sits on the left and is overlapped. */
.pc-quote__card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex: 0 0 640px;
  margin-inline-end: -220px;
  padding: 44px 48px;
  border-radius: 12px;
  background: var(--pc-white);
  box-shadow: 0 6px 30px rgba(12, 39, 75, .08);
  text-align: start;
}

.pc-quote__title {
  margin: 0 0 18px;
  color: var(--pc-gold);
  font-size: 30px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-quote__text {
  color: var(--pc-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}

.pc-quote__text p { margin: 0; font: inherit; color: inherit; }

.pc-quote__media { flex: 1 1 auto; min-width: 0; border-radius: 12px; overflow: hidden; }
.pc-quote__media img { display: block; width: 100%; height: 470px; object-fit: cover; }

/* ---- Closing CTA band ---- */

.pc-ctab,
.content-wide .block.pc-ctab {
  background: var(--pc-page-bg);
  padding: 0 0 80px;
  margin: 0;
  font-family: var(--pc-font);
}

.pc-ctab__inner {
  box-sizing: border-box;
  width: calc(100% - (var(--pc-gutter) * 2));
  max-width: calc(var(--pc-container) - (var(--pc-gutter) * 2));
  margin: 0 auto;
  padding: 40px 32px 44px;
  border-radius: 12px;
  background: #E7E6E4;
  text-align: center;
}

.pc-ctab__text {
  max-width: 820px;
  margin: 0 auto;
  color: var(--pc-gold);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.9;
}

.pc-ctab__text p { margin: 0; font: inherit; color: inherit; }

.pc-ctab__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

.pc-ctab__actions .pc-btn { width: 201.638px; padding: 0; }

/* ---- About page responsive ---- */

@media (max-width: 991px) {
  .block-views-blockvalue-cards-block-1 .view-item { flex-wrap: wrap; }
  .pc-val { flex: 1 1 100%; }
  .pc-why { flex: 1 1 calc(50% - 12px); }
  .pc-quote__inner { flex-wrap: wrap; }
  .pc-quote__card { flex: 1 1 100%; margin-inline-end: 0; order: 2; margin-top: -40px; }
  .pc-quote__media { flex: 1 1 100%; order: 1; }
  .pc-quote__media img { height: 300px; }
}

@media (max-width: 575px) {
  .pc-why { flex: 1 1 100%; }
  .pc-whys__title, .pc-quote__title { font-size: 22px; }
  .pc-quote__card { padding: 28px 20px; }
  .pc-ctab__actions { flex-wrap: wrap; }
  .pc-ctab__actions .pc-btn { width: 100%; }
}

/* ==========================================================================
   Services listing + single service page
   ========================================================================== */

/* ---- Listing (paged) ---- */

.block-views-blockdepartments-block-list {
  background: var(--pc-page-bg);
  padding: 8px 0 80px;
}

.block-views-blockdepartments-block-list .container-wrap,
.block-views-blockdepartments-block-list .block-content {
  max-width: none; width: 100%; padding: 0; margin: 0;
}

.block-views-blockdepartments-block-list .view-item {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 0 var(--pc-gutter);
}

/* On the listing the cards sit on the light page, so invert the home colours. */
.block-views-blockdepartments-block-list .pc-dep {
  flex: 0 0 calc(33.333% - 11px);
  background: var(--pc-white);
  border: 1px solid #ECE9E4;
}

.block-views-blockdepartments-block-list .pc-dep__title { color: var(--pc-navy); }
.block-views-blockdepartments-block-list .pc-dep__text { color: var(--pc-muted); }

/* Icons are white SVGs; tint them navy on the light cards. */
.block-views-blockdepartments-block-list .pc-dep__icon {
  filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(1800%) hue-rotate(196deg) brightness(95%) contrast(95%);
}

/* ---- Pager ---- */

.block-views-blockdepartments-block-list .pager {
  max-width: var(--pc-container);
  margin: 32px auto 0;
  padding: 0 var(--pc-gutter);
}

.block-views-blockdepartments-block-list .pager__items {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.block-views-blockdepartments-block-list .pager__item { margin: 0; }

.block-views-blockdepartments-block-list .pager__item a,
.block-views-blockdepartments-block-list .pager__item.is-active a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #E3E1DD;
  border-radius: 8px;
  background: var(--pc-white);
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.block-views-blockdepartments-block-list .pager__item a:hover {
  border-color: var(--pc-gold);
  color: var(--pc-gold);
}

.block-views-blockdepartments-block-list .pager__item.is-active a {
  background: var(--pc-navy);
  border-color: var(--pc-navy);
  color: var(--pc-white);
}

/* ---- Single service page ---- */

.pc-dep-page { background: var(--pc-page-bg); font-family: var(--pc-font); }

.pc-dep-page__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 24px var(--pc-gutter) 80px;
}

.pc-dep-page__media {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 28px;
}

.pc-dep-page__media img { display: block; width: 100%; height: 380px; object-fit: cover; }

.pc-dep-page__body {
  box-sizing: border-box;
  padding: 36px 40px 40px;
  border-radius: 12px;
  background: var(--pc-white);
  text-align: start;
}

.pc-dep-page__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: #F1ECE5;
}

.pc-dep-page__tile img {
  width: 34px; height: 34px;
  filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(1800%) hue-rotate(196deg) brightness(95%) contrast(95%);
}

.pc-dep-page__title {
  margin: 0 0 14px;
  color: var(--pc-gold);
  font-size: 30px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-dep-page__text {
  color: var(--pc-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}

.pc-dep-page__text p { margin: 0 0 10px; font: inherit; color: inherit; }

@media (max-width: 991px) {
  .block-views-blockdepartments-block-list .pc-dep { flex: 0 0 calc(50% - 8px); }
  .pc-dep-page__media img { height: 260px; }
}

@media (max-width: 575px) {
  .block-views-blockdepartments-block-list .pc-dep { flex: 1 1 100%; }
  .pc-dep-page__body { padding: 24px 18px 28px; }
  .pc-dep-page__title { font-size: 22px; }
}

/* Drupal marks the current page with .is-active on the link in some markup
   variants and on the li in others — cover both. */
.block-views-blockdepartments-block-list .pager__item a.is-active,
.block-views-blockdepartments-block-list .pager__item.is-active > a,
.block-views-blockdepartments-block-list .pager__item--active a {
  background: var(--pc-navy) !important;
  border-color: var(--pc-navy) !important;
  color: var(--pc-white) !important;
}

/* The department card is a link; keep it looking like a card. */
a.pc-dep {
  display: block;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

a.pc-dep:hover,
a.pc-dep:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(12, 39, 75, .10);
}

a.pc-dep:hover .pc-dep__title { color: var(--pc-gold); }

.block-views-blockdepartments-block-list a.pc-dep:hover { border-color: var(--pc-gold); }

/* ---- Single service page: lead, details, points, actions ---- */

.pc-dep-page__lead {
  margin: 0 0 18px;
  color: var(--pc-navy);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.9;
}

.pc-dep-page__lead p { margin: 0; font: inherit; color: inherit; }

.pc-dep-page__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.pc-dep-page__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--pc-navy);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}

.pc-dep-page__tick { flex: 0 0 auto; display: inline-flex; color: var(--pc-gold); margin-top: 2px; }

/* The actions had no spacing at all — they sat flush against each other. */
.pc-dep-page__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid #ECE9E4;
}

.pc-dep-page__cta .pc-btn {
  min-width: 190px;
  height: 48px;
  padding: 0 26px;
  font-size: 15px;
}

@media (max-width: 767px) {
  .pc-dep-page__points { grid-template-columns: 1fr; }
  .pc-dep-page__cta .pc-btn { flex: 1 1 100%; min-width: 0; }
}

/* ==========================================================================
   Doctors listing + single doctor page
   ========================================================================== */

/* The card is a link now; keep the figure look. */
a.pc-doc {
  display: block;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

a.pc-doc:hover,
a.pc-doc:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(12, 39, 75, .16);
}

a.pc-doc:hover .pc-doc__name { color: var(--pc-gold); }

/* ---- Listing (paged) ---- */

.block-views-blockdoctors-block-list {
  background: var(--pc-page-bg);
  padding: 8px 0 80px;
}

.block-views-blockdoctors-block-list .container-wrap,
.block-views-blockdoctors-block-list .block-content {
  max-width: none; width: 100%; padding: 0; margin: 0;
}

.block-views-blockdoctors-block-list .view-item {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16.47px;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 0 var(--pc-gutter);
}

.block-views-blockdoctors-block-list .pc-doc {
  flex: 0 0 calc(25% - 12.36px);
  height: 336.94px;
}

/* Pager shares the listing styling. */
.block-views-blockdoctors-block-list .pager {
  max-width: var(--pc-container);
  margin: 32px auto 0;
  padding: 0 var(--pc-gutter);
}

.block-views-blockdoctors-block-list .pager__items {
  display: flex; justify-content: center; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}

.block-views-blockdoctors-block-list .pager__item a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid #E3E1DD; border-radius: 8px;
  background: var(--pc-white); color: var(--pc-navy);
  font-family: var(--pc-font); font-size: 14px; font-weight: 600;
  text-decoration: none;
}

.block-views-blockdoctors-block-list .pager__item a:hover { border-color: var(--pc-gold); color: var(--pc-gold); }

.block-views-blockdoctors-block-list .pager__item a.is-active,
.block-views-blockdoctors-block-list .pager__item.is-active > a {
  background: var(--pc-navy) !important;
  border-color: var(--pc-navy) !important;
  color: var(--pc-white) !important;
}

/* ---- Single doctor page ---- */

.pc-doc-page { background: var(--pc-page-bg); font-family: var(--pc-font); }

.pc-doc-page__inner {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 24px var(--pc-gutter) 80px;
}

/* Body first => right in RTL, portrait on the left. */
.pc-doc-page__body {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  padding: 36px 40px 40px;
  border-radius: 12px;
  background: var(--pc-white);
  text-align: start;
}

.pc-doc-page__media {
  flex: 0 0 380px;
  border-radius: 12px;
  overflow: hidden;
}

.pc-doc-page__media img { display: block; width: 100%; height: 440px; object-fit: cover; }

.pc-doc-page__title {
  margin: 0 0 6px;
  color: var(--pc-gold);
  font-size: 30px;
  font-weight: 700;
  line-height: var(--pc-lh);
}

.pc-doc-page__role {
  margin: 0 0 18px;
  color: var(--pc-navy);
  font-size: 16px;
  font-weight: 600;
  line-height: var(--pc-lh);
}

.pc-doc-page__text {
  color: var(--pc-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}

.pc-doc-page__text p { margin: 0; font: inherit; color: inherit; }

.pc-doc-page__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.pc-doc-page__points li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--pc-navy); font-size: 15px; font-weight: 500; line-height: 1.7;
}

.pc-doc-page__tick { flex: 0 0 auto; display: inline-flex; color: var(--pc-gold); margin-top: 2px; }

@media (max-width: 1199px) {
  .block-views-blockdoctors-block-list .pc-doc { flex: 0 0 calc(33.333% - 11px); }
}

@media (max-width: 991px) {
  .block-views-blockdoctors-block-list .pc-doc { flex: 0 0 calc(50% - 8px); }
  .pc-doc-page__inner { flex-wrap: wrap; }
  .pc-doc-page__media { flex: 1 1 100%; }
  .pc-doc-page__media img { height: 320px; }
  .pc-doc-page__body { flex: 1 1 100%; }
}

@media (max-width: 767px) {
  .block-views-blockdoctors-block-list .pc-doc { flex: 1 1 100%; }
  .pc-doc-page__points { grid-template-columns: 1fr; }
  .pc-doc-page__title { font-size: 22px; }
}

/* ==========================================================================
   Auth pages (login / register)
   Dark banner over a photo, then a white card holding the form.
   ========================================================================== */

/* ---- Dark banner variant ---- */

.pc-banner--dark,
.content-wide .block.pc-banner--dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pc-navy);
  /* Tall band: the form card sits over its lower half, as in the design. */
  min-height: 475px;
  padding: 56px 0 0;
}

.pc-banner__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.pc-banner__veil {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(12, 39, 75, .72);   /* photo stays visible */
}

.pc-banner--dark .pc-banner__inner {
  background: none;
  padding: 0 var(--pc-gutter);
  border-radius: 0;
}

.pc-banner--dark .pc-banner__title { color: var(--pc-gold); }

.pc-banner--dark .pc-banner__text {
  color: var(--pc-white);
  font-size: 15px;
}

.pc-banner--dark .pc-banner__text a { color: var(--pc-gold); text-decoration: underline; }

/* ---- The form card ---- */

.pc-auth-form {
  box-sizing: border-box;
  width: 100%;
  max-width: 664px;   /* 46% of the 1440 frame, per the design */
  margin: -281px auto 80px;        /* card top sits 194px into the banner */
  padding: 36px 40px 40px;
  border-radius: 12px;
  background: var(--pc-white);
  box-shadow: 0 10px 40px rgba(12, 39, 75, .12);
  font-family: var(--pc-font);
  text-align: start;
}

.pc-auth__icon {
  display: block;
  margin: 0 auto 26px;
  color: var(--pc-gold);
  text-align: center;
}

.pc-auth-form .form-item,
.pc-auth-form .js-form-item { display: block; width: 100%; margin: 0 0 16px; }

.pc-auth-form label,
.pc-auth-form .control-label {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  margin-bottom: 6px;
  color: var(--pc-navy);
  font-size: 14px;
  font-weight: 600;
  line-height: var(--pc-lh);
}

.pc-auth-form input[type="text"],
.pc-auth-form input[type="email"],
.pc-auth-form input[type="tel"],
.pc-auth-form input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid #E3E1DD;
  border-radius: 8px;
  background: var(--pc-white);
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 14px;
}

.pc-auth-form input:focus { outline: none; border-color: var(--pc-gold); }

/* Drupal's password strength meter is noise on this design. */
.pc-auth-form .password-strength,
.pc-auth-form .password-confirm-match,
.pc-auth-form .description { display: none; }

.pc-auth-form .pass-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--pc-muted);
  font-size: 13px;
  text-decoration: none;
}

.pc-auth-form .pass-link:hover { color: var(--pc-gold); }

.pc-auth-form .form-actions { margin: 24px 0 0; }

.pc-auth-form .form-actions input[type="submit"],
.pc-auth-form input.form-submit {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--pc-navy);
  color: var(--pc-white);
  font-family: var(--pc-font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease;
}

.pc-auth-form .form-actions input[type="submit"]:hover { background: #163A6B; }

.pc-auth__alt {
  margin: 20px 0 0;
  color: var(--pc-muted);
  font-size: 14px;
  text-align: center;
}

.pc-auth__alt a { color: var(--pc-gold); font-weight: 600; text-decoration: none; }
.pc-auth__alt a:hover { text-decoration: underline; }

@media (max-width: 575px) {
  .pc-banner--dark,
  .content-wide .block.pc-banner--dark { min-height: 380px; padding: 40px 0 0; }
  .pc-auth-form { padding: 28px 20px 32px; margin-top: -220px; margin-bottom: 56px; }
}

/* Martis wraps auth forms in .auth-user-form and caps it at 500px, which
   clamped the card regardless of its own max-width. The design card is 664. */
.auth-user-form {
  max-width: 664px;
  width: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   OFFERS — Commerce products with one variation
   Card:     Figma 250:1803 — 308×384, white, 1px #E8E8E8, radius 12
             image 282.8×150.83 at (11.6, 10.98) radius 8
             category 10px gold · title 20/600 navy · desc 12/18 #555
             price 12/600 gold + was 12/400 red line-through · saving 12 gold
             divider y 316.45 · button 183.17×40 navy r8 · link 12/600 gold
   Listing:  Offers.pdf — banner card, chip bar (navy pill, gold text), 4-up grid
   Details:  Offer details.pdf — photo RIGHT, copy LEFT (RTL: photo first in DOM)
   ========================================================================== */

/* ---- Banner typography shared by every landing page (eyebrow + title + lede)
   Offers.pdf: eyebrow 24px gold, title 36px navy, lede 20px #555. ---- */

.pc-banner__eyebrow { font-size: 24px; font-weight: 600; margin-bottom: 0; }

.pc-banner__eyebrow + .pc-banner__title { color: var(--pc-navy); margin-top: 14px; font-weight: 600; }

.pc-banner__text { font-size: 20px; line-height: 1.7; margin-top: 18px; }

/* ---- The card ---- */

.pc-offer {
  box-sizing: border-box;
  position: relative;
  width: 308px;
  overflow: hidden;
  border: 1px solid #E8E8E8;
  border-radius: 12px;
  background: var(--pc-white);
  font-family: var(--pc-font);
  text-align: start;
  padding-bottom: 20px;
}

.pc-offer__media {
  display: block;
  height: 150.83px;
  margin: 10.98px 11.6px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #F1ECE5;
}

.pc-offer__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pc-offer__body { padding: 0 17.6px 0 15.8px; }

.pc-offer__cat {
  margin: 11.3px 0 0;
  color: var(--pc-gold);
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
}

.pc-offer__title {
  margin: 9.6px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-offer__title a { color: var(--pc-navy); text-decoration: none; }
.pc-offer__title a:hover { color: var(--pc-gold); }

.pc-offer__desc {
  height: 36px;
  margin: 10.4px 0 0;
  color: var(--pc-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pc-offer__desc p { margin: 0; font: inherit; color: inherit; }

/* Price on the right, saving on the left of the same row. */
.pc-offer__price {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 23.2px;
  margin-top: 7.3px;
  font-size: 12px;
  line-height: 23.2px;
}

.pc-offer__now { color: var(--pc-gold); font-weight: 600; }
.pc-offer__was { margin-inline-end: auto; color: var(--pc-red); font-weight: 400; text-decoration: line-through; }
.pc-offer__save { color: var(--pc-gold); font-weight: 400; }

.pc-offer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 11.9px;
  padding-top: 8.8px;
  border-top: 1px solid #E8E8E8;
}

.pc-offer__more {
  color: var(--pc-gold);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

.pc-offer__more:hover { text-decoration: underline; }

/* ---- Add-to-cart form, as a plain navy button ----
   Used by the card (183×40) and the details page (full width). */

.pc-offer__buy,
.pc-op__buy { line-height: 0; }

.pc-offer__buy form,
.pc-op__buy form,
.pc-offer__buy .form-actions,
.pc-op__buy .form-actions { margin: 0; padding: 0; }

.pc-offer__buy .field,
.pc-op__buy .field,
.pc-offer__buy .field-item,
.pc-op__buy .field-item { margin: 0; padding: 0; }

.pc-offer__buy .form-item,
.pc-op__buy .form-item { display: none; }

.pc-offer__buy input[type="submit"],
.pc-op__buy input[type="submit"] {
  display: block;
  box-sizing: border-box;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--pc-navy);
  color: var(--pc-white);
  font-family: var(--pc-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 40px;
  cursor: pointer;
  transition: background-color .2s ease;
}

.pc-offer__buy input[type="submit"] { width: 183.166px; }
.pc-op__buy input[type="submit"] { width: 100%; height: 47px; font-size: 14px; line-height: 47px; }

.pc-offer__buy input[type="submit"]:hover,
.pc-op__buy input[type="submit"]:hover { background: #163A6B; transform: none; }

/* ==========================================================================
   /offers — chip bar + grid
   ========================================================================== */

.pc-offers,
.content-wide .block.pc-offers {
  background: var(--pc-page-bg);
  padding: 0 0 80px;
  margin: 0;
  font-family: var(--pc-font);
}

.pc-offers__inner {
  box-sizing: border-box;
  width: calc(100% - (var(--pc-gutter) * 2));
  max-width: calc(var(--pc-container) - (var(--pc-gutter) * 2));
  margin: 0 auto;
}

.pc-chips {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 5px 0 26px;
  padding: 17px 54px;
  border-radius: 12px;
  background: var(--pc-white);
}

.pc-chip {
  display: inline-block;
  height: 37px;
  padding: 0 20px;
  border-radius: 8px;
  color: var(--pc-navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 37px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.pc-chip:hover { color: var(--pc-gold); }
.pc-chip.is-active { background: var(--pc-navy); color: var(--pc-gold); }

.pc-offers__grid .view-item,
.pc-ohome__grid .view-item,
.block-views-blockoffers-featured-block-related .view-item {
  display: grid;
  grid-template-columns: repeat(4, 308px);
  gap: 32px 16px;
  justify-content: center;
}

/* ---- Pager (only appears once there are more than 12 offers) ---- */

.pc-offers .pager { margin: 40px 0 0; }
.pc-offers .pager__items { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pc-offers .pager__item a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid #E3E1DD; border-radius: 8px;
  background: var(--pc-white); color: var(--pc-navy);
  font-family: var(--pc-font); font-size: 14px; font-weight: 600; text-decoration: none;
}
.pc-offers .pager__item a:hover { border-color: var(--pc-gold); color: var(--pc-gold); }
.pc-offers .pager__item a.is-active,
.pc-offers .pager__item.is-active > a { background: var(--pc-navy) !important; border-color: var(--pc-navy) !important; color: var(--pc-white) !important; }

/* ==========================================================================
   Home — offers band «عروض حصرية»
   Band 250:1789 is WHITE, 1440×460 at y 2857; the cards (y 3132, 384 tall)
   hang 199px below it onto the page colour, 81px short of the emergency card.
   Eyebrow 250:1798 24/600 navy · heading 250:1796 36/600 gold
   lede 250:1797 20/400 #555 lh 2 · button 201.64×40 outlined, on the left
   ========================================================================== */

.pc-ohome,
.content-wide .block.pc-ohome {
  padding: 80.6px 0 81px;
  margin: 0;
  background: linear-gradient(to bottom, var(--pc-white) 0, var(--pc-white) 460px, var(--pc-page-bg) 460px);
  font-family: var(--pc-font);
}

.pc-ohome__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 0 var(--pc-gutter);
}

.pc-ohome__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pc-ohome__intro { flex: 1 1 auto; text-align: start; }
.pc-ohome__rule { display: block; width: 28.74px; height: 2.87px; background: #A97C00; }

.pc-ohome__eyebrow { margin: 14px 0 0; color: var(--pc-navy); font-size: 24px; font-weight: 600; line-height: 36px; }
.pc-ohome__title { margin: 12px 0 0; color: var(--pc-gold); font-size: 36px; font-weight: 600; line-height: 54px; }
.pc-ohome__text { margin: 7px 0 0; color: var(--pc-muted); font-size: 20px; font-weight: 400; line-height: 40px; }
.pc-ohome__text p { margin: 0; font: inherit; color: inherit; }

.pc-ohome__cta { flex: 0 0 auto; margin-bottom: 8px; }
.pc-ohome__cta .pc-btn { width: 201.638px; padding: 0; }
.pc-ohome__grid { margin-top: 28px; }

/* ==========================================================================
   Offer details (Offer details.pdf, 1440 frame, 80px gutters)
   Hero: photo x 728–1360 · copy x 80–712 · 499px tall
   title 36 · desc 14 · price 36 gold · was 24 red / saving 24 gold
   label 14 bold · bullets 14 on a 30px pitch · note 14 bold · button 47 tall
   ========================================================================== */

/* Release the theme's 1220px content container on offer pages. */
.pc-wide .page-wrapper { padding: 0; background: var(--pc-page-bg); }
.pc-wide .page-wrapper > .container,
.pc-wide .page-wrapper .content-layout,
.pc-wide .page-wrapper .main-content,
.pc-wide .page-wrapper .region-content,
.pc-wide .page-wrapper .block-system-main-block,
.pc-wide .page-wrapper .block-system-main-block > .container-wrap,
.pc-wide .page-wrapper .block-system-main-block .block-content { max-width: none; width: 100%; padding: 0; margin: 0; }

.pc-op { font-family: var(--pc-font); background: var(--pc-page-bg); }

.pc-op__inner {
  box-sizing: border-box;
  padding-top: 40px;
}

/* Photo first in the DOM => right-hand column in RTL. */
.pc-op__hero { display: flex; align-items: stretch; gap: 16px; }

.pc-op__media { flex: 0 0 632px; border-radius: 12px; overflow: hidden; background: #F1ECE5; }
.pc-op__media img { display: block; width: 100%; height: 100%; min-height: 499px; object-fit: cover; }

.pc-op__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; text-align: start; }

.pc-op__title { margin: 0; color: var(--pc-navy); font-size: 36px; font-weight: 700; line-height: 54px; }

.pc-op__desc { margin: 22px 0 0; color: var(--pc-muted); font-size: 14px; font-weight: 400; line-height: 21px; }
.pc-op__desc p { margin: 0; font: inherit; color: inherit; }

.pc-op__price { margin: 10px 0 0; color: var(--pc-gold); font-size: 36px; font-weight: 700; line-height: 54px; }

.pc-op__saving { display: flex; align-items: center; gap: 24px; margin: 8px 0 0; font-size: 24px; line-height: 36px; }
.pc-op__was { color: var(--pc-red); font-weight: 400; text-decoration: line-through; }
.pc-op__save { color: var(--pc-gold); font-weight: 400; }

.pc-op__label { margin: 25px 0 0; color: var(--pc-navy); font-size: 14px; font-weight: 700; line-height: 21px; }

.pc-op__points { margin: 5px 0 0; padding: 0; list-style: none; }
.pc-op__points li {
  position: relative;
  padding-inline-start: 20px;
  color: var(--pc-muted);
  font-size: 14px;
  line-height: 30px;
}
.pc-op__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 13px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pc-navy);
}

.pc-op__note { margin: 14px 0 0; color: var(--pc-navy); font-size: 14px; font-weight: 700; line-height: 21px; }
.pc-op__buy { margin-top: 40px; }

/* Terms (right) and FAQs (left), both white cards. */
.pc-op__cards { display: flex; align-items: stretch; gap: 16px; margin-top: 54px; }

.pc-op__card {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  padding: 28px 24px 28px;
  border-radius: 12px;
  background: var(--pc-white);
  text-align: start;
}

.pc-op__card-title { margin: 0 0 8px; color: var(--pc-gold); font-size: 14px; font-weight: 700; line-height: 21px; }

.pc-op__list { margin: 0; padding-inline-start: 22px; list-style: disc; }
.pc-op__list li { color: var(--pc-navy); font-size: 14px; line-height: 30px; }
.pc-op__list li::marker { color: var(--pc-navy); font-size: 10px; }

.pc-op__q { margin: 0; color: var(--pc-navy); font-size: 14px; font-weight: 700; line-height: 30px; }
.pc-op__a { color: var(--pc-muted); font-size: 14px; line-height: 30px; }
.pc-op__a p { margin: 0; font: inherit; color: inherit; }

/* ---- Steps (a block after the details) ---- */

.pc-steps,
.content-wide .block.pc-steps { padding: 76px 0 0; margin: 0; background: var(--pc-page-bg); font-family: var(--pc-font); }

.pc-steps__inner { box-sizing: border-box; }

.pc-steps__title { margin: 0; color: var(--pc-navy); font-size: 36px; font-weight: 700; line-height: 54px; text-align: start; }

.pc-steps__grid { margin-top: 47px; }
.pc-steps__grid .view-item { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.pc-step {
  position: relative;
  box-sizing: border-box;
  padding: 41px 22px 17px;
  border-radius: 12px;
  background: var(--pc-white);
  text-align: center;
}

/* The badge is centred on the card's top edge. */
.pc-step__num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 57px;
  height: 57px;
  border-radius: 8px;
  background: var(--pc-navy);
  color: var(--pc-gold);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.pc-step__title { margin: 0; color: var(--pc-gold); font-size: 24px; font-weight: 600; line-height: 36px; }
.pc-step__text { margin-top: 18px; color: var(--pc-muted); font-size: 14px; line-height: 28px; }
.pc-step__text p { margin: 0; font: inherit; color: inherit; }

/* ---- Related offers (views block; heading is the block title) ---- */

.block-views-blockoffers-featured-block-related {
  padding: 48px 0 80px;
  margin: 0;
  background: var(--pc-page-bg);
  font-family: var(--pc-font);
}

.block-views-blockoffers-featured-block-related .container-wrap,
.block-views-blockoffers-featured-block-related .block-content { max-width: none; width: 100%; padding: 0; margin: 0; }

.block-views-blockoffers-featured-block-related .block-title-wrap { margin-bottom: 22px; }
.block-views-blockoffers-featured-block-related .block-title-content { max-width: none; padding: 0; margin: 0; }

.block-views-blockoffers-featured-block-related .block-title {
  margin: 0;
  padding: 0;
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 54px;
  text-align: start;
}

/* ==========================================================================
   Offers — responsive
   ========================================================================== */

@media (max-width: 1399px) {
  .pc-offers__grid .view-item,
  .pc-ohome__grid .view-item,
  .block-views-blockoffers-featured-block-related .view-item { grid-template-columns: repeat(3, 308px); }
}

@media (max-width: 1023px) {
  .pc-offers__grid .view-item,
  .pc-ohome__grid .view-item,
  .block-views-blockoffers-featured-block-related .view-item { grid-template-columns: repeat(2, 308px); }

  .pc-op__hero { flex-wrap: wrap; }
  .pc-op__media { flex: 1 1 100%; }
  .pc-op__media img { min-height: 320px; max-height: 420px; }
  .pc-op__cards { flex-wrap: wrap; }
  .pc-op__card { flex: 1 1 100%; }
  .pc-steps__grid .view-item { grid-template-columns: 1fr; gap: 44px; }
  .pc-ohome__head { flex-wrap: wrap; }
}

@media (max-width: 719px) {
  .pc-offers__grid .view-item,
  .pc-ohome__grid .view-item,
  .block-views-blockoffers-featured-block-related .view-item { grid-template-columns: minmax(0, 340px); }

  .pc-chips { padding: 12px 12px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
  .pc-op__title, .pc-op__price, .pc-steps__title,
  .block-views-blockoffers-featured-block-related .block-title { font-size: 26px; line-height: 1.4; }
  .pc-op__saving { font-size: 18px; flex-wrap: wrap; gap: 12px; }
  .pc-ohome__title { font-size: 26px; line-height: 1.4; }
  .pc-ohome__eyebrow { font-size: 18px; }
  .pc-ohome__text { font-size: 16px; line-height: 1.8; }
  .pc-banner__eyebrow { font-size: 18px; }
  .pc-banner__text { font-size: 16px; }
  .pc-ohome__cta .pc-btn { width: 100%; }
}

/* ==========================================================================
   /cart — package cards
   Laid out after the client's cart screenshot (no Figma frame for this page);
   sizes are scaled from that image to the 1440 frame, not measured from Figma.
   Rows come from views-view-table--commerce-cart-form.html.twig.
   ========================================================================== */

.cart.cart-form {
  box-sizing: border-box;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 24px var(--pc-gutter) 80px;
  font-family: var(--pc-font);
}

.pc-cart__title {
  margin: 0 0 24px;
  color: var(--pc-navy);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  text-align: start;
}

.pc-cart__list { display: flex; flex-direction: column; gap: 16px; }

/* Image first in the DOM => right-hand column in RTL. */
.pc-cart-item {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 12px;
  border-radius: 12px;
  background: var(--pc-white);
}

.pc-cart-item__media { display: block; width: 176px; height: 96px; border-radius: 8px; overflow: hidden; background: #F1ECE5; }
.pc-cart-item__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pc-cart-item__info { min-width: 0; }

.pc-cart-item__cat {
  margin: 0 0 4px;
  color: var(--pc-gold);
  font-size: 12px;
  line-height: 18px;
}

.pc-cart-item__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
}
.pc-cart-item__title a { color: var(--pc-navy); text-decoration: none; }
.pc-cart-item__title a:hover { color: var(--pc-gold); }

.pc-cart-item__price { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

.pc-cart-item__now { color: var(--pc-gold); font-size: 22px; font-weight: 600; line-height: 1.5; }
.pc-cart-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; }
.pc-cart-item__was { color: var(--pc-red); }
.pc-cart-item__save { color: var(--pc-navy); }

/* Commerce's remove button, shown as a red trash icon (hugeicons:delete-02).
   Prefixed with .cart-form to outrank Martis' `.cart-form .views-form .form-submit
   { width: 100% }`, which collapses the auto grid column to 0 on mobile. */
.pc-cart-item__remove { line-height: 0; }
.cart-form .pc-cart-item__remove input[type="submit"] {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 8px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23D40004' stroke-linecap='round' stroke-width='1.5' d='m19.5 5.5l-.62 10.025c-.158 2.561-.237 3.842-.88 4.763a4 4 0 0 1-1.2 1.128c-.957.584-2.24.584-4.806.584c-2.57 0-3.855 0-4.814-.585a4 4 0 0 1-1.2-1.13c-.642-.922-.72-2.205-.874-4.77L4.5 5.5M3 5.5h18m-4.944 0l-.683-1.408c-.453-.936-.68-1.403-1.071-1.695a2 2 0 0 0-.275-.172C13.594 2 13.074 2 12.035 2c-1.066 0-1.599 0-2.04.234a2 2 0 0 0-.278.18c-.395.303-.616.788-1.058 1.757L8.053 5.5m1.447 11v-6m5 6v-6'/%3E%3C/svg%3E") center / 24px no-repeat;
  color: transparent;
  font-size: 0;
  box-shadow: none;
  cursor: pointer;
  transition: opacity .2s;
}
/* Martis pins background-color transparent with !important, so fade instead. */
.cart-form .pc-cart-item__remove input[type="submit"]:hover,
.cart-form .pc-cart-item__remove input[type="submit"]:focus-visible { opacity: .65; transform: none; }

.cart.cart-form .form-actions { display: flex; justify-content: center; margin: 56px 0 0; padding: 0; }

.cart.cart-form .form-actions input[type="submit"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 680px;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--pc-radius);
  background: var(--pc-navy);
  box-shadow: none;
  color: var(--pc-white);
  font-family: var(--pc-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 52px;
  cursor: pointer;
}
.cart.cart-form .form-actions input[type="submit"]:hover { background: #163A6B; transform: none; }

.cart-empty-page {
  box-sizing: border-box;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 40px var(--pc-gutter) 80px;
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 18px;
}

@media (max-width: 991px) {
  .cart.cart-form, .cart-empty-page { padding-inline: 40px; }
  .pc-cart-item { grid-template-columns: 140px minmax(0, 1fr) auto; }
  .pc-cart-item__media { width: 140px; height: 84px; grid-row: span 2; }
  .pc-cart-item__price { grid-column: 2; grid-row: 2; }
  .pc-cart-item__remove { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 575px) {
  .cart.cart-form, .cart-empty-page { padding-inline: 16px; }
  .pc-cart__title { font-size: 26px; margin-bottom: 16px; }
  .pc-cart-item { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 12px; padding: 10px; }
  .pc-cart-item__media { width: 96px; height: 72px; }
  .pc-cart-item__title { font-size: 16px; }
  .pc-cart-item__now { font-size: 18px; }
  .pc-cart-item__meta { font-size: 12px; gap: 4px 8px; }
  .cart-form .pc-cart-item__remove input[type="submit"] { width: 36px; height: 36px; margin: 0; }
  .cart.cart-form .form-actions { margin-top: 32px; }
}

/* ==========================================================================
   Checkout — login / contact / review / complete
   No Figma frame for these pages: built from the cart's visual language
   (white cards, 12px radius, #E8E8E8 hairlines, navy buttons) rather than
   measured. Scoped to .path-checkout so Martis' cyan defaults still apply
   anywhere else a form uses them.
   ========================================================================== */

/* Title, steps, forms and the thank-you card share one centred 1120px column:
   max-width + auto margins + gutter padding. (An earlier version derived the
   padding from `100%` inside max(); that depends on the containing block and
   collapsed the column on some setups.) */
.path-checkout .layout-checkout-form {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1120px + 2 * var(--pc-gutter));
  margin: 0 auto;
  padding: 24px var(--pc-gutter) 80px;
  font-family: var(--pc-font);
}

.path-checkout .layout-checkout-form .row { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; align-items: flex-start; }
.path-checkout .layout-region-checkout-main { flex: 1 1 560px; min-width: 0; max-width: none; padding: 0; width: auto; }
.path-checkout .layout-region-checkout-secondary { flex: 0 1 440px; min-width: 0; max-width: none; padding: 20px; width: auto; border-radius: 12px; background: var(--pc-white); box-sizing: border-box; }
.path-checkout .layout-region-checkout-footer { padding: 0; margin-top: 24px; width: 100%; }

.path-checkout .layout-region-checkout-secondary > h4 { margin: 0 0 12px; color: var(--pc-navy); font-size: 20px; font-weight: 700; }

/* Section titles */
.path-checkout .commerce-checkout-flow legend,
.path-checkout .checkout-pane legend {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E8E8E8;
  color: var(--pc-navy);
  font-size: 22px;
  font-weight: 700;
}
.path-checkout .checkout-pane-review .fieldset-legend a { color: var(--pc-gold); font-size: 14px; font-weight: 500; }

/* Fields */
.path-checkout label { color: var(--pc-navy); font-size: 14px; font-weight: 600; }
.path-checkout .commerce-checkout-flow input:not(.button):not([type="radio"]):not([type="checkbox"]),
.path-checkout .commerce-checkout-flow .form-select {
  box-sizing: border-box;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #E8E8E8;
  border-radius: var(--pc-radius);
  background: var(--pc-white);
  box-shadow: none;
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 15px;
}
.path-checkout .commerce-checkout-flow input:focus { border-color: var(--pc-gold); outline: 0; box-shadow: 0 0 0 3px rgba(182, 141, 73, .18); }
.path-checkout .commerce-checkout-flow .form-item { margin-bottom: 16px; }
.path-checkout .description { color: var(--pc-muted); font-size: 12px; }

/* Buttons — navy, like the cart's «متابعة» */
.path-checkout .layout-checkout-form .button,
.path-checkout .layout-checkout-form input[type="submit"] {
  box-sizing: border-box;
  min-width: 160px;
  height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--pc-radius);
  background: var(--pc-navy);
  box-shadow: none;
  color: var(--pc-white);
  font-family: var(--pc-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 48px;
  text-shadow: none;
  cursor: pointer;
}
.path-checkout .layout-checkout-form .button:hover,
.path-checkout .layout-checkout-form input[type="submit"]:hover { background: #163A6B; transform: none; }

/* Continue + back sit on one line, back as a quiet text link. */
.path-checkout .layout-checkout-form .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin: 0; }
.path-checkout .layout-checkout-form .form-actions #edit-checkout,
.path-checkout .layout-checkout-form .form-actions .button { margin: 0; }
.path-checkout .layout-checkout-form .form-actions a { margin: 0; color: var(--pc-muted); font-size: 15px; font-weight: 500; text-decoration: none; }
.path-checkout .layout-checkout-form .form-actions a:hover { color: var(--pc-gold); }

/* Login step: returning customer | guest, side by side */
.path-checkout .checkout-pane-login { display: flex; flex-wrap: wrap; gap: 32px; }
.path-checkout .checkout-pane-login > * { flex: 1 1 320px; min-width: 0; }
.path-checkout #edit-login-returning-customer-forgot-password { margin-inline-start: 16px; color: var(--pc-gold); }

/* Order summary (sidebar) — views-view-table--commerce-checkout-order-summary */
.pc-summary__list { margin: 0; padding: 0; list-style: none; }
.pc-summary__item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #E8E8E8; }
.pc-summary__img { flex: 0 0 64px; width: 64px; height: 48px; border-radius: 6px; object-fit: cover; }
.pc-summary__info { flex: 1 1 auto; min-width: 0; }
.pc-summary__title { margin: 0; color: var(--pc-navy); font-size: 15px; font-weight: 600; line-height: 1.5; }
.pc-summary__qty { color: var(--pc-muted); font-weight: 400; }
.pc-summary__was { color: var(--pc-red); font-size: 12px; }
.pc-summary__price { color: var(--pc-gold); font-weight: 600; white-space: nowrap; }

.path-checkout .layout-region-checkout-secondary .order-total-line { display: flex; justify-content: space-between; padding: 10px 0 0; color: var(--pc-muted); font-size: 14px; }
.path-checkout .layout-region-checkout-secondary .order-total-line__total { margin-top: 8px; padding: 12px; border-radius: var(--pc-radius); background: var(--pc-page-bg); color: var(--pc-navy); font-size: 18px; font-weight: 700; }
.path-checkout .layout-region-checkout-secondary .order-total-line__total .order-total-line-value { color: var(--pc-gold); }

/* Sidebar: the white card is the container, so drop Martis' grey box inside it. */
.path-checkout .checkout-pane-order-summary { padding: 0; background: none; }
.path-checkout .layout-region-checkout-secondary { margin-bottom: 0; }
.path-checkout .layout-region-checkout-secondary table tr { border: 0; }

/* System messages — Martis pins them inside a narrow column in the header */
/* The block now lives in the content region (it was in Header Search); on the
   full-width pages align it with the 80px gutter like everything else. */
/* Status / warning / error messages — a quiet tinted card with an accent edge,
   replacing Martis' coloured strip and icon sprite. */
.messages {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 14px 20px;
  border: 1px solid var(--pc-msg-line);
  border-inline-start: 4px solid var(--pc-msg-accent);
  border-radius: var(--pc-radius);
  background: var(--pc-msg-bg) none;
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 15px;
  line-height: 1.7;
  text-align: start;
}
[dir="rtl"] .messages { padding: 14px 20px; background-image: none; border-width: 1px; border-inline-start-width: 4px; }
.messages--status  { --pc-msg-bg: #F1F8F3; --pc-msg-line: #CFE5D6; --pc-msg-accent: #2E8B57; }
.messages--warning { --pc-msg-bg: #FBF6EC; --pc-msg-line: #EBDDBF; --pc-msg-accent: var(--pc-gold); }
.messages--error   { --pc-msg-bg: #FDF3F3; --pc-msg-line: #F2CACB; --pc-msg-accent: var(--pc-red); }
.messages a { color: var(--pc-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.messages a:hover { color: var(--pc-gold); }
.messages ul { margin: 0; padding: 0; list-style: none; }
.messages,
[dir="rtl"] .messages { min-height: 52px; padding: 14px 48px 14px 44px; padding-inline: 52px 44px; }
.messages::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 18px;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  background: var(--pc-msg-icon) center / contain no-repeat;
}
.messages--status  { --pc-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E8B57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.5'/%3E%3C/svg%3E"); }
.messages--warning { --pc-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B68D49' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19L12 3.5Z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E"); }
.messages--error   { --pc-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D40004' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E"); }
/* Martis colours each type itself (plus an 8px box-shadow strip); same-specificity
   rules here win because polyclinic.css loads last. */
.messages--status, .messages--warning, .messages--error,
[dir="rtl"] .messages--status, [dir="rtl"] .messages--warning, [dir="rtl"] .messages--error {
  border-color: var(--pc-msg-line);
  border-inline-start-color: var(--pc-msg-accent);
  background-color: var(--pc-msg-bg);
  box-shadow: none;
  color: var(--pc-navy);
}
.messages .close {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inset-inline-end: 12px;
  float: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pc-muted);
  font-size: 22px;
  line-height: 24px;
  opacity: .7;
  cursor: pointer;
}
.messages .close:hover { opacity: 1; color: var(--pc-navy); }
.pc-wide .region-content > .task-bar { box-sizing: border-box; width: 100%; max-width: var(--pc-container); margin: 0 auto; padding: 16px var(--pc-gutter) 0; text-align: start; }
.path-checkout .region-content > .task-bar { max-width: calc(1120px + 2 * var(--pc-gutter)); }
.pc-wide .region-content > .task-bar .messages { margin: 0 0 8px; }

@media (max-width: 991px) {
  .path-checkout .layout-region-checkout-secondary { flex-basis: 100%; }
}

@media (max-width: 575px) {
  .path-checkout .layout-checkout-form { padding-block: 16px 56px; }
  .path-checkout .layout-checkout-form .form-actions { flex-direction: column-reverse; align-items: stretch; gap: 12px; text-align: center; }
  .path-checkout .layout-checkout-form .button,
  .path-checkout .layout-checkout-form input[type="submit"] { width: 100%; }
}

/* ==========================================================================
   Checkout title + 3-step card, and the "thank you" page
   Laid out after the client's order-complete screenshot (no Figma frame):
   proportions and the green #56B649 step badge are sampled from that image,
   sizes scaled to the 1440 frame rather than measured.
   Markup: commerce-checkout-progress / commerce-checkout-completion-message.
   ========================================================================== */

/* Martis wraps every block in .container-wrap { max-width: 1220px }, which would
   clamp the steps narrower than the cards below them. */
.block-commerce-checkout-progress > .container-wrap { max-width: none; padding: 0; }

.pc-cp { box-sizing: border-box; width: 100%; max-width: calc(1120px + 2 * var(--pc-gutter)); margin: 0 auto; padding: 24px var(--pc-gutter) 0; font-family: var(--pc-font); }

.pc-cp__title {
  margin: 0 0 24px;
  color: var(--pc-navy);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.pc-cp__steps {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 20px 32px;
  border-radius: 12px;
  background: var(--pc-white);
  list-style: none;
}

.pc-cp__step { display: flex; align-items: center; gap: 12px; color: var(--pc-navy); font-size: 16px; font-weight: 700; line-height: 1.5; }

.pc-cp__num {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #56B649;
  color: var(--pc-white);
  font-size: 16px;
  font-weight: 700;
}
.pc-cp__step--current .pc-cp__num { background: var(--pc-navy); }
.pc-cp__step--next { color: var(--pc-muted); font-weight: 500; }
.pc-cp__step--next .pc-cp__num { background: #E8E8E8; color: var(--pc-muted); }

/* Thank-you card */
.pc-done { font-family: var(--pc-font); }

.pc-done__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 24px;
  border-radius: 12px;
  background: var(--pc-white);
  text-align: center;
}

/* hugeicons:task-done-01 */
.pc-done__icon {
  width: 64px;
  height: 64px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%230C274B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M13.498 2h-5a1.5 1.5 0 1 0 0 3h5a1.5 1.5 0 1 0 0-3m-6.5 13h3.429m-3.429-4h8'/%3E%3Cpath d='M18.998 13.5V9.483c0-2.829 0-4.243-.879-5.122c-.64-.64-1.567-.814-3.12-.861M11.997 22h-3c-2.828 0-4.243 0-5.121-.88c-.879-.878-.879-2.292-.879-5.12V9.482c0-2.829 0-4.243.879-5.122c.641-.64 1.568-.814 3.121-.861M13.998 20s1 0 2 2c0 0 2.176-5 5-6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.pc-done__message { color: var(--pc-gold); font-size: 20px; font-weight: 500; line-height: 1.7; }
.pc-done__message p { margin: 0; }
.pc-done__meta { margin: 0; color: var(--pc-muted); font-size: 14px; }
.pc-done__pay { max-width: 560px; margin-top: 8px; padding-top: 16px; border-top: 1px solid #E8E8E8; color: var(--pc-muted); font-size: 14px; line-height: 1.7; }
.pc-done__pay p { margin: 0; }

/* Save voucher (right in RTL) | Book now (left, twice as wide) */
.pc-done__actions { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; margin-top: 16px; }

.pc-done__btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 24px;
  border: 1px solid var(--pc-navy);
  border-radius: var(--pc-radius);
  font-family: var(--pc-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.pc-done__btn--primary { background: var(--pc-navy); color: var(--pc-white); }
.pc-done__btn--primary:hover { background: #163A6B; border-color: #163A6B; color: var(--pc-white); }
.pc-done__btn--ghost { background: transparent; color: var(--pc-navy); }
.pc-done__btn--ghost:hover { background: var(--pc-navy); color: var(--pc-white); }

/* Printable voucher: invisible on screen, the only thing printed. */
.pc-voucher { display: none; }

/* Scoped to body.pc-print-voucher, which checkout-done.js sets only while the
   voucher button is printing; otherwise Ctrl+P on any page would print blank. */
@media print {
  /* Everything but the voucher is hidden and collapsed, so the PDF is one clean page. */
  body.pc-print-voucher { height: 0 !important; overflow: hidden !important; background: #fff !important; }
  body.pc-print-voucher * { visibility: hidden !important; }
  body.pc-print-voucher .pc-voucher, body.pc-print-voucher .pc-voucher * { visibility: visible !important; }
  .pc-voucher { display: block; position: fixed; inset: 0 0 auto 0; box-sizing: border-box; padding: 32px; background: #fff; color: #000; font-family: var(--pc-font); }
  .pc-voucher__store { margin: 0 0 4px; font-size: 26px; }
  .pc-voucher__title { margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid #000; font-size: 18px; }
  .pc-voucher__meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 20px; }
  .pc-voucher__meta dt { font-weight: 700; }
  .pc-voucher__meta dd { margin: 0; }
  .pc-voucher__items { width: 100%; border-collapse: collapse; }
  .pc-voucher__items td { padding: 8px 0; border-bottom: 1px solid #ccc; }
  .pc-voucher__items td:last-child { text-align: end; white-space: nowrap; }
  .pc-voucher__total td { border-bottom: 0; font-size: 18px; font-weight: 700; }
  .pc-voucher__pay { margin-top: 20px; }
}

@media (max-width: 575px) {
  .pc-cp { padding-block: 16px 0; }
  .pc-cp__title { font-size: 26px; margin-bottom: 16px; }
  .pc-cp__steps { padding: 14px 12px; gap: 8px; }
  .pc-cp__step { flex-direction: column; flex: 1 1 0; gap: 6px; text-align: center; font-size: 12px; }
  .pc-cp__num { width: 30px; height: 30px; font-size: 14px; }
  .pc-done__card { padding: 36px 16px; }
  .pc-done__message { font-size: 18px; }
  .pc-done__actions { grid-template-columns: 1fr; }
  .pc-done__btn--primary { order: -1; }
}

/* ==========================================================================
   Customer account (/account…) — module polyclinic_account
   Laid out after the client's account screens (no Figma frame): the 867px
   screenshots are ~0.6 of the 1440 frame, so sizes are scaled from them, not
   measured. Hero = the editable "Account banner" block (.pc-banner--dark);
   avatar + badge are pulled up over it.
   ========================================================================== */

/* ---- Hero banner: shorter than the login one, room left for the avatar ---- */
.path-account .content-wide .block.pc-banner--dark { min-height: 360px; padding: 40px 0 0; }
.path-account .pc-banner--dark .pc-banner__text { font-size: 18px; }

/* ---- Identity (badge + avatar) over the banner's lower edge ---- */
.pc-acct { font-family: var(--pc-font); }

.pc-acct__id {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: -190px;
}

.pc-acct__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--pc-radius);
  background: rgba(255, 255, 255, .12);
  color: var(--pc-white);
  font-size: 14px;
  font-weight: 500;
}

.pc-acct__avatar {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--pc-white);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .35);
  color: #B0AFAA;
  overflow: hidden;
}
.pc-acct__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Sidebar + content ---- */
.pc-acct__body {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: var(--pc-container);
  margin: 0 auto;
  padding: 40px var(--pc-gutter) 80px;
}

.pc-acct__nav ul { margin: 0; padding: 0; list-style: none; }
.pc-acct__nav li { margin: 0 0 12px; }
.pc-acct__nav a {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--pc-radius);
  background: var(--pc-white);
  color: var(--pc-navy);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.pc-acct__nav a:hover { color: var(--pc-gold); }
.pc-acct__nav a.is-current { background: var(--pc-navy); color: var(--pc-white); font-weight: 700; }

.pc-acct__main { min-width: 0; }

/* ---- Buttons shared by the account pages ---- */
.pc-btn-line {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--pc-navy);
  border-radius: var(--pc-radius);
  background: var(--pc-white);
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.pc-btn-line:hover, .pc-btn-line:focus-visible { background: var(--pc-navy); color: var(--pc-white); }
.pc-btn-line--wide { width: 100%; max-width: 640px; height: 48px; }

.pc-acct-empty { padding: 56px 24px; border-radius: 12px; background: var(--pc-white); color: var(--pc-muted); text-align: center; }
.pc-acct-empty p { margin: 0 0 20px; font-size: 16px; }

/* ---- Personal information ---- */
.pc-profile { display: flex; flex-direction: column; gap: 24px; }

.pc-profile__section { padding: 24px; border-radius: 12px; background: var(--pc-white); }
.pc-profile__heading { margin: 0 0 20px; color: var(--pc-gold); font-size: 20px; font-weight: 700; line-height: 1.5; }

.pc-profile__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.pc-profile__grid .form-item { margin: 0 0 16px; }
.pc-profile .pc-profile__wide { grid-column: span 2; }

.pc-profile label { display: block; margin: 0 0 6px; color: var(--pc-navy); font-size: 14px; font-weight: 600; }
.pc-profile input[type="text"],
.pc-profile input[type="tel"],
.pc-profile input[type="email"],
.pc-profile input[type="password"],
.pc-profile input[type="date"],
.pc-profile select {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #E8E8E8;
  border-radius: var(--pc-radius);
  background: var(--pc-white);
  box-shadow: none;
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 15px;
}
/* Martis' script (niceSelect) swaps every <select> for a .nice-select widget;
   make it look like the text inputs. */
.pc-profile .nice-select {
  box-sizing: border-box;
  float: none;
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #E8E8E8;
  border-radius: var(--pc-radius);
  background: var(--pc-white);
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 15px;
  line-height: 46px;
  text-align: start;
}
.pc-profile .nice-select:after { inset-inline-end: 16px; inset-inline-start: auto; right: auto; left: auto; margin-top: -3px; }
.pc-profile .nice-select.open, .pc-profile .nice-select:focus { border-color: var(--pc-gold); }
.pc-profile .nice-select .list { width: 100%; margin-top: 4px; border-radius: var(--pc-radius); text-align: start; }
.pc-profile .nice-select .option { min-height: 40px; line-height: 40px; padding: 0 16px; }
.pc-profile input:focus, .pc-profile select:focus { border-color: var(--pc-gold); outline: 0; box-shadow: 0 0 0 3px rgba(182, 141, 73, .18); }
.pc-profile input:disabled { background: var(--pc-page-bg); color: var(--pc-muted); cursor: not-allowed; }
.pc-profile .error { border-color: var(--pc-red); }
.pc-profile .form-item--error-message { margin-top: 6px; color: var(--pc-red); font-size: 13px; }

.pc-profile__check { margin: 0 0 12px; padding: 14px 16px; border: 1px solid #E8E8E8; border-radius: var(--pc-radius); }
.pc-profile__check label { margin: 0; font-weight: 500; }

.pc-profile .form-actions { margin: 0; }
.pc-profile .form-actions input[type="submit"] {
  min-width: 200px;
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--pc-radius);
  background: var(--pc-navy);
  box-shadow: none;
  color: var(--pc-white);
  font-family: var(--pc-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.pc-profile .form-actions input[type="submit"]:hover { background: #163A6B; transform: none; }

/* ---- Packages and offers ---- */
.pc-offers-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.pc-offers-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  height: 52px;
  padding: 0 24px;
  border: 1px solid var(--pc-navy);
  border-radius: var(--pc-radius);
  background: var(--pc-white);
  color: var(--pc-navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.pc-offers-tabs__tab.is-current { background: var(--pc-navy); color: var(--pc-white); }

.pc-pkgs { display: flex; flex-direction: column; gap: 16px; }
.pc-pkg { display: flex; gap: 24px; padding: 12px; border-radius: 12px; background: var(--pc-white); }
.pc-pkg__img { flex: 0 0 260px; width: 260px; height: 190px; border-radius: 8px; object-fit: cover; }
.pc-pkg__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 4px 0; }
.pc-pkg__cat { margin: 0; color: var(--pc-gold); font-size: 12px; line-height: 18px; }
.pc-pkg__title { margin: 4px 0 8px; color: var(--pc-navy); font-size: 24px; font-weight: 700; line-height: 1.4; }
.pc-pkg__meta { margin: 0 0 4px; color: var(--pc-muted); font-size: 14px; line-height: 1.6; }
.pc-pkg__left { margin-inline-start: 6px; color: var(--pc-red); font-weight: 500; }
.pc-pkg__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 12px; }
.pc-pkg__actions .pc-btn-line { flex: 1 1 200px; }

/* ---- Billing ---- */
.pc-bills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pc-bills .pc-acct-empty { grid-column: 1 / -1; }
.pc-bill { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 12px; background: var(--pc-white); }
.pc-bill dl { margin: 0; }
.pc-bill dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.pc-bill dt { color: var(--pc-gold); font-size: 14px; font-weight: 400; white-space: nowrap; }
.pc-bill dd { margin: 0; color: var(--pc-navy); font-size: 15px; font-weight: 700; text-align: end; }
.pc-bill .pc-btn-line { width: 100%; margin-top: auto; }

/* ---- Support + logout ---- */
.pc-help { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 24px; border-radius: 12px; background: var(--pc-white); text-align: center; }
.pc-help__icon {
  width: 56px;
  height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B68D49' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-5l-3 3.5L9 17H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M9.8 8.8a2.3 2.3 0 1 1 3.4 2c-.8.5-1.2 1-1.2 1.8M12 14.6v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pc-help__title { margin: 0 0 8px; color: var(--pc-gold); font-size: 18px; font-weight: 700; }

.pc-logout { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--pc-red); font-size: 16px; font-weight: 500; text-decoration: none; }
.pc-logout:hover { text-decoration: underline; }

/* ---- Header user menu (logged in) ---- */
.pc-header__user { position: relative; }
.pc-header__user > summary { list-style: none; cursor: pointer; width: auto; max-width: 128px; gap: 6px; padding: 0 10px; }
.pc-header__user > summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-header__user > summary::-webkit-details-marker { display: none; }
.pc-header__caret { flex: 0 0 auto; width: 10px; height: 10px; }
.pc-header__usermenu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 230px;
  margin: 0;
  padding: 8px;
  border-radius: var(--pc-radius);
  background: var(--pc-white);
  box-shadow: 0 8px 24px rgba(12, 39, 75, .16);
  list-style: none;
  direction: rtl;
  text-align: start;
}
[dir="ltr"] .pc-header__usermenu { direction: ltr; }
.pc-header__usermenu li { margin: 0; }
.pc-header__usermenu a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--pc-navy); font-size: 14px; font-weight: 500; text-decoration: none; }
.pc-header__usermenu a:hover { background: var(--pc-page-bg); color: var(--pc-gold); }

/* ---- Printable voucher / invoice (/account/orders/…) ---- */
.pc-odoc-wrap { box-sizing: border-box; max-width: calc(860px + 2 * var(--pc-gutter)); margin: 0 auto; padding: 32px var(--pc-gutter) 80px; font-family: var(--pc-font); }
.pc-odoc-tools { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.pc-odoc-tools a { color: var(--pc-navy); font-size: 15px; font-weight: 500; text-decoration: none; }
.pc-odoc-tools a:hover { color: var(--pc-gold); }

.pc-odoc { padding: 40px; border-radius: 12px; background: var(--pc-white); color: var(--pc-muted); }
.pc-odoc__store { margin: 0 0 4px; color: var(--pc-navy); font-size: 28px; font-weight: 700; }
.pc-odoc__title { margin: 0 0 24px; padding-bottom: 14px; border-bottom: 2px solid var(--pc-gold); color: var(--pc-gold); font-size: 20px; font-weight: 700; }
.pc-odoc__meta { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 24px; }
.pc-odoc__meta dt { color: var(--pc-navy); font-weight: 700; }
.pc-odoc__meta dd { margin: 0; }
.pc-odoc__items { width: 100%; border-collapse: collapse; }
.pc-odoc__items th, .pc-odoc__items td { padding: 10px 0; border-bottom: 1px solid #E8E8E8; text-align: start; }
.pc-odoc__items th { color: var(--pc-navy); font-weight: 700; }
.pc-odoc__items td:last-child, .pc-odoc__items th:last-child { text-align: end; white-space: nowrap; }
.pc-odoc__total td { border-bottom: 0; color: var(--pc-navy); font-size: 20px; font-weight: 700; }

@media print {
  body.pc-print-doc { height: 0 !important; overflow: hidden !important; background: #fff !important; }
  body.pc-print-doc * { visibility: hidden !important; }
  body.pc-print-doc .pc-odoc, body.pc-print-doc .pc-odoc * { visibility: visible !important; }
  body.pc-print-doc .pc-odoc { position: fixed; inset: 0 0 auto 0; padding: 32px; border-radius: 0; background: #fff; color: #000; }
}

/* ---- Account: responsive ---- */
@media (max-width: 991px) {
  .pc-acct__body { grid-template-columns: 1fr; }
  .pc-acct__nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .pc-acct__nav li { flex: 1 1 calc(50% - 8px); margin: 0; }
  .pc-bills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-profile__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-profile .pc-profile__wide { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
  .path-account .content-wide .block.pc-banner--dark { min-height: 300px; padding-top: 28px; }
  .pc-acct__id { margin-top: -150px; gap: 14px; }
  .pc-acct__avatar { width: 140px; height: 140px; }
  .pc-acct__avatar svg { width: 72px; height: 72px; }
  .pc-acct__nav li { flex-basis: 100%; }
  .pc-bills, .pc-profile__grid { grid-template-columns: 1fr; }
  .pc-pkg { flex-direction: column; gap: 14px; }
  .pc-pkg__img { flex-basis: auto; width: 100%; height: 190px; }
  .pc-pkg__title { font-size: 20px; }
  .pc-offers-tabs__tab { flex: 1 1 100%; min-width: 0; }
  .pc-profile__section { padding: 18px 14px; }
  .pc-odoc { padding: 24px 16px; }
}

.pc-profile .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.pc-profile__link { color: var(--pc-muted); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pc-profile__link:hover { color: var(--pc-gold); }

/* /account/security — Drupal's account form, as one card (the heading is the card title). */
.pc-security { padding: 24px; border-radius: 12px; background: var(--pc-white); }
.pc-security .pc-profile__heading { margin-bottom: 20px; }
.pc-security form { display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
.pc-security .form-item { margin: 0 0 16px; }
.pc-security .description, .pc-security .form-item .description { margin-top: 6px; color: var(--pc-muted); font-size: 13px; line-height: 1.6; }
.pc-security .password-strength, .pc-security .password-confirm-message { margin-top: 8px; font-size: 13px; }
.pc-security .password-strength__meter { height: 6px; border-radius: 4px; }
.pc-security details, .pc-security fieldset { margin: 0 0 16px; padding: 0; border: 0; }


/* ==========================================================================
   Responsive header (≤1099) — same navy/gold language as the desktop header.
   Only the desktop frame exists in Figma, so these sizes are derived from it:
   top bar 36 (design 40), bar 64 (design 80), 40px outlined action buttons
   (290:2621 / 290:2622), 8px radius, Rubik. Every element that the desktop
   header shows is rendered through the same blocks in the mobile_topbar,
   mobile_actions and mobile_overlay regions.
   ========================================================================== */

/* ---- Top strip: language · email · phone ---- */
.mobile-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  height: var(--mobile-topbar-height);
  background: var(--pc-navy);
  color: var(--pc-white);
  font-family: var(--pc-font);
  font-size: 12px;
  line-height: var(--pc-lh);
}

.mobile-topbar__inner {
  box-sizing: border-box;
  direction: ltr;               /* language pinned left, like the desktop bar */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  padding: 0 16px;
}

.mobile-topbar .region { display: contents; }
.mobile-topbar .block,
.mobile-topbar .block .container-wrap,
.mobile-topbar .block .block-content { margin: 0; padding: 0; border: 0; }
.mobile-topbar .block-language { order: -1; }
[dir="ltr"] .mobile-topbar .block-language { order: 1; }

.mobile-topbar .block-language ul.links { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mobile-topbar .block-language ul.links li { margin: 0; padding: 0; border: 0; }

.mobile-topbar a {
  border: 0;                    /* Martis boxes language links */
  background: none;
  padding: 0;
  color: var(--pc-white);
  font-family: var(--pc-font);
  font-size: 12px;
  font-weight: 400;
  line-height: var(--pc-lh);
  text-decoration: none;
}

.mobile-topbar a:hover,
.mobile-topbar a:focus { color: var(--pc-gold); }

.mobile-topbar .pc-topbar__contact { display: flex; align-items: center; gap: 16px; }
.mobile-topbar .pc-topbar__item { gap: 8px; }
.mobile-topbar .pc-topbar__icon { color: var(--pc-gold); }

/* ---- Main bar: logo · [booking] · login · cart · toggle ---- */
.mobile-header {
  top: var(--mobile-topbar-height);
  height: var(--mobile-bar-height);
  background: var(--pc-white);
  box-shadow: 0 2px 8px rgba(12, 39, 75, .08);
}

.mobile-header:not(.has-topbar) { top: 0; }

.mobile-header__container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  padding: 0 16px;
}

.mobile-header__logo { flex: 0 1 auto; min-width: 0; }
.mobile-header__logo .block,
.mobile-header__logo .container-wrap,
.mobile-header__logo .brand { margin: 0; padding: 0; max-width: none; width: auto; line-height: 0; }
.mobile-header__logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 36px; object-fit: contain; }

.mobile-header__end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;               /* toggle at the left edge, cart nearest the logo */
}

.mobile-header__end { order: 0; }
.mobile-header__toggle { order: -1; }

.mobile-header__actions .region { display: flex; align-items: center; gap: 8px; }
.mobile-header__actions .block { margin: 0; padding: 0; border: 0; }
.mobile-header__actions .block .container-wrap,
.mobile-header__actions .block .block-content { margin: 0; padding: 0; }
.mobile-header__actions .block-commerce-cart { order: 2; }
.mobile-header__actions .pc-header__actions { order: 1; gap: 8px; }

.mobile-header__actions .cart-block--summary { padding: 0; }
.mobile-header__actions .cart-block--contents { display: none; }

/* Booking only fits beside the logo on wider phones; it is always in the menu. */
.mobile-header__actions .pc-btn { display: none; }
@media (min-width: 640px) {
  .mobile-header__actions .pc-btn { display: inline-flex; }
}

/* Login collapses to a 40px outlined icon button; the label stays for AT. */
.mobile-header__actions .pc-header__login { width: 40px; padding: 0; gap: 0; }
.mobile-header__actions .pc-header__login > span,
.mobile-header__actions .pc-header__caret {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Menu toggle — outlined like the other actions. */
.mobile-header__toggle {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--pc-navy);
  border-radius: var(--pc-radius);
  color: var(--pc-navy);
}

.mobile-header__toggle:hover,
.mobile-header__toggle:focus-visible { background: var(--pc-navy); }
.mobile-header__toggle:hover .mobile-header__toggle-line,
.mobile-header__toggle:focus-visible .mobile-header__toggle-line { background: var(--pc-white); }

.mobile-header__toggle-line { background: var(--pc-navy); }

/* ---- Menu overlay: navy panel, white type, gold accents ---- */
.mobile-nav-overlay { font-family: var(--pc-font); }
.mobile-nav-overlay__bg-layer { background: var(--pc-navy); }
.mobile-nav-overlay__content { box-sizing: border-box; padding: 0 var(--pc-gutter, 16px); }

.mobile-nav-overlay__header { border-bottom: 1px solid rgba(255, 255, 255, .14); }

/* The logo is a raster with a white ground, so it sits on a white chip. */
.mobile-nav-overlay__logo { line-height: 0; }
.mobile-nav-overlay__logo .block,
.mobile-nav-overlay__logo .container-wrap,
.mobile-nav-overlay__logo .brand { margin: 0; padding: 0; max-width: none; width: auto; }
.mobile-nav-overlay__logo img { box-sizing: content-box; max-height: 36px; padding: 6px 10px; border-radius: var(--pc-radius); background: var(--pc-white); }

.mobile-nav-overlay__close {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;                   /* Martis pads every <button> 12px 20px, which left the icon 0px wide */
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--pc-radius);
  background: transparent;
  font-family: var(--pc-font);
  font-size: 18px;
  line-height: 1;
}

.mobile-nav-overlay__close svg { display: block; flex: none; width: 18px; height: 18px; }

.mobile-nav-overlay__close:hover,
.mobile-nav-overlay__close:focus-visible { background: var(--pc-gold); border-color: var(--pc-gold); color: var(--pc-navy); }

.mobile-nav-overlay__body { padding: 8px 0 24px; }
.mobile-nav-overlay__body .region { display: flex; flex-direction: column; }
.mobile-nav-overlay__body .block { margin: 0; padding: 0; }

/* Menu: one consistent row style. Martis turned the last item into a green pill. */
.mobile-nav-overlay__menu li,
.mobile-nav-overlay__content .menu-item { margin: 0; }
.mobile-nav-overlay__menu .menu-item > a,
.region-mobile-overlay .mega-menu > ul .menu-item:last-child a {
  display: block;
  box-sizing: border-box;
  max-width: none;
  margin: 0;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  border-radius: 0;
  background: none;
  color: var(--pc-white) !important;   /* beats Martis `.menu-item a { color:#fff !important }` ties */
  font-size: 18px;
  font-weight: 500;
  line-height: var(--pc-lh);
  text-align: start;
}

.mobile-nav-overlay__menu .menu-item > a:hover,
.mobile-nav-overlay__menu .menu-item > a:focus { padding-left: 0; color: var(--pc-gold) !important; }
.mobile-nav-overlay__menu .menu-item > a.is-active,
.mobile-nav-overlay__menu .menu-item--active-trail > a { color: var(--pc-gold) !important; font-weight: 700; }

/* Booking + login */
.mobile-nav-overlay .pc-header__actions { flex-direction: column; align-items: stretch; gap: 12px; margin: 24px 0 0; direction: inherit; }

.mobile-nav-overlay .pc-header__actions .pc-btn--primary,
.mobile-nav-overlay .pc-header__login {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: none;
  height: 48px;
  border-radius: var(--pc-radius);
  font-size: 16px;
  font-weight: 500;
  direction: inherit;
}

.mobile-nav-overlay .pc-header__actions .pc-btn--primary { border: 1px solid var(--pc-gold); background: var(--pc-gold); color: var(--pc-navy); }
.mobile-nav-overlay .pc-header__actions .pc-btn--primary:hover,
.mobile-nav-overlay .pc-header__actions .pc-btn--primary:focus { background: var(--pc-white); border-color: var(--pc-white); color: var(--pc-navy); }

.mobile-nav-overlay .pc-header__login { border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: var(--pc-white); }
.mobile-nav-overlay .pc-header__login:hover,
.mobile-nav-overlay .pc-header__login:focus { background: var(--pc-white); border-color: var(--pc-white); color: var(--pc-navy); }

/* Logged-in account menu: an open list instead of a floating dropdown. */
.mobile-nav-overlay .pc-header__user { width: 100%; }
.mobile-nav-overlay .pc-header__user > summary { width: 100%; max-width: none; justify-content: center; }
.mobile-nav-overlay .pc-header__usermenu {
  position: static;
  min-width: 0;
  margin-top: 8px;
  padding: 4px 0;
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
  direction: inherit;
}
.mobile-nav-overlay .pc-header__usermenu a { padding: 12px 16px; color: var(--pc-white); }
.mobile-nav-overlay .pc-header__usermenu a:hover { background: transparent; color: var(--pc-gold); }

/* Contact rows */
.mobile-nav-overlay .pc-topbar__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.mobile-nav-overlay .pc-topbar__item {
  gap: 12px;
  padding: 0;                   /* Martis `.mobile-nav-overlay__menu a` pads and underlines every link */
  border: 0;
  color: var(--pc-white);
  font-size: 15px;
}
.mobile-nav-overlay .pc-topbar__item:hover,
.mobile-nav-overlay .pc-topbar__item:focus { padding: 0; color: var(--pc-gold); }
.mobile-nav-overlay .pc-topbar__icon { width: 20px; height: 20px; color: var(--pc-gold); }

/* Language switch */
.mobile-nav-overlay .block-language { margin-top: 20px; }
.region-mobile-overlay .language-switcher-language-url a {
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--pc-radius);
  color: var(--pc-white);
  font-size: 15px;
  font-weight: 500;
}
.region-mobile-overlay .language-switcher-language-url a:hover { background: var(--pc-white); border-color: var(--pc-white); color: var(--pc-navy); }
.region-mobile-overlay .language-switcher-language-url ul.links { margin: 0; padding: 0; list-style: none; }
.region-mobile-overlay .language-switcher-language-url li { margin: 0; padding: 0; }

/* Narrow phones: keep the strip on one line — email collapses to its icon. */
@media (max-width: 420px) {
  .mobile-topbar .pc-topbar__item[href^="mailto"] > span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .mobile-topbar .pc-topbar__item[href^="mailto"] { padding: 8px 4px; }
}

/* ---------- Footer, mobile: quick links + contact become accordions ----------
   Collapsed by default (assets/js/footer-accordion.js) so the footer drops from
   ~1000px to roughly half. Social icons stay visible. */
@media (max-width: 767px) {
  .footer .footer-widget { padding: 40px 0 8px; }
  .footer .region-footer-second { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
  .pc-fabout { flex: none; margin-bottom: 24px; }
  .footer #block-footer-quick-menu,
  .pc-fcontact { flex: none; width: 100%; margin: 0; text-align: start; }

  .footer .pc-acc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    cursor: pointer;
  }

  .footer .pc-acc__head .block-title-content,
  .footer .pc-acc__head .block-title { margin: 0; }

  .footer .pc-acc__head::after {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: var(--pc-gold);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s ease;
  }

  .footer .pc-acc:not(.is-collapsed) .pc-acc__head::after { transform: rotate(180deg); }
  .footer .pc-acc:not(.is-collapsed) .pc-acc__head { padding-bottom: 12px; }
  .footer .pc-acc.is-collapsed .pc-acc__item { display: none; }
  .footer .pc-acc__head:focus-visible { outline: 2px solid var(--pc-gold); outline-offset: 2px; }

  .footer .pc-fcontact__social { padding: 12px 0 16px; }
  .footer .footer-bottom .row { gap: 6px; padding: 14px 0; }
}

/* ==========================================================================
   English (LTR) adjustments — the layout mirrors through logical properties;
   these cover what does not: the photo's subject, longer copy, physical margins.
   ========================================================================== */

/* The hero photo has its subject on the left (Arabic copy sits right). With the
   copy now at the left, mirror the photo so the doctor is not under the text. */
[dir="ltr"] .pc-hero__bg img { transform: scaleX(-1); }

[dir="ltr"] .pc-fabout__logo { margin: 0 0 26px 0; }

/* English strings run longer than Arabic: let boxes grow instead of clipping. */
.pc-dep { height: auto; min-height: 200px; padding-bottom: 20px; }
.pc-fcontact__social { flex-wrap: wrap; row-gap: 12px; }

html[lang="en"] .pc-offer__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  min-height: 60px;
}

/* The contact column is sized to its content; the longer English social note
   pushed the icons past the right edge. Cap it so the note wraps. */
.pc-fcontact { flex: 0 1 auto; max-width: 360px; }

/* ==========================================================================
   Cart quantity stepper — package · quantity · price · remove
   ========================================================================== */

.pc-cart-item { grid-template-columns: 176px minmax(0, 1.2fr) auto minmax(0, 1fr) auto; }

.pc-cart-item__qty { display: flex; align-items: center; justify-content: center; }
.pc-cart-item__qty .form-item,
.pc-cart-item__qty .form-group { margin: 0; padding: 0; }

.pc-qty {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid #D9DEE6;
  border-radius: var(--pc-radius);
  background: var(--pc-white);
  overflow: hidden;
  direction: ltr;                    /* − 1 +, in every language */
}

.cart-form .pc-qty__btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.cart-form .pc-qty__btn:hover:not(:disabled),
.cart-form .pc-qty__btn:focus-visible:not(:disabled) { background: var(--pc-navy); color: var(--pc-white); transform: none; }
.cart-form .pc-qty__btn:disabled { opacity: .35; cursor: not-allowed; }

.cart-form .pc-qty input {
  box-sizing: border-box;
  width: 52px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline: 1px solid #E6E9EE;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--pc-navy);
  font-family: var(--pc-font);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cart-form .pc-qty input::-webkit-inner-spin-button,
.cart-form .pc-qty input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

.cart-form.is-updating .pc-cart__list { opacity: .55; pointer-events: none; transition: opacity .2s ease; }

/* With JS the stepper updates the cart itself; without it, the Update button stays. */
.pc-cart--enhanced .pc-cart-update { display: none; }
.cart.cart-form .form-actions { flex-wrap: wrap; gap: 12px; }
.cart.cart-form .form-actions input.pc-cart-update {
  width: auto;
  background: transparent;
  border: 1px solid var(--pc-navy);
  color: var(--pc-navy);
}

@media (max-width: 991px) {
  .pc-cart-item { grid-template-columns: 140px minmax(0, 1fr) auto; }
  .pc-cart-item__media { grid-row: 1 / span 3; align-self: start; }
  .pc-cart-item__info { grid-column: 2; grid-row: 1; }
  .pc-cart-item__qty { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  .pc-cart-item__price { grid-column: 2; grid-row: 3; }
  .pc-cart-item__remove { grid-column: 3; grid-row: 1; }
}

@media (max-width: 575px) {
  .pc-cart-item { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .cart-form .pc-qty__btn { width: 36px; height: 36px; }
  .cart-form .pc-qty input { width: 44px; height: 36px; }
}

/* ==========================================================================
   Status messages as a toast.
   On the home page the whole site sits in "Content wide top", so the message
   region (and its "Registration successful…") lands ~6,900px down, below the
   footer fold, where nobody sees it. Success messages float at the top of the
   viewport instead; errors and warnings stay inline beside the form they
   belong to. assets/js/polyclinic-toast.js dismisses them.
   ========================================================================== */

body .region-content > .task-bar:has(.messages--status):not(:has(.messages--error, .messages--warning)) {
  position: fixed;
  top: 20px;
  inset-inline: 0;
  z-index: 1105;
  box-sizing: border-box;
  width: min(580px, calc(100% - 32px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
  background: none;
  pointer-events: none;
}

body .region-content > .task-bar:has(.messages--status):not(:has(.messages--error, .messages--warning)) .messages {
  margin: 0;
  background-color: #F1F8F3;
  box-shadow: 0 16px 38px rgba(12, 39, 75, .22);
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  body .region-content > .task-bar:has(.messages--status):not(:has(.messages--error, .messages--warning)) {
    animation: pc-fade-down .5s var(--pc-ease, ease) backwards;
    transition: opacity .35s ease, translate .35s ease;
  }
}

body .region-content > .task-bar.is-leaving { opacity: 0; translate: 0 -14px; }

@media (max-width: 767px) {
  body .region-content > .task-bar:has(.messages--status):not(:has(.messages--error, .messages--warning)) { top: 12px; }
}