/* =========================================================
   FOLIO & KEY
   HOMEPAGE — ARABIC MOBILE QA V1

   Purpose:
   - English homepage remains untouched.
   - Preserve RTL.
   - Normalize Arabic mobile geometry to the finished
     English mobile experience.
   - Arabic differences should be typography only where
     genuinely required for readability.
   ========================================================= */


/* =========================================================
   MOBILE / SMALL TABLET
   ========================================================= */

@media (max-width: 760px) {

  /* -------------------------------------------------------
     GLOBAL RTL MOBILE
     ------------------------------------------------------- */

  html[lang="ar"] body {
    direction: rtl;
    text-align: right;
  }

  html[lang="ar"] *,
  html[lang="ar"] *::before,
  html[lang="ar"] *::after {
    box-sizing: border-box;
  }


  /* -------------------------------------------------------
     HEADER
     Existing Arabic/header controls had become too large.
     ------------------------------------------------------- */

  html[lang="ar"] .site-header {
    min-height: 82px !important;

    padding:
      8px
      14px !important;
  }

  html[lang="ar"] .brand {
    min-width: 0;
    flex-shrink: 1;
  }

  html[lang="ar"] .brand-logo-ar {
    width: auto !important;

    height: 58px !important;

    max-width:
      min(200px, 52vw) !important;

    object-fit: contain;
  }

  html[lang="ar"] .header-actions {
    margin-inline-start: auto;

    gap:
      8px !important;

    flex-shrink: 0;
  }

  html[lang="ar"] .language-toggle {
    width: 46px !important;
    min-width: 46px !important;

    height: 44px !important;
    min-height: 44px !important;

    padding:
      7px
      9px !important;

    font-size:
      12px !important;

    line-height:
      1 !important;

    letter-spacing:
      0 !important;

    white-space:
      nowrap;
  }

  html[lang="ar"] .menu-toggle {
    width: 46px !important;
    height: 46px !important;

    min-width: 46px;
    min-height: 46px;

    flex:
      0 0 46px;
  }


  /* -------------------------------------------------------
     MOBILE MENU
     ------------------------------------------------------- */

  html[lang="ar"] .mobile-menu {
    direction:
      rtl;

    text-align:
      right !important;
  }

  html[lang="ar"] .mobile-menu a {
    padding:
      14px
      10px !important;

    font-family:
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      15px !important;

    line-height:
      1.65 !important;

    letter-spacing:
      0 !important;

    text-align:
      start !important;

    white-space:
      normal !important;
  }


  /* -------------------------------------------------------
     HERO

     Keep the English mobile composition.
     Arabic gets its own readable type metrics without
     becoming physically larger than the composition.
     ------------------------------------------------------- */

  html[lang="ar"] .hero-copy-column {
    width:
      100%;

    text-align:
      center !important;
  }

  html[lang="ar"] .hero-luxury h1 {
    width:
      100% !important;

    max-width:
      520px !important;

    margin-inline:
      auto !important;

    font-family:
      "Amiri",
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      clamp(
        40px,
        10.2vw,
        52px
      ) !important;

    line-height:
      1.30 !important;

    letter-spacing:
      0 !important;

    text-align:
      center !important;
  }

  html[lang="ar"] .hero-luxury h1 span {
    line-height:
      1.32 !important;
  }

  html[lang="ar"] .hero-luxury h1 em {
    margin-top:
      13px !important;

    font-size:
      .96em !important;

    line-height:
      1.38 !important;
  }

  html[lang="ar"] .hero-luxury .eyebrow {
    margin-inline:
      auto !important;

    text-align:
      center !important;
  }

  html[lang="ar"] .hero-luxury .hero-copy {
    width:
      100% !important;

    max-width:
      510px !important;

    margin:
      24px auto 0 !important;

    font-family:
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      16px !important;

    line-height:
      1.90 !important;

    text-align:
      center !important;
  }

  html[lang="ar"] .hero-luxury .hero-actions {
    width:
      100% !important;

    max-width:
      300px !important;

    margin:
      30px auto 0 !important;

    gap:
      10px !important;
  }

  html[lang="ar"] .hero-luxury .button-primary,
  html[lang="ar"] .hero-luxury .button-secondary {
    width:
      100% !important;

    min-height:
      49px !important;

    padding:
      10px
      18px !important;

    font-family:
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      15px !important;

    font-weight:
      600 !important;

    line-height:
      1.45 !important;

    letter-spacing:
      0 !important;

    text-align:
      center !important;

    white-space:
      normal !important;
  }

  html[lang="ar"] .hero-signature {
    margin-top:
      27px !important;

    font-size:
      16px !important;

    line-height:
      1.65 !important;

    justify-content:
      center !important;

    text-align:
      center !important;
  }


  /* -------------------------------------------------------
     EXISTING KEY / ACCOUNT STRIP
     ------------------------------------------------------- */

  html[lang="ar"] .key-entry-strip {
    padding:
      24px
      20px !important;
  }

  html[lang="ar"] .key-entry-inner {
    gap:
      15px !important;
  }

  html[lang="ar"] .key-entry-copy {
    width:
      100%;

    gap:
      5px !important;

    text-align:
      start !important;

    justify-items:
      start;
  }

  html[lang="ar"] .key-entry-kicker {
    font-size:
      13px !important;

    line-height:
      1.55;

    letter-spacing:
      0 !important;
  }

  html[lang="ar"] .key-entry-copy strong {
    font-family:
      "Amiri",
      serif !important;

    font-size:
      21px !important;

    line-height:
      1.45 !important;
  }

  html[lang="ar"] .key-entry-actions {
    width:
      100% !important;

    display:
      grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      8px !important;

    margin-top:
      7px !important;
  }

  html[lang="ar"] .key-entry-primary,
  html[lang="ar"] .key-entry-secondary {
    width:
      100%;

    min-width:
      0;

    min-height:
      44px !important;

    padding:
      8px
      10px !important;

    font-size:
      14px !important;

    line-height:
      1.45 !important;

    letter-spacing:
      0 !important;

    text-align:
      center !important;

    white-space:
      normal !important;
  }


  /* -------------------------------------------------------
     SECTION ALIGNMENT

     All ordinary content follows logical RTL start.
     Hero + closing intentionally remain centered.
     ------------------------------------------------------- */

  html[lang="ar"] .story-copy-side,
  html[lang="ar"] .editions-heading,
  html[lang="ar"] .editions-heading > p,
  html[lang="ar"] .ritual-heading-grid,
  html[lang="ar"] .ritual-heading-grid > p,
  html[lang="ar"] .ritual-step,
  html[lang="ar"] .author-copy {
    text-align:
      start !important;
  }


  /* -------------------------------------------------------
     MAIN ARABIC SECTION TITLES

     Several previous layers accumulated 48–64px mobile
     titles. Bring them back to one coherent scale.
     ------------------------------------------------------- */

  html[lang="ar"] .editorial-story h2,
  html[lang="ar"] .collectible-editions h2,
  html[lang="ar"] .ritual-heading h2,
  html[lang="ar"] .author-copy h2 {
    font-family:
      "Amiri",
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      clamp(
        39px,
        9.8vw,
        50px
      ) !important;

    line-height:
      1.38 !important;

    letter-spacing:
      0 !important;
  }

  html[lang="ar"] .final-closing h2 {
    font-family:
      "Amiri",
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      clamp(
        41px,
        10.2vw,
        52px
      ) !important;

    line-height:
      1.40 !important;

    letter-spacing:
      0 !important;

    text-align:
      center !important;
  }


  /* -------------------------------------------------------
     BODY COPY
     ------------------------------------------------------- */

  html[lang="ar"] .story-copy-side p,
  html[lang="ar"] .editions-heading > p,
  html[lang="ar"] .ritual-heading p,
  html[lang="ar"] .ritual-step p,
  html[lang="ar"] .author-copy p,
  html[lang="ar"] .final-closing p {
    font-family:
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      18px !important;

    line-height:
      1.90 !important;

    letter-spacing:
      0 !important;
  }

  html[lang="ar"] .author-copy .author-lead {
    font-size:
      19px !important;

    line-height:
      1.90 !important;
  }


  /* -------------------------------------------------------
     COLLECTION CARDS

     Product names remain English.
     Only normalize Arabic descriptions/status text.
     ------------------------------------------------------- */

  html[lang="ar"] .volume-inner {
    text-align:
      center !important;
  }

  html[lang="ar"] .volume-inner h3 {
    text-align:
      center !important;
  }

  html[lang="ar"] .volume-inner p {
    max-width:
      100% !important;

    font-family:
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      18px !important;

    line-height:
      1.85 !important;

    text-align:
      center !important;
  }

  html[lang="ar"] .volume-status {
    font-size:
      14px !important;

    line-height:
      1.45 !important;

    letter-spacing:
      0 !important;
  }


  /* -------------------------------------------------------
     HOW IT WORKS
     ------------------------------------------------------- */

  html[lang="ar"] .ritual-step h3 {
    font-family:
      "Amiri",
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      clamp(
        27px,
        7vw,
        31px
      ) !important;

    line-height:
      1.38 !important;

    text-align:
      start !important;
  }

  html[lang="ar"] .ritual-recipient-note {
    align-items:
      flex-start;
  }

  html[lang="ar"] .ritual-recipient-note p {
    font-size:
      16px !important;

    line-height:
      1.85 !important;

    text-align:
      start !important;
  }


  /* -------------------------------------------------------
     AUTHOR WORLD
     ------------------------------------------------------- */

  html[lang="ar"] .author-card-entry p {
    font-family:
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      17px !important;

    line-height:
      1.75 !important;

    text-align:
      start !important;
  }

  html[lang="ar"] .author-note {
    font-size:
      14px !important;

    line-height:
      1.65 !important;

    letter-spacing:
      0 !important;
  }


  /* -------------------------------------------------------
     CLOSING CTA
     ------------------------------------------------------- */

  html[lang="ar"] .final-closing,
  html[lang="ar"] .closing-inner,
  html[lang="ar"] .closing-tagline {
    text-align:
      center !important;
  }

  html[lang="ar"] .closing-actions {
    width:
      100% !important;

    max-width:
      300px !important;

    margin-inline:
      auto !important;
  }

  html[lang="ar"] .closing-actions a {
    width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      49px;

    padding:
      10px
      18px !important;

    font-family:
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      15px !important;

    line-height:
      1.45 !important;

    letter-spacing:
      0 !important;

    text-align:
      center !important;

    white-space:
      normal !important;
  }


  /* -------------------------------------------------------
     FOOTER
     ------------------------------------------------------- */

  html[lang="ar"] .footer-brand-lockup,
  html[lang="ar"] .footer-link-group,
  html[lang="ar"] .footer-end {
    text-align:
      start !important;
  }

  html[lang="ar"] .footer-link-group {
    justify-items:
      start;
  }

  html[lang="ar"] .footer-link-group strong {
    font-family:
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      14px !important;

    line-height:
      1.55;

    letter-spacing:
      0 !important;

    text-transform:
      none !important;
  }

  html[lang="ar"] .footer-link-group a {
    width:
      auto;

    max-width:
      100%;

    font-family:
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      14px !important;

    line-height:
      1.70 !important;

    letter-spacing:
      0 !important;

    text-align:
      start !important;
  }

  html[lang="ar"] .footer-end {
    font-family:
      "Noto Naskh Arabic",
      serif !important;

    font-size:
      13px !important;

    line-height:
      1.70 !important;

    letter-spacing:
      0 !important;
  }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 550px) {

  html[lang="ar"] .site-header {
    min-height:
      78px !important;

    padding:
      7px
      13px !important;
  }

  html[lang="ar"] .brand-logo-ar {
    height:
      53px !important;

    max-width:
      min(182px, 49vw) !important;
  }

  html[lang="ar"] .language-toggle {
    width:
      44px !important;

    min-width:
      44px !important;

    height:
      42px !important;

    min-height:
      42px !important;
  }

  html[lang="ar"] .menu-toggle {
    width:
      44px !important;

    height:
      44px !important;

    min-width:
      44px !important;

    min-height:
      44px !important;

    flex-basis:
      44px;
  }

  html[lang="ar"] .hero-luxury h1 {
    font-size:
      clamp(
        38px,
        10vw,
        47px
      ) !important;

    line-height:
      1.30 !important;
  }

  html[lang="ar"] .hero-luxury h1 em {
    margin-top:
      11px !important;
  }

  html[lang="ar"] .hero-luxury .hero-copy {
    font-size:
      15.5px !important;

    line-height:
      1.90 !important;
  }

  html[lang="ar"] .editorial-story h2,
  html[lang="ar"] .collectible-editions h2,
  html[lang="ar"] .ritual-heading h2,
  html[lang="ar"] .author-copy h2 {
    font-size:
      clamp(
        37px,
        9.8vw,
        46px
      ) !important;
  }

  html[lang="ar"] .final-closing h2 {
    font-size:
      clamp(
        39px,
        10vw,
        48px
      ) !important;
  }

}


/* =========================================================
   VERY NARROW PHONE
   ========================================================= */

@media (max-width: 390px) {

  html[lang="ar"] .brand-logo-ar {
    max-width:
      162px !important;
  }

  html[lang="ar"] .key-entry-actions {
    grid-template-columns:
      1fr;
  }

}