/* R049 live-review fixes (owner, 9 Nov 2026, on a phone).
   1. Home hero pill: the English label "natural stone and marble from Syria" (V01 wording, longer than before) was kept on one line
      on phones 375-430 px and ran past the pill ("…MARBLE FRO"). Every language now wraps the label inside the pill, as the
      other locales already did (psg/locale.css excluded English).
   2. Phone rails: swiping is the gesture; the old previous/next arrow buttons are removed; scrollhint.css adds one small adaptive arrow instead.
   3. Phone rails start at their first card (About "From quarry to client" was centred, so its first photo sat off-screen at
      -250 px and could not be reached) and every swipe settles on exactly one card. */
@media (max-width: 767px) {
  html .elementor-124 .elementor-element.elementor-element-2afcfcad { min-width: 0 !important; flex: 1 1 0 !important; }
  html .elementor-124 .elementor-element.elementor-element-2afcfcad .elementor-heading-title { white-space: normal !important; overflow-wrap: anywhere; text-wrap: balance; line-height: 1.35; }
  .psg-rail-ctl button { display: none !important; }
  .psg-rail-ctl { justify-content: center !important; }
  [data-r28~="rail"], [data-r28~="rail"] > .e-con-inner { justify-content: flex-start !important; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  [data-r28~="rail"] > .e-con-inner > .e-con, [data-r28~="rail"] > .e-con { scroll-snap-align: start; scroll-snap-stop: always; }
}
/* 4. Phone menu: the close button is a plain white X (owner: no navy box), 44 px tap area, visible focus. */
#masthead .psg-fp-close { background: transparent !important; color: #fff !important; width: 44px; height: 44px; font-size: 30px; line-height: 44px; border-radius: 50%; }
#masthead .psg-fp-close:hover { color: #c4a57a !important; }
#masthead .psg-fp-close:focus-visible { outline: 2px solid #c4a57a; outline-offset: 2px; }
/* 5. Arabic Home "Our history" cards: titles follow the reading edge like their paragraphs (were left-aligned on desktop). */
html[dir="rtl"] .elementor-element-73096e30 .elementor-heading-title,
html[dir="rtl"] .elementor-element-73096e30 h2,
html[dir="rtl"] .elementor-element-73096e30 h3 { text-align: right !important; }
/* 6. Stone page photo strips (final review, 10 Nov): the photographs mix portrait, square and landscape, so each swipe changed the
      frame height and left a 200 px gap above the thumbnails (and moved "View" under the swipe arrow). Every slide now uses one
      square frame, cropped from the centre; the samples sit centred on plain backdrops, and "View" opens the full photograph. */
.psg-sv--detail > .psg-sv-slide .psg-photo { aspect-ratio: 1 / 1 !important; overflow: hidden; }
.psg-sv--detail > .psg-sv-slide .psg-photo img { inline-size: 100% !important; block-size: 100% !important; max-inline-size: none !important; aspect-ratio: auto !important; object-fit: cover; object-position: 50% 50%; }
/* 7. Photo viewer on phones: "Previous photograph" / "Next photograph" were clipped. Below 560 px they show as arrows; the button text
      stays the accessible name. The caption is easier to read. */
.psg-viewer .psg-v-title { color: rgba(241, 235, 226, .9) !important; }
@media (max-width: 559px) {
  .psg-viewer .psg-v-bar > button:first-child:nth-last-child(3), .psg-viewer .psg-v-bar > button:nth-child(2):nth-last-child(2) { font-size: 0 !important; inline-size: 48px; padding: 0 !important; }
  .psg-viewer .psg-v-bar > button:first-child:nth-last-child(3)::before { content: "\2190"; font-size: 20px; }
  .psg-viewer .psg-v-bar > button:nth-child(2):nth-last-child(2)::before { content: "\2192"; font-size: 20px; }
  html[dir="rtl"] .psg-viewer .psg-v-bar > button:first-child:nth-last-child(3)::before { content: "\2192"; }
  html[dir="rtl"] .psg-viewer .psg-v-bar > button:nth-child(2):nth-last-child(2)::before { content: "\2190"; }
}
/* 8. Final review polish (10 Nov).
   a. Stones catalogue, Bianco card: "Our most exclusive stone" was a full pill as loud as the section labels; the owner wants the
      exclusivity subtle, so it is a small bronze line, no frame. */
.elementor-element-74dcbf1 .ekit-heading--title, .elementor-element-74dcbf1 .elementskit-section-title { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; font-size: 12px !important; letter-spacing: .14em !important; color: #c4a57a !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.elementor-element-74dcbf1 .ekit-heading--title::before, .elementor-element-74dcbf1 .ekit-heading--title::after { display: none !important; }
/* b. Bianco stone page "Large fossil forms": readable measure (was ~160 characters a line on desktop) and air under the heading. */
.psg-flagship > p { max-inline-size: 68ch; margin-block-start: 14px; }
/* c. Sustainability commitment cards: icon and title are centred, so the short intro and "Read more" are too (the revealed
      "Key initiatives" list keeps the reading edge). */
.sust-icons > [data-psg-more-text] { text-align: center !important; }
.sust-icons > .psg-rm:not([hidden]) { display: block; margin-inline: auto; }
/* d. Arabic page headers (About, Careers, Contact, Masterbatch, Materials, Stones, Sustainability): the breadcrumb chevron between
      "الرئيسية" and the page name pointed right as in English; in RTL it points left, like the stone-page breadcrumbs. */
html[dir="rtl"] .elementor-widget-gum_heading + .elementor-widget-icon .elementor-icon { transform: scaleX(-1); }
/* e. Bianco catalogue label: the frame is the widget's own border. */
.elementor-element-74dcbf1 { border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* 9. Contact "Send an enquiry" (owner, 10 Nov, in a near-square window): between 1025 and 1328 px the section had no side padding,
      so its heading and text touched the left edge and the form the right edge, while the cards above keep 24 px. The padding
      now shrinks from 24 px to 0 only as the window grows past 1280 px, so the content edge stays where the cards' edge is. */
@media (min-width: 1025px) { .psg-enq-sec { padding-inline: clamp(0px, calc(664px - 50vw), 24px) !important; } }