{"id":2693,"date":"2025-06-10T21:45:28","date_gmt":"2025-06-10T21:45:28","guid":{"rendered":"https:\/\/elmawardy.com\/?page_id=2693"},"modified":"2026-10-02T02:32:06","modified_gmt":"2026-10-01T23:32:06","slug":"home-3","status":"publish","type":"page","link":"https:\/\/personage.sa\/ar\/","title":{"rendered":"Home"},"content":{"rendered":"<style>\n\/* ==========================================================\n   PERSONAGE \u2014 HOMEPAGE LANDING VIDEO\n   FULL VIEWPORT \/ NO CONTENT\n   ========================================================== *\/<\/p>\n<p>.personage-home-hero,\n.personage-home-hero * {\n  box-sizing: border-box;\n}<\/p>\n<p>.personage-home-hero {\n  position: relative;<\/p>\n<p>  width: 100%;<\/p>\n<p>  height: 100vh;\n  height: 100svh;<\/p>\n<p>  min-height: 100vh;\n  min-height: 100svh;<\/p>\n<p>  margin: 0;\n  padding: 0;<\/p>\n<p>  overflow: hidden;<\/p>\n<p>  background: #000;\n}<\/p>\n<p>\/* ==========================================================\n   VIDEO\n   ========================================================== *\/<\/p>\n<p>.personage-home-hero__video {\n  position: absolute;<\/p>\n<p>  inset: 0;<\/p>\n<p>  display: block;<\/p>\n<p>  width: 100%;\n  height: 100%;<\/p>\n<p>  margin: 0;\n  padding: 0;<\/p>\n<p>  border: 0;<\/p>\n<p>  object-fit: cover;<\/p>\n<p>  object-position: center center;<\/p>\n<p>  background: #000;<\/p>\n<p>  pointer-events: none;\n}<\/p>\n<p>\/* ==========================================================\n   MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width: 767px) {<\/p>\n<p>  .personage-home-hero {\n    height: 100svh;\n    min-height: 100svh;\n  }<\/p>\n<p>  .personage-home-hero__video {\n    object-position: center center;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   REDUCED MOTION<\/p>\n<p>   We keep the visual intact; autoplay behavior remains\n   controlled by the browser.\n   ========================================================== *\/<\/p>\n<p>@media (prefers-reduced-motion: reduce) {<\/p>\n<p>  .personage-home-hero__video {\n    animation: none !important;\n  }<\/p>\n<p>}\n<\/style>\n<section\n  class=\"personage-home-hero\"\n  aria-label=\"Personage\"\n><\/p>\n<p>  <video \nclass=\"personage-home-hero__video\"\n    autoplay\n    muted\n    loop\n    playsinline\n    webkit-playsinline\n    preload=\"auto\"\n    disablepictureinpicture\n    aria-hidden=\"true\"\n  ><source \nsrc=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/10\/LandingVideo.mp4\"\n      type=\"video\/mp4\"\n    ><\/video><\/p>\n<\/section>\n<p><script>\n(function () {<\/p>\n<p>  const video =\n    document.querySelector(\n      \".personage-home-hero__video\"\n    );<\/p>\n<p>  if (!video) {\n    return;\n  }<\/p>\n<p>  \/*\n   Reinforce muted autoplay for Safari \/ iOS.\n  *\/<\/p>\n<p>  video.muted = true;<\/p>\n<p>  video.defaultMuted = true;<\/p>\n<p>  video.playsInline = true;<\/p>\n<p>  const attemptPlay = function () {<\/p>\n<p>    const playPromise =\n      video.play();<\/p>\n<p>    if (\n      playPromise &&\n      typeof playPromise.catch === \"function\"\n    ) {<\/p>\n<p>      playPromise.catch(\n        function () {\n          \/* Browser may wait for user interaction. *\/\n        }\n      );<\/p>\n<p>    }<\/p>\n<p>  };<\/p>\n<p>  if (\n    video.readyState >= 2\n  ) {<\/p>\n<p>    attemptPlay();<\/p>\n<p>  }<\/p>\n<p>  else {<\/p>\n<p>    video.addEventListener(\n      \"canplay\",\n      attemptPlay,\n      {\n        once: true\n      }\n    );<\/p>\n<p>  }<\/p>\n<p>})();\n<\/script><\/p>\n<style>\n\/* ==========================================================\n   PERSONAGE \u2014 THIS WEEK'S PICKS\n   ENGLISH\n   ========================================================== *\/<\/p>\n<p>.personage-picks,\n.personage-picks * {\n  box-sizing: border-box;\n}<\/p>\n<p>.personage-picks {\n  position: relative;<\/p>\n<p>  width: 100%;<\/p>\n<p>  height: 100vh;\n  height: 100svh;<\/p>\n<p>  min-height: 100svh;<\/p>\n<p>  margin: 0;<\/p>\n<p>  padding: 40px;<\/p>\n<p>  overflow: hidden;<\/p>\n<p>  background: #f7f7f5;\n  color: #000;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;\n}<\/p>\n<p>\/* ==========================================================\n   DESKTOP GRID\n   ========================================================== *\/<\/p>\n<p>.personage-picks__grid {\n  display: grid;<\/p>\n<p>  grid-template-columns:\n    minmax(410px, .75fr)\n    minmax(0, 1.25fr);<\/p>\n<p>  gap:\n    clamp(40px, 4vw, 70px);<\/p>\n<p>  width: 100%;\n  height: 100%;\n}<\/p>\n<p>\/* ==========================================================\n   EDITORIAL COLUMN\n   ========================================================== *\/<\/p>\n<p>.personage-picks__content {\n  display: flex;<\/p>\n<p>  min-width: 0;\n  height: 100%;<\/p>\n<p>  flex-direction: column;<\/p>\n<p>  align-items: flex-start;<\/p>\n<p>  justify-content: flex-start;\n}<\/p>\n<p>\/* ==========================================================\n   TITLE\n   ========================================================== *\/<\/p>\n<p>.personage-picks__title {\n  margin:\n    -10px 0 0;<\/p>\n<p>  padding: 0;<\/p>\n<p>  color: #000;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    120px;<\/p>\n<p>  font-weight:\n    900;<\/p>\n<p>  line-height:\n    100px;<\/p>\n<p>  letter-spacing:\n    -.06em;<\/p>\n<p>  text-transform:\n    uppercase;\n}<\/p>\n<p>.personage-picks__title span {\n  display:\n    block;\n}<\/p>\n<p>\/* ==========================================================\n   COPY\n   ========================================================== *\/<\/p>\n<p>.personage-picks__copy {\n  margin:\n    35px 0 0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  color:\n    rgba(0,0,0,.43);<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    14px;<\/p>\n<p>  font-weight:\n    400;<\/p>\n<p>  line-height:\n    16px;<\/p>\n<p>  letter-spacing:\n    0;<\/p>\n<p>  text-transform:\n    uppercase;\n}<\/p>\n<p>.personage-picks__copy span {\n  display:\n    block;\n}<\/p>\n<p>\/* ==========================================================\n   CTA\n   ========================================================== *\/<\/p>\n<p>.personage-picks__cta {\n  margin-top:\n    29px;\n}<\/p>\n<p>.personage-picks__cta-link {\n  position:\n    relative;<\/p>\n<p>  display:\n    inline-block;<\/p>\n<p>  color:\n    #0000006b !important;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif !important;<\/p>\n<p>  font-size:\n    20px !important;<\/p>\n<p>  font-weight:\n    800 !important;<\/p>\n<p>  line-height:\n    1 !important;<\/p>\n<p>  letter-spacing:\n    -.01em;<\/p>\n<p>  text-decoration:\n    none !important;<\/p>\n<p>  background:\n    none !important;<\/p>\n<p>  border:\n    none !important;<\/p>\n<p>  outline:\n    none;<\/p>\n<p>  cursor:\n    pointer;<\/p>\n<p>  -webkit-tap-highlight-color:\n    transparent;<\/p>\n<p>  transition:\n    color .3s ease;\n}<\/p>\n<p>.personage-picks__cta-link::after {\n  content:\n    \"\";<\/p>\n<p>  position:\n    absolute;<\/p>\n<p>  left:\n    0;<\/p>\n<p>  bottom:\n    -9px;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    4px;<\/p>\n<p>  background:\n    #000;<\/p>\n<p>  transform:\n    scaleX(0);<\/p>\n<p>  transform-origin:\n    left center;<\/p>\n<p>  transition:\n    transform .3s ease;\n}<\/p>\n<p>.personage-picks__cta-link:hover,\n.personage-picks__cta-link:focus-visible {\n  color:\n    #000 !important;\n}<\/p>\n<p>.personage-picks__cta-link:hover::after,\n.personage-picks__cta-link:focus-visible::after {\n  transform:\n    scaleX(1);\n}<\/p>\n<p>\/* ==========================================================\n   COUNTER\n   ========================================================== *\/<\/p>\n<p>.personage-picks__counter-wrap {\n  margin-top:\n    auto;<\/p>\n<p>  padding-bottom:\n    4px;\n}<\/p>\n<p>.personage-picks\n.mcom-featured-counter {\n  margin:\n    0;<\/p>\n<p>  color:\n    #000;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    120px;<\/p>\n<p>  font-weight:\n    900;<\/p>\n<p>  line-height:\n    85px;<\/p>\n<p>  letter-spacing:\n    -.055em;<\/p>\n<p>  cursor:\n    pointer;<\/p>\n<p>  user-select:\n    none;<\/p>\n<p>  -webkit-tap-highlight-color:\n    transparent;\n}<\/p>\n<p>.personage-picks\n.mcom-featured-counter.ios-bump {\n  transform:\n    translateY(8px);\n}<\/p>\n<p>\/* ==========================================================\n   DESKTOP CAROUSEL\n   ========================================================== *\/<\/p>\n<p>.personage-picks__gallery {\n  position:\n    relative;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  min-width:\n    0;<\/p>\n<p>  min-height:\n    0;<\/p>\n<p>  overflow:\n    hidden;\n}<\/p>\n<p>\/* ==========================================================\n   TABLET\n   ========================================================== *\/<\/p>\n<p>@media\n(max-width:1100px)\nand\n(min-width:768px) {<\/p>\n<p>  .personage-picks__grid {\n    grid-template-columns:\n      minmax(330px,.72fr)\n      minmax(0,1.28fr);<\/p>\n<p>    gap:\n      35px;\n  }<\/p>\n<p>  .personage-picks__title {\n    font-size:\n      90px;<\/p>\n<p>    line-height:\n      78px;\n  }<\/p>\n<p>  .personage-picks\n  .mcom-featured-counter {\n    font-size:\n      90px;<\/p>\n<p>    line-height:\n      68px;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:767px) {<\/p>\n<p>  .personage-picks {\n    --mobile-carousel-height:\n      65svh;<\/p>\n<p>    --mobile-gallery-gap:\n      25px;<\/p>\n<p>    width:\n      100%;<\/p>\n<p>    height:\n      auto;<\/p>\n<p>    min-height:\n      100svh;<\/p>\n<p>    max-height:\n      none;<\/p>\n<p>    padding:\n      22px\n      30px\n      30px;<\/p>\n<p>    overflow:\n      hidden;\n  }<\/p>\n<p>  .personage-picks__grid {\n    display:\n      grid;<\/p>\n<p>    grid-template-columns:\n      1fr;<\/p>\n<p>    grid-template-rows:\n      auto\n      auto;<\/p>\n<p>    gap:\n      0;<\/p>\n<p>    width:\n      100%;<\/p>\n<p>    height:\n      auto;<\/p>\n<p>    min-height:\n      0;\n  }<\/p>\n<p>  \/* ========================================================\n     CONTENT\n     ======================================================== *\/<\/p>\n<p>  .personage-picks__content {\n    display:\n      block;<\/p>\n<p>    width:\n      100%;<\/p>\n<p>    height:\n      auto;<\/p>\n<p>    min-width:\n      0;<\/p>\n<p>    min-height:\n      0;\n  }<\/p>\n<p>  .personage-picks__title {\n    margin:\n      0;<\/p>\n<p>    padding:\n      0;<\/p>\n<p>    font-size:\n      70px;<\/p>\n<p>    font-weight:\n      900;<\/p>\n<p>    line-height:\n      .9;<\/p>\n<p>    letter-spacing:\n      -.055em;<\/p>\n<p>    text-align:\n      left;\n  }<\/p>\n<p>  .personage-picks__title span {\n    display:\n      block;\n  }<\/p>\n<p>  .personage-picks__copy {\n    margin-top:\n      27px;<\/p>\n<p>    font-size:\n      14px;<\/p>\n<p>    font-weight:\n      400;<\/p>\n<p>    line-height:\n      16px;<\/p>\n<p>    letter-spacing:\n      0;<\/p>\n<p>    text-transform:\n      uppercase;\n  }<\/p>\n<p>  .personage-picks__copy span {\n    display:\n      inline;\n  }<\/p>\n<p>  .personage-picks__copy span::after {\n    content:\n      \" \";\n  }<\/p>\n<p>  .personage-picks__cta {\n    margin-top:\n      22px;\n  }<\/p>\n<p>  .personage-picks__cta-link {\n    font-size:\n      20px !important;<\/p>\n<p>    font-weight:\n      800 !important;<\/p>\n<p>    line-height:\n      1 !important;\n  }<\/p>\n<p>  .personage-picks__counter-wrap {\n    display:\n      none;\n  }<\/p>\n<p>  \/* ========================================================\n     MOBILE CAROUSEL\n     FIXED 65SVH HEIGHT\n     ======================================================== *\/<\/p>\n<p>  .personage-picks__gallery {\n    position:\n      relative;<\/p>\n<p>    width:\n      calc(100% + 60px);<\/p>\n<p>    height:\n      var(--mobile-carousel-height);<\/p>\n<p>    min-height:\n      var(--mobile-carousel-height);<\/p>\n<p>    max-height:\n      var(--mobile-carousel-height);<\/p>\n<p>    margin:\n      var(--mobile-gallery-gap)\n      -30px\n      0;<\/p>\n<p>    overflow:\n      hidden;\n  }<\/p>\n<p>  .personage-picks\n  #featured-picks {\n    position:\n      absolute !important;<\/p>\n<p>    inset:\n      0 !important;<\/p>\n<p>    width:\n      100% !important;<\/p>\n<p>    height:\n      100% !important;<\/p>\n<p>    min-height:\n      100% !important;<\/p>\n<p>    max-height:\n      100% !important;\n  }<\/p>\n<p>  .personage-picks\n  #featured-picks\n  .monarq-featured-images__viewport,<\/p>\n<p>  .personage-picks\n  #featured-picks\n  .monarq-featured-images__track,<\/p>\n<p>  .personage-picks\n  #featured-picks\n  .monarq-featured-images__item {\n    height:\n      100% !important;<\/p>\n<p>    min-height:\n      100% !important;<\/p>\n<p>    max-height:\n      100% !important;\n  }<\/p>\n<p>  .personage-picks\n  #featured-picks\n  .monarq-featured-images__item img {\n    width:\n      100%;<\/p>\n<p>    height:\n      100% !important;<\/p>\n<p>    min-height:\n      100% !important;<\/p>\n<p>    object-fit:\n      cover;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   SHORT MOBILE\n   ========================================================== *\/<\/p>\n<p>@media\n(max-width:767px)\nand\n(max-height:700px) {<\/p>\n<p>  .personage-picks {\n    --mobile-carousel-height:\n      65svh;<\/p>\n<p>    --mobile-gallery-gap:\n      20px;<\/p>\n<p>    padding-top:\n      18px;<\/p>\n<p>    padding-bottom:\n      22px;\n  }<\/p>\n<p>  .personage-picks__title {\n    font-size:\n      62px;\n  }<\/p>\n<p>  .personage-picks__copy {\n    margin-top:\n      20px;<\/p>\n<p>    font-size:\n      13px;<\/p>\n<p>    line-height:\n      15px;\n  }<\/p>\n<p>  .personage-picks__cta {\n    margin-top:\n      18px;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   VERY SMALL WIDTH\n   ========================================================== *\/<\/p>\n<p>@media (max-width:370px) {<\/p>\n<p>  .personage-picks__title {\n    font-size:\n      64px;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/<\/p>\n<p>@media (prefers-reduced-motion:reduce) {<\/p>\n<p>  .personage-picks__cta-link::after {\n    transition:\n      none;\n  }<\/p>\n<p>}\n<\/style>\n<section class=\"personage-picks\">\n<div class=\"personage-picks__grid\">\n<div class=\"personage-picks__content\">\n<h2 class=\"personage-picks__title\">\n<p>        <span><br \/>\n          THIS<br \/>\n        <\/span><\/p>\n<p>        <span><br \/>\n          WEEK\u2019S<br \/>\n        <\/span><\/p>\n<p>        <span><br \/>\n          PICKS<br \/>\n        <\/span><\/p>\n<\/h2>\n<p class=\"personage-picks__copy\">\n<p>        <span><br \/>\n          ANOUD WAS FEELING KIND OF MOODY,<br \/>\n        <\/span><\/p>\n<p>        <span><br \/>\n          KOREN FELT SLEEPY,<br \/>\n        <\/span><\/p>\n<p>        <span><br \/>\n          AND SOMEONE WAS CLEARLY GETTING READY TO TRAVEL.<br \/>\n        <\/span><\/p>\n<div class=\"personage-picks__cta\">\n<p>        <a\n          href=\"\/this-weeks-picks\"\n          class=\"personage-picks__cta-link\"\n        ><br \/>\n          SEE WHAT\u2019S UP?<br \/>\n        <\/a><\/p><\/div>\n<div class=\"personage-picks__counter-wrap\">\n<div\n          class=\"mcom-featured-counter\"\n          data-for=\"featured-picks\"\n        ><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"personage-picks__gallery\">\n<div class=\"monarq-featured-images\"\n             id=\"featured-picks\"\n             data-columns=\"2\"\n             data-columns-tablet=\"2\"\n             data-columns-mobile=\"1\"\n             data-autoplay=\"1\"\n             data-interval=\"2800\">\n            <script>if(window.MCOMCarousel){window.MCOMCarousel.prepare(document.currentScript.parentElement);}<\/script>            <style>#featured-picks{display:block;width:100%;overflow:hidden;position:relative;}#featured-picks .monarq-featured-images__viewport{overflow:hidden;width:100%;touch-action:pan-y pinch-zoom;}#featured-picks .monarq-featured-images__track{display:flex;box-sizing:border-box;padding:0 0px;gap:20px;will-change:transform;transition:transform .45s ease;}#featured-picks .monarq-featured-images__item{display:block;flex:0 0 calc((100% - (2 - 1) * 20px) \/ 2);height:90vh;min-width:0;overflow:hidden;text-decoration:none!important;color:inherit;}#featured-picks .monarq-featured-images__img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;user-select:none!important;-webkit-user-drag:none!important;}#featured-picks .monarq-featured-images__next{appearance:none;-webkit-appearance:none;position:absolute;top:0;inset-inline-end:0;bottom:0;z-index:3;width:min(18vw,180px);border:0!important;border-radius:0!important;margin:0!important;padding:0!important;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.72))!important;box-shadow:none!important;color:#fff!important;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .2s ease;}#featured-picks:hover .monarq-featured-images__next,#featured-picks:focus-within .monarq-featured-images__next{opacity:1;pointer-events:auto;}#featured-picks .monarq-featured-images__next span{display:block;width:18px;height:18px;margin-inline-end:28px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}#featured-picks[data-mcom-direction=rtl] .monarq-featured-images__next{background:linear-gradient(270deg,rgba(255,255,255,0),rgba(255,255,255,.72))!important;}#featured-picks[data-mcom-direction=rtl] .monarq-featured-images__next span{transform:rotate(-135deg);}@media (max-width:767px){#featured-picks .monarq-featured-images__track{gap:12px;padding-left:30px;padding-right:30px;box-sizing:border-box;}#featured-picks .monarq-featured-images__item{box-sizing:border-box;flex-basis:calc(((100% - 0px) - (1 - 1) * 12px) \/ 1);height:55vh;padding:0;}#featured-picks .monarq-featured-images__next{display:none!important;}}@media (min-width:768px) and (max-width:1199px){#featured-picks .monarq-featured-images__track{gap:16px;}#featured-picks .monarq-featured-images__item{flex-basis:calc((100% - (2 - 1) * 16px) \/ 2);}}<\/style>\n            <div class=\"monarq-featured-images__viewport\">\n                <div class=\"monarq-featured-images__track\">\n                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/long-black-shirt-with-round-patch-pocket\/\" aria-label=\"Long Black shirt with Round Patch Pocket\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Long-Black-shirt-with-Round-Patch-Pocket_T-shirt_45464_1-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"Long Black shirt with Round Patch Pocket\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Long-Black-shirt-with-Round-Patch-Pocket_T-shirt_45464_1-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Long-Black-shirt-with-Round-Patch-Pocket_T-shirt_45464_1-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Long-Black-shirt-with-Round-Patch-Pocket_T-shirt_45464_1-768x960.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Long-Black-shirt-with-Round-Patch-Pocket_T-shirt_45464_1.webp 1024w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/w-benton-sweat-pant\/\" aria-label=\"W&#039; Benton Sweat Pant\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"W&#039; Benton Sweat Pant\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/w-benton-sweat\/\" aria-label=\"Women&#039;s Benton Sweatshirt\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"Women&#039;s Benton Sweatshirt\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/voiid-leather-jacket\/\" aria-label=\"Voiid Leather Jacket\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-11-F-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"Voiid Leather Jacket\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-11-F-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-11-F-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-11-F-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-11-F-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-11-F-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-11-F.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/straight-leg-jeans\/\" aria-label=\"Straight Leg Jeans\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-38-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"Straight Leg Jeans\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-38-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-38-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-38-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-38-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-38-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-38.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/gcds-denim-layered-loose-fit-trousers\/\" aria-label=\"GCDS Denim Layered Loose Fit Trousers\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/chep4-01-C-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"GCDS Denim Layered Loose Fit Trousers\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/chep4-01-C-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/chep4-01-C-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/chep4-01-C-768x960.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/chep4-01-C-1229x1536.webp 1229w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/chep4-01-C-1200x1500.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/chep4-01-C.webp 1280w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/denim-jeans-dusty\/\" aria-label=\"Denim Jeans Dusty\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Prsi-42-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"Denim Jeans Dusty\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Prsi-42-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Prsi-42-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Prsi-42-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Prsi-42-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Prsi-42-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Prsi-42.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/denim-jacket-dusty\/\" aria-label=\"Denim Jacket Dusty\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/PRSI-41I-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"Denim Jacket Dusty\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/PRSI-41I-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/PRSI-41I-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/PRSI-41I-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/PRSI-41I-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/PRSI-41I-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/PRSI-41I.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/cotton-grey-wolf-jacket\/\" aria-label=\"Cotton Grey Wolf Jacket\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-33-B-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"Cotton Grey Wolf Jacket\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-33-B-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-33-B-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-33-B-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-33-B-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-33-B-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/CETIP-33-B.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/black-puffer-jacket\/\" aria-label=\"Black Puffer Jacket\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Black-Puffer-Jacket_Jacket_44145_1-1-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"Black Puffer Jacket\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Black-Puffer-Jacket_Jacket_44145_1-1-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Black-Puffer-Jacket_Jacket_44145_1-1-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Black-Puffer-Jacket_Jacket_44145_1-1-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Black-Puffer-Jacket_Jacket_44145_1-1-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Black-Puffer-Jacket_Jacket_44145_1-1-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Black-Puffer-Jacket_Jacket_44145_1-1.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/blue-denim\/\" aria-label=\"BLUE DENIM\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-15-D-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"BLUE DENIM\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-15-D-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-15-D-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-15-D-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-15-D-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-15-D-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-15-D.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                                                            <a class=\"monarq-featured-images__item\" href=\"https:\/\/personage.sa\/ar\/product\/black-hoodie\/\" aria-label=\"BLACK HOODIE\">\n            <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-12K-819x1024.webp\" class=\"monarq-featured-images__img\" alt=\"BLACK HOODIE\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-12K-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-12K-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-12K-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-12K-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-12K-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/voIId-12K.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>        <\/a>                                <\/div>\n            <\/div>\n            <button class=\"monarq-featured-images__next\" type=\"button\" aria-label=\"\u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u0645\u064a\u0632\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629\">\n                <span aria-hidden=\"true\"><\/span>\n            <\/button>\n            <script>(function(id){if(window.monarqProductUI&&window.monarqProductUI.initFeaturedImages){window.monarqProductUI.initFeaturedImages(document.getElementById(id));}})(\"featured-picks\");<\/script>\n        <\/div><\/div>\n<\/p><\/div>\n<\/section>\n<p><script>\n(function () {<\/p>\n<p>  function isIOS() {<\/p>\n<p>    return (\n      \/iPad|iPhone|iPod\/.test(\n        navigator.userAgent\n      )<\/p>\n<p>      ||<\/p>\n<p>      (\n        navigator.userAgent.includes(\n          \"Mac\"\n        )<\/p>\n<p>        &&<\/p>\n<p>        \"ontouchend\" in document\n      )\n    );<\/p>\n<p>  }<\/p>\n<p>  function bindCounter(counterEl) {<\/p>\n<p>    if (\n      counterEl.dataset.mcomCounterBound\n      ===\n      \"1\"\n    ) {<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    counterEl.dataset.mcomCounterBound =\n      \"1\";<\/p>\n<p>    const targetId =\n      counterEl.getAttribute(\n        \"data-for\"\n      );<\/p>\n<p>    function getCarousel() {<\/p>\n<p>      return targetId\n        ?\n        document.getElementById(\n          targetId\n        )\n        :\n        null;<\/p>\n<p>    }<\/p>\n<p>    function render() {<\/p>\n<p>      const carousel =\n        getCarousel();<\/p>\n<p>      if (!carousel) {\n        return;\n      }<\/p>\n<p>      const items =\n        Array.from(\n          carousel.querySelectorAll(\n            \".monarq-featured-images__item\"\n          )\n        );<\/p>\n<p>      const index =\n        parseInt(\n          carousel.getAttribute(\n            \"data-current-index\"\n          ) || \"0\",\n          10\n        ) || 0;<\/p>\n<p>      counterEl.textContent =\n        Math.min(\n          index + 1,\n          Math.max(\n            items.length,\n            1\n          )\n        )\n        +\n        \"\/\"\n        +\n        (\n          items.length\n          ||\n          1\n        );<\/p>\n<p>    }<\/p>\n<p>    function attach() {<\/p>\n<p>      const carousel =\n        getCarousel();<\/p>\n<p>      if (!carousel) {<\/p>\n<p>        return false;<\/p>\n<p>      }<\/p>\n<p>      if (\n        isIOS()\n      ) {<\/p>\n<p>        counterEl.classList.add(\n          \"ios-bump\"\n        );<\/p>\n<p>      }<\/p>\n<p>      render();<\/p>\n<p>      counterEl.addEventListener(\n        \"click\",\n        function () {<\/p>\n<p>          const next =\n            carousel.querySelector(\n              \".monarq-featured-images__next\"\n            );<\/p>\n<p>          if (next) {<\/p>\n<p>            next.click();<\/p>\n<p>          }<\/p>\n<p>        }\n      );<\/p>\n<p>      carousel.addEventListener(\n        \"mcomFeaturedImagesChange\",\n        render\n      );<\/p>\n<p>      return true;<\/p>\n<p>    }<\/p>\n<p>    if (\n      attach()\n    ) {<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    const started =\n      Date.now();<\/p>\n<p>    const timer =\n      setInterval(\n        function () {<\/p>\n<p>          if (\n            attach()<\/p>\n<p>            ||<\/p>\n<p>            Date.now()\n            -\n            started\n            >\n            10000\n          ) {<\/p>\n<p>            clearInterval(\n              timer\n            );<\/p>\n<p>          }<\/p>\n<p>        },\n        150\n      );<\/p>\n<p>  }<\/p>\n<p>  function initCounters() {<\/p>\n<p>    document\n      .querySelectorAll(\n        \".personage-picks .mcom-featured-counter[data-for]\"\n      )\n      .forEach(\n        bindCounter\n      );<\/p>\n<p>  }<\/p>\n<p>  if (\n    document.readyState\n    ===\n    \"loading\"\n  ) {<\/p>\n<p>    document.addEventListener(\n      \"DOMContentLoaded\",\n      initCounters\n    );<\/p>\n<p>  }<\/p>\n<p>  else {<\/p>\n<p>    initCounters();<\/p>\n<p>  }<\/p>\n<p>})();\n<\/script><br \/>\n<!-- ========================================================\n     PERSONAGE \u2014 STYLES\n     ENGLISH\n     STANDALONE HTML + CSS + JS\n\n     MOBILE FIXES:\n     - 225px title\n     - 30px top spacing\n     - exact start edge\n     - scroll-linked title\n     - no vertical-scroll title flicker\n     ======================================================== --><\/p>\n<section class=\"styles-wrap\">\n<h2\n    class=\"styles-title\"\n    aria-hidden=\"true\"\n  ><br \/>\n    STYLES<br \/>\n  <\/h2>\n<div\n    class=\"styles-scroll\"\n    id=\"stylesScroll\"\n    role=\"region\"\n    aria-label=\"Personage styles\"\n  ><\/p>\n<div class=\"styles-row\">\n<article\n        class=\"style\"\n        data-name=\"Cozy\"\n        role=\"link\"\n        tabindex=\"0\"\n        data-href=\"\/styles\/cozy\"\n      ><br \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/06\/edited-photo.webp\"\n          alt=\"Cozy\"\n        ><br \/>\n      <\/article>\n<article\n        class=\"style\"\n        data-name=\"Composed\"\n        role=\"link\"\n        tabindex=\"0\"\n        data-href=\"\/styles\/composed\"\n      ><br \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Composed-Azhar-scaled.webp\"\n          alt=\"Composed\"\n        ><br \/>\n      <\/article>\n<article\n        class=\"style\"\n        data-name=\"Refined\"\n        role=\"link\"\n        tabindex=\"0\"\n        data-href=\"\/styles\/refined\"\n      ><br \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Refined-Abdulrahman-scaled.webp\"\n          alt=\"Refined\"\n        ><br \/>\n      <\/article>\n<article\n        class=\"style\"\n        data-name=\"Relaxed\"\n        role=\"link\"\n        tabindex=\"0\"\n        data-href=\"\/styles\/relaxed\"\n      ><br \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Relaxed-scaled.webp\"\n          alt=\"Relaxed\"\n        ><br \/>\n      <\/article>\n<article\n        class=\"style\"\n        data-name=\"Playful\"\n        role=\"link\"\n        tabindex=\"0\"\n        data-href=\"\/styles\/playful\"\n      ><br \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Playful-Azhar-scaled.webp\"\n          alt=\"Playful\"\n        ><br \/>\n      <\/article>\n<article\n        class=\"style\"\n        data-name=\"Edgy\"\n        role=\"link\"\n        tabindex=\"0\"\n        data-href=\"\/styles\/edgy\"\n      ><br \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Edgy-Alanoud-scaled.webp\"\n          alt=\"Edgy\"\n        ><br \/>\n      <\/article>\n<article\n        class=\"style\"\n        data-name=\"Dynamic\"\n        role=\"link\"\n        tabindex=\"0\"\n        data-href=\"\/styles\/dynamic\"\n      ><br \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/Dynamic-Abdulrahman-scaled.webp\"\n          alt=\"Dynamic\"\n        ><br \/>\n      <\/article>\n<\/p><\/div>\n<div\n      class=\"style-tooltip\"\n      id=\"styleTooltip\"\n      role=\"tooltip\"\n      aria-hidden=\"true\"\n    ><\/div>\n<\/p><\/div>\n<div\n    class=\"styles-bar\"\n    id=\"stylesBar\"\n  ><\/p>\n<div class=\"styles-bar-track\">\n<div\n        class=\"styles-bar-thumb\"\n        id=\"stylesThumb\"\n      ><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<style>\n.styles-wrap,\n.styles-wrap * {\n  box-sizing: border-box;\n}<\/p>\n<p>\/* ==========================================================\n   ROOT\n   ========================================================== *\/<\/p>\n<p>.styles-wrap {\n  --side-pad: 40px;\n  --bottom-pad: 40px;<\/p>\n<p>  --bar-height: 10px;\n  --gap-to-bar: 40px;<\/p>\n<p>  --gap: 24px;<\/p>\n<p>  --title-left: 40px;<\/p>\n<p>  --model-height: 94%;\n  --model-scale: 1.16;\n  --model-hover-scale: 1.19;\n  --model-y: 78px;<\/p>\n<p>  --mobile-end-gap: 20px;<\/p>\n<p>  position: relative;<\/p>\n<p>  width: 100%;<\/p>\n<p>  height: 100vh;\n  height: 100svh;<\/p>\n<p>  margin: 0;\n  padding: 0;<\/p>\n<p>  overflow: hidden;<\/p>\n<p>  background: #c7c7c7;<\/p>\n<p>  isolation: isolate;<\/p>\n<p>  container-type: inline-size;\n}<\/p>\n<p>\/* ==========================================================\n   TITLE\n   ========================================================== *\/<\/p>\n<p>.styles-title {\n  position: absolute;<\/p>\n<p>  top: 0;<\/p>\n<p>  left:\n    var(--title-left);<\/p>\n<p>  z-index: 0;<\/p>\n<p>  display: inline-block;<\/p>\n<p>  width: max-content;<\/p>\n<p>  margin: 0;\n  padding: 0;<\/p>\n<p>  color:\n    rgba(0,0,0,.08);<\/p>\n<p>  opacity: 1;<\/p>\n<p>  pointer-events: none;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size: 225px;<\/p>\n<p>  font-weight: 900;<\/p>\n<p>  line-height: .9;<\/p>\n<p>  letter-spacing: 0;<\/p>\n<p>  white-space: nowrap;<\/p>\n<p>  transform:\n    translate3d(0,0,0);<\/p>\n<p>  transform-origin:\n    left top;<\/p>\n<p>  will-change:\n    transform;<\/p>\n<p>  -webkit-backface-visibility:\n    hidden;<\/p>\n<p>  backface-visibility:\n    hidden;<\/p>\n<p>  -webkit-font-smoothing:\n    antialiased;\n}<\/p>\n<p>\/* ==========================================================\n   SCROLLER\n   ========================================================== *\/<\/p>\n<p>.styles-scroll {\n  position: relative;<\/p>\n<p>  z-index: 1;<\/p>\n<p>  width: 100%;\n  height: 100%;<\/p>\n<p>  padding-inline:\n    var(--side-pad);<\/p>\n<p>  padding-bottom:\n    var(--gap-to-bar);<\/p>\n<p>  overflow-x:\n    auto;<\/p>\n<p>  overflow-y:\n    hidden;<\/p>\n<p>  scroll-behavior:\n    auto;<\/p>\n<p>  -webkit-overflow-scrolling:\n    touch;<\/p>\n<p>  scrollbar-width:\n    none;<\/p>\n<p>  overscroll-behavior-x:\n    contain;<\/p>\n<p>  touch-action:\n    pan-x pan-y;\n}<\/p>\n<p>.styles-scroll::-webkit-scrollbar {\n  display: none;\n}<\/p>\n<p>\/* ==========================================================\n   ROW\n   ========================================================== *\/<\/p>\n<p>.styles-row {\n  display: flex;<\/p>\n<p>  align-items:\n    flex-end;<\/p>\n<p>  gap:\n    var(--gap);\n}<\/p>\n<p>\/* ==========================================================\n   CARD\n   ========================================================== *\/<\/p>\n<p>.style {\n  position: relative;<\/p>\n<p>  display: flex;<\/p>\n<p>  flex:\n    0 0\n    calc(\n      (\n        100%\n        -\n        var(--gap) * 3\n      )\n      \/\n      4\n    );<\/p>\n<p>  height:\n    calc(\n      100svh\n      -\n      (\n        var(--bottom-pad)\n        +\n        var(--bar-height)\n        +\n        var(--gap-to-bar)\n      )\n    );<\/p>\n<p>  align-items:\n    flex-end;<\/p>\n<p>  justify-content:\n    center;<\/p>\n<p>  overflow:\n    visible;<\/p>\n<p>  cursor:\n    pointer;<\/p>\n<p>  -webkit-tap-highlight-color:\n    transparent;\n}<\/p>\n<p>.style:focus-visible {\n  outline:\n    2px solid\n    rgba(0,0,0,.85);<\/p>\n<p>  outline-offset:\n    6px;\n}<\/p>\n<p>\/* ==========================================================\n   MODEL\n   ========================================================== *\/<\/p>\n<p>.style img {\n  display: block;<\/p>\n<p>  width: auto;<\/p>\n<p>  height:\n    var(--model-height);<\/p>\n<p>  max-width:\n    120%;<\/p>\n<p>  object-fit:\n    contain;<\/p>\n<p>  filter:\n    grayscale(100%)\n    contrast(.95)\n    brightness(1);<\/p>\n<p>  transform:\n    translateY(\n      var(--model-y)\n    )\n    scale(\n      var(--model-scale)\n    );<\/p>\n<p>  transform-origin:\n    bottom center;<\/p>\n<p>  transition:\n    filter .2s ease,\n    transform .2s ease;<\/p>\n<p>  user-select:\n    none;<\/p>\n<p>  -webkit-user-drag:\n    none;<\/p>\n<p>  pointer-events:\n    none;\n}<\/p>\n<p>.style:hover img,\n.style.tapped img {\n  filter:\n    none;<\/p>\n<p>  transform:\n    translateY(\n      calc(\n        var(--model-y)\n        -\n        3px\n      )\n    )\n    scale(\n      var(--model-hover-scale)\n    );\n}<\/p>\n<p>\/* ==========================================================\n   TOOLTIP\n   ========================================================== *\/<\/p>\n<p>.style-tooltip {\n  position: fixed;<\/p>\n<p>  top: 0;\n  left: 0;<\/p>\n<p>  z-index: 20;<\/p>\n<p>  display:\n    inline-block;<\/p>\n<p>  padding:\n    8px 10px;<\/p>\n<p>  border-radius:\n    6px;<\/p>\n<p>  background:\n    #000;<\/p>\n<p>  color:\n    #fff;<\/p>\n<p>  opacity: 0;<\/p>\n<p>  pointer-events:\n    none;<\/p>\n<p>  box-shadow:\n    0 6px 18px\n    rgba(0,0,0,.25);<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    16px;<\/p>\n<p>  font-weight:\n    400;<\/p>\n<p>  line-height:\n    1;<\/p>\n<p>  white-space:\n    nowrap;<\/p>\n<p>  transform:\n    translate(\n      -50%,\n      -120%\n    );<\/p>\n<p>  transition:\n    opacity .1s linear;\n}<\/p>\n<p>\/* ==========================================================\n   BOTTOM BAR\n   ========================================================== *\/<\/p>\n<p>.styles-bar {\n  position:\n    absolute;<\/p>\n<p>  left:\n    var(--side-pad);<\/p>\n<p>  right:\n    var(--side-pad);<\/p>\n<p>  bottom:\n    var(--bottom-pad);<\/p>\n<p>  height:\n    var(--bar-height);\n}<\/p>\n<p>.styles-bar-track {\n  position:\n    relative;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  border-radius:\n    5px;<\/p>\n<p>  background:\n    #dadada;\n}<\/p>\n<p>.styles-bar-thumb {\n  position:\n    absolute;<\/p>\n<p>  top: 0;\n  left: 0;<\/p>\n<p>  width:\n    60px;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  border-radius:\n    5px;<\/p>\n<p>  background:\n    #000;<\/p>\n<p>  cursor:\n    grab;\n}<\/p>\n<p>.styles-bar-thumb:active {\n  cursor:\n    grabbing;\n}<\/p>\n<p>\/* ==========================================================\n   MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:640px) {<\/p>\n<p>  .styles-wrap {\n    --side-pad:\n      30px;<\/p>\n<p>    --bottom-pad:\n      40px;<\/p>\n<p>    --title-left:\n      18px;<\/p>\n<p>    --model-height:\n      96%;<\/p>\n<p>    --model-scale:\n      1.26;<\/p>\n<p>    --model-hover-scale:\n      1.29;<\/p>\n<p>    --model-y:\n      112px;<\/p>\n<p>    --mobile-tooltip-y:\n      28px;<\/p>\n<p>    --mobile-end-gap:\n      20px;\n  }<\/p>\n<p>  .styles-title {\n    top:\n      30px;<\/p>\n<p>    left:\n      var(--title-left);<\/p>\n<p>    right:\n      auto;<\/p>\n<p>    font-size:\n      225px;<\/p>\n<p>    font-weight:\n      900;<\/p>\n<p>    line-height:\n      .9;<\/p>\n<p>    width:\n      max-content;<\/p>\n<p>    white-space:\n      nowrap;<\/p>\n<p>    transform-origin:\n      left top;\n  }<\/p>\n<p>  \/*\n   TRUE 30PX START.\n   No extra hidden space before first card.\n  *\/<\/p>\n<p>  .styles-scroll {\n    padding-left:\n      var(--side-pad);<\/p>\n<p>    padding-right:\n      calc(\n        var(--side-pad)\n        +\n        var(--mobile-end-gap)\n      );\n  }<\/p>\n<p>  .styles-row::before {\n    display:\n      none;\n  }<\/p>\n<p>  .styles-row::after {\n    content:\n      \"\";<\/p>\n<p>    flex:\n      0 0\n      var(--mobile-end-gap);<\/p>\n<p>    height:\n      1px;\n  }<\/p>\n<p>  .style {\n    flex:\n      0 0\n      100%;\n  }<\/p>\n<p>  .style img {\n    max-width:\n      110%;\n  }<\/p>\n<p>  .styles-bar,\n  .styles-bar * {\n    pointer-events:\n      none !important;\n  }<\/p>\n<p>  .styles-bar-thumb {\n    cursor:\n      default;\n  }<\/p>\n<p>  .style-tooltip {\n    position:\n      absolute;<\/p>\n<p>    padding:\n      13px\n      12px\n      10px;<\/p>\n<p>    border-radius:\n      3px;<\/p>\n<p>    background:\n      rgba(0,0,0,.8);<\/p>\n<p>    color:\n      #fff;<\/p>\n<p>    font-size:\n      14px;<\/p>\n<p>    font-weight:\n      300;<\/p>\n<p>    line-height:\n      1.15;<\/p>\n<p>    white-space:\n      nowrap;<\/p>\n<p>    transform:\n      translateX(-50%)\n      !important;<\/p>\n<p>    pointer-events:\n      none;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/<\/p>\n<p>@media (prefers-reduced-motion:reduce) {<\/p>\n<p>  .style img,\n  .style-tooltip {\n    transition-duration:\n      .01ms !important;\n  }<\/p>\n<p>}\n<\/style>\n<p><script>\n(() => {<\/p>\n<p>  \"use strict\";<\/p>\n<p>  const wrap =\n    document.querySelector(\n      \".styles-wrap\"\n    );<\/p>\n<p>  const scroller =\n    wrap?.querySelector(\n      \"#stylesScroll\"\n    );<\/p>\n<p>  const title =\n    wrap?.querySelector(\n      \".styles-title\"\n    );<\/p>\n<p>  const track =\n    wrap?.querySelector(\n      \".styles-bar-track\"\n    );<\/p>\n<p>  const thumb =\n    wrap?.querySelector(\n      \"#stylesThumb\"\n    );<\/p>\n<p>  const tooltip =\n    wrap?.querySelector(\n      \"#styleTooltip\"\n    );<\/p>\n<p>  const cards =\n    Array.from(\n      wrap?.querySelectorAll(\n        \".style\"\n      )\n      ||\n      []\n    );<\/p>\n<p>  if (\n    !wrap ||\n    !scroller ||\n    !title ||\n    !track ||\n    !thumb ||\n    !tooltip\n  ) {<\/p>\n<p>    return;<\/p>\n<p>  }<\/p>\n<p>  const mqMobile =\n    window.matchMedia(\n      \"(max-width:640px)\"\n    );<\/p>\n<p>  const mqDesktop =\n    window.matchMedia(\n      \"(min-width:641px)\"\n    );<\/p>\n<p>  const clamp =\n    (\n      value,\n      min,\n      max\n    ) =>\n      Math.max(\n        min,\n        Math.min(\n          max,\n          value\n        )\n      );<\/p>\n<p>  \/* ========================================================\n     LINKS\n     ======================================================== *\/<\/p>\n<p>  function goToStyle(\n    card\n  ) {<\/p>\n<p>    window.location.href =\n      card?.dataset?.href\n      ||\n      \"\/coming-soon\";<\/p>\n<p>  }<\/p>\n<p>  cards.forEach(\n    card => {<\/p>\n<p>      card.addEventListener(\n        \"click\",\n        () => goToStyle(card)\n      );<\/p>\n<p>      card.addEventListener(\n        \"keydown\",\n        event => {<\/p>\n<p>          if (\n            event.key === \"Enter\"\n            ||\n            event.key === \" \"\n          ) {<\/p>\n<p>            event.preventDefault();<\/p>\n<p>            goToStyle(\n              card\n            );<\/p>\n<p>          }<\/p>\n<p>        }\n      );<\/p>\n<p>    }\n  );<\/p>\n<p>  \/* ========================================================\n     DESKTOP TITLE FIT\n     ======================================================== *\/<\/p>\n<p>  function fitDesktopTitle() {<\/p>\n<p>    if (\n      !mqDesktop.matches\n    ) {<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    const sidePad =\n      parseFloat(\n        getComputedStyle(\n          wrap\n        ).getPropertyValue(\n          \"--side-pad\"\n        )\n      )\n      ||\n      40;<\/p>\n<p>    const available =\n      wrap.clientWidth\n      -\n      sidePad * 2;<\/p>\n<p>    if (\n      available <= 0\n    ) {\n\n      return;\n\n    }\n\n\n    title.style.transform =\n      \"none\";\n\n\n    title.style.left =\n      sidePad\n      +\n      \"px\";\n\n\n    const rawWidth =\n      title.offsetWidth;\n\n\n    if (\n      !rawWidth\n    ) {\n\n      return;\n\n    }\n\n\n    const scale =\n      available\n      \/\n      rawWidth;\n\n\n    const safeScale =\n      Math.max(\n        .5,\n        Math.min(\n          scale,\n          3\n        )\n      );\n\n\n    title.style.transform =\n      `scale(${safeScale})`;\n\n  }\n\n\n\n  \/* ========================================================\n     MOBILE TITLE PARALLAX\n     ======================================================== *\/\n\n  let titleFactor =\n    0;\n\n\n  let targetTitleX =\n    0;\n\n\n  let currentTitleX =\n    0;\n\n\n  let titleAnimationRunning =\n    false;\n\n\n\n  function refreshMobileTitleParallax() {\n\n    if (\n      !mqMobile.matches\n    ) {\n\n      return;\n\n    }\n\n\n    title.style.transform =\n      \"translate3d(0,0,0)\";\n\n\n    const maximumScroll =\n      Math.max(\n        1,\n        scroller.scrollWidth\n        -\n        scroller.clientWidth\n      );\n\n\n    const titleLeft =\n      parseFloat(\n        getComputedStyle(\n          title\n        ).left\n      )\n      ||\n      18;\n\n\n    const titleWidth =\n      title.offsetWidth;\n\n\n    const visibleArea =\n      Math.max(\n        1,\n        wrap.clientWidth\n        -\n        titleLeft\n        -\n        18\n      );\n\n\n    const travel =\n      Math.max(\n        0,\n        titleWidth\n        -\n        visibleArea\n      );\n\n\n    titleFactor =\n      -travel\n      \/\n      maximumScroll;\n\n\n    targetTitleX =\n      scroller.scrollLeft\n      *\n      titleFactor;\n\n\n    currentTitleX =\n      targetTitleX;\n\n\n    title.style.transform =\n      `translate3d(${currentTitleX}px,0,0)`;\n\n  }\n\n\n\n  function titleTick() {\n\n    currentTitleX +=\n      (\n        targetTitleX\n        -\n        currentTitleX\n      )\n      *\n      .18;\n\n\n    if (\n      Math.abs(\n        targetTitleX\n        -\n        currentTitleX\n      )\n      <\n      .12\n    ) {\n\n      currentTitleX =\n        targetTitleX;\n\n    }\n\n\n    if (\n      mqMobile.matches\n    ) {\n\n      title.style.transform =\n        `translate3d(${currentTitleX}px,0,0)`;\n\n    }\n\n\n    if (\n      Math.abs(\n        targetTitleX\n        -\n        currentTitleX\n      )\n      >\n      .04\n    ) {<\/p>\n<p>      requestAnimationFrame(\n        titleTick\n      );<\/p>\n<p>    }<\/p>\n<p>    else {<\/p>\n<p>      titleAnimationRunning =\n        false;<\/p>\n<p>    }<\/p>\n<p>  }<\/p>\n<p>  function updateTitleFromScroll() {<\/p>\n<p>    if (\n      !mqMobile.matches\n    ) {<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    targetTitleX =\n      scroller.scrollLeft\n      *\n      titleFactor;<\/p>\n<p>    if (\n      !titleAnimationRunning\n    ) {<\/p>\n<p>      titleAnimationRunning =\n        true;<\/p>\n<p>      requestAnimationFrame(\n        titleTick\n      );<\/p>\n<p>    }<\/p>\n<p>  }<\/p>\n<p>  \/* ========================================================\n     SCROLLBAR\n     ======================================================== *\/<\/p>\n<p>  let dragging =\n    false;<\/p>\n<p>  let dragStartX =\n    0;<\/p>\n<p>  let dragStartLeft =\n    0;<\/p>\n<p>  let maxThumbX =\n    0;<\/p>\n<p>  let maxScroll =\n    0;<\/p>\n<p>  function computeScrollbar() {<\/p>\n<p>    const trackWidth =\n      track.clientWidth;<\/p>\n<p>    const viewportWidth =\n      scroller.clientWidth;<\/p>\n<p>    const scrollWidth =\n      scroller.scrollWidth;<\/p>\n<p>    const thumbWidth =\n      Math.max(\n        36,\n        Math.round(\n          trackWidth\n          *\n          (\n            viewportWidth\n            \/\n            Math.max(\n              scrollWidth,\n              1\n            )\n          )\n        )\n      );<\/p>\n<p>    maxThumbX =\n      Math.max(\n        0,\n        trackWidth\n        -\n        thumbWidth\n      );<\/p>\n<p>    maxScroll =\n      Math.max(\n        0,\n        scrollWidth\n        -\n        viewportWidth\n      );<\/p>\n<p>    if (\n      !dragging\n    ) {<\/p>\n<p>      thumb.style.width =\n        thumbWidth\n        +\n        \"px\";<\/p>\n<p>    }<\/p>\n<p>  }<\/p>\n<p>  function syncThumb() {<\/p>\n<p>    if (\n      dragging\n    ) {<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    const ratio =\n      maxScroll > 0\n        ?\n        scroller.scrollLeft\n        \/\n        maxScroll\n        :\n        0;<\/p>\n<p>    thumb.style.left =\n      (\n        ratio\n        *\n        maxThumbX\n      )\n      +\n      \"px\";<\/p>\n<p>  }<\/p>\n<p>  function setScrollFromThumb(\n    position\n  ) {<\/p>\n<p>    const ratio =\n      maxThumbX > 0\n        ?\n        position\n        \/\n        maxThumbX\n        :\n        0;<\/p>\n<p>    scroller.scrollLeft =\n      ratio\n      *\n      maxScroll;<\/p>\n<p>  }<\/p>\n<p>  thumb.addEventListener(\n    \"pointerdown\",\n    event => {<\/p>\n<p>      if (\n        mqMobile.matches\n      ) {<\/p>\n<p>        return;<\/p>\n<p>      }<\/p>\n<p>      dragging =\n        true;<\/p>\n<p>      dragStartX =\n        event.clientX;<\/p>\n<p>      dragStartLeft =\n        parseFloat(\n          thumb.style.left\n        )\n        ||\n        0;<\/p>\n<p>      thumb.setPointerCapture?.(\n        event.pointerId\n      );<\/p>\n<p>    }\n  );<\/p>\n<p>  thumb.addEventListener(\n    \"pointermove\",\n    event => {<\/p>\n<p>      if (\n        !dragging\n      ) {<\/p>\n<p>        return;<\/p>\n<p>      }<\/p>\n<p>      const position =\n        clamp(\n          dragStartLeft\n          +\n          (\n            event.clientX\n            -\n            dragStartX\n          ),\n          0,\n          maxThumbX\n        );<\/p>\n<p>      thumb.style.left =\n        position\n        +\n        \"px\";<\/p>\n<p>      setScrollFromThumb(\n        position\n      );<\/p>\n<p>    }\n  );<\/p>\n<p>  function stopDragging() {<\/p>\n<p>    dragging =\n      false;<\/p>\n<p>    syncThumb();<\/p>\n<p>  }<\/p>\n<p>  thumb.addEventListener(\n    \"pointerup\",\n    stopDragging\n  );<\/p>\n<p>  thumb.addEventListener(\n    \"pointercancel\",\n    stopDragging\n  );<\/p>\n<p>  \/* ========================================================\n     MOBILE ACTIVE \/ SNAP\n     ======================================================== *\/<\/p>\n<p>  let activeCard =\n    null;<\/p>\n<p>  let snapTimer =\n    null;<\/p>\n<p>  function setActive(\n    card\n  ) {<\/p>\n<p>    if (\n      activeCard\n    ) {<\/p>\n<p>      activeCard.classList.remove(\n        \"tapped\"\n      );<\/p>\n<p>    }<\/p>\n<p>    activeCard =\n      card\n      ||\n      null;<\/p>\n<p>    if (\n      activeCard\n    ) {<\/p>\n<p>      activeCard.classList.add(\n        \"tapped\"\n      );<\/p>\n<p>      positionMobileTooltip(\n        activeCard\n      );<\/p>\n<p>    }<\/p>\n<p>  }<\/p>\n<p>  function positionMobileTooltip(\n    card\n  ) {<\/p>\n<p>    if (\n      !card\n    ) {<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    tooltip.textContent =\n      card.dataset.name\n      ||\n      \"\";<\/p>\n<p>    tooltip.style.opacity =\n      \"0\";<\/p>\n<p>    requestAnimationFrame(\n      () => {<\/p>\n<p>        const image =\n          card.querySelector(\n            \"img\"\n          )\n          ||\n          card;<\/p>\n<p>        const tooltipHeight =\n          tooltip\n            .getBoundingClientRect()\n            .height\n          ||\n          0;<\/p>\n<p>        const yOffset =\n          parseFloat(\n            getComputedStyle(\n              wrap\n            ).getPropertyValue(\n              \"--mobile-tooltip-y\"\n            )\n          )\n          ||\n          0;<\/p>\n<p>        tooltip.style.left =\n          (\n            card.offsetLeft\n            +\n            card.offsetWidth \/ 2\n          )\n          +\n          \"px\";<\/p>\n<p>        tooltip.style.top =\n          (\n            Math.max(\n              8,\n              image.offsetTop\n              -\n              tooltipHeight\n              -\n              8\n            )\n            +\n            yOffset\n          )\n          +\n          \"px\";<\/p>\n<p>        tooltip.style.opacity =\n          \"1\";<\/p>\n<p>      }\n    );<\/p>\n<p>  }<\/p>\n<p>  function centerCard(\n    card,\n    behavior = \"smooth\"\n  ) {<\/p>\n<p>    if (\n      !card\n    ) {<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    const maximum =\n      Math.max(\n        0,\n        scroller.scrollWidth\n        -\n        scroller.clientWidth\n      );<\/p>\n<p>    if (\n      card === cards[0]\n    ) {<\/p>\n<p>      scroller.scrollTo({\n        left: 0,\n        behavior\n      });<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    if (\n      card === cards[\n        cards.length - 1\n      ]\n    ) {<\/p>\n<p>      scroller.scrollTo({\n        left: maximum,\n        behavior\n      });<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    const viewportCenter =\n      scroller.clientWidth\n      \/\n      2;<\/p>\n<p>    const image =\n      card.querySelector(\n        \"img\"\n      )\n      ||\n      card;<\/p>\n<p>    const rect =\n      image.getBoundingClientRect();<\/p>\n<p>    const delta =\n      (\n        rect.left\n        +\n        rect.width \/ 2\n      )\n      -\n      viewportCenter;<\/p>\n<p>    const target =\n      clamp(\n        scroller.scrollLeft\n        +\n        delta,\n        0,\n        maximum\n      );<\/p>\n<p>    scroller.scrollTo({\n      left: target,\n      behavior\n    });<\/p>\n<p>  }<\/p>\n<p>  function snapToNearest() {<\/p>\n<p>    if (\n      !mqMobile.matches\n    ) {<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    const viewportCenter =\n      scroller.clientWidth\n      \/\n      2;<\/p>\n<p>    let nearest =\n      null;<\/p>\n<p>    let nearestDistance =\n      Infinity;<\/p>\n<p>    cards.forEach(\n      card => {<\/p>\n<p>        const image =\n          card.querySelector(\n            \"img\"\n          )\n          ||\n          card;<\/p>\n<p>        const rect =\n          image.getBoundingClientRect();<\/p>\n<p>        const distance =\n          Math.abs(\n            (\n              rect.left\n              +\n              rect.width \/ 2\n            )\n            -\n            viewportCenter\n          );<\/p>\n<p>        if (\n          distance\n          <\n          nearestDistance\n        ) {\n\n          nearest =\n            card;\n\n\n          nearestDistance =\n            distance;\n\n        }\n\n      }\n    );\n\n\n    if (\n      nearest\n    ) {\n\n      centerCard(\n        nearest,\n        \"smooth\"\n      );\n\n\n      setActive(\n        nearest\n      );\n\n    }\n\n  }\n\n\n\n  \/* ========================================================\n     DESKTOP TOOLTIP\n     ======================================================== *\/\n\n  function showTooltip(\n    name,\n    x,\n    y\n  ) {\n\n    if (\n      mqMobile.matches\n    ) {\n\n      return;\n\n    }\n\n\n    tooltip.textContent =\n      name;\n\n\n    tooltip.style.opacity =\n      \"1\";\n\n\n    tooltip.style.transform =\n      \"translate(-50%,-120%)\";\n\n\n    tooltip.style.left =\n      x\n      +\n      \"px\";\n\n\n    tooltip.style.top =\n      y\n      +\n      \"px\";\n\n\n    tooltip.setAttribute(\n      \"aria-hidden\",\n      \"false\"\n    );\n\n  }\n\n\n\n  function hideTooltip() {\n\n    if (\n      mqMobile.matches\n    ) {\n\n      return;\n\n    }\n\n\n    tooltip.style.opacity =\n      \"0\";\n\n\n    tooltip.setAttribute(\n      \"aria-hidden\",\n      \"true\"\n    );\n\n  }\n\n\n\n  cards.forEach(\n    card => {<\/p>\n<p>      const name =\n        card.dataset.name\n        ||\n        \"\";<\/p>\n<p>      card.addEventListener(\n        \"pointerenter\",\n        event => {<\/p>\n<p>          if (\n            event.pointerType === \"mouse\"\n            ||\n            event.pointerType === \"pen\"\n          ) {<\/p>\n<p>            showTooltip(\n              name,\n              event.clientX,\n              event.clientY\n            );<\/p>\n<p>          }<\/p>\n<p>        }\n      );<\/p>\n<p>      card.addEventListener(\n        \"pointermove\",\n        event => {<\/p>\n<p>          if (\n            event.pointerType === \"mouse\"\n            ||\n            event.pointerType === \"pen\"\n          ) {<\/p>\n<p>            showTooltip(\n              name,\n              event.clientX,\n              event.clientY\n            );<\/p>\n<p>          }<\/p>\n<p>        }\n      );<\/p>\n<p>      card.addEventListener(\n        \"pointerleave\",\n        hideTooltip\n      );<\/p>\n<p>    }\n  );<\/p>\n<p>  \/* ========================================================\n     SCROLL\n     ======================================================== *\/<\/p>\n<p>  scroller.addEventListener(\n    \"scroll\",\n    () => {<\/p>\n<p>      syncThumb();<\/p>\n<p>      updateTitleFromScroll();<\/p>\n<p>      if (\n        mqMobile.matches\n      ) {<\/p>\n<p>        clearTimeout(\n          snapTimer\n        );<\/p>\n<p>        snapTimer =\n          setTimeout(\n            snapToNearest,\n            120\n          );<\/p>\n<p>      }<\/p>\n<p>    },\n    {\n      passive:\n        true\n    }\n  );<\/p>\n<p>  \/* ========================================================\n     RECALCULATE\n     ======================================================== *\/<\/p>\n<p>  function recalculate() {<\/p>\n<p>    computeScrollbar();<\/p>\n<p>    syncThumb();<\/p>\n<p>    if (\n      mqDesktop.matches\n    ) {<\/p>\n<p>      fitDesktopTitle();<\/p>\n<p>    }<\/p>\n<p>    else {<\/p>\n<p>      scroller.scrollLeft =\n        clamp(\n          scroller.scrollLeft,\n          0,\n          maxScroll\n        );<\/p>\n<p>      refreshMobileTitleParallax();<\/p>\n<p>    }<\/p>\n<p>  }<\/p>\n<p>  \/* ========================================================\n     WIDTH-ONLY RESIZE<\/p>\n<p>     Critical mobile flicker fix.<\/p>\n<p>     Mobile browser chrome changes viewport HEIGHT\n     while vertically scrolling.<\/p>\n<p>     That must NOT rebuild\/reposition this title.\n     ======================================================== *\/<\/p>\n<p>  let lastMeasuredWidth =\n    Math.round(\n      wrap.getBoundingClientRect().width\n    );<\/p>\n<p>  function handleRealWidthChange() {<\/p>\n<p>    const newWidth =\n      Math.round(\n        wrap.getBoundingClientRect().width\n      );<\/p>\n<p>    if (\n      Math.abs(\n        newWidth\n        -\n        lastMeasuredWidth\n      )\n      <\n      2\n    ) {\n\n      return;\n\n    }\n\n\n    lastMeasuredWidth =\n      newWidth;\n\n\n    recalculate();\n\n  }\n\n\n  if (\n    \"ResizeObserver\" in window\n  ) {\n\n    const widthResizeObserver =\n      new ResizeObserver(\n        entries => {<\/p>\n<p>          const entry =\n            entries[0];<\/p>\n<p>          if (\n            !entry\n          ) {<\/p>\n<p>            return;<\/p>\n<p>          }<\/p>\n<p>          const newWidth =\n            Math.round(\n              entry.contentRect.width\n            );<\/p>\n<p>          if (\n            Math.abs(\n              newWidth\n              -\n              lastMeasuredWidth\n            )\n            <\n            2\n          ) {\n\n            return;\n\n          }\n\n\n          lastMeasuredWidth =\n            newWidth;\n\n\n          recalculate();\n\n        }\n      );\n\n\n    widthResizeObserver.observe(\n      wrap\n    );\n\n  }\n\n  else {\n\n    window.addEventListener(\n      \"resize\",\n      handleRealWidthChange,\n      {\n        passive: true\n      }\n    );\n\n  }\n\n\n\n  \/* ========================================================\n     INIT\n     ======================================================== *\/\n\n  function initialise() {\n\n    computeScrollbar();\n\n\n    if (\n      mqDesktop.matches\n    ) {\n\n      fitDesktopTitle();\n\n    }\n\n\n    if (\n      mqMobile.matches\n    ) {\n\n      scroller.scrollLeft =\n        0;\n\n\n      if (\n        cards.length\n      ) {\n\n        setActive(\n          cards[0]\n        );\n\n      }\n\n\n      refreshMobileTitleParallax();\n\n    }\n\n\n    syncThumb();\n\n  }\n\n\n\n  if (\n    document.fonts\n    &#038;&#038;\n    document.fonts.ready\n  ) {\n\n    document.fonts.ready.then(\n      () => {<\/p>\n<p>        setTimeout(\n          initialise,\n          50\n        );<\/p>\n<p>      }\n    );<\/p>\n<p>  }<\/p>\n<p>  else {<\/p>\n<p>    setTimeout(\n      initialise,\n      150\n    );<\/p>\n<p>  }<\/p>\n<p>})();\n<\/script><br \/>\n<!-- ========================================================\n     PERSONAGE \u2014 DON'T BLINK \/ SALE\n     ENGLISH\n     FULL HTML + CSS + JS\n     ======================================================== --><\/p>\n<section\n  class=\"personage-sale\"\n  lang=\"en\"\n><\/p>\n<p>  <!-- ======================================================\n       EDITORIAL CONTENT\n       ====================================================== --><\/p>\n<div class=\"personage-sale__intro\">\n<h2 class=\"personage-sale__title\">\n      <span>DON\u2019T<\/span><br \/>\n      <span>BLINK<\/span><br \/>\n    <\/h2>\n<p class=\"personage-sale__description\">\n      A QUIETER SELECTION OF PIECES MARKED DOWN<br \/>\n      FOR A LIMITED TIME. SEASONAL REDUCTIONS, OVERLOOKED FAVOURITES,<br \/>\n      AND ARCHIVE ESSENTIALS GATHERED BEFORE THEY DISAPPEAR AGAIN.\n    <\/p>\n<div class=\"personage-sale__availability\">\n<p>      <span class=\"personage-sale__availability-text\"><br \/>\n        LIMITED SELECTIONS, SEASONAL REDUCTIONS, AND ARCHIVE PIECES AVAILABLE FOR A SHORT TIME ONLY.<br \/>\n      <\/span><\/p>\n<p>      <span\n        class=\"personage-sale__availability-line\"\n        aria-hidden=\"true\"\n      ><\/span><\/p><\/div>\n<p>    <a\n      href=\"\/products\"\n      class=\"personage-sale__explore\"\n    ><br \/>\n      EXPLORE MORE<br \/>\n    <\/a><\/p><\/div>\n<p>  <!-- ======================================================\n       MCOM SHORTCODE\n       IMPORTANT:\n       NO LEFT \/ RIGHT SECTION PADDING APPLIED HERE.\n       MCOM OWNS ITS OWN OFFSET.\n       ====================================================== --><\/p>\n<div class=\"personage-sale__products\">\n        <div class=\"monarq-prod-carousel \" id=\"monarq-prod-carousel-1\">\n            <script>if(window.MCOMCarousel){window.MCOMCarousel.prepare(document.currentScript.parentElement);}<\/script>                                                        <button type=\"button\" class=\"monarq-carousel-nav monarq-carousel-nav--prev\" aria-label=\"\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0633\u0627\u0628\u0642\u0629\"><span aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\"><path d=\"m15 18-6-6 6-6\" \/><\/svg><\/span><\/button>\n                <button type=\"button\" class=\"monarq-carousel-nav monarq-carousel-nav--next\" aria-label=\"\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u062a\u0627\u0644\u064a\u0629\"><span aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" focusable=\"false\"><path d=\"m9 18 6-6-6-6\" \/><\/svg><\/span><\/button>\n                        <div class=\"monarq-prod-carousel__track\">\n                                                                            <figure class=\"monarq-prod-carousel__slide\">\n            <a class=\"monarq-prod-carousel__link\" href=\"https:\/\/personage.sa\/ar\/product\/w-benton-sweat\/\">\n                <div class=\"monarq-prod-carousel__media has-hover\">\n                                            <span class=\"monarq-sale-badge\">\u0633\u0639\u0631 \u0627\u0644\u0639\u0631\u0636<\/span>\n                    \n                    <div class=\"monarq-prod-carousel__imgbox\">\n                        <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--main\" alt=\"Women&#039;s Benton Sweatshirt\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-F.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                                    <img decoding=\"async\" width=\"818\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-A-818x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--hover\" alt=\"Women&#039;s Benton Sweatshirt\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-A-818x1024.webp 818w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-A-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-A-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210204-A.webp 959w\" sizes=\"auto, (max-width: 818px) 100vw, 818px\" \/>                                            <\/div>\n                <\/div>\n\n                <div class=\"monarq-prod-carousel__meta\">\n                    <div class=\"monarq-prod-carousel__title monarq-prod-carousel-meta-row\">Women&#039;s Benton Sweatshirt<\/div><div class=\"monarq-prod-carousel__price monarq-prod-carousel-meta-row\"><del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;720<\/span><\/del> <span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0623\u0635\u0644\u064a \u0647\u0648: SAR&nbsp;720.<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;432<\/span><\/ins><span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u062d\u0627\u0644\u064a \u0647\u0648: SAR&nbsp;432.<\/span><\/div>                <\/div>\n            <\/a>\n        <\/figure>                                                                            <figure class=\"monarq-prod-carousel__slide\">\n            <a class=\"monarq-prod-carousel__link\" href=\"https:\/\/personage.sa\/ar\/product\/w-hooded-schooling-jacket\/\">\n                <div class=\"monarq-prod-carousel__media has-hover\">\n                                            <span class=\"monarq-sale-badge\">\u0633\u0639\u0631 \u0627\u0644\u0639\u0631\u0636<\/span>\n                    \n                    <div class=\"monarq-prod-carousel__imgbox\">\n                        <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_197_1-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--main\" alt=\"W&#039; Hooded Schooling  Jacket\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_197_1-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_197_1-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_197_1-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_197_1-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_197_1-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_197_1.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                                    <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_Tops_44069_1-1-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--hover\" alt=\"W&#039; Hooded Schooling  Jacket\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_Tops_44069_1-1-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_Tops_44069_1-1-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_Tops_44069_1-1-768x960.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_Tops_44069_1-1-1229x1536.webp 1229w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_Tops_44069_1-1-1200x1500.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/W-Hooded-Schooling-Jacket_Tops_44069_1-1.webp 1600w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                            <\/div>\n                <\/div>\n\n                <div class=\"monarq-prod-carousel__meta\">\n                    <div class=\"monarq-prod-carousel__title monarq-prod-carousel-meta-row\">W&#039; Hooded Schooling  Jacket<\/div><div class=\"monarq-prod-carousel__price monarq-prod-carousel-meta-row\"><del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;780<\/span><\/del> <span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0623\u0635\u0644\u064a \u0647\u0648: SAR&nbsp;780.<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;468<\/span><\/ins><span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u062d\u0627\u0644\u064a \u0647\u0648: SAR&nbsp;468.<\/span><\/div>                <\/div>\n            <\/a>\n        <\/figure>                                                                            <figure class=\"monarq-prod-carousel__slide\">\n            <a class=\"monarq-prod-carousel__link\" href=\"https:\/\/personage.sa\/ar\/product\/w-guide-club-sweater\/\">\n                <div class=\"monarq-prod-carousel__media has-hover\">\n                                            <span class=\"monarq-sale-badge\">\u0633\u0639\u0631 \u0627\u0644\u0639\u0631\u0636<\/span>\n                    \n                    <div class=\"monarq-prod-carousel__imgbox\">\n                        <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_195_1-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--main\" alt=\"Women&#039;s Guide Club Sweater\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_195_1-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_195_1-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_195_1-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_195_1-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_195_1-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_195_1.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                                    <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_Tops_44044_1-1-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--hover\" alt=\"Women&#039;s Guide Club Sweater\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_Tops_44044_1-1-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_Tops_44044_1-1-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_Tops_44044_1-1-768x960.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_Tops_44044_1-1-1229x1536.webp 1229w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_Tops_44044_1-1-1200x1500.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/09\/Womens-Guide-Club-Sweater_Tops_44044_1-1.webp 1600w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                            <\/div>\n                <\/div>\n\n                <div class=\"monarq-prod-carousel__meta\">\n                    <div class=\"monarq-prod-carousel__title monarq-prod-carousel-meta-row\">Women&#039;s Guide Club Sweater<\/div><div class=\"monarq-prod-carousel__price monarq-prod-carousel-meta-row\"><del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;1,070<\/span><\/del> <span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0623\u0635\u0644\u064a \u0647\u0648: SAR&nbsp;1,070.<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;642<\/span><\/ins><span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u062d\u0627\u0644\u064a \u0647\u0648: SAR&nbsp;642.<\/span><\/div>                <\/div>\n            <\/a>\n        <\/figure>                                                                            <figure class=\"monarq-prod-carousel__slide\">\n            <a class=\"monarq-prod-carousel__link\" href=\"https:\/\/personage.sa\/ar\/product\/w-benton-sweat-pant\/\">\n                <div class=\"monarq-prod-carousel__media has-hover\">\n                                            <span class=\"monarq-sale-badge\">\u0633\u0639\u0631 \u0627\u0644\u0639\u0631\u0636<\/span>\n                    \n                    <div class=\"monarq-prod-carousel__imgbox\">\n                        <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--main\" alt=\"W&#039; Benton Sweat Pant\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                                    <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--hover\" alt=\"W&#039; Benton Sweat Pant\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                            <\/div>\n                <\/div>\n\n                <div class=\"monarq-prod-carousel__meta\">\n                    <div class=\"monarq-prod-carousel__title monarq-prod-carousel-meta-row\">W&#039; Benton Sweat Pant<\/div><div class=\"monarq-prod-carousel__price monarq-prod-carousel-meta-row\"><del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;720<\/span><\/del> <span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0623\u0635\u0644\u064a \u0647\u0648: SAR&nbsp;720.<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;432<\/span><\/ins><span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u062d\u0627\u0644\u064a \u0647\u0648: SAR&nbsp;432.<\/span><\/div>                <\/div>\n            <\/a>\n        <\/figure>                                                                            <figure class=\"monarq-prod-carousel__slide\">\n            <a class=\"monarq-prod-carousel__link\" href=\"https:\/\/personage.sa\/ar\/product\/w-jane-pant\/\">\n                <div class=\"monarq-prod-carousel__media has-hover\">\n                                            <span class=\"monarq-sale-badge\">\u0633\u0639\u0631 \u0627\u0644\u0639\u0631\u0636<\/span>\n                    \n                    <div class=\"monarq-prod-carousel__imgbox\">\n                        <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-A-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--main\" alt=\"W&#039; Jane Pant\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-A-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-A-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-A-768x960.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-A-1229x1536.webp 1229w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-A-1200x1500.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-A.webp 1600w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                                    <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--hover\" alt=\"W&#039; Jane Pant\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-768x960.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-1229x1536.webp 1229w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845-1200x1500.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4064958838845.webp 1600w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                            <\/div>\n                <\/div>\n\n                <div class=\"monarq-prod-carousel__meta\">\n                    <div class=\"monarq-prod-carousel__title monarq-prod-carousel-meta-row\">W&#039; Jane Pant<\/div><div class=\"monarq-prod-carousel__price monarq-prod-carousel-meta-row\"><del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;686<\/span><\/del> <span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0623\u0635\u0644\u064a \u0647\u0648: SAR&nbsp;686.<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;412<\/span><\/ins><span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u062d\u0627\u0644\u064a \u0647\u0648: SAR&nbsp;412.<\/span><\/div>                <\/div>\n            <\/a>\n        <\/figure>                                                                            <figure class=\"monarq-prod-carousel__slide\">\n            <a class=\"monarq-prod-carousel__link\" href=\"https:\/\/personage.sa\/ar\/product\/w-hooded-benton-sweat\/\">\n                <div class=\"monarq-prod-carousel__media has-hover\">\n                                            <span class=\"monarq-sale-badge\">\u0633\u0639\u0631 \u0627\u0644\u0639\u0631\u0636<\/span>\n                    \n                    <div class=\"monarq-prod-carousel__imgbox\">\n                        <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--main\" alt=\"W&#039; Hooded Benton Sweat\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210389-A.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                                    <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210242-G-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--hover\" alt=\"W&#039; Hooded Benton Sweat\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210242-G-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210242-G-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210242-G-768x961.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210242-G-1228x1536.webp 1228w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210242-G-1200x1501.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210242-G.webp 1599w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                            <\/div>\n                <\/div>\n\n                <div class=\"monarq-prod-carousel__meta\">\n                    <div class=\"monarq-prod-carousel__title monarq-prod-carousel-meta-row\">W&#039; Hooded Benton Sweat<\/div><div class=\"monarq-prod-carousel__price monarq-prod-carousel-meta-row\"><del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;840<\/span><\/del> <span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0623\u0635\u0644\u064a \u0647\u0648: SAR&nbsp;840.<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;504<\/span><\/ins><span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u062d\u0627\u0644\u064a \u0647\u0648: SAR&nbsp;504.<\/span><\/div>                <\/div>\n            <\/a>\n        <\/figure>                                                                            <figure class=\"monarq-prod-carousel__slide\">\n            <a class=\"monarq-prod-carousel__link\" href=\"https:\/\/personage.sa\/ar\/product\/w-benton-sweat-pant-2\/\">\n                <div class=\"monarq-prod-carousel__media \">\n                                            <span class=\"monarq-sale-badge\">\u0633\u0639\u0631 \u0627\u0644\u0639\u0631\u0636<\/span>\n                    \n                    <div class=\"monarq-prod-carousel__imgbox\">\n                        <img decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210433-819x1024.webp\" class=\"monarq-prod-carousel__img monarq-prod-carousel__img--main\" alt=\"W&#039; Benton Sweat Pant\" loading=\"lazy\" draggable=\"false\" srcset=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210433-819x1024.webp 819w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210433-240x300.webp 240w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210433-768x960.webp 768w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210433-1229x1536.webp 1229w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210433-1200x1500.webp 1200w, https:\/\/personage.sa\/wp-content\/uploads\/2026\/04\/4068584210433.webp 1600w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/>                                            <\/div>\n                <\/div>\n\n                <div class=\"monarq-prod-carousel__meta\">\n                    <div class=\"monarq-prod-carousel__title monarq-prod-carousel-meta-row\">W&#039; Benton Sweat Pant<\/div><div class=\"monarq-prod-carousel__price monarq-prod-carousel-meta-row\"><del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;720<\/span><\/del> <span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0623\u0635\u0644\u064a \u0647\u0648: SAR&nbsp;720.<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\" dir=\"auto\">SAR<\/span>&nbsp;432<\/span><\/ins><span class=\"screen-reader-text\">\u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u062d\u0627\u0644\u064a \u0647\u0648: SAR&nbsp;432.<\/span><\/div>                <\/div>\n            <\/a>\n        <\/figure>                                <div class=\"monarq-prod-carousel__spacer\"><\/div>\n            <\/div>\n        <\/div>\n\n        <style>#monarq-prod-carousel-1{overflow:hidden;display:block;height:auto!important;touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain;overscroll-behavior-y:auto;cursor:grab;user-select:none;-webkit-user-select:none;}#monarq-prod-carousel-1::-webkit-scrollbar{display:none;}#monarq-prod-carousel-1.is-dragging{cursor:grabbing;}#monarq-prod-carousel-1 .monarq-prod-carousel__track{display:flex;align-items:flex-start;height:auto!important;will-change:transform;}#monarq-prod-carousel-1 .monarq-prod-carousel__slide{margin:0;position:relative;flex-shrink:0;height:auto!important;overflow:visible!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__link{display:flex;flex-direction:column;text-decoration:none!important;color:#000;height:auto;user-select:text;-webkit-user-select:text;text-align:start!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__media{position:relative;overflow:hidden;}#monarq-prod-carousel-1 .monarq-prod-carousel__imgbox{position:relative!important;width:100%!important;aspect-ratio:4\/5!important;overflow:hidden!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__imgbox img.monarq-prod-carousel__img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important;user-select:none!important;-webkit-user-drag:none!important;}#monarq-prod-carousel-1 img.monarq-prod-carousel__img--main{opacity:1!important;transition:opacity .22s ease!important;}#monarq-prod-carousel-1 img.monarq-prod-carousel__img--hover{opacity:0!important;transition:opacity .22s ease!important;}@media (hover:hover) and (pointer:fine){#monarq-prod-carousel-1 .monarq-prod-carousel__media.has-hover:hover img.monarq-prod-carousel__img--main{opacity:0!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__media.has-hover:hover img.monarq-prod-carousel__img--hover{opacity:1!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__media.has-hover:active img.monarq-prod-carousel__img--main{opacity:0!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__media.has-hover:active img.monarq-prod-carousel__img--hover{opacity:1!important;}}@media (hover:none), (pointer:coarse){#monarq-prod-carousel-1 .monarq-prod-carousel__media.has-hover:hover img.monarq-prod-carousel__img--main,#monarq-prod-carousel-1 .monarq-prod-carousel__media.has-hover:active img.monarq-prod-carousel__img--main{opacity:1!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__media.has-hover:hover img.monarq-prod-carousel__img--hover,#monarq-prod-carousel-1 .monarq-prod-carousel__media.has-hover:active img.monarq-prod-carousel__img--hover{opacity:0!important;}}#monarq-prod-carousel-1 .monarq-sale-badge{position:absolute!important;top:8px!important;inset-inline-start:8px!important;z-index:5!important;background:#c62828!important;color:#fff!important;padding:4px 10px!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.04em!important;border-radius:3px!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__meta{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:1!important;margin-top:0;height:auto!important;overflow:visible!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__title{font-family:var(--mcom-context-font, \"Helvetica Neue\")!important;font-size:14px!important;font-weight:600!important;color:#000!important;margin:0 0 2px 0!important;line-height:1.1!important;text-transform:uppercase!important;display:block;padding-top:20px!important;text-align:start!important;}#monarq-prod-carousel-1 .monarq-prod-carousel-meta-row{display:block!important;width:100%!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:start!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__price,#monarq-prod-carousel-1 .monarq-prod-carousel__price *{font-family:var(--mcom-context-font, \"Helvetica Neue\")!important;font-size:14px!important;font-weight:300!important;color:#686868!important;line-height:1.1!important;text-decoration:none!important;text-align:start!important;}#monarq-prod-carousel-1 .monarq-prod-carousel-taxonomy{font-family:var(--mcom-context-font, \"Helvetica Neue\")!important;font-size:14px!important;font-weight:300!important;color:#686868!important;line-height:1.1!important;text-transform:uppercase!important;margin:0 0 2px 0!important;text-align:start!important;}#monarq-prod-carousel-1 .monarq-prod-carousel-taxonomy a{color:inherit!important;text-decoration:none!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__price del,#monarq-prod-carousel-1 .monarq-prod-carousel__price del *{text-decoration:line-through!important;opacity:1!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__price ins,#monarq-prod-carousel-1 .monarq-prod-carousel__price ins *{text-decoration:none!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__spacer{flex-shrink:0;}@media (max-width:767px){#monarq-prod-carousel-1 .monarq-prod-carousel__track{margin-inline-start:30px!important;margin-inline-end:0!important;gap:10px;}#monarq-prod-carousel-1 .monarq-prod-carousel__slide{width:calc(((100% - 30px - 30px - (1 - 1) * 10px) \/ 1));}#monarq-prod-carousel-1 .monarq-prod-carousel__title{font-size:13px!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__price,#monarq-prod-carousel-1 .monarq-prod-carousel__price *{font-size:13px!important;}#monarq-prod-carousel-1 .monarq-prod-carousel-taxonomy{font-size:13px!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__spacer{width:30px;}}@media (min-width:768px){#monarq-prod-carousel-1 .monarq-prod-carousel__track{margin-inline-start:40px!important;margin-inline-end:0!important;}#monarq-prod-carousel-1 .monarq-prod-carousel__track{gap:20px;}#monarq-prod-carousel-1 .monarq-prod-carousel__slide{width:calc(((100% - 40px - 40px - (3 - 1) * 20px) \/ 3));}#monarq-prod-carousel-1 .monarq-prod-carousel__spacer{width:40px;}}#monarq-prod-carousel-1 img{-webkit-tap-highlight-color:transparent;}<\/style>\n                <\/div>\n<\/section>\n<style>\n\/* ==========================================================\n   RESET\n   ========================================================== *\/<\/p>\n<p>.personage-sale,\n.personage-sale * {\n  box-sizing:\n    border-box;\n}<\/p>\n<p>\/* ==========================================================\n   SECTION<\/p>\n<p>   NO horizontal padding on the section itself.<\/p>\n<p>   Horizontal padding belongs ONLY to .personage-sale__intro.\n   ========================================================== *\/<\/p>\n<p>.personage-sale {\n  --editorial-pad:\n    36px;<\/p>\n<p>  position:\n    relative;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    18px\n    0\n    36px;<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  background:\n    #fff;<\/p>\n<p>  color:\n    #000;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;\n}<\/p>\n<p>\/* ==========================================================\n   EDITORIAL INTRO<\/p>\n<p>   THIS is the padded area.\n   ========================================================== *\/<\/p>\n<p>.personage-sale__intro {\n  width:\n    100%;<\/p>\n<p>  padding:\n    0\n    var(--editorial-pad);\n}<\/p>\n<p>\/* ==========================================================\n   TITLE\n   ========================================================== *\/<\/p>\n<p>.personage-sale__title {\n  display:\n    flex;<\/p>\n<p>  align-items:\n    baseline;<\/p>\n<p>  flex-wrap:\n    nowrap;<\/p>\n<p>  gap:\n    .22em;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  color:\n    #000;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    clamp(\n      88px,\n      8.4vw,\n      128px\n    );<\/p>\n<p>  font-weight:\n    900;<\/p>\n<p>  line-height:\n    .88;<\/p>\n<p>  letter-spacing:\n    -.055em;<\/p>\n<p>  text-transform:\n    uppercase;\n}<\/p>\n<p>.personage-sale__title span {\n  display:\n    block;<\/p>\n<p>  white-space:\n    nowrap;\n}<\/p>\n<p>\/* ==========================================================\n   DESKTOP DESCRIPTION\n   ========================================================== *\/<\/p>\n<p>.personage-sale__description {\n  margin:\n    30px\n    0\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  color:\n    rgba(0,0,0,.42);<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    14px;<\/p>\n<p>  font-weight:\n    400;<\/p>\n<p>  line-height:\n    15px;<\/p>\n<p>  letter-spacing:\n    -.01em;<\/p>\n<p>  text-transform:\n    uppercase;\n}<\/p>\n<p>\/* ==========================================================\n   LIMITED AVAILABILITY\n   ========================================================== *\/<\/p>\n<p>.personage-sale__availability {\n  display:\n    flex;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  margin-top:\n    24px;<\/p>\n<p>  align-items:\n    center;<\/p>\n<p>  gap:\n    14px;\n}<\/p>\n<p>.personage-sale__availability-text {\n  flex:\n    0 0 auto;<\/p>\n<p>  color:\n    rgba(0,0,0,.19);<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    14px;<\/p>\n<p>  font-weight:\n    400;<\/p>\n<p>  line-height:\n    16px;<\/p>\n<p>  text-transform:\n    uppercase;<\/p>\n<p>  white-space:\n    nowrap;\n}<\/p>\n<p>.personage-sale__availability-line {\n  flex:\n    1 1 auto;<\/p>\n<p>  min-width:\n    40px;<\/p>\n<p>  height:\n    36px;<\/p>\n<p>  opacity:\n    .45;<\/p>\n<p>  background-image:\n    repeating-linear-gradient(\n      125deg,\n      transparent 0,\n      transparent 7px,\n      rgba(0,0,0,.08) 7px,\n      rgba(0,0,0,.08) 8px\n    );\n}<\/p>\n<p>\/* ==========================================================\n   EXPLORE\n   ========================================================== *\/<\/p>\n<p>.personage-sale__explore {\n  position:\n    relative;<\/p>\n<p>  display:\n    inline-block;<\/p>\n<p>  margin-top:\n    2px;<\/p>\n<p>  color:\n    rgba(0,0,0,.42) !important;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif !important;<\/p>\n<p>  font-size:\n    20px !important;<\/p>\n<p>  font-weight:\n    800 !important;<\/p>\n<p>  line-height:\n    1 !important;<\/p>\n<p>  letter-spacing:\n    -.025em;<\/p>\n<p>  text-decoration:\n    none !important;<\/p>\n<p>  text-transform:\n    uppercase;<\/p>\n<p>  transition:\n    color .25s ease;\n}<\/p>\n<p>.personage-sale__explore::after {\n  content:\n    \"\";<\/p>\n<p>  position:\n    absolute;<\/p>\n<p>  left:\n    0;<\/p>\n<p>  bottom:\n    -7px;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    3px;<\/p>\n<p>  background:\n    #000;<\/p>\n<p>  transform:\n    scaleX(0);<\/p>\n<p>  transform-origin:\n    left center;<\/p>\n<p>  transition:\n    transform .3s ease;\n}<\/p>\n<p>.personage-sale__explore:hover,\n.personage-sale__explore:focus-visible {\n  color:\n    #000 !important;\n}<\/p>\n<p>.personage-sale__explore:hover::after,\n.personage-sale__explore:focus-visible::after {\n  transform:\n    scaleX(1);\n}<\/p>\n<p>\/* ==========================================================\n   PRODUCTS \/ SHORTCODE<\/p>\n<p>   VERY IMPORTANT:<\/p>\n<p>   - Width = 100%\n   - No left margin\n   - No right margin\n   - No left padding\n   - No right padding<\/p>\n<p>   We ONLY control the TOP spacing here.<\/p>\n<p>   MCOM itself keeps its own built-in horizontal offsets.\n   ========================================================== *\/<\/p>\n<p>.personage-sale__products {\n  position:\n    relative;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  margin:\n    23px\n    0\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  overflow:\n    visible;\n}<\/p>\n<p>\/* ==========================================================\n   MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:767px) {<\/p>\n<p>  .personage-sale {\n    --editorial-pad:\n      24px;<\/p>\n<p>    padding:\n      24px\n      0\n      30px;\n  }<\/p>\n<p>  \/* ========================================================\n     TITLE\n     ======================================================== *\/<\/p>\n<p>  .personage-sale__title {\n    display:\n      block;<\/p>\n<p>    font-size:\n      70px;<\/p>\n<p>    font-weight:\n      900;<\/p>\n<p>    line-height:\n      .9;<\/p>\n<p>    letter-spacing:\n      -.055em;\n  }<\/p>\n<p>  .personage-sale__title span {\n    display:\n      block;\n  }<\/p>\n<p>  \/* ========================================================\n     MOBILE COPY\n     ======================================================== *\/<\/p>\n<p>  .personage-sale__description {\n    display:\n      none;\n  }<\/p>\n<p>  .personage-sale__availability {\n    display:\n      block;<\/p>\n<p>    margin-top:\n      27px;\n  }<\/p>\n<p>  .personage-sale__availability-text {\n    display:\n      block;<\/p>\n<p>    max-width:\n      270px;<\/p>\n<p>    color:\n      rgba(0,0,0,.40);<\/p>\n<p>    font-size:\n      14px;<\/p>\n<p>    font-weight:\n      400;<\/p>\n<p>    line-height:\n      16px;<\/p>\n<p>    white-space:\n      normal;\n  }<\/p>\n<p>  .personage-sale__availability-line {\n    display:\n      none;\n  }<\/p>\n<p>  \/* ========================================================\n     EXPLORE\n     ======================================================== *\/<\/p>\n<p>  .personage-sale__explore {\n    margin-top:\n      25px;<\/p>\n<p>    font-size:\n      20px !important;\n  }<\/p>\n<p>  \/* ========================================================\n     SHORTCODE<\/p>\n<p>     ZERO horizontal padding\/margin from this custom section.\n     ======================================================== *\/<\/p>\n<p>  .personage-sale__products {\n    width:\n      100%;<\/p>\n<p>    margin:\n      32px\n      0\n      0;<\/p>\n<p>    padding:\n      0;<\/p>\n<p>    overflow:\n      visible;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   SMALL MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:370px) {<\/p>\n<p>  .personage-sale__title {\n    font-size:\n      66px;\n  }<\/p>\n<p>  .personage-sale__availability-text {\n    max-width:\n      250px;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/<\/p>\n<p>@media (prefers-reduced-motion:reduce) {<\/p>\n<p>  .personage-sale__explore,\n  .personage-sale__explore::after {\n    transition:\n      none;\n  }<\/p>\n<p>}\n<\/style>\n<p><script>\n(function () {<\/p>\n<p>  \"use strict\";<\/p>\n<p>  const section =\n    document.querySelector(\n      \".personage-sale\"\n    );<\/p>\n<p>  if (!section) {\n    return;\n  }<\/p>\n<p>  \/*\n   This section intentionally does NOT alter the\n   MCOM shortcode's padding, margin, width calculations,\n   carousel controls, or internal offsets.\n  *\/<\/p>\n<p>  section.dataset.personageSaleReady =\n    \"true\";<\/p>\n<p>})();\n<\/script><br \/>\n<!-- ========================================================\n     PERSONAGE \u2014 MODELS CAROUSEL\n     ENGLISH\n     FULL HTML + CSS + JS\n     ======================================================== --><\/p>\n<div class=\"model-carousel\">\n<div class=\"model-track\">\n<p>    <!-- ====================================================\n         AZHAR\n         ==================================================== --><\/p>\n<section\n      class=\"model-slide\"\n      data-thumb=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/06\/Replacement-Image.webp\"\n    ><\/p>\n<div class=\"model-overlay\"><\/div>\n<div class=\"model-inner\">\n<h2 class=\"model-name\">\n          Azhar<br \/>\n        <\/h2>\n<p class=\"model-text\">\n          DIGITAL STRATEGIST \u00b7 CULTURE FIRST STORYTELLING \u00b7 CROSS PLATFORM IMPACT\n        <\/p>\n<p>        <a\n          href=\"\/models\/azhar\"\n          class=\"model-link-btn\"\n        ><br \/>\n          VIEW MORE<br \/>\n        <\/a><\/p><\/div>\n<\/section>\n<p>    <!-- ====================================================\n         ALANOUD\n         ==================================================== --><\/p>\n<section\n      class=\"model-slide\"\n      data-thumb=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/06\/Alanoud-1.webp\"\n    ><\/p>\n<div class=\"model-overlay\"><\/div>\n<div class=\"model-inner\">\n<h2 class=\"model-name\">\n          Alanoud<br \/>\n        <\/h2>\n<p class=\"model-text\">\n          CONTENT ARCHITECT \u00b7 VISUAL NARRATIVES \u00b7 HIGH ENGAGEMENT COMMUNITIES\n        <\/p>\n<p>        <a\n          href=\"\/models\/alanoud\"\n          class=\"model-link-btn\"\n        ><br \/>\n          VIEW MORE<br \/>\n        <\/a><\/p><\/div>\n<\/section>\n<p>    <!-- ====================================================\n         ABDULRAHMAN\n         ==================================================== --><\/p>\n<section\n      class=\"model-slide\"\n      data-thumb=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/06\/Adjusted-Image.webp\"\n    ><\/p>\n<div class=\"model-overlay\"><\/div>\n<div class=\"model-inner\">\n<h2 class=\"model-name\">\n          Abdulrahman<br \/>\n        <\/h2>\n<p class=\"model-text\">\n          LIFESTYLE CURATOR \u00b7 BRAND ALIGNMENT \u00b7 LONG TERM PARTNERSHIPS\n        <\/p>\n<p>        <a\n          href=\"\/models\/abdulrahman\"\n          class=\"model-link-btn\"\n        ><br \/>\n          VIEW MORE<br \/>\n        <\/a><\/p><\/div>\n<\/section>\n<p>    <!-- ====================================================\n         DELE\n         ==================================================== --><\/p>\n<section\n      class=\"model-slide\"\n      data-thumb=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/05\/DELE.webp\"\n    ><\/p>\n<div class=\"model-overlay\"><\/div>\n<div class=\"model-inner\">\n<h2 class=\"model-name\">\n          Dele<br \/>\n        <\/h2>\n<p class=\"model-text\">\n          TREND ANALYST \u00b7 NEW FORMAT ADOPTION \u00b7 COMMUNITY LED CAMPAIGNS\n        <\/p>\n<p>        <a\n          href=\"\/models\/dele\"\n          class=\"model-link-btn\"\n        ><br \/>\n          VIEW MORE<br \/>\n        <\/a><\/p><\/div>\n<\/section><\/div>\n<p>  <!-- ======================================================\n       MOBILE PROGRESS\n       ====================================================== --><\/p>\n<div\n    class=\"model-mobile-lines\"\n    id=\"modelMobileLines\"\n  ><\/div>\n<p>  <!-- ======================================================\n       DOTS \u2014 HIDDEN, KEPT FOR STATE\n       ====================================================== --><\/p>\n<div\n    class=\"model-dots\"\n    aria-hidden=\"true\"\n  ><\/p>\n<p>    <span class=\"dot is-active\"><\/span><br \/>\n    <span class=\"dot\"><\/span><br \/>\n    <span class=\"dot\"><\/span><br \/>\n    <span class=\"dot\"><\/span><\/p><\/div>\n<p>  <!-- ======================================================\n       DESKTOP NEXT MODEL PANEL\n       ====================================================== --><\/p>\n<aside\n    class=\"model-next-panel\"\n    id=\"modelNextPanel\"\n  ><\/p>\n<div class=\"model-next-thumb\">\n<p>      <img decoding=\"async\"\n        id=\"modelNextThumb\"\n        src=\"https:\/\/personage.sa\/wp-content\/uploads\/2026\/06\/Alanoud-1.webp\"\n        alt=\"Next model thumbnail\"\n        loading=\"lazy\"\n      ><\/p><\/div>\n<div class=\"model-next-meta\">\n<div class=\"model-next-top\">\n<p>        <span class=\"model-next-label\"><br \/>\n          NEXT<br \/>\n        <\/span><\/p>\n<div class=\"model-next-title-row\">\n<p>          <span\n            class=\"model-next-title\"\n            id=\"modelNextTitle\"\n          ><br \/>\n            Alanoud<br \/>\n          <\/span><\/p>\n<p>          <img decoding=\"async\"\n            src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/06\/Right-Chevron-White.svg\"\n            alt=\"\"\n            class=\"model-next-arrow\"\n          ><\/p><\/div>\n<\/p><\/div>\n<div\n        class=\"model-next-lines\"\n        id=\"modelNextLines\"\n      ><\/div>\n<\/p><\/div>\n<\/aside>\n<\/div>\n<style>\n\/* ==========================================================\n   RESET\n   ========================================================== *\/<\/p>\n<p>.model-carousel,\n.model-carousel * {\n  box-sizing:\n    border-box;\n}<\/p>\n<p>\/* ==========================================================\n   ROOT\n   ========================================================== *\/<\/p>\n<p>.model-carousel {\n  position:\n    relative;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100vh;<\/p>\n<p>  height:\n    100svh;<\/p>\n<p>  min-height:\n    100svh;<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  color:\n    #fff;<\/p>\n<p>  background:\n    #000;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;\n}<\/p>\n<p>\/* ==========================================================\n   TRACK\n   ========================================================== *\/<\/p>\n<p>.model-track {\n  display:\n    flex;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  align-items:\n    stretch;<\/p>\n<p>  overflow-x:\n    auto;<\/p>\n<p>  overflow-y:\n    hidden;<\/p>\n<p>  scroll-snap-type:\n    x mandatory;<\/p>\n<p>  scroll-behavior:\n    smooth;<\/p>\n<p>  scrollbar-width:\n    none;<\/p>\n<p>  -webkit-overflow-scrolling:\n    touch;<\/p>\n<p>  overscroll-behavior-x:\n    contain;<\/p>\n<p>  touch-action:\n    pan-x pan-y;<\/p>\n<p>  direction:\n    ltr;\n}<\/p>\n<p>.model-track::-webkit-scrollbar {\n  display:\n    none;\n}<\/p>\n<p>\/* ==========================================================\n   SLIDES\n   ========================================================== *\/<\/p>\n<p>.model-slide {\n  position:\n    relative;<\/p>\n<p>  flex:\n    0 0\n    100%;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  max-width:\n    100%;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  min-height:\n    100svh;<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  scroll-snap-align:\n    start;<\/p>\n<p>  scroll-snap-stop:\n    always;<\/p>\n<p>  background-size:\n    cover;<\/p>\n<p>  background-position:\n    center center;<\/p>\n<p>  background-repeat:\n    no-repeat;\n}<\/p>\n<p>\/* ==========================================================\n   OVERLAY\n   ========================================================== *\/<\/p>\n<p>.model-overlay {\n  position:\n    absolute;<\/p>\n<p>  inset:\n    0;<\/p>\n<p>  background:\n    linear-gradient(\n      to top,\n      rgba(0,0,0,.9),\n      rgba(0,0,0,0)\n    );<\/p>\n<p>  opacity:\n    0;<\/p>\n<p>  transition:\n    opacity .3s ease;<\/p>\n<p>  pointer-events:\n    none;\n}<\/p>\n<p>.model-slide.is-active\n.model-overlay {\n  opacity:\n    1;\n}<\/p>\n<p>\/* ==========================================================\n   MODEL CONTENT\n   ========================================================== *\/<\/p>\n<p>.model-inner {\n  position:\n    absolute;<\/p>\n<p>  left:\n    0;<\/p>\n<p>  bottom:\n    0;<\/p>\n<p>  z-index:\n    2;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  padding:\n    40px;<\/p>\n<p>  opacity:\n    0;<\/p>\n<p>  transform:\n    translateY(10px);<\/p>\n<p>  transition:\n    opacity .3s ease,\n    transform .3s ease;\n}<\/p>\n<p>.model-slide.is-active\n.model-inner {\n  opacity:\n    1;<\/p>\n<p>  transform:\n    translateY(0);\n}<\/p>\n<p>\/* ==========================================================\n   MODEL NAME\n   ========================================================== *\/<\/p>\n<p>.model-name {\n  margin:\n    0 !important;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  color:\n    #fff;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    clamp(\n      2.1rem,\n      6vw,\n      5.2rem\n    );<\/p>\n<p>  font-weight:\n    900;<\/p>\n<p>  line-height:\n    .7 !important;<\/p>\n<p>  letter-spacing:\n    .08em;<\/p>\n<p>  text-transform:\n    uppercase;<\/p>\n<p>  transform:\n    translate(\n      -7px,\n      -20px\n    ) !important;\n}<\/p>\n<p>\/* ==========================================================\n   MODEL TEXT\n   ========================================================== *\/<\/p>\n<p>.model-text {\n  max-width:\n    32rem;<\/p>\n<p>  margin:\n    0 0 22px !important;<\/p>\n<p>  color:\n    #fff;<\/p>\n<p>  opacity:\n    .9;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    14px;<\/p>\n<p>  font-weight:\n    400;<\/p>\n<p>  line-height:\n    16px !important;<\/p>\n<p>  letter-spacing:\n    .06em;<\/p>\n<p>  text-transform:\n    uppercase;\n}<\/p>\n<p>\/* ==========================================================\n   VIEW MORE\n   ========================================================== *\/<\/p>\n<p>.model-link-btn {\n  position:\n    relative;<\/p>\n<p>  display:\n    inline-block;<\/p>\n<p>  color:\n    #fff !important;<\/p>\n<p>  background:\n    none !important;<\/p>\n<p>  border:\n    0 !important;<\/p>\n<p>  outline:\n    none !important;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    20px;<\/p>\n<p>  font-weight:\n    800;<\/p>\n<p>  line-height:\n    1;<\/p>\n<p>  text-decoration:\n    none !important;<\/p>\n<p>  cursor:\n    pointer;<\/p>\n<p>  -webkit-tap-highlight-color:\n    transparent;\n}<\/p>\n<p>.model-link-btn::after {\n  content:\n    \"\";<\/p>\n<p>  position:\n    absolute;<\/p>\n<p>  left:\n    0;<\/p>\n<p>  bottom:\n    -9px;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    4px;<\/p>\n<p>  background:\n    #fff;<\/p>\n<p>  transform:\n    scaleX(0);<\/p>\n<p>  transform-origin:\n    left center;<\/p>\n<p>  transition:\n    transform .3s ease;\n}<\/p>\n<p>.model-link-btn:hover::after,\n.model-link-btn:focus-visible::after {\n  transform:\n    scaleX(1);\n}<\/p>\n<p>\/* ==========================================================\n   NEXT PANEL\n   ========================================================== *\/<\/p>\n<p>.model-next-panel {\n  position:\n    absolute;<\/p>\n<p>  right:\n    40px;<\/p>\n<p>  bottom:\n    40px;<\/p>\n<p>  z-index:\n    20;<\/p>\n<p>  display:\n    grid;<\/p>\n<p>  grid-template-columns:\n    42%\n    1fr;<\/p>\n<p>  width:\n    min(\n      360px,\n      40vw\n    );<\/p>\n<p>  height:\n    190px;<\/p>\n<p>  align-items:\n    flex-end;<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  cursor:\n    pointer;\n}<\/p>\n<p>\/* ==========================================================\n   NEXT THUMB\n   ========================================================== *\/<\/p>\n<p>.model-next-thumb {\n  position:\n    relative;<\/p>\n<p>  height:\n    190px;<\/p>\n<p>  overflow:\n    hidden;\n}<\/p>\n<p>.model-next-thumb img {\n  display:\n    block;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  object-fit:\n    cover;<\/p>\n<p>  object-position:\n    center;<\/p>\n<p>  transform:\n    scale(1.03);<\/p>\n<p>  transition:\n    transform .5s ease;\n}<\/p>\n<p>.model-next-panel:hover\n.model-next-thumb img {\n  transform:\n    scale(1.08);\n}<\/p>\n<p>\/* ==========================================================\n   NEXT META\n   ========================================================== *\/<\/p>\n<p>.model-next-meta {\n  position:\n    relative;<\/p>\n<p>  display:\n    flex;<\/p>\n<p>  flex-direction:\n    column;<\/p>\n<p>  justify-content:\n    center;<\/p>\n<p>  align-self:\n    flex-end;<\/p>\n<p>  gap:\n    6px;<\/p>\n<p>  padding:\n    16px 18px;<\/p>\n<p>  background:\n    rgba(15,15,15,.88);<\/p>\n<p>  border:\n    1px solid\n    rgba(80,80,80,.9);<\/p>\n<p>  box-shadow:\n    0 10px 30px\n    rgba(0,0,0,.5);<\/p>\n<p>  backdrop-filter:\n    blur(10px);<\/p>\n<p>  -webkit-backdrop-filter:\n    blur(10px);\n}<\/p>\n<p>.model-next-top {\n  display:\n    flex;<\/p>\n<p>  flex-direction:\n    column;<\/p>\n<p>  gap:\n    0;\n}<\/p>\n<p>.model-next-label {\n  color:\n    #bcbcbc;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    14px;<\/p>\n<p>  font-weight:\n    400;<\/p>\n<p>  letter-spacing:\n    .06em;<\/p>\n<p>  text-transform:\n    uppercase;\n}<\/p>\n<p>.model-next-title-row {\n  display:\n    flex;<\/p>\n<p>  align-items:\n    center;<\/p>\n<p>  gap:\n    8px;\n}<\/p>\n<p>.model-next-title {\n  margin-top:\n    -8px;<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  color:\n    #fff;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    19px;<\/p>\n<p>  font-weight:\n    900;<\/p>\n<p>  letter-spacing:\n    0;<\/p>\n<p>  text-overflow:\n    ellipsis;<\/p>\n<p>  text-transform:\n    uppercase;<\/p>\n<p>  white-space:\n    nowrap;\n}<\/p>\n<p>.model-next-arrow {\n  flex:\n    0 0 auto;<\/p>\n<p>  width:\n    9px;<\/p>\n<p>  height:\n    9px;<\/p>\n<p>  transform:\n    translateY(-5px);\n}<\/p>\n<p>\/* ==========================================================\n   PROGRESS LINES\n   ========================================================== *\/<\/p>\n<p>.model-next-lines {\n  display:\n    flex;<\/p>\n<p>  align-items:\n    center;<\/p>\n<p>  gap:\n    3px;\n}<\/p>\n<p>.model-next-line {\n  position:\n    relative;<\/p>\n<p>  flex:\n    1;<\/p>\n<p>  height:\n    2px;<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  background:\n    rgba(255,255,255,.25);\n}<\/p>\n<p>.model-next-line::after {\n  content:\n    \"\";<\/p>\n<p>  position:\n    absolute;<\/p>\n<p>  inset:\n    0;<\/p>\n<p>  background:\n    #fff;<\/p>\n<p>  transform:\n    scaleX(0);<\/p>\n<p>  transform-origin:\n    center center;<\/p>\n<p>  transition:\n    transform .35s ease,\n    transform-origin 0s;\n}<\/p>\n<p>.model-next-line.is-exiting-forward::after {\n  transform-origin:\n    right center;<\/p>\n<p>  transform:\n    scaleX(0);\n}<\/p>\n<p>.model-next-line.is-active-forward::after {\n  transform-origin:\n    left center;<\/p>\n<p>  transform:\n    scaleX(1);\n}<\/p>\n<p>.model-next-line.is-exiting-backward::after {\n  transform-origin:\n    left center;<\/p>\n<p>  transform:\n    scaleX(0);\n}<\/p>\n<p>.model-next-line.is-active-backward::after {\n  transform-origin:\n    right center;<\/p>\n<p>  transform:\n    scaleX(1);\n}<\/p>\n<p>\/* ==========================================================\n   DOTS \/ MOBILE LINES\n   ========================================================== *\/<\/p>\n<p>.model-dots {\n  display:\n    none;\n}<\/p>\n<p>.model-mobile-lines {\n  display:\n    none;\n}<\/p>\n<p>\/* ==========================================================\n   MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:768px) {<\/p>\n<p>  .model-inner {\n    padding:\n      30px\n      30px\n      50px;\n  }<\/p>\n<p>  .model-name {\n    font-size:\n      clamp(\n        1.7rem,\n        7vw,\n        3.1rem\n      ) !important;<\/p>\n<p>    transform:\n      translate(\n        1px,\n        -20px\n      ) !important;\n  }<\/p>\n<p>  .model-next-panel {\n    display:\n      none !important;\n  }<\/p>\n<p>  .model-mobile-lines {\n    position:\n      absolute;<\/p>\n<p>    left:\n      30px;<\/p>\n<p>    right:\n      30px;<\/p>\n<p>    bottom:\n      30px;<\/p>\n<p>    z-index:\n      5;<\/p>\n<p>    display:\n      flex;<\/p>\n<p>    gap:\n      3px;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/<\/p>\n<p>@media (prefers-reduced-motion:reduce) {<\/p>\n<p>  .model-overlay,\n  .model-inner,\n  .model-link-btn::after,\n  .model-next-thumb img,\n  .model-next-line::after {\n    transition:\n      none !important;\n  }<\/p>\n<p>}\n<\/style>\n<p><script>\n(function () {<\/p>\n<p>  \"use strict\";<\/p>\n<p>  const carousel =\n    document.querySelector(\n      \".model-carousel\"\n    );<\/p>\n<p>  if (!carousel) {\n    return;\n  }<\/p>\n<p>  const track =\n    carousel.querySelector(\n      \".model-track\"\n    );<\/p>\n<p>  const slides =\n    Array.from(\n      carousel.querySelectorAll(\n        \".model-slide\"\n      )\n    );<\/p>\n<p>  const dots =\n    Array.from(\n      carousel.querySelectorAll(\n        \".model-dots .dot\"\n      )\n    );<\/p>\n<p>  const nextPanel =\n    carousel.querySelector(\n      \"#modelNextPanel\"\n    );<\/p>\n<p>  const nextThumbImg =\n    carousel.querySelector(\n      \"#modelNextThumb\"\n    );<\/p>\n<p>  const nextTitleEl =\n    carousel.querySelector(\n      \"#modelNextTitle\"\n    );<\/p>\n<p>  const desktopLinesContainer =\n    carousel.querySelector(\n      \"#modelNextLines\"\n    );<\/p>\n<p>  const mobileLinesContainer =\n    carousel.querySelector(\n      \"#modelMobileLines\"\n    );<\/p>\n<p>  if (\n    !track ||\n    !slides.length ||\n    !nextThumbImg ||\n    !nextTitleEl ||\n    !desktopLinesContainer ||\n    !mobileLinesContainer\n  ) {<\/p>\n<p>    return;<\/p>\n<p>  }<\/p>\n<p>  \/* ========================================================\n     BACKGROUNDS\n     ======================================================== *\/<\/p>\n<p>  slides.forEach(\n    slide => {<\/p>\n<p>      const background =\n        slide.dataset.thumb;<\/p>\n<p>      if (\n        background\n      ) {<\/p>\n<p>        slide.style.backgroundImage =\n          `url(\"${background}\")`;<\/p>\n<p>      }<\/p>\n<p>    }\n  );<\/p>\n<p>  \/* ========================================================\n     STATE\n     ======================================================== *\/<\/p>\n<p>  let currentIndex =\n    0;<\/p>\n<p>  let previousIndex =\n    -1;<\/p>\n<p>  let rafId =\n    null;<\/p>\n<p>  let isProgrammatic =\n    false;<\/p>\n<p>  let canClickNext =\n    true;<\/p>\n<p>  \/* ========================================================\n     PROGRESS LINES\n     ======================================================== *\/<\/p>\n<p>  const desktopLines =\n    [];<\/p>\n<p>  const mobileLines =\n    [];<\/p>\n<p>  slides.forEach(\n    () => {<\/p>\n<p>      const desktopLine =\n        document.createElement(\n          \"span\"\n        );<\/p>\n<p>      desktopLine.className =\n        \"model-next-line\";<\/p>\n<p>      desktopLinesContainer.appendChild(\n        desktopLine\n      );<\/p>\n<p>      desktopLines.push(\n        desktopLine\n      );<\/p>\n<p>      const mobileLine =\n        document.createElement(\n          \"span\"\n        );<\/p>\n<p>      mobileLine.className =\n        \"model-next-line\";<\/p>\n<p>      mobileLinesContainer.appendChild(\n        mobileLine\n      );<\/p>\n<p>      mobileLines.push(\n        mobileLine\n      );<\/p>\n<p>    }\n  );<\/p>\n<p>  \/* ========================================================\n     HELPERS\n     ======================================================== *\/<\/p>\n<p>  const clamp =\n    (\n      value,\n      min,\n      max\n    ) =>\n      Math.max(\n        min,\n        Math.min(\n          max,\n          value\n        )\n      );<\/p>\n<p>  function getDirection(\n    fromIndex,\n    toIndex\n  ) {<\/p>\n<p>    const total =\n      slides.length;<\/p>\n<p>    if (\n      fromIndex === toIndex\n    ) {<\/p>\n<p>      return 0;<\/p>\n<p>    }<\/p>\n<p>    if (\n      fromIndex === total - 1\n      &&\n      toIndex === 0\n    ) {<\/p>\n<p>      return 1;<\/p>\n<p>    }<\/p>\n<p>    if (\n      fromIndex === 0\n      &&\n      toIndex === total - 1\n    ) {<\/p>\n<p>      return -1;<\/p>\n<p>    }<\/p>\n<p>    return toIndex > fromIndex\n      ?\n      1\n      :\n      -1;<\/p>\n<p>  }<\/p>\n<p>  \/* ========================================================\n     UI UPDATES\n     ======================================================== *\/<\/p>\n<p>  function updateActiveSlide() {<\/p>\n<p>    slides.forEach(\n      (slide,index) => {<\/p>\n<p>        slide.classList.toggle(\n          \"is-active\",\n          index === currentIndex\n        );<\/p>\n<p>      }\n    );<\/p>\n<p>  }<\/p>\n<p>  function updateDots() {<\/p>\n<p>    dots.forEach(\n      (dot,index) => {<\/p>\n<p>        dot.classList.toggle(\n          \"is-active\",\n          index === currentIndex\n        );<\/p>\n<p>      }\n    );<\/p>\n<p>  }<\/p>\n<p>  function updateLines(\n    direction\n  ) {<\/p>\n<p>    const allLines =\n      [\n        ...desktopLines,\n        ...mobileLines\n      ];<\/p>\n<p>    allLines.forEach(\n      line => {<\/p>\n<p>        line.classList.remove(\n          \"is-active-forward\",\n          \"is-active-backward\",\n          \"is-exiting-forward\",\n          \"is-exiting-backward\"\n        );<\/p>\n<p>      }\n    );<\/p>\n<p>    if (\n      previousIndex >= 0\n      &&\n      previousIndex !== currentIndex\n      &&\n      direction !== 0\n    ) {<\/p>\n<p>      const exitClass =\n        direction > 0\n          ?\n          \"is-exiting-forward\"\n          :\n          \"is-exiting-backward\";<\/p>\n<p>      const previousDesktop =\n        desktopLines[\n          previousIndex\n        ];<\/p>\n<p>      const previousMobile =\n        mobileLines[\n          previousIndex\n        ];<\/p>\n<p>      previousDesktop?.classList.add(\n        exitClass\n      );<\/p>\n<p>      previousMobile?.classList.add(\n        exitClass\n      );<\/p>\n<p>    }<\/p>\n<p>    const activeClass =\n      direction >= 0\n        ?\n        \"is-active-forward\"\n        :\n        \"is-active-backward\";<\/p>\n<p>    desktopLines[\n      currentIndex\n    ]?.classList.add(\n      activeClass\n    );<\/p>\n<p>    mobileLines[\n      currentIndex\n    ]?.classList.add(\n      activeClass\n    );<\/p>\n<p>  }<\/p>\n<p>  function updateNextPanel(\n    direction\n  ) {<\/p>\n<p>    const nextIndex =\n      (\n        currentIndex + 1\n      )\n      %\n      slides.length;<\/p>\n<p>    const nextSlide =\n      slides[\n        nextIndex\n      ];<\/p>\n<p>    const name =\n      nextSlide.querySelector(\n        \".model-name\"\n      );<\/p>\n<p>    nextTitleEl.textContent =\n      name\n        ?\n        name.textContent.trim()\n        :\n        \"NEXT\";<\/p>\n<p>    const thumbnail =\n      nextSlide.dataset.thumb\n      ||\n      \"https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/Computer.webp\";<\/p>\n<p>    if (\n      nextThumbImg.src !== thumbnail\n    ) {<\/p>\n<p>      nextThumbImg.src =\n        thumbnail;<\/p>\n<p>    }<\/p>\n<p>    updateLines(\n      direction\n    );<\/p>\n<p>  }<\/p>\n<p>  function setIndex(\n    index,\n    direction\n  ) {<\/p>\n<p>    const total =\n      slides.length;<\/p>\n<p>    const nextIndex =\n      (\n        index + total\n      )\n      %\n      total;<\/p>\n<p>    previousIndex =\n      currentIndex;<\/p>\n<p>    currentIndex =\n      nextIndex;<\/p>\n<p>    if (\n      typeof direction ===\n      \"undefined\"\n    ) {<\/p>\n<p>      direction =\n        getDirection(\n          previousIndex,\n          currentIndex\n        );<\/p>\n<p>    }<\/p>\n<p>    updateActiveSlide();<\/p>\n<p>    updateDots();<\/p>\n<p>    updateNextPanel(\n      direction\n    );<\/p>\n<p>  }<\/p>\n<p>  \/* ========================================================\n     PROGRAMMATIC SCROLL\n     ======================================================== *\/<\/p>\n<p>  function scrollToSlide(\n    index,\n    behavior = \"smooth\"\n  ) {<\/p>\n<p>    const total =\n      slides.length;<\/p>\n<p>    const targetIndex =\n      (\n        index + total\n      )\n      %\n      total;<\/p>\n<p>    const targetX =\n      targetIndex\n      *\n      track.clientWidth;<\/p>\n<p>    track.scrollTo({\n      left:\n        targetX,<\/p>\n<p>      behavior:\n        behavior\n    });<\/p>\n<p>  }<\/p>\n<p>  function goToSlide(\n    index\n  ) {<\/p>\n<p>    if (\n      isProgrammatic\n    ) {<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    const total =\n      slides.length;<\/p>\n<p>    const targetIndex =\n      (\n        index + total\n      )\n      %\n      total;<\/p>\n<p>    isProgrammatic =\n      true;<\/p>\n<p>    scrollToSlide(\n      targetIndex,\n      \"smooth\"\n    );<\/p>\n<p>    setIndex(\n      targetIndex,\n      1\n    );<\/p>\n<p>    setTimeout(\n      () => {<\/p>\n<p>        isProgrammatic =\n          false;<\/p>\n<p>      },\n      500\n    );<\/p>\n<p>  }<\/p>\n<p>  \/* ========================================================\n     NEXT PANEL\n     ======================================================== *\/<\/p>\n<p>  nextPanel?.addEventListener(\n    \"click\",\n    event => {<\/p>\n<p>      event.preventDefault();<\/p>\n<p>      event.stopPropagation();<\/p>\n<p>      if (\n        !canClickNext\n        ||\n        isProgrammatic\n      ) {<\/p>\n<p>        return;<\/p>\n<p>      }<\/p>\n<p>      canClickNext =\n        false;<\/p>\n<p>      goToSlide(\n        currentIndex + 1\n      );<\/p>\n<p>      setTimeout(\n        () => {<\/p>\n<p>          canClickNext =\n            true;<\/p>\n<p>        },\n        500\n      );<\/p>\n<p>    }\n  );<\/p>\n<p>  \/* ========================================================\n     MANUAL SCROLL\n     ======================================================== *\/<\/p>\n<p>  track.addEventListener(\n    \"scroll\",\n    () => {<\/p>\n<p>      if (\n        isProgrammatic\n      ) {<\/p>\n<p>        return;<\/p>\n<p>      }<\/p>\n<p>      if (\n        rafId\n      ) {<\/p>\n<p>        cancelAnimationFrame(\n          rafId\n        );<\/p>\n<p>      }<\/p>\n<p>      rafId =\n        requestAnimationFrame(\n          () => {<\/p>\n<p>            const width =\n              Math.max(\n                1,\n                track.clientWidth\n              );<\/p>\n<p>            const nearestIndex =\n              clamp(\n                Math.round(\n                  track.scrollLeft\n                  \/\n                  width\n                ),\n                0,\n                slides.length - 1\n              );<\/p>\n<p>            if (\n              nearestIndex !==\n              currentIndex\n            ) {<\/p>\n<p>              const direction =\n                getDirection(\n                  currentIndex,\n                  nearestIndex\n                );<\/p>\n<p>              setIndex(\n                nearestIndex,\n                direction\n              );<\/p>\n<p>            }<\/p>\n<p>          }\n        );<\/p>\n<p>    },\n    {\n      passive:\n        true\n    }\n  );<\/p>\n<p>  \/* ========================================================\n     WIDTH-ONLY RESIZE\n     ======================================================== *\/<\/p>\n<p>  let lastWidth =\n    Math.round(\n      carousel.getBoundingClientRect().width\n    );<\/p>\n<p>  if (\n    \"ResizeObserver\" in window\n  ) {<\/p>\n<p>    const resizeObserver =\n      new ResizeObserver(\n        entries => {<\/p>\n<p>          const entry =\n            entries[0];<\/p>\n<p>          if (!entry) {\n            return;\n          }<\/p>\n<p>          const newWidth =\n            Math.round(\n              entry.contentRect.width\n            );<\/p>\n<p>          if (\n            Math.abs(\n              newWidth\n              -\n              lastWidth\n            )\n            <\n            2\n          ) {\n\n            return;\n\n          }\n\n\n          lastWidth =\n            newWidth;\n\n\n          scrollToSlide(\n            currentIndex,\n            \"auto\"\n          );\n\n        }\n      );\n\n\n    resizeObserver.observe(\n      carousel\n    );\n\n  }\n\n\n\n  \/* ========================================================\n     INIT\n     ======================================================== *\/\n\n  setIndex(\n    0,\n    1\n  );\n\n\n  scrollToSlide(\n    0,\n    \"auto\"\n  );\n\n})();\n<\/script><br \/>\n<!-- ========================================================\n     PERSONAGE \u2014 OUR STORY\n     ENGLISH\n     FULL HTML + CSS\n     ======================================================== --><\/p>\n<section\n  class=\"personage-story\"\n  lang=\"en\"\n><\/p>\n<div class=\"personage-story__grid\">\n<p>    <!-- ====================================================\n         EDITORIAL COLUMN\n         ==================================================== --><\/p>\n<div class=\"personage-story__editorial\">\n<p>      <!-- TITLE --><\/p>\n<h2 class=\"personage-story__title\">\n<p>        <span><br \/>\n          OUR<br \/>\n        <\/span><\/p>\n<p>        <span><br \/>\n          STORY<br \/>\n        <\/span><\/p>\n<\/h2>\n<p>      <!-- INTRO COPY --><\/p>\n<div class=\"personage-story__intro\">\n<p class=\"personage-story__copy\">\n          FOUNDED IN 2018, PERSONAGE WAS BORN FROM A SINGLE AMBITION:<br \/>\n          TO REDEFINE BOUNDARIES AND SET NEW STANDARDS ACROSS THE<br \/>\n          WORLDS OF DESIGN, CREATIVITY, AND RETAIL. FROM THE VERY<br \/>\n          BEGINNING, OUR VISION WAS CLEAR, TO CREATE A PLATFORM WHERE<br \/>\n          REGIONAL DESIGNERS COULD BE SEEN, CELEBRATED, AND ELEVATED<br \/>\n          TO THE GLOBAL STAGE, WHILE RESHAPING WHAT RETAIL REPRESENTS,<br \/>\n          NOT JUST AS A PLACE TO SHOP, BUT AS AN EXPERIENCE, A MOVEMENT,<br \/>\n          AND A BRIDGE BETWEEN CULTURES, IDEAS, AND GENERATIONS THAT<br \/>\n          CONTINUES TO INSPIRE A NEW CREATIVE ERA.\n        <\/p>\n<p class=\"personage-story__copy\">\n          BEYOND RETAIL, OUR INITIATIVES EXTEND INTO EDUCATION,<br \/>\n          COLLABORATION, AND INNOVATION. THROUGH WORKSHOPS THAT EMPOWER<br \/>\n          EMERGING TALENT, GLOBAL OUTREACH PROGRAMS THAT ENCOURAGE<br \/>\n          CULTURAL DIALOGUE, AND CREATIVE AGENCY PROJECTS THAT UNITE<br \/>\n          DIVERSE CREATIVE VOICES, PERSONAGE CONTINUES TO BUILD<br \/>\n          MEANINGFUL PATHWAYS FOR PROGRESS, INSPIRATION, AND EXCHANGE,<br \/>\n          FOSTERING A DYNAMIC ECOSYSTEM WHERE CREATIVITY THRIVES,<br \/>\n          COMMUNITIES GROW, AND THE BOUNDARIES OF POSSIBILITY ARE<br \/>\n          CONSTANTLY REIMAGINED.\n        <\/p>\n<\/p><\/div>\n<p>      <!-- QUICK LINKS --><\/p>\n<nav\n        class=\"personage-story__links\"\n        aria-label=\"Quick links\"\n      ><\/p>\n<p>        <a\n          class=\"personage-story__link\"\n          href=\"https:\/\/share.google\/KWaWvzftLhpdDUKLy\"\n          target=\"_blank\"\n          rel=\"noopener\"\n        ><br \/>\n          OUR RIYADH LOCATION<br \/>\n        <\/a><\/p>\n<p>        <a\n          class=\"personage-story__link\"\n          href=\"\/models\"\n        ><br \/>\n          OUR MODELS<br \/>\n        <\/a><\/p>\n<p>        <a\n          class=\"personage-story__link\"\n          href=\"\/about\"\n        ><br \/>\n          OUR AGENCY<br \/>\n        <\/a><\/p>\n<p>        <a\n          class=\"personage-story__link\"\n          href=\"\/contact\"\n        ><br \/>\n          REACH OUT<br \/>\n        <\/a><\/p>\n<\/nav><\/div>\n<p>    <!-- ====================================================\n         IMAGE 01\n         ==================================================== --><\/p>\n<figure class=\"personage-story__image\">\n<p>      <img decoding=\"async\"\n        src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/10\/2Story.webp\"\n        alt=\"\"\n        loading=\"lazy\"\n      ><\/p>\n<\/figure>\n<p>    <!-- ====================================================\n         IMAGE 02\n         ==================================================== --><\/p>\n<figure class=\"personage-story__image\">\n<p>      <img decoding=\"async\"\n        src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/10\/1Story.webp\"\n        alt=\"\"\n        loading=\"lazy\"\n      ><\/p>\n<\/figure><\/div>\n<\/section>\n<style>\n\/* ==========================================================\n   RESET\n   ========================================================== *\/<\/p>\n<p>.personage-story,\n.personage-story * {\n  box-sizing:\n    border-box;\n}<\/p>\n<p>\/* ==========================================================\n   SECTION\n   ========================================================== *\/<\/p>\n<p>.personage-story {\n  position:\n    relative;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100vh;<\/p>\n<p>  height:\n    100svh;<\/p>\n<p>  min-height:\n    720px;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    36px\n    0\n    55px\n    35px;<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  background:\n    #fff;<\/p>\n<p>  color:\n    #000;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;\n}<\/p>\n<p>\/* ==========================================================\n   DESKTOP GRID\n   ========================================================== *\/<\/p>\n<p>.personage-story__grid {\n  display:\n    grid;<\/p>\n<p>  grid-template-columns:\n    minmax(430px,.86fr)\n    minmax(300px,.58fr)\n    minmax(300px,.58fr);<\/p>\n<p>  gap:\n    9px;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;\n}<\/p>\n<p>\/* ==========================================================\n   EDITORIAL COLUMN\n   ========================================================== *\/<\/p>\n<p>.personage-story__editorial {\n  position:\n    relative;<\/p>\n<p>  display:\n    flex;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  min-width:\n    0;<\/p>\n<p>  flex-direction:\n    column;<\/p>\n<p>  padding-right:\n    clamp(\n      36px,\n      4vw,\n      68px\n    );\n}<\/p>\n<p>\/* ==========================================================\n   TITLE\n   ========================================================== *\/<\/p>\n<p>.personage-story__title {\n  position:\n    absolute;<\/p>\n<p>  left:\n    -7px;<\/p>\n<p>  bottom:\n    -1px;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  color:\n    #000;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    clamp(\n      92px,\n      8.15vw,\n      126px\n    );<\/p>\n<p>  font-weight:\n    900;<\/p>\n<p>  line-height:\n    .79;<\/p>\n<p>  letter-spacing:\n    -.065em;<\/p>\n<p>  text-transform:\n    uppercase;\n}<\/p>\n<p>.personage-story__title span {\n  display:\n    block;\n}<\/p>\n<p>\/* ==========================================================\n   INTRO\n   ========================================================== *\/<\/p>\n<p>.personage-story__intro {\n  width:\n    min(\n      100%,\n      575px\n    );\n}<\/p>\n<p>.personage-story__copy {\n  margin:\n    0\n    0\n    22px;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  color:\n    rgba(0,0,0,.42);<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    14px;<\/p>\n<p>  font-weight:\n    400;<\/p>\n<p>  line-height:\n    16px;<\/p>\n<p>  letter-spacing:\n    -.012em;<\/p>\n<p>  text-transform:\n    uppercase;\n}<\/p>\n<p>\/* ==========================================================\n   QUICK LINKS\n   CENTERED BETWEEN COPY + TITLE\n   ========================================================== *\/<\/p>\n<p>.personage-story__links {\n  position:\n    absolute;<\/p>\n<p>  left:\n    0;<\/p>\n<p>  top:\n    50%;<\/p>\n<p>  z-index:\n    2;<\/p>\n<p>  display:\n    flex;<\/p>\n<p>  width:\n    max-content;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  flex-direction:\n    column;<\/p>\n<p>  align-items:\n    flex-start;<\/p>\n<p>  gap:\n    0;<\/p>\n<p>  transform:\n    translateY(-50%);\n}<\/p>\n<p>.personage-story__link {\n  position:\n    relative;<\/p>\n<p>  display:\n    block;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  color:\n    rgba(0,0,0,.42) !important;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif !important;<\/p>\n<p>  font-size:\n    20px !important;<\/p>\n<p>  font-weight:\n    800 !important;<\/p>\n<p>  line-height:\n    21px !important;<\/p>\n<p>  letter-spacing:\n    -.025em;<\/p>\n<p>  text-decoration:\n    none !important;<\/p>\n<p>  text-transform:\n    uppercase;<\/p>\n<p>  transition:\n    color .25s ease;\n}<\/p>\n<p>.personage-story__link::after {\n  content:\n    \"\";<\/p>\n<p>  position:\n    absolute;<\/p>\n<p>  left:\n    0;<\/p>\n<p>  bottom:\n    1px;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    2px;<\/p>\n<p>  background:\n    #000;<\/p>\n<p>  transform:\n    scaleX(0);<\/p>\n<p>  transform-origin:\n    left center;<\/p>\n<p>  transition:\n    transform .25s ease;\n}<\/p>\n<p>.personage-story__link:hover,\n.personage-story__link:focus-visible {\n  color:\n    #000 !important;\n}<\/p>\n<p>.personage-story__link:hover::after,\n.personage-story__link:focus-visible::after {\n  transform:\n    scaleX(1);\n}<\/p>\n<p>\/* ==========================================================\n   IMAGES\n   ========================================================== *\/<\/p>\n<p>.personage-story__image {\n  position:\n    relative;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  min-width:\n    0;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  background:\n    #eee;\n}<\/p>\n<p>.personage-story__image img {\n  display:\n    block;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  object-fit:\n    cover;<\/p>\n<p>  object-position:\n    center center;<\/p>\n<p>  transition:\n    transform .8s\n    cubic-bezier(.16,1,.3,1);\n}<\/p>\n<p>.personage-story__image:hover img {\n  transform:\n    scale(1.018);\n}<\/p>\n<p>\/* ==========================================================\n   TABLET\n   ========================================================== *\/<\/p>\n<p>@media\n(max-width:1100px)\nand\n(min-width:769px) {<\/p>\n<p>  .personage-story {\n    padding-left:\n      30px;\n  }<\/p>\n<p>  .personage-story__grid {\n    grid-template-columns:\n      minmax(360px,.9fr)\n      minmax(250px,.6fr)\n      minmax(250px,.6fr);\n  }<\/p>\n<p>  .personage-story__copy {\n    font-size:\n      12px;<\/p>\n<p>    line-height:\n      14px;\n  }<\/p>\n<p>  .personage-story__links {\n    top:\n      51%;\n  }<\/p>\n<p>  .personage-story__link {\n    font-size:\n      17px !important;<\/p>\n<p>    line-height:\n      18px !important;\n  }<\/p>\n<p>  .personage-story__title {\n    font-size:\n      clamp(\n        76px,\n        8vw,\n        100px\n      );\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   MOBILE\n   MORE VERTICAL SPACE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:768px) {<\/p>\n<p>  .personage-story {\n    width:\n      100%;<\/p>\n<p>    height:\n      auto;<\/p>\n<p>    min-height:\n      0;<\/p>\n<p>    padding:\n      32px\n      28px\n      52px;<\/p>\n<p>    overflow:\n      visible;\n  }<\/p>\n<p>  .personage-story__grid {\n    display:\n      block;<\/p>\n<p>    width:\n      100%;<\/p>\n<p>    height:\n      auto;\n  }<\/p>\n<p>  .personage-story__editorial {\n    display:\n      flex;<\/p>\n<p>    width:\n      100%;<\/p>\n<p>    height:\n      auto;<\/p>\n<p>    padding:\n      0;<\/p>\n<p>    flex-direction:\n      column;\n  }<\/p>\n<p>  \/* ========================================================\n     TITLE\n     ======================================================== *\/<\/p>\n<p>  .personage-story__title {\n    position:\n      static;<\/p>\n<p>    order:\n      1;<\/p>\n<p>    margin:\n      0\n      0\n      40px;<\/p>\n<p>    padding:\n      0;<\/p>\n<p>    font-size:\n      clamp(\n        68px,\n        19vw,\n        78px\n      );<\/p>\n<p>    font-weight:\n      900;<\/p>\n<p>    line-height:\n      .82;<\/p>\n<p>    letter-spacing:\n      -.06em;<\/p>\n<p>    transform:\n      translateX(-3px);\n  }<\/p>\n<p>  .personage-story__title span {\n    display:\n      block;\n  }<\/p>\n<p>  \/* ========================================================\n     COPY\n     ======================================================== *\/<\/p>\n<p>  .personage-story__intro {\n    order:\n      2;<\/p>\n<p>    width:\n      100%;<\/p>\n<p>    max-width:\n      none;\n  }<\/p>\n<p>  .personage-story__copy {\n    width:\n      100%;<\/p>\n<p>    margin:\n      0\n      0\n      31px;<\/p>\n<p>    color:\n      rgba(0,0,0,.42);<\/p>\n<p>    font-size:\n      14px;<\/p>\n<p>    font-weight:\n      400;<\/p>\n<p>    line-height:\n      16px;<\/p>\n<p>    letter-spacing:\n      -.015em;<\/p>\n<p>    text-transform:\n      uppercase;\n  }<\/p>\n<p>  .personage-story__copy:last-child {\n    margin-bottom:\n      0;\n  }<\/p>\n<p>  \/* ========================================================\n     LINKS\n     LARGER GAP AFTER COPY\n     ======================================================== *\/<\/p>\n<p>  .personage-story__links {\n    position:\n      static;<\/p>\n<p>    order:\n      3;<\/p>\n<p>    width:\n      max-content;<\/p>\n<p>    margin:\n      44px\n      0\n      0;<\/p>\n<p>    padding:\n      0;<\/p>\n<p>    transform:\n      none;<\/p>\n<p>    align-items:\n      flex-start;\n  }<\/p>\n<p>  .personage-story__link {\n    font-size:\n      20px !important;<\/p>\n<p>    font-weight:\n      800 !important;<\/p>\n<p>    line-height:\n      21px !important;\n  }<\/p>\n<p>  \/* ========================================================\n     NO IMAGES\n     ======================================================== *\/<\/p>\n<p>  .personage-story__image {\n    display:\n      none !important;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   SMALL MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:370px) {<\/p>\n<p>  .personage-story {\n    padding:\n      30px\n      24px\n      46px;\n  }<\/p>\n<p>  .personage-story__title {\n    margin-bottom:\n      36px;<\/p>\n<p>    font-size:\n      66px;\n  }<\/p>\n<p>  .personage-story__copy {\n    margin-bottom:\n      28px;<\/p>\n<p>    font-size:\n      13px;<\/p>\n<p>    line-height:\n      15px;\n  }<\/p>\n<p>  .personage-story__links {\n    margin-top:\n      40px;\n  }<\/p>\n<p>  .personage-story__link {\n    font-size:\n      18px !important;<\/p>\n<p>    line-height:\n      19px !important;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/<\/p>\n<p>@media (prefers-reduced-motion:reduce) {<\/p>\n<p>  .personage-story__image img,\n  .personage-story__link,\n  .personage-story__link::after {\n    transition:\n      none;\n  }<\/p>\n<p>}\n<\/style>\n<p><!-- ========================================================\n     PERSONAGE \u2014 FLOATING LANGUAGE SWITCHER\n     TIGHT \/ COMPACT VERSION\n\n     - FIXED BOTTOM RIGHT\n     - LUCIDE LANGUAGES ICON\n     - FLAG LEFT\n     - EN \/ AR DIRECTLY BESIDE FLAG\n     - SMALLER PANEL\n     - TRANSLATEPRESS COMPATIBLE\n     ======================================================== --><\/p>\n<link\n  rel=\"stylesheet\"\n  href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&#038;display=swap\"\n>\n<div\n  class=\"personage-floating-language\"\n  id=\"personage-floating-language\"\n><\/p>\n<p>  <!-- ======================================================\n       HIDDEN TRANSLATEPRESS SOURCE\n       ====================================================== --><\/p>\n<div class=\"personage-floating-language__source\">\n<div class=\"trp-shortcode-switcher__wrapper\"\r\n     style=\"--bg:#ffffffb2;--bg-hover:#ffffffb2;--text:#000000;--text-hover:#000000;--border:1px solid transparent;--border-width:1px;--border-color:transparent;--border-radius:5px;--flag-radius:2px;--flag-size:18px;--aspect-ratio:4\/3;--font-size:14px;--transition-duration:0.2s\"\r\n     role=\"group\"\r\n     data-open-mode=\"hover\">\r\n\r\n    \r\n        <!-- Opposite mode: render ONLY the in-flow (relative) element so it holds space -->\r\n        <div class=\"trp-language-switcher trp-ls-dropdown trp-shortcode-switcher trp-shortcode-anchor trp-open-on-hover trp-opposite-button\"\r\n             role=\"navigation\"\r\n             aria-label=\"\u0645\u062d\u062f\u062f \u0644\u063a\u0629 \u0627\u0644\u0645\u0648\u0642\u0639\"\r\n             data-no-translation>\r\n                <div class=\"trp-current-language-item__wrapper trp-hide-arrow\">\r\n        <a class=\"trp-language-item trp-language-item__default\" data-no-translation href=\"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages\/2693#TRPLINKPROCESSED\" title=\"English\"><span class=\"trp-language-item-name\">English<\/span><\/a>            <\/div>\r\n            <\/div>\r\n\r\n    <\/div>\r\n<\/div>\n<p>  <!-- ======================================================\n       LANGUAGE PANEL\n       ====================================================== --><\/p>\n<div\n    class=\"personage-floating-language__panel\"\n    id=\"personage-floating-language-panel\"\n    aria-hidden=\"true\"\n  ><\/p>\n<p>    <!-- ENGLISH --><\/p>\n<p>    <a\n      href=\"#\"\n      class=\"\n        personage-floating-language__option\n        personage-floating-language__option--en\n      \"\n      data-floating-language=\"en\"\n      aria-label=\"English\"\n    ><\/p>\n<p>      <span\n        class=\"personage-floating-language__flag\"\n        aria-hidden=\"true\"\n      ><br \/>\n        \ud83c\uddec\ud83c\udde7<br \/>\n      <\/span><\/p>\n<p>      <span class=\"personage-floating-language__label\"><br \/>\n        EN<br \/>\n      <\/span><\/p>\n<p>    <\/a><\/p>\n<p>    <!-- ARABIC --><\/p>\n<p>    <a\n      href=\"#\"\n      class=\"\n        personage-floating-language__option\n        personage-floating-language__option--ar\n      \"\n      data-floating-language=\"ar\"\n      aria-label=\"Arabic\"\n    ><\/p>\n<p>      <span\n        class=\"personage-floating-language__flag\"\n        aria-hidden=\"true\"\n      ><br \/>\n        \ud83c\uddf8\ud83c\udde6<br \/>\n      <\/span><\/p>\n<p>      <span class=\"personage-floating-language__label\"><br \/>\n        AR<br \/>\n      <\/span><\/p>\n<p>    <\/a><\/p><\/div>\n<p>  <!-- ======================================================\n       FLOATING CTA\n       LUCIDE LANGUAGES ICON\n       ====================================================== --><\/p>\n<p>  <button\n    class=\"personage-floating-language__toggle\"\n    type=\"button\"\n    aria-label=\"Change language\"\n    aria-expanded=\"false\"\n    aria-controls=\"personage-floating-language-panel\"\n  ><\/p>\n<p>    <svg\n      class=\"personage-floating-language__icon\"\n      xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.8\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    ><\/p>\n<path d=\"m5 8 6 6\"><\/path>\n      <path d=\"m4 14 6-6 2-3\"><\/path>\n      <path d=\"M2 5h12\"><\/path>\n      <path d=\"M7 2h1\"><\/path>\n      <path d=\"m22 22-5-10-5 10\"><\/path>\n      <path d=\"M14 18h6\"><\/path>\n<p>    <\/svg><\/p>\n<p>  <\/button><\/p>\n<\/div>\n<style>\n\/* ==========================================================\n   RESET\n   ========================================================== *\/<\/p>\n<p>.personage-floating-language,\n.personage-floating-language * {\n  box-sizing:\n    border-box;\n}<\/p>\n<p>\/* ==========================================================\n   ROOT\n   ========================================================== *\/<\/p>\n<p>.personage-floating-language {\n  position:\n    fixed;<\/p>\n<p>  right:\n    24px;<\/p>\n<p>  bottom:\n    24px;<\/p>\n<p>  z-index:\n    2147483000;<\/p>\n<p>  display:\n    flex;<\/p>\n<p>  flex-direction:\n    column;<\/p>\n<p>  align-items:\n    flex-end;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;\n}<\/p>\n<p>\/* ==========================================================\n   HIDDEN TRANSLATEPRESS SOURCE\n   ========================================================== *\/<\/p>\n<p>.personage-floating-language__source {\n  position:\n    absolute !important;<\/p>\n<p>  width:\n    1px !important;<\/p>\n<p>  height:\n    1px !important;<\/p>\n<p>  overflow:\n    hidden !important;<\/p>\n<p>  clip:\n    rect(0 0 0 0) !important;<\/p>\n<p>  clip-path:\n    inset(50%) !important;<\/p>\n<p>  white-space:\n    nowrap !important;<\/p>\n<p>  opacity:\n    0 !important;<\/p>\n<p>  pointer-events:\n    none !important;\n}<\/p>\n<p>\/* ==========================================================\n   FLOATING CTA\n   ========================================================== *\/<\/p>\n<p>.personage-floating-language__toggle {\n  position:\n    relative;<\/p>\n<p>  display:\n    flex;<\/p>\n<p>  align-items:\n    center;<\/p>\n<p>  justify-content:\n    center;<\/p>\n<p>  width:\n    50px;<\/p>\n<p>  height:\n    50px;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  color:\n    #fff;<\/p>\n<p>  background:\n    rgba(0,0,0,.94);<\/p>\n<p>  border:\n    1px solid\n    rgba(255,255,255,.18);<\/p>\n<p>  border-radius:\n    50%;<\/p>\n<p>  outline:\n    none;<\/p>\n<p>  box-shadow:\n    0\n    7px\n    26px\n    rgba(0,0,0,.18);<\/p>\n<p>  cursor:\n    pointer;<\/p>\n<p>  -webkit-backdrop-filter:\n    blur(14px);<\/p>\n<p>  backdrop-filter:\n    blur(14px);<\/p>\n<p>  -webkit-tap-highlight-color:\n    transparent;<\/p>\n<p>  transition:\n    transform .22s ease,\n    background .22s ease,\n    border-color .22s ease;\n}<\/p>\n<p>.personage-floating-language__toggle:hover {\n  transform:\n    scale(1.05);<\/p>\n<p>  background:\n    #000;<\/p>\n<p>  border-color:\n    rgba(255,255,255,.32);\n}<\/p>\n<p>.personage-floating-language__toggle:active {\n  transform:\n    scale(.97);\n}<\/p>\n<p>\/* ==========================================================\n   LUCIDE LANGUAGES ICON\n   ========================================================== *\/<\/p>\n<p>.personage-floating-language__icon {\n  display:\n    block;<\/p>\n<p>  width:\n    20px;<\/p>\n<p>  height:\n    20px;<\/p>\n<p>  flex:\n    0 0 20px;<\/p>\n<p>  fill:\n    none;<\/p>\n<p>  stroke:\n    currentColor;<\/p>\n<p>  pointer-events:\n    none;\n}<\/p>\n<p>\/* ==========================================================\n   PANEL<\/p>\n<p>   MUCH NARROWER\n   ========================================================== *\/<\/p>\n<p>.personage-floating-language__panel {\n  position:\n    absolute;<\/p>\n<p>  right:\n    0;<\/p>\n<p>  bottom:\n    calc(100% + 9px);<\/p>\n<p>  display:\n    flex;<\/p>\n<p>  flex-direction:\n    column;<\/p>\n<p>  width:\n    96px;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    4px;<\/p>\n<p>  visibility:\n    hidden;<\/p>\n<p>  opacity:\n    0;<\/p>\n<p>  pointer-events:\n    none;<\/p>\n<p>  background:\n    rgba(255,255,255,.98);<\/p>\n<p>  border:\n    1px solid\n    rgba(0,0,0,.11);<\/p>\n<p>  box-shadow:\n    0\n    14px\n    36px\n    rgba(0,0,0,.15);<\/p>\n<p>  -webkit-backdrop-filter:\n    blur(16px);<\/p>\n<p>  backdrop-filter:\n    blur(16px);<\/p>\n<p>  transform:\n    translateY(7px);<\/p>\n<p>  transform-origin:\n    bottom right;<\/p>\n<p>  transition:\n    opacity .2s ease,\n    transform .27s cubic-bezier(.16,1,.3,1),\n    visibility .2s ease;\n}<\/p>\n<p>.personage-floating-language.is-open\n.personage-floating-language__panel {\n  visibility:\n    visible;<\/p>\n<p>  opacity:\n    1;<\/p>\n<p>  pointer-events:\n    auto;<\/p>\n<p>  transform:\n    translateY(0);\n}<\/p>\n<p>\/* ==========================================================\n   LANGUAGE OPTION<\/p>\n<p>   FLAG + TEXT NOW CLOSE TOGETHER\n   ========================================================== *\/<\/p>\n<p>.personage-floating-language__option {\n  position:\n    relative;<\/p>\n<p>  display:\n    flex;<\/p>\n<p>  flex-direction:\n    row !important;<\/p>\n<p>  align-items:\n    center;<\/p>\n<p>  justify-content:\n    flex-start;<\/p>\n<p>  gap:\n    4px;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  min-height:\n    42px;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0\n    8px;<\/p>\n<p>  color:\n    #000 !important;<\/p>\n<p>  background:\n    transparent;<\/p>\n<p>  border:\n    0;<\/p>\n<p>  text-decoration:\n    none !important;<\/p>\n<p>  direction:\n    ltr !important;<\/p>\n<p>  text-align:\n    left !important;<\/p>\n<p>  transition:\n    background .18s ease,\n    color .18s ease,\n    opacity .18s ease;\n}<\/p>\n<p>.personage-floating-language__option:hover {\n  background:\n    #f2f2f2;\n}<\/p>\n<p>\/* ==========================================================\n   ACTIVE\n   ========================================================== *\/<\/p>\n<p>.personage-floating-language__option.is-active {\n  color:\n    #fff !important;<\/p>\n<p>  background:\n    #000;<\/p>\n<p>  cursor:\n    default;\n}<\/p>\n<p>.personage-floating-language__option.is-active:hover {\n  background:\n    #000;\n}<\/p>\n<p>\/* ==========================================================\n   FLAG\n   ALWAYS LEFT\n   ========================================================== *\/<\/p>\n<p>.personage-floating-language__flag {\n  order:\n    1;<\/p>\n<p>  display:\n    flex;<\/p>\n<p>  align-items:\n    center;<\/p>\n<p>  justify-content:\n    center;<\/p>\n<p>  width:\n    21px;<\/p>\n<p>  height:\n    21px;<\/p>\n<p>  flex:\n    0 0 21px;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  font-size:\n    16px;<\/p>\n<p>  line-height:\n    1;\n}<\/p>\n<p>\/* ==========================================================\n   LABEL<\/p>\n<p>   DIRECTLY BESIDE FLAG\n   ========================================================== *\/<\/p>\n<p>.personage-floating-language__label {\n  order:\n    2;<\/p>\n<p>  display:\n    block;<\/p>\n<p>  flex:\n    0 0 auto;<\/p>\n<p>  width:\n    auto;<\/p>\n<p>  min-width:\n    0;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  color:\n    inherit !important;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif !important;<\/p>\n<p>  font-size:\n    10px !important;<\/p>\n<p>  font-weight:\n    600 !important;<\/p>\n<p>  line-height:\n    1 !important;<\/p>\n<p>  letter-spacing:\n    .06em !important;<\/p>\n<p>  direction:\n    ltr !important;<\/p>\n<p>  text-align:\n    left !important;<\/p>\n<p>  text-transform:\n    uppercase !important;\n}<\/p>\n<p>\/* ==========================================================\n   RTL PAGE PROTECTION<\/p>\n<p>   DO NOT LET RTL FLIP FLAG\/TEXT\n   ========================================================== *\/<\/p>\n<p>html[dir=\"rtl\"]\n.personage-floating-language__option,<\/p>\n<p>html[lang^=\"ar\"]\n.personage-floating-language__option {\n  flex-direction:\n    row !important;<\/p>\n<p>  direction:\n    ltr !important;<\/p>\n<p>  justify-content:\n    flex-start !important;<\/p>\n<p>  text-align:\n    left !important;\n}<\/p>\n<p>html[dir=\"rtl\"]\n.personage-floating-language__flag,<\/p>\n<p>html[lang^=\"ar\"]\n.personage-floating-language__flag {\n  order:\n    1 !important;\n}<\/p>\n<p>html[dir=\"rtl\"]\n.personage-floating-language__label,<\/p>\n<p>html[lang^=\"ar\"]\n.personage-floating-language__label {\n  order:\n    2 !important;<\/p>\n<p>  direction:\n    ltr !important;<\/p>\n<p>  text-align:\n    left !important;\n}<\/p>\n<p>\/* ==========================================================\n   MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:767px) {<\/p>\n<p>  .personage-floating-language {\n    right:\n      18px;<\/p>\n<p>    bottom:\n      max(\n        18px,\n        env(safe-area-inset-bottom)\n      );\n  }<\/p>\n<p>  .personage-floating-language__toggle {\n    width:\n      48px;<\/p>\n<p>    height:\n      48px;\n  }<\/p>\n<p>  .personage-floating-language__icon {\n    width:\n      19px;<\/p>\n<p>    height:\n      19px;<\/p>\n<p>    flex-basis:\n      19px;\n  }<\/p>\n<p>  .personage-floating-language__panel {\n    width:\n      92px;<\/p>\n<p>    bottom:\n      calc(100% + 8px);\n  }<\/p>\n<p>  .personage-floating-language__option {\n    min-height:\n      40px;<\/p>\n<p>    gap:\n      3px;<\/p>\n<p>    padding:\n      0\n      7px;\n  }<\/p>\n<p>  .personage-floating-language__flag {\n    width:\n      20px;<\/p>\n<p>    height:\n      20px;<\/p>\n<p>    flex-basis:\n      20px;<\/p>\n<p>    font-size:\n      15px;\n  }<\/p>\n<p>  .personage-floating-language__label {\n    font-size:\n      9px !important;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/<\/p>\n<p>@media (prefers-reduced-motion:reduce) {<\/p>\n<p>  .personage-floating-language__toggle,\n  .personage-floating-language__panel,\n  .personage-floating-language__option {\n    transition:\n      none !important;\n  }<\/p>\n<p>}\n<\/style>\n<p><script>\n(function () {<\/p>\n<p>  \"use strict\";<\/p>\n<p>  const root =\n    document.getElementById(\n      \"personage-floating-language\"\n    );<\/p>\n<p>  if (!root) {\n    return;\n  }<\/p>\n<p>  if (\n    root.dataset.personageBound ===\n    \"true\"\n  ) {\n    return;\n  }<\/p>\n<p>  root.dataset.personageBound =\n    \"true\";<\/p>\n<p>  const toggle =\n    root.querySelector(\n      \".personage-floating-language__toggle\"\n    );<\/p>\n<p>  const panel =\n    root.querySelector(\n      \".personage-floating-language__panel\"\n    );<\/p>\n<p>  const source =\n    root.querySelector(\n      \".personage-floating-language__source\"\n    );<\/p>\n<p>  const english =\n    root.querySelector(\n      '[data-floating-language=\"en\"]'\n    );<\/p>\n<p>  const arabic =\n    root.querySelector(\n      '[data-floating-language=\"ar\"]'\n    );<\/p>\n<p>  if (\n    !toggle ||\n    !panel ||\n    !english ||\n    !arabic\n  ) {\n    return;\n  }<\/p>\n<p>  \/* ========================================================\n     CURRENT LANGUAGE\n     ======================================================== *\/<\/p>\n<p>  const htmlLanguage =\n    (\n      document.documentElement.lang ||\n      \"\"\n    )\n    .toLowerCase();<\/p>\n<p>  const path =\n    window.location.pathname;<\/p>\n<p>  const isArabic =\n    htmlLanguage.startsWith(\"ar\") ||\n    \/^\\\/ar(?:\\\/|$)\/i.test(path);<\/p>\n<p>  \/* ========================================================\n     TRANSLATEPRESS URL\n     ======================================================== *\/<\/p>\n<p>  const translatedLink =\n    source\n      ?.querySelector(\n        'a.trp-language-item[href]'\n      );<\/p>\n<p>  const translatedHref =\n    translatedLink\n      ?.getAttribute(\n        \"href\"\n      ) || \"\";<\/p>\n<p>  const currentHref =\n    window.location.href;<\/p>\n<p>  \/* ========================================================\n     LANGUAGE URLS\n     ======================================================== *\/<\/p>\n<p>  if (isArabic) {<\/p>\n<p>    arabic.href =\n      currentHref;<\/p>\n<p>    if (translatedHref) {<\/p>\n<p>      english.href =\n        translatedHref;<\/p>\n<p>    }<\/p>\n<p>    else {<\/p>\n<p>      const englishPath =\n        path.replace(\n          \/^\\\/ar(?=\\\/|$)\/i,\n          \"\"\n        ) || \"\/\";<\/p>\n<p>      english.href =\n        window.location.origin +\n        englishPath +\n        window.location.search +\n        window.location.hash;<\/p>\n<p>    }<\/p>\n<p>    arabic.classList.add(\n      \"is-active\"\n    );<\/p>\n<p>    english.classList.remove(\n      \"is-active\"\n    );<\/p>\n<p>    arabic.setAttribute(\n      \"aria-current\",\n      \"page\"\n    );<\/p>\n<p>    english.removeAttribute(\n      \"aria-current\"\n    );<\/p>\n<p>  }<\/p>\n<p>  else {<\/p>\n<p>    english.href =\n      currentHref;<\/p>\n<p>    if (translatedHref) {<\/p>\n<p>      arabic.href =\n        translatedHref;<\/p>\n<p>    }<\/p>\n<p>    else {<\/p>\n<p>      let arabicPath =\n        path;<\/p>\n<p>      if (\n        !\/^\\\/ar(?:\\\/|$)\/i.test(\n          arabicPath\n        )\n      ) {<\/p>\n<p>        arabicPath =\n          \"\/ar\" +\n          (\n            arabicPath === \"\/\"\n              ? \"\/\"\n              : arabicPath\n          );<\/p>\n<p>      }<\/p>\n<p>      arabic.href =\n        window.location.origin +\n        arabicPath +\n        window.location.search +\n        window.location.hash;<\/p>\n<p>    }<\/p>\n<p>    english.classList.add(\n      \"is-active\"\n    );<\/p>\n<p>    arabic.classList.remove(\n      \"is-active\"\n    );<\/p>\n<p>    english.setAttribute(\n      \"aria-current\",\n      \"page\"\n    );<\/p>\n<p>    arabic.removeAttribute(\n      \"aria-current\"\n    );<\/p>\n<p>  }<\/p>\n<p>  \/* ========================================================\n     OPEN\n     ======================================================== *\/<\/p>\n<p>  function openSwitcher() {<\/p>\n<p>    root.classList.add(\n      \"is-open\"\n    );<\/p>\n<p>    toggle.setAttribute(\n      \"aria-expanded\",\n      \"true\"\n    );<\/p>\n<p>    panel.setAttribute(\n      \"aria-hidden\",\n      \"false\"\n    );<\/p>\n<p>  }<\/p>\n<p>  \/* ========================================================\n     CLOSE\n     ======================================================== *\/<\/p>\n<p>  function closeSwitcher() {<\/p>\n<p>    root.classList.remove(\n      \"is-open\"\n    );<\/p>\n<p>    toggle.setAttribute(\n      \"aria-expanded\",\n      \"false\"\n    );<\/p>\n<p>    panel.setAttribute(\n      \"aria-hidden\",\n      \"true\"\n    );<\/p>\n<p>  }<\/p>\n<p>  \/* ========================================================\n     TOGGLE\n     ======================================================== *\/<\/p>\n<p>  toggle.addEventListener(\n    \"click\",\n    function (event) {<\/p>\n<p>      event.preventDefault();<\/p>\n<p>      event.stopPropagation();<\/p>\n<p>      if (\n        root.classList.contains(\n          \"is-open\"\n        )\n      ) {<\/p>\n<p>        closeSwitcher();<\/p>\n<p>      }<\/p>\n<p>      else {<\/p>\n<p>        openSwitcher();<\/p>\n<p>      }<\/p>\n<p>    }\n  );<\/p>\n<p>  \/* ========================================================\n     ACTIVE LANGUAGE\n     ======================================================== *\/<\/p>\n<p>  [\n    english,\n    arabic\n  ].forEach(\n    function (button) {<\/p>\n<p>      button.addEventListener(\n        \"click\",\n        function (event) {<\/p>\n<p>          if (\n            button.classList.contains(\n              \"is-active\"\n            )\n          ) {<\/p>\n<p>            event.preventDefault();<\/p>\n<p>            closeSwitcher();<\/p>\n<p>          }<\/p>\n<p>        }\n      );<\/p>\n<p>    }\n  );<\/p>\n<p>  \/* ========================================================\n     OUTSIDE CLICK\n     ======================================================== *\/<\/p>\n<p>  document.addEventListener(\n    \"click\",\n    function (event) {<\/p>\n<p>      if (\n        !root.contains(\n          event.target\n        )\n      ) {<\/p>\n<p>        closeSwitcher();<\/p>\n<p>      }<\/p>\n<p>    }\n  );<\/p>\n<p>  \/* ========================================================\n     ESCAPE\n     ======================================================== *\/<\/p>\n<p>  document.addEventListener(\n    \"keydown\",\n    function (event) {<\/p>\n<p>      if (\n        event.key === \"Escape\"\n      ) {<\/p>\n<p>        closeSwitcher();<\/p>\n<p>      }<\/p>\n<p>    }\n  );<\/p>\n<p>})();\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>THIS WEEK\u2019S PICKS ANOUD WAS FEELING KIND OF MOODY, KOREN FELT SLEEPY, AND SOMEONE WAS CLEARLY GETTING READY TO TRAVEL. SEE WHAT\u2019S UP? STYLES DON\u2019T BLINK A QUIETER SELECTION OF PIECES MARKED DOWN FOR A LIMITED TIME. SEASONAL REDUCTIONS, OVERLOOKED FAVOURITES, AND ARCHIVE ESSENTIALS GATHERED BEFORE THEY DISAPPEAR AGAIN. LIMITED SELECTIONS, SEASONAL REDUCTIONS, AND ARCHIVE [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2693","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages\/2693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/comments?post=2693"}],"version-history":[{"count":66,"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages\/2693\/revisions"}],"predecessor-version":[{"id":8638,"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages\/2693\/revisions\/8638"}],"wp:attachment":[{"href":"https:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/media?parent=2693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}