/* =========================================================
   ELEGANT STEP — CLEAN GLOBAL CUSTOM CSS
   Salla / Selia
   Black + Warm Gold + Ivory
========================================================= */


/* =========================================================
   01. DESIGN SYSTEM
========================================================= */

:root{
  --es-black:#0B0B0B;
  --es-black-soft:#151515;
  --es-gold:#B99332;
  --es-gold-soft:#D7BD75;
  --es-ivory:#F8F6F1;
  --es-white:#FFFFFF;
  --es-text:#353535;
  --es-muted:#717171;
  --es-border:#E7E2D8;

  --color-primary:var(--es-black) !important;
  --color-primary-dark:#000000 !important;
  --color-primary-light:#252525 !important;

  --bg-primary:var(--es-ivory) !important;
  --bg-secondary:#FFFFFF !important;

  --header-bg:var(--es-black) !important;
  --header-text-color:#FFFFFF !important;

  --store-text-primary:#111111 !important;
  --store-text-secondary:#666666 !important;

  --product-bg:#FFFFFF !important;
  --product-border-color:var(--es-border) !important;

  --footer-bg:var(--es-black) !important;
  --footer-text-color:var(--es-ivory) !important;
  --bottom-footer-bg:#050505 !important;

  --product-enhanced-btn-bg:var(--es-black) !important;
  --product-enhanced-btn-color:#FFFFFF !important;

  --s-radius:1rem !important;
}


/* =========================================================
   02. GLOBAL PAGE
========================================================= */

html{
  scroll-behavior:smooth;
}

body{
  color:var(--es-text);
  background:var(--es-ivory);
}

.app-inner{
  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #FCFBF8 42%,
      var(--es-ivory) 100%
    ) !important;
}

body.index main{
  overflow:hidden;
}

::selection{
  color:#FFFFFF;
  background:var(--es-gold);
}


/* =========================================================
   03. REMOVE SECTION GAPS
========================================================= */

body.index main > .s-block,
body.index main > section{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

body.index main > .s-block--bundle-html-content{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

body.index
main >
.s-block--bundle-html-content >
salla-custom-component{
  display:block;
}


/* =========================================================
   04. PROMOTION BAR
========================================================= */

.promotion-banner{
  background:
    linear-gradient(
      90deg,
      #050505 0%,
      #17130B 50%,
      #050505 100%
    ) !important;

  border-bottom:
    1px solid rgba(185,147,50,.28);

  box-shadow:none !important;
}

.promotion-banner a{
  color:var(--es-gold-soft) !important;
  font-weight:700;
}

.promotion-banner__close{
  color:#FFFFFF !important;
}


/* =========================================================
   05. PREMIUM GLASS HEADER
========================================================= */

.store-header{
  z-index:100;
}

.store-header #mainnav.main-nav-container{
  background:transparent !important;
}

.store-header #mainnav > .inner{
  background:
    linear-gradient(
      180deg,
      rgba(5,5,5,.92),
      rgba(11,11,11,.82)
    ) !important;

  border-bottom:
    1px solid rgba(185,147,50,.18);

  -webkit-backdrop-filter:
    blur(16px) saturate(140%);

  backdrop-filter:
    blur(16px) saturate(140%);

  transition:
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


/* Header after JS scroll state */

.store-header.es-scrolled #mainnav > .inner{
  background:
    rgba(8,8,8,.97) !important;

  border-bottom-color:
    rgba(185,147,50,.34);

  box-shadow:
    0 10px 35px rgba(0,0,0,.17);
}


/* Header controls */

.store-header .header-btn__icon,
.store-header .header__search-btn,
.store-header .mburger,
.store-header .menu-label,
.store-header .theme-toggle,
.store-header salla-cart-summary,
.store-header salla-user-menu{
  color:#FFFFFF !important;
}

.store-header button,
.store-header a{
  transition:
    color .22s ease,
    opacity .22s ease,
    transform .22s ease;
}

@media(hover:hover) and (pointer:fine){

  .store-header .header__search-btn:hover,
  .store-header .mburger:hover,
  .store-header .theme-toggle:hover,
  .store-header salla-cart-summary:hover{
    color:var(--es-gold-soft) !important;
  }

}


/* Logo */

.store-header .navbar-brand img{
  max-height:52px;
  object-fit:contain;

  transition:
    transform .3s ease,
    opacity .3s ease;
}

.store-header.es-scrolled
.navbar-brand img{
  transform:scale(.94);
}


/* =========================================================
   06. DESKTOP NAVIGATION
========================================================= */

@media(min-width:1024px){

  .store-header .main-menu-row{
    background:
      rgba(11,11,11,.95) !important;

    border-bottom:
      1px solid rgba(185,147,50,.14);

    box-shadow:
      0 5px 18px rgba(0,0,0,.07);

    -webkit-backdrop-filter:
      blur(14px);

    backdrop-filter:
      blur(14px);
  }


  .main-menu-row
  .main-menu >
  .main-menu__item >
  .main-menu__link,

  .main-menu-row
  .main-menu >
  .main-menu__item >
  .main-menu__parent-label{
    color:
      rgba(255,255,255,.90) !important;

    transition:
      color .2s ease;
  }


  .main-menu-row
  .main-menu >
  .main-menu__item:hover >
  .main-menu__link,

  .main-menu-row
  .main-menu >
  .main-menu__item:hover >
  .main-menu__parent-label{
    color:
      var(--es-gold-soft) !important;
  }


  .main-menu__view-all a{
    color:
      var(--es-gold) !important;
  }

}


/* =========================================================
   07. SECTION TITLES
========================================================= */

.home-block-title{
  margin-bottom:28px !important;
}

.home-block-title h2,
.home-block-title .testimonials__title,
.home-block-title .faq__title,
.home-block-title .blog__title,
.s-block__title{
  color:
    var(--es-black) !important;

  font-weight:800 !important;
}

.home-block-title p,
.s-block__title p,
.faq__subtitle{
  color:
    var(--es-muted) !important;
}

.enhanced-title-border,
.home-block-line{
  border-color:
    var(--es-gold) !important;
}

.enhanced-title-border::before,
.enhanced-title-border::after{
  background:
    var(--es-gold) !important;
}


/* =========================================================
   08. NATIVE PRODUCT SECTIONS
========================================================= */

.s-block--best-offers,
.s-block--custom-products{
  padding-top:54px !important;
  padding-bottom:54px !important;
}


/* Homepage latest products */

body.index .s-block--custom-products{
  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(185,147,50,.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #FFFFFF,
      var(--es-ivory)
    );
}


/* Product custom-element hosts */

custom-salla-product-card,
salla-product-card{
  border-radius:18px;

  border-color:
    var(--es-border) !important;

  background:#FFFFFF;

  box-shadow:
    0 7px 24px rgba(0,0,0,.045);

  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    border-color .3s ease,
    box-shadow .3s ease;
}


@media(hover:hover) and (pointer:fine){

  custom-salla-product-card:hover,
  salla-product-card:hover{
    transform:
      translateY(-5px);

    border-color:
      rgba(185,147,50,.45) !important;

    box-shadow:
      0 18px 42px rgba(0,0,0,.085);
  }

}


salla-products-slider{
  --swiper-navigation-color:
    var(--es-black);

  --swiper-pagination-color:
    var(--es-gold);
}


/* =========================================================
   09. BUTTONS
========================================================= */

.btn--primary,
.btn-primary,
.s-button-primary,
button.bg-primary,
a.bg-primary{
  color:#FFFFFF !important;

  background:
    var(--es-black) !important;

  border-color:
    var(--es-black) !important;

  border-radius:
    999px !important;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}


@media(hover:hover) and (pointer:fine){

  .btn--primary:hover,
  .btn-primary:hover,
  .s-button-primary:hover,
  button.bg-primary:hover,
  a.bg-primary:hover{
    color:#FFFFFF !important;

    background:
      var(--es-gold) !important;

    border-color:
      var(--es-gold) !important;

    transform:
      translateY(-2px);

    box-shadow:
      0 10px 25px
      rgba(185,147,50,.20);
  }

}


/* =========================================================
   10. FORMS
========================================================= */

input,
select,
textarea{
  border-radius:
    12px !important;

  border-color:
    var(--es-border) !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:
    var(--es-gold) !important;

  box-shadow:
    0 0 0 3px
    rgba(185,147,50,.10) !important;
}


/* =========================================================
   11. NATIVE CONTENT CARDS
========================================================= */

.single-faq,
.list-block{
  border-color:
    var(--es-border) !important;

  box-shadow:
    0 9px 25px rgba(0,0,0,.04);

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

@media(hover:hover) and (pointer:fine){

  .single-faq:hover,
  .list-block:hover{
    transform:
      translateY(-3px);

    border-color:
      rgba(185,147,50,.35) !important;

    box-shadow:
      0 15px 36px rgba(0,0,0,.07);
  }

}


/* =========================================================
   12. FIXED BANNER
========================================================= */

body.index
main >
.s-block--fixed-banner{
  padding:0 !important;
  background:
    var(--es-black);
}

body.index
main >
.s-block--fixed-banner >
.container{
  width:100% !important;
  max-width:none !important;

  padding-inline:0 !important;
}

.s-block--fixed-banner
.banner--fixed{
  display:block;

  border-radius:0 !important;

  overflow:hidden;
}

.s-block--fixed-banner
.fixed-banner__image{
  display:block;

  width:100% !important;
  max-width:none !important;
  height:auto !important;

  object-fit:cover !important;

  transition:
    transform .8s
    cubic-bezier(.2,.8,.2,1);
}

@media(hover:hover) and (pointer:fine){

  .s-block--fixed-banner:hover
  .fixed-banner__image{
    transform:
      scale(1.012);
  }

}


/* =========================================================
   13. CUSTOM SECTIONS
========================================================= */

.es-welcome,
.es-brands,
.es-luxury-showcase,
.es-look-pro,
.es-sport,
.es-coverflow,
.es-reviews,
.es-trust,
.es-faq{
  margin-top:0 !important;
  margin-bottom:0 !important;
}


/* =========================================================
   14. ACCESSIBILITY
========================================================= */

body a:focus-visible,
body button:focus-visible,
body summary:focus-visible{
  outline:
    2px solid
    var(--es-gold) !important;

  outline-offset:3px;
}


/* =========================================================
   15. FOOTER
========================================================= */

.store-footer,
.store-footer__inner{
  color:
    var(--es-ivory) !important;

  background:
    linear-gradient(
      145deg,
      #080808,
      #111111
    ) !important;
}

.store-footer__curve{
  color:#080808 !important;
}

.store-footer__menu-title{
  color:
    var(--es-gold-soft) !important;

  font-weight:800;
}

.store-footer__menu-link,
.store-footer .footer-description,
.store-footer__contacts-row,
.store-footer__brand p,
.store-footer__sbc{
  color:
    rgba(255,255,255,.72) !important;
}

.store-footer__menu-link{
  transition:
    color .22s ease,
    transform .22s ease;
}

@media(hover:hover) and (pointer:fine){

  .store-footer__menu-link:hover{
    color:
      var(--es-gold-soft) !important;
  }

}

.store-footer__sbc-link{
  color:
    rgba(255,255,255,.78) !important;
}


/* Bottom footer */

.footer-bottom{
  background:
    #050505 !important;

  border-top:
    1px solid rgba(185,147,50,.17);
}

.footer-rights,
.footer-rights *{
  color:
    rgba(255,255,255,.62) !important;
}


/* =========================================================
   16. SCROLL TO TOP
========================================================= */

.scroll-to-top{
  color:
    var(--es-gold-soft) !important;

  background:
    rgba(11,11,11,.94) !important;

  border:
    1px solid
    rgba(185,147,50,.35) !important;

  box-shadow:
    0 8px 25px rgba(0,0,0,.18);
}

.scroll-to-top svg path{
  stroke:
    var(--es-gold) !important;
}


/* =========================================================
   17. DESKTOP SCROLLBAR
========================================================= */

@media(min-width:768px){

  ::-webkit-scrollbar{
    width:8px;
    height:8px;
  }

  ::-webkit-scrollbar-track{
    background:#F2EFE8;
  }

  ::-webkit-scrollbar-thumb{
    background:
      linear-gradient(
        #D7BD75,
        #A47C22
      );

    border-radius:999px;
  }

  ::-webkit-scrollbar-thumb:hover{
    background:#98731F;
  }

}


/* =========================================================
   18. MOBILE
========================================================= */

@media(max-width:767px){

  .store-header
  #mainnav >
  .inner{
    background:
      rgba(8,8,8,.94) !important;

    -webkit-backdrop-filter:
      blur(12px);

    backdrop-filter:
      blur(12px);
  }


  .store-header
  .navbar-brand img{
    max-height:44px;
  }


  .s-block--best-offers,
  .s-block--custom-products{
    padding-top:38px !important;
    padding-bottom:38px !important;
  }


  .home-block-title{
    margin-bottom:
      21px !important;
  }


  .home-block-title h2{
    font-size:
      25px !important;
  }


  custom-salla-product-card,
  salla-product-card{
    border-radius:15px;
  }

}


/* =========================================================
   19. DARK MODE
========================================================= */

.dark{
  --bg-primary:#101010 !important;
  --bg-secondary:#171717 !important;

  --header-bg:#070707 !important;
  --header-text-color:#FFFFFF !important;

  --store-text-primary:#F5F1E8 !important;
  --store-text-secondary:#B8B8B8 !important;

  --product-bg:#181818 !important;

  --product-border-color:
    rgba(185,147,50,.20) !important;

  --footer-bg:#070707 !important;
}


/* =========================================================
   20. REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  custom-salla-product-card,
  salla-product-card,
  .fixed-banner__image,
  .store-header #mainnav > .inner,
  .store-header .navbar-brand img{
    transition:none !important;
  }

}
/* =========================================================
   ELEGANT STEP — ABOUT PAGE FIX
   Full Width + Clean Salla Wrapper
========================================================= */


/* =========================================================
   01. REMOVE SALLA DEFAULT PAGE CONTAINER
   ONLY WHEN THE PAGE CONTAINS .es-about
========================================================= */

.content.content--single-page:has(.es-about){
  width:100% !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


/* Remove inner editor spacing */

.content.content--single-page:has(.es-about)
.content-entry{
  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  overflow:visible !important;
}


/* =========================================================
   02. REMOVE DUPLICATED SALLA PAGE H1
   The custom Hero already contains the real H1
========================================================= */

.content.content--single-page:has(.es-about)
> h1{
  display:none !important;
}


/* =========================================================
   03. ARTICLE FULL WIDTH
========================================================= */

.content.content--single-page:has(.es-about)
.es-about{
  width:100% !important;
  max-width:none !important;

  margin:0 !important;
}


/* =========================================================
   04. REMOVE TYPOGRAPHY RULES INHERITED FROM
   SALLA .content-entry
========================================================= */

.content-entry .es-about h1,
.content-entry .es-about h2,
.content-entry .es-about h3,
.content-entry .es-about p{
  margin-block-start:0;
}

.content-entry .es-about p{
  max-width:none;
}


/* =========================================================
   05. BREADCRUMB SPACING
========================================================= */

body:has(.es-about)
.breadcrumb,
body:has(.es-about)
.breadcrumbs{
  margin-bottom:0 !important;
}


/* =========================================================
   06. HERO EDGE-TO-EDGE
========================================================= */

.es-about__hero{
  width:100%;

  margin:0 !important;

  border-radius:0 !important;
}


/* Stronger Hero contrast */

.es-about__title{
  color:#FFFFFF !important;
}

.es-about__hero-text{
  color:
    rgba(255,255,255,.84) !important;
}


/* =========================================================
   07. PREMIUM CONTENT CARDS
========================================================= */

.es-about__lead,
.es-about__block,
.es-about__summary{
  border-color:
    rgba(185,147,50,.18) !important;

  box-shadow:
    0 12px 32px
    rgba(0,0,0,.045) !important;
}


/* =========================================================
   08. DARK AEO ANSWER BLOCK
========================================================= */

.es-about__answer,
.es-about__answer h2{
  color:#FFFFFF !important;
}

.es-about__answer p{
  color:
    rgba(255,255,255,.80) !important;
}

.es-about__answer strong{
  color:#D7BD75 !important;
}


/* =========================================================
   09. INTERNAL LINK CARDS
========================================================= */

@media(hover:hover) and (pointer:fine){

  .es-about__category:hover{
    transform:
      translateY(-5px);

    border-color:
      rgba(185,147,50,.55) !important;

    box-shadow:
      0 17px 36px
      rgba(0,0,0,.07);
  }

}


/* =========================================================
   10. FAQ
========================================================= */

.es-about__faq-item{
  box-shadow:none !important;
}

.es-about__faq-item[open]{
  border-color:
    rgba(185,147,50,.48) !important;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.05) !important;
}


/* =========================================================
   11. FINAL CTA
========================================================= */

.es-about__cta,
.es-about__cta h2{
  color:#FFFFFF !important;
}

.es-about__cta p{
  color:
    rgba(255,255,255,.77) !important;
}


/* =========================================================
   12. REMOVE COMMENTS FROM ABOUT PAGE
   Recommended for a corporate/entity About page
========================================================= */

.content.content--single-page:has(.es-about)
> salla-comments{
  display:none !important;
}


/* =========================================================
   13. MOBILE
========================================================= */

@media(max-width:767px){

  .content.content--single-page:has(.es-about){
    margin:0 !important;
    padding:0 !important;
  }


  .es-about__hero{
    padding:
      52px
      0
      43px !important;
  }


  .es-about__content{
    padding-top:
      34px !important;
  }


  .es-about__lead,
  .es-about__block,
  .es-about__answer,
  .es-about__summary{
    padding:
      20px
      16px !important;
  }

}


/* =========================================================
   14. ACCESSIBILITY
========================================================= */

.es-about a:focus-visible,
.es-about summary:focus-visible{
  outline:
    2px solid #B99332 !important;

  outline-offset:3px;
}


/* =========================================================
   15. REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .es-about *,
  .es-about *::before,
  .es-about *::after{
    transition:none !important;
    animation:none !important;
  }

}
/* =========================================================
   ELEGANT STEP — ABOUT PAGE VISUAL FIX
   Typography + Contrast + Colors + Readability
   Add AFTER existing CSS
========================================================= */


/* =========================================================
   01. PAGE TYPOGRAPHY
========================================================= */

.content-entry .es-about{
  --black:#0B0B0B;
  --gold:#B99332;
  --gold-soft:#E2C875;
  --ivory:#F8F6F1;
  --text:#313131;
  --muted:#626262;
  --border:#E6DED0;

  font-family:
    var(--font-main, "PingARLT", Arial, sans-serif) !important;

  font-size:16px;

  line-height:1.9;

  color:var(--text) !important;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


/* Main content width */

.es-about__container{
  width:min(
    1140px,
    calc(100% - 32px)
  ) !important;
}


/* =========================================================
   02. HERO — FIX DARK TEXT
========================================================= */

.content-entry
.es-about
.es-about__hero{
  min-height:300px;

  display:flex;
  align-items:center;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(185,147,50,.36),
      transparent 40%
    ),
    radial-gradient(
      circle at 85% 85%,
      rgba(185,147,50,.10),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #030303 0%,
      #0A0907 52%,
      #1A1308 100%
    ) !important;
}


/* eyebrow */

.content-entry
.es-about
.es-about__eyebrow{
  color:#E3C977 !important;

  -webkit-text-fill-color:#E3C977 !important;

  opacity:1 !important;

  font-size:12px !important;
}


/* H1 */

.content-entry
.es-about
.es-about__hero
.es-about__title{
  color:#FFFFFF !important;

  -webkit-text-fill-color:#FFFFFF !important;

  opacity:1 !important;

  font-size:
    clamp(38px,4vw,56px) !important;

  font-weight:900 !important;

  line-height:1.25 !important;

  text-shadow:
    0 3px 22px rgba(0,0,0,.55) !important;
}


/* Hero description */

.content-entry
.es-about
.es-about__hero
.es-about__hero-text{
  max-width:780px;

  color:
    rgba(255,255,255,.88) !important;

  -webkit-text-fill-color:
    rgba(255,255,255,.88) !important;

  opacity:1 !important;

  font-size:16px !important;

  font-weight:500 !important;

  line-height:2 !important;
}


/* =========================================================
   03. CONTENT SPACING
========================================================= */

.es-about__content{
  padding:
    42px
    0
    70px !important;
}

.es-about__lead,
.es-about__block,
.es-about__summary{
  margin-bottom:
    18px !important;

  padding:
    31px
    32px !important;

  border:
    1px solid
    rgba(185,147,50,.18) !important;

  border-radius:
    20px !important;

  background:
    rgba(255,255,255,.98) !important;

  box-shadow:
    0 8px 30px
    rgba(0,0,0,.045) !important;
}


/* =========================================================
   04. HEADINGS
========================================================= */

.content-entry
.es-about
h2{
  color:#111111 !important;

  -webkit-text-fill-color:#111111 !important;

  opacity:1 !important;

  font-size:
    clamp(26px,2.4vw,33px) !important;

  font-weight:900 !important;

  line-height:1.4 !important;

  letter-spacing:0 !important;

  margin-bottom:
    17px !important;
}


/* gold line */

.es-about h2::after{
  width:52px !important;
  height:3px !important;

  margin-top:
    9px !important;

  background:
    linear-gradient(
      90deg,
      #B99332,
      #E3C977
    ) !important;

  border-radius:
    99px;
}


/* =========================================================
   05. BODY COPY
========================================================= */

.content-entry
.es-about
p{
  color:#575757 !important;

  -webkit-text-fill-color:#575757 !important;

  opacity:1 !important;

  font-size:15.5px !important;

  font-weight:500 !important;

  line-height:2 !important;
}

.content-entry
.es-about
strong{
  color:#171717 !important;

  -webkit-text-fill-color:#171717 !important;

  font-weight:800 !important;
}


/* =========================================================
   06. CATEGORY CARDS
========================================================= */

.es-about__categories{
  gap:14px !important;
}

.es-about__category{
  min-height:155px !important;

  padding:
    23px
    18px !important;

  border:
    1px solid
    rgba(185,147,50,.20) !important;

  border-radius:
    18px !important;

  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #FBF7ED 100%
    ) !important;

  box-shadow:
    0 6px 20px
    rgba(0,0,0,.035) !important;
}

.es-about__category strong{
  color:#111 !important;

  -webkit-text-fill-color:#111 !important;

  font-size:16px !important;

  font-weight:900 !important;
}

.es-about__category span{
  color:#646464 !important;

  -webkit-text-fill-color:#646464 !important;

  font-size:13px !important;

  font-weight:500 !important;

  line-height:1.8 !important;
}

.es-about__category
.es-about__category-cta{
  color:#A97E20 !important;

  -webkit-text-fill-color:#A97E20 !important;

  font-size:12px !important;

  font-weight:800 !important;
}


/* =========================================================
   07. AEO / GEO DARK ANSWER BLOCK
   Important: force white text
========================================================= */

.content-entry
.es-about
.es-about__answer{
  padding:
    30px
    32px !important;

  border:
    1px solid
    rgba(215,189,117,.38) !important;

  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(185,147,50,.25),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #050505,
      #13110D
    ) !important;

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.16) !important;
}


/* Dark block H2 */

.content-entry
.es-about
.es-about__answer
h2{
  color:#FFFFFF !important;

  -webkit-text-fill-color:#FFFFFF !important;

  opacity:1 !important;

  text-shadow:
    0 2px 12px
    rgba(0,0,0,.3);
}


/* Dark block paragraph */

.content-entry
.es-about
.es-about__answer
p{
  color:
    rgba(255,255,255,.85) !important;

  -webkit-text-fill-color:
    rgba(255,255,255,.85) !important;

  opacity:1 !important;
}


/* highlighted entity */

.content-entry
.es-about
.es-about__answer
strong{
  color:#E3C977 !important;

  -webkit-text-fill-color:#E3C977 !important;

  font-weight:850 !important;
}


/* =========================================================
   08. WHY US / VALUES
========================================================= */

.es-about__values{
  gap:14px !important;
}

.es-about__value{
  min-height:105px;

  padding:
    19px
    20px !important;

  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #FBF8F0
    ) !important;

  border:
    1px solid
    rgba(185,147,50,.17) !important;

  border-radius:
    15px !important;
}

.es-about__value strong{
  color:#A77C1F !important;

  -webkit-text-fill-color:#A77C1F !important;

  font-size:14px !important;

  font-weight:900 !important;
}

.es-about__value span{
  display:block;

  color:#5D5D5D !important;

  -webkit-text-fill-color:#5D5D5D !important;

  font-size:13px !important;

  font-weight:500;

  line-height:1.8;
}


/* =========================================================
   09. SAUDI FACTS
========================================================= */

.es-about__facts{
  gap:14px !important;
}

.es-about__fact{
  padding:
    20px
    15px !important;

  background:
    #FCFAF5 !important;

  border:
    1px solid
    rgba(185,147,50,.18) !important;

  border-radius:
    15px !important;
}

.es-about__fact strong{
  color:#151515 !important;

  -webkit-text-fill-color:#151515 !important;

  font-size:14px !important;

  font-weight:900 !important;
}

.es-about__fact span{
  color:#666 !important;

  -webkit-text-fill-color:#666 !important;

  font-size:13px !important;
}


/* =========================================================
   10. POLICY / TRUST LINKS
========================================================= */

.es-about__trust-links{
  gap:10px !important;
}

.es-about__trust-link{
  min-height:42px !important;

  padding:
    9px
    17px !important;

  color:#242424 !important;

  -webkit-text-fill-color:#242424 !important;

  background:
    #FAF6EC !important;

  border:
    1px solid
    rgba(185,147,50,.24) !important;

  font-size:13px !important;

  font-weight:800 !important;
}

@media(hover:hover){

  .es-about__trust-link:hover{
    color:#fff !important;

    -webkit-text-fill-color:#fff !important;

    background:
      #0B0B0B !important;

    border-color:
      #0B0B0B !important;
  }

}


/* =========================================================
   11. FAQ TYPOGRAPHY
========================================================= */

.es-about__faq{
  margin-top:
    32px !important;
}

.es-about__faq-header h2{
  text-align:center;
}

.es-about__faq-intro{
  color:#666 !important;

  -webkit-text-fill-color:#666 !important;

  font-size:14px !important;
}

.es-about__faq-item{
  background:#fff !important;

  border:
    1px solid
    rgba(185,147,50,.17) !important;

  border-radius:
    15px !important;
}

.es-about__faq-item summary{
  color:#202020 !important;

  -webkit-text-fill-color:#202020 !important;

  font-size:14px !important;

  font-weight:800 !important;
}

.es-about__faq-answer{
  color:#575757 !important;

  -webkit-text-fill-color:#575757 !important;

  font-size:14px !important;

  font-weight:500 !important;
}


/* =========================================================
   12. FINAL ENTITY SUMMARY
========================================================= */

.es-about__summary{
  margin-top:
    25px !important;

  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #FCFAF5
    ) !important;
}


/* =========================================================
   13. FINAL DARK CTA
========================================================= */

.content-entry
.es-about
.es-about__cta{
  padding:
    38px
    28px !important;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(185,147,50,.30),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #050505,
      #15120D
    ) !important;

  border:
    1px solid
    rgba(215,189,117,.34) !important;

  box-shadow:
    0 18px 46px
    rgba(0,0,0,.15) !important;
}


/* Force CTA heading white */

.content-entry
.es-about
.es-about__cta
h2{
  color:#FFFFFF !important;

  -webkit-text-fill-color:#FFFFFF !important;

  opacity:1 !important;
}


/* Force CTA body readable */

.content-entry
.es-about
.es-about__cta
p{
  color:
    rgba(255,255,255,.82) !important;

  -webkit-text-fill-color:
    rgba(255,255,255,.82) !important;
}


/* CTA button */

.content-entry
.es-about
.es-about__cta-btn{
  color:#111111 !important;

  -webkit-text-fill-color:#111111 !important;

  background:
    linear-gradient(
      135deg,
      #E3C977,
      #B99332
    ) !important;

  font-size:13px !important;

  font-weight:900 !important;

  box-shadow:
    0 9px 25px
    rgba(185,147,50,.30) !important;
}


/* =========================================================
   14. CARD HOVER — DESKTOP ONLY
========================================================= */

@media(hover:hover) and (pointer:fine){

  .es-about__lead,
  .es-about__block,
  .es-about__summary,
  .es-about__category,
  .es-about__value,
  .es-about__fact{
    transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
  }

  .es-about__category:hover,
  .es-about__value:hover{
    transform:
      translateY(-3px);

    border-color:
      rgba(185,147,50,.42) !important;

    box-shadow:
      0 12px 28px
      rgba(0,0,0,.065) !important;
  }

}


/* =========================================================
   15. MOBILE
========================================================= */

@media(max-width:767px){

  .es-about__container{
    width:
      calc(100% - 22px) !important;
  }


  .content-entry
  .es-about
  .es-about__hero{
    min-height:auto;

    padding:
      49px
      17px
      43px !important;
  }


  .content-entry
  .es-about
  .es-about__hero
  .es-about__title{
    font-size:
      31px !important;
  }


  .content-entry
  .es-about
  .es-about__hero
  .es-about__hero-text{
    font-size:
      14px !important;

    line-height:
      1.9 !important;
  }


  .es-about__content{
    padding-top:
      28px !important;
  }


  .es-about__lead,
  .es-about__block,
  .es-about__answer,
  .es-about__summary{
    padding:
      20px
      17px !important;

    margin-bottom:
      12px !important;

    border-radius:
      17px !important;
  }


  .content-entry
  .es-about
  h2{
    font-size:
      23px !important;

    line-height:
      1.45 !important;
  }


  .content-entry
  .es-about
  p{
    font-size:
      14px !important;

    line-height:
      1.95 !important;
  }


  .es-about__category strong{
    font-size:
      15px !important;
  }


  .es-about__category span,
  .es-about__value span{
    font-size:
      12.5px !important;
  }


  .es-about__faq-item summary{
    font-size:
      13px !important;
  }

}


/* =========================================================
   16. ACCESSIBILITY / MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .es-about *,
  .es-about *::before,
  .es-about *::after{
    transition:none !important;
    animation:none !important;
  }

}
/* =========================================================
   ELEGANT STEP — FAQ PAGE VISUAL FIX
   Typography + Contrast + Colors + Readability
========================================================= */


/* =========================================================
   01. GLOBAL TYPOGRAPHY
========================================================= */

.content-entry .es-faq-page{
  --black:#0B0B0B;
  --gold:#B99332;
  --gold-soft:#E2C875;
  --ivory:#F8F6F1;
  --text:#313131;
  --muted:#626262;
  --border:#E6DED0;

  font-family:
    var(--font-main, "PingARLT", Arial, sans-serif) !important;

  color:var(--text) !important;

  font-size:16px;
  line-height:1.9;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


.es-faq-page__container{
  width:min(
    1140px,
    calc(100% - 32px)
  ) !important;
}


/* =========================================================
   02. HERO FIX
========================================================= */

.content-entry
.es-faq-page
.es-faq-page__hero{
  min-height:290px;

  display:flex;
  align-items:center;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(185,147,50,.38),
      transparent 40%
    ),
    radial-gradient(
      circle at 85% 90%,
      rgba(185,147,50,.10),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #030303 0%,
      #090807 52%,
      #1B1409 100%
    ) !important;
}


/* eyebrow */

.content-entry
.es-faq-page
.es-faq-page__eyebrow{
  color:#E3C977 !important;
  -webkit-text-fill-color:#E3C977 !important;

  opacity:1 !important;

  font-size:12px !important;
}


/* H1 */

.content-entry
.es-faq-page
.es-faq-page__title{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;

  opacity:1 !important;

  font-size:
    clamp(36px,4vw,54px) !important;

  font-weight:900 !important;

  line-height:1.25 !important;

  text-shadow:
    0 3px 22px rgba(0,0,0,.55) !important;
}


/* hero text */

.content-entry
.es-faq-page
.es-faq-page__hero-text{
  color:
    rgba(255,255,255,.88) !important;

  -webkit-text-fill-color:
    rgba(255,255,255,.88) !important;

  opacity:1 !important;

  font-size:16px !important;
  font-weight:500 !important;

  line-height:2 !important;
}


/* =========================================================
   03. INTRO CARD
========================================================= */

.es-faq-page__intro{
  padding:
    28px
    30px !important;

  border:
    1px solid
    rgba(185,147,50,.18) !important;

  border-radius:
    20px !important;

  background:
    rgba(255,255,255,.98) !important;

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.045) !important;
}


/* =========================================================
   04. BODY TEXT
========================================================= */

.content-entry
.es-faq-page
p{
  color:#575757 !important;

  -webkit-text-fill-color:#575757 !important;

  opacity:1 !important;

  font-size:15px !important;

  font-weight:500 !important;

  line-height:2 !important;
}

.content-entry
.es-faq-page
strong{
  color:#151515 !important;

  -webkit-text-fill-color:#151515 !important;

  font-weight:850 !important;
}


/* =========================================================
   05. QUICK ANSWER — DARK BLOCK
========================================================= */

.content-entry
.es-faq-page
.es-faq-page__answer{
  padding:
    30px
    32px !important;

  border:
    1px solid
    rgba(215,189,117,.38) !important;

  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(185,147,50,.25),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #050505,
      #14110D
    ) !important;

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.16) !important;
}


/* dark heading */

.content-entry
.es-faq-page
.es-faq-page__answer
h2{
  color:#FFFFFF !important;

  -webkit-text-fill-color:#FFFFFF !important;

  font-size:
    clamp(25px,2.5vw,33px) !important;

  font-weight:900 !important;

  opacity:1 !important;
}


/* dark paragraph */

.content-entry
.es-faq-page
.es-faq-page__answer
p{
  color:
    rgba(255,255,255,.85) !important;

  -webkit-text-fill-color:
    rgba(255,255,255,.85) !important;
}


/* highlighted text */

.content-entry
.es-faq-page
.es-faq-page__answer
strong{
  color:#E3C977 !important;

  -webkit-text-fill-color:#E3C977 !important;
}


/* =========================================================
   06. QUICK NAV
========================================================= */

.es-faq-page__nav{
  gap:12px !important;
}

.es-faq-page__nav a{
  min-height:78px !important;

  padding:
    16px !important;

  color:#171717 !important;

  -webkit-text-fill-color:#171717 !important;

  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #FAF7EF
    ) !important;

  border:
    1px solid
    rgba(185,147,50,.20) !important;

  border-radius:
    16px !important;

  font-size:13px !important;

  font-weight:850 !important;

  box-shadow:
    0 6px 20px
    rgba(0,0,0,.03) !important;
}


/* =========================================================
   07. GROUP HEADINGS
========================================================= */

.content-entry
.es-faq-page
.es-faq-page__group
h2{
  color:#111 !important;

  -webkit-text-fill-color:#111 !important;

  font-size:
    clamp(25px,2.6vw,32px) !important;

  font-weight:900 !important;

  line-height:1.4 !important;

  margin-bottom:
    15px !important;
}


.es-faq-page__group h2::after{
  height:3px !important;

  background:
    linear-gradient(
      90deg,
      #B99332,
      #E3C977
    ) !important;
}


/* =========================================================
   08. FAQ ACCORDION
========================================================= */

.es-faq-page__item{
  margin-bottom:
    11px !important;

  background:
    #FFFFFF !important;

  border:
    1px solid
    rgba(185,147,50,.18) !important;

  border-radius:
    16px !important;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.025) !important;
}


.es-faq-page__item[open]{
  border-color:
    rgba(185,147,50,.52) !important;

  box-shadow:
    0 11px 28px
    rgba(0,0,0,.055) !important;
}


/* question */

.content-entry
.es-faq-page
.es-faq-page__item
summary{
  color:#1B1B1B !important;

  -webkit-text-fill-color:#1B1B1B !important;

  font-size:14.5px !important;

  font-weight:850 !important;

  line-height:1.7 !important;

  padding:
    18px
    20px !important;
}


/* plus icon */

.es-faq-page__item
summary::after{
  color:#A97E20 !important;

  -webkit-text-fill-color:#A97E20 !important;

  background:
    rgba(185,147,50,.11) !important;

  border:
    1px solid
    rgba(185,147,50,.17);
}


.es-faq-page__item[open]
summary::after{
  color:#FFFFFF !important;

  -webkit-text-fill-color:#FFFFFF !important;

  background:
    #B99332 !important;
}


/* =========================================================
   09. FAQ ANSWERS
========================================================= */

.es-faq-page__response{
  padding:
    0
    20px
    20px !important;
}


.content-entry
.es-faq-page
.es-faq-page__response
p,
.content-entry
.es-faq-page
.es-faq-page__response
li{
  color:#575757 !important;

  -webkit-text-fill-color:#575757 !important;

  font-size:14px !important;

  font-weight:500 !important;

  line-height:1.95 !important;
}


.es-faq-page__response ul{
  color:#575757 !important;
}


/* numbers / important values */

.content-entry
.es-faq-page
.es-faq-page__response
strong{
  color:#9A721C !important;

  -webkit-text-fill-color:#9A721C !important;

  font-weight:900 !important;
}


/* =========================================================
   10. NOTICE
========================================================= */

.es-faq-page__notice{
  padding:
    24px
    26px !important;

  background:
    linear-gradient(
      145deg,
      #FCF8EE,
      #FFFFFF
    ) !important;

  border:
    1px solid
    rgba(185,147,50,.22) !important;

  border-radius:
    18px !important;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.035);
}


.es-faq-page__notice strong{
  color:#A67C20 !important;

  -webkit-text-fill-color:#A67C20 !important;

  font-size:15px !important;
}


/* =========================================================
   11. FINAL SUPPORT CTA
========================================================= */

.content-entry
.es-faq-page
.es-faq-page__support{
  padding:
    38px
    28px !important;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(185,147,50,.30),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #050505,
      #15120D
    ) !important;

  border:
    1px solid
    rgba(215,189,117,.34) !important;

  box-shadow:
    0 18px 46px
    rgba(0,0,0,.15) !important;
}


/* CTA heading */

.content-entry
.es-faq-page
.es-faq-page__support
h2{
  color:#FFFFFF !important;

  -webkit-text-fill-color:#FFFFFF !important;

  opacity:1 !important;

  font-size:
    clamp(26px,3vw,35px) !important;

  font-weight:900 !important;
}


/* CTA text */

.content-entry
.es-faq-page
.es-faq-page__support
p{
  color:
    rgba(255,255,255,.82) !important;

  -webkit-text-fill-color:
    rgba(255,255,255,.82) !important;
}


/* CTA button */

.content-entry
.es-faq-page
.es-faq-page__support-btn{
  color:#111 !important;

  -webkit-text-fill-color:#111 !important;

  background:
    linear-gradient(
      135deg,
      #E3C977,
      #B99332
    ) !important;

  font-size:13px !important;

  font-weight:900 !important;

  box-shadow:
    0 10px 27px
    rgba(185,147,50,.30) !important;
}


/* =========================================================
   12. HOVER POLISH
========================================================= */

@media(hover:hover) and (pointer:fine){

  .es-faq-page__nav a,
  .es-faq-page__item{
    transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
  }


  .es-faq-page__nav a:hover{
    transform:
      translateY(-3px);

    border-color:
      rgba(185,147,50,.48) !important;

    box-shadow:
      0 12px 28px
      rgba(0,0,0,.06) !important;
  }

}


/* =========================================================
   13. MOBILE
========================================================= */

@media(max-width:767px){

  .es-faq-page__container{
    width:
      calc(100% - 22px) !important;
  }


  .content-entry
  .es-faq-page
  .es-faq-page__hero{
    min-height:auto;

    padding:
      48px
      16px
      42px !important;
  }


  .content-entry
  .es-faq-page
  .es-faq-page__title{
    font-size:
      30px !important;
  }


  .content-entry
  .es-faq-page
  .es-faq-page__hero-text{
    font-size:
      14px !important;

    line-height:
      1.9 !important;
  }


  .es-faq-page__content{
    padding-top:
      28px !important;
  }


  .es-faq-page__intro,
  .es-faq-page__answer{
    padding:
      20px
      17px !important;

    border-radius:
      17px !important;
  }


  .es-faq-page__nav{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  .es-faq-page__nav a{
    min-height:
      64px !important;

    font-size:
      12px !important;
  }


  .content-entry
  .es-faq-page
  .es-faq-page__group
  h2{
    font-size:
      23px !important;
  }


  .content-entry
  .es-faq-page
  .es-faq-page__item
  summary{
    min-height:
      62px;

    padding:
      15px
      14px !important;

    font-size:
      13px !important;
  }


  .es-faq-page__response{
    padding:
      0
      14px
      17px !important;
  }


  .content-entry
  .es-faq-page
  .es-faq-page__response
  p,

  .content-entry
  .es-faq-page
  .es-faq-page__response
  li{
    font-size:
      13px !important;
  }


  .es-faq-page__support{
    padding:
      28px
      18px !important;
  }


  .es-faq-page__support-btn{
    width:100%;
  }

}


/* =========================================================
   14. ACCESSIBILITY
========================================================= */

.es-faq-page a:focus-visible,
.es-faq-page summary:focus-visible{
  outline:
    2px solid #B99332 !important;

  outline-offset:3px;
}


/* =========================================================
   15. REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .es-faq-page *,
  .es-faq-page *::before,
  .es-faq-page *::after{
    transition:none !important;
    animation:none !important;
  }

}