/* ==========================================================
   PACE FITNESS
   GLOBAL CSS
   PART 1 — FOUNDATION & HEADER
   Version: 2.0
========================================================== */

#main-links-2 .swiper-slide span.font-medium{

    font-weight:700 !important;

}





.root-level.has-children .sub-menu,
.root-level.has-children:hover .sub-menu {
  transition: none !important;
  animation: none !important;
}

.sub-menu {
  transition: none !important;
  animation: none !important;
}
.main-menu, .main-menu * {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}








/* ==========================================================================
   Bottom navbar with hover (desktop) / tap (mobile) dropdowns
   ========================================================================== */

.pff-bottom-nav {
  background: #111;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  position: relative;
  z-index: 30;
}

.pff-bottom-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 12px;
  list-style: none;
}

.pff-bottom-nav-list > li {
  position: relative;
}

.pff-bottom-nav-list > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.pff-bottom-nav-list > li > a:hover {
  color: #AFFA01;
}

.pff-dropdown-toggle {
  font-size: 12px;
  transition: transform 0.2s ease;
  pointer-events: none; /* the whole trigger area is clickable; toggle behavior handled via JS on the icon specifically on touch */
}

/* Re-enable pointer events on the icon itself for the JS tap-toggle */
.pff-dropdown.pff-touch-mode .pff-dropdown-toggle {
  pointer-events: auto;
  padding: 4px;
  margin: -4px;
}

.pff-dropdown.open > a .pff-dropdown-toggle,
.pff-dropdown:hover .pff-dropdown-toggle {
  transform: rotate(180deg);
}

/* ---------- Dropdown panel ---------- */

.pff-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 8px;
  z-index: 40;
}

.pff-dropdown:hover .pff-dropdown-menu,
.pff-dropdown.open .pff-dropdown-menu {
  display: block;
}

.pff-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.pff-dropdown-menu a:hover {
  background: #f5f5f5;
  color: #7ea300;
}

/* ---------- Bilingual show/hide (matches site convention) ---------- */

.lang-en {
  display: inline;
}
.lang-ar {
  display: none;
}

html[lang="ar"] .lang-en {
  display: none;
}
html[lang="ar"] .lang-ar {
  display: inline;
}

/* ---------- Mobile ---------- */

@media (max-width: 992px) {
  .pff-bottom-nav-list {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pff-bottom-nav-list::-webkit-scrollbar {
    display: none;
  }

  .pff-bottom-nav-list > li > a {
    padding: 12px 12px;
    font-size: 13px;
  }

  .pff-dropdown-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    background: #fafafa;
    margin-top: 4px;
    display: none;
  }

  .pff-dropdown.open .pff-dropdown-menu {
    display: block;
  }
}










/* ==========================================================
   PACE FITNESS
   CATEGORY ICONS
========================================================== */

.pff-category-icons{

    background:#ffffff;

    padding:40px 0;

}

.pff-category-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:30px;

    align-items:start;

}

.pff-category-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-decoration:none;

    transition:.3s ease;

}

.pff-category-item:hover{

    transform:translateY(-6px);

}

.pff-category-item img{

    width:130px;

    height:130px;

    border-radius:50%;

    object-fit:cover;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    transition:.3s ease;

}

.pff-category-item:hover img{

    transform:scale(1.06);

}

.pff-category-item span{

    margin-top:18px;

    text-align:center;

    color:#000000;

    font-size:18px;

    font-weight:700;

    line-height:1.3;

}

html[dir="rtl"] .pff-category-item span{

    font-family:"Noto Sans Arabic",sans-serif;

}

html[dir="ltr"] .pff-category-item span{

    font-family:"Roboto",sans-serif;

}

/* ==========================================
   Tablet
========================================== */

@media(max-width:992px){

    .pff-category-grid{

        gap:18px;

    }

    .pff-category-item img{

        width:90px;

        height:90px;

    }

    .pff-category-item span{

        font-size:14px;

        margin-top:12px;

    }

}

/* ==========================================
   Mobile
========================================== */

@media(max-width:768px){

    .pff-category-icons{

        padding:24px 0;

    }

    .pff-category-grid{

        grid-template-columns:repeat(5,1fr);

        gap:10px;

    }

    .pff-category-item img{

        width:62px;

        height:62px;

    }

    .pff-category-item span{

        font-size:12px;

        margin-top:10px;

    }

}

/* ==========================================
   Small Phones
========================================== */

@media(max-width:400px){

    .pff-category-grid{

        gap:8px;

    }

    .pff-category-item img{

        width:54px;

        height:54px;

    }

    .pff-category-item span{

        font-size:11px;

    }

}










/* ==========================================================================
   Custom menu styling — mobile accordion + desktop dropdown
   Uses the site's neon-green brand accent (#affa01) for active/hover states
   ========================================================================== */

/* ---------- Mobile accordion ---------- */
#mobile-menu ul.main-menu > li.lg\:hidden {
  border-bottom: 1px solid #eee;
}

#mobile-menu ul.main-menu > li.lg\:hidden > span,
#mobile-menu ul.main-menu > li.lg\:hidden > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  cursor: pointer;
}

#mobile-menu ul.main-menu > li.lg\:hidden > span:hover,
#mobile-menu ul.main-menu > li.lg\:hidden > a:hover {
  color: #7ea300; /* darker shade of the brand green, readable on white */
}

#mobile-menu ul.main-menu li ul {
  padding-inline-start: 16px;
  background: #fafafa;
}

#mobile-menu ul.main-menu li ul li a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #555;
  text-decoration: none;
}

#mobile-menu ul.main-menu li ul li a:hover {
  color: #7ea300;
}

/* Nested (sub-sub) items: still bold, slightly more indent */
#mobile-menu ul.main-menu li ul li ul li a {
  font-weight: 700;
  font-size: 13px;
  color: #777;
  padding-inline-start: 28px;
}

/* Safety net: keep accordion panels from rendering outside the
   viewport if the panel-slider library's cached positioning drifts
   out of sync with the DOM after a script mutates it */
#mobile-menu,
#mobile-menu .mm-spn,
#mobile-menu ul.main-menu,
#mobile-menu ul.main-menu li ul {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Force the accordion to always compute panel positions in LTR mode,
   even on Arabic pages — the theme's RTL panel math pushes
   subcategories off-screen, but LTR positions them correctly.
   Arabic text itself stays right-aligned and right-to-left below. */
#mobile-menu {
  direction: ltr !important;
}

#mobile-menu span,
#mobile-menu a,
#mobile-menu [data-mm-spn-title] {
  direction: rtl;
  text-align: right;
}

/* ---------- Desktop dropdown ---------- */
li.root-level {
  position: relative;
}

li.root-level > a {
  display: inline-block;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  transition: color 0.15s ease;
}

li.root-level > a:hover {
  color: #7ea300;
}

li.root-level.has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-inline-start: 6px;
  transition: transform 0.15s ease;
}

li.root-level.has-children:hover > a::after {
  transform: rotate(225deg);
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  z-index: 40;
}

li.root-level.has-children:hover > .sub-menu {
  display: block;
}

.sub-menu ul li a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  white-space: nowrap;
}

.sub-menu ul li a:hover {
  color: #7ea300;
  background: #fafafa;
}

/* Nested (sub-sub) dropdown items */
.sub-menu ul li .sub-menu {
  top: 0;
  inset-inline-start: 100%;
}



/* ==========================================================
   Prevent submenu flicker
========================================================== */

li.root-level{

    position:relative;

}

li.root-level::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:100%;

    height:12px;

    background:transparent;

}

.sub-menu{

    margin-top:0 !important;

    top:calc(100% + 2px) !important;

    z-index:9999;

}






/* ==========================================================
   TU Categories - Compact Icons
========================================================== */

/* Disable Swiper transform */
.TU-categories .swiper-wrapper{

    display:grid !important;

    grid-template-columns:repeat(5,1fr);

    gap:16px;

    transform:none !important;
    width:100% !important;

}

/* Cancel Swiper slide sizing */
.TU-categories .swiper-slide{

    width:auto !important;
    margin:0 !important;
    height:auto !important;

}

/* Remove ALL card styling */
.TU-categories .category-card-hover{

    background:transparent !important;
    background-image:none !important;

    min-height:unset !important;
    height:auto !important;
    max-height:none !important;

    padding:0 !important;

    box-shadow:none !important;
    border:none !important;

}

/* Remove fixed square wrapper */
.TU-categories .category-image-wrapper{

    aspect-ratio:auto !important;

    min-height:unset !important;
    height:auto !important;

    display:flex;
    flex-direction:column;
    align-items:center;

}

/* Image */
.TU-categories .category-image-wrapper > div{

    position:relative !important;
    inset:auto !important;

    width:70px;
    height:70px;

    margin-bottom:10px;

    border-radius:50%;

    overflow:hidden;

}

.TU-categories .category-image-wrapper img{

    width:100%;
    height:100%;
    object-fit:cover;

    border-radius:50%;

}

/* Text */
.TU-categories .category-image-wrapper h4{

    position:static !important;

    margin:0;

    color:#AFFA01 !important;

    font-size:14px;

    font-weight:700;

    text-align:center;

}

/* Hide arrows */
.TU-categories .s-slider-block__title{

    display:none !important;

}

/* Mobile */
@media(max-width:768px){

    .TU-categories .swiper-wrapper{

        grid-template-columns:repeat(5,1fr);

        gap:10px;

    }

    .TU-categories .category-image-wrapper > div{

        width:54px;
        height:54px;

    }

    .TU-categories .category-image-wrapper h4{

        font-size:11px;

    }

}






/* ==========================================================================
   Custom menu styling — mobile accordion + desktop dropdown
   Uses the site's neon-green brand accent (#affa01) for active/hover states
   ========================================================================== */

/* ---------- Mobile accordion ---------- */
#mobile-menu ul.main-menu > li.lg\:hidden {
  border-bottom: 1px solid #eee;
}

#mobile-menu ul.main-menu > li.lg\:hidden > span,
#mobile-menu ul.main-menu > li.lg\:hidden > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  cursor: pointer;
}

#mobile-menu ul.main-menu > li.lg\:hidden > span:hover,
#mobile-menu ul.main-menu > li.lg\:hidden > a:hover {
  color: #7ea300; /* darker shade of the brand green, readable on white */
}

#mobile-menu ul.main-menu li ul {
  padding-inline-start: 16px;
  background: #fafafa;
}

#mobile-menu ul.main-menu li ul li a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
}

#mobile-menu ul.main-menu li ul li a:hover {
  color: #7ea300;
}

/* Nested (sub-sub) items get slightly more indent + lighter weight */
#mobile-menu ul.main-menu li ul li ul li a {
  font-weight: 400;
  font-size: 13px;
  color: #777;
  padding-inline-start: 28px;
}

/* ---------- Desktop dropdown ---------- */
li.root-level {
  position: relative;
}

li.root-level > a {
  display: inline-block;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  transition: color 0.15s ease;
}

li.root-level > a:hover {
  color: #7ea300;
}

li.root-level.has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-inline-start: 6px;
  transition: transform 0.15s ease;
}

li.root-level.has-children:hover > a::after {
  transform: rotate(225deg);
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  z-index: 40;
}

li.root-level.has-children:hover > .sub-menu {
  display: block;
}

.sub-menu ul li a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  white-space: nowrap;
}

.sub-menu ul li a:hover {
  color: #7ea300;
  background: #fafafa;
}

/* Nested (sub-sub) dropdown items */
.sub-menu ul li .sub-menu {
  top: 0;
  inset-inline-start: 100%;
}








#page-main-title{
    display:none !important;
}


/* ==========================================
   GLOBAL RESPONSIVE FIX
========================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
}

#app,
.app-inner,
main,
section,
.container{
    max-width:100%;
}

img,
video,
svg,
canvas,
iframe{
    max-width:100%;
    height:auto;
}

.swiper,
.swiper-wrapper{
    max-width:100%;
}

.flex{
    min-width:0;
}


@media (max-width:390px){
    .brand img{
        width:150px !important;
    }
}

@media (max-width:360px){
    .brand img{
        width:135px !important;
    }
}

@media (max-width:320px){
    .brand img{
        width:120px !important;
    }
}

@media (max-width:390px){
    .header-buttons button{
        font-size:13px;
        padding:8px 10px;
    }
}

@media (max-width:360px){
    .header-buttons button{
        font-size:12px;
        padding:6px 8px;
    }
}


/* ==========================================
   MOBILE HEADER
========================================== */

/* ==========================================================================
   Mobile header layout fix
   - Shrinks the logo on phone
   - Centers the language switcher between logo and menu
   - Pins the hamburger menu to the right edge (physically right on
     both English and Arabic pages, not just "trailing edge")
   ========================================================================== */

@media (max-width: 992px) {

  .row-start-2.md\:row-start-1.md\:col-start-1 {
    display: flex !important;
    align-items: center;
    width: 100%;
  }

  /* Cart bubble (if shown) stays at the start */
  .row-start-2.md\:row-start-1.md\:col-start-1 .hidden_cart {
    order: 1;
    flex-shrink: 0;
  }

  /* Logo: smaller on phone, no longer pushes everything else around */
  .row-start-2.md\:row-start-1.md\:col-start-1 .brand {
    order: 2;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0;
  }

  .row-start-2.md\:row-start-1.md\:col-start-1 .brand img {
    width: 90px !important;   /* adjust this value to taste */
    height: auto !important;
  }

  /* Language switcher: centered in the remaining space */
  .row-start-2.md\:row-start-1.md\:col-start-1 .header-buttons {
    order: 3;
    margin-left: auto !important;
    margin-right: auto !important;
    flex-shrink: 0;
  }

  /* Hamburger menu button: pinned to the row's end */
  .row-start-2.md\:row-start-1.md\:col-start-1 .rtl\:ml-2,
  .row-start-2.md\:row-start-1.md\:col-start-1 .ltr\:mr-2 {
    order: 4;
    margin-inline-start: 0 !important;
    flex-shrink: 0;
  }
}




/* ==========================================
   SEARCH POPUP
========================================== */

.s-search-container{

    margin-top:100px !important;

}






.pff-repair-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.pff-repair-banner{
    width:100%;
    height:220px;          /* Mobile */
    object-fit:cover;
    display:block;
}

@media (min-width: 992px){

    .pff-repair-banner{
        height:360px;      /* Desktop */
    }

}

.pff-repair-content{
    padding:24px;
}

.pff-repair-content h3{
    font-size:26px;
    font-weight:700;
    margin-bottom:12px;
}

.pff-repair-content p{
    font-size:16px;
    line-height:1.7;
    color:#666;
    margin-bottom:20px;
}

.pff-repair-call{
    display:inline-block;
    padding:12px 22px;
    background:#AFFA01;
    color:#000;
    font-weight:700;
    border-radius:999px;
    text-decoration:none;
    transition:.3s;
}

.pff-repair-call:hover{
    transform:translateY(-2px);
    background:#C8FF00;
}






.pff-social-whatsapp{

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#25D366;
    color:#fff;

    font-size:22px;

    transition:.3s ease;

}

.pff-social-whatsapp:hover{

    transform:translateY(-3px);
    background:#1EBE5B;

}




.s-product-card-content-title,
.s-product-card-content-title a {
  display: block;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  height: auto !important;
  min-height: 0 !important;
}
.s-products-list-wrapper {
  align-items: stretch;
}

.s-product-card-entry {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.s-product-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.s-product-card-content-footer {
  margin-top: auto;
}


/* Desktop */
body .s-products-list .s-product-card-content-title,
body .s-products-list .s-product-card-content-title a {
  font-size: 14px !important;
}

/* Mobile override */
@media (max-width: 992px) {
  body .s-products-list .s-product-card-content-title,
  body .s-products-list .s-product-card-content-title a {
    font-size: 13px !important;
  }
}




/* ==========================================
   FOLLOW US
========================================== */

.pace-social-section{

    background:#ffffff;

    padding:60px 20px;

    border-top:1px solid #f1f1f1;

    border-bottom:1px solid #f1f1f1;

}

.pace-social-content{

    max-width:700px;

    margin:auto;

    text-align:center;

}

.pace-social-content h2{

    font-size:34px;

    font-weight:700;

    color:#111;

    margin-bottom:12px;

}

.pace-social-content p{

    font-size:16px;

    color:#666;

    line-height:1.7;

    margin-bottom:30px;

}

.pace-social-icons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}

.pace-social-icons a{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #e5e5e5;

    border-radius:50%;

    background:#fff;

    color:#111;

    font-size:24px;

    transition:.3s;

}

.pace-social-icons a:hover{

    background:#AFFA01;

    color:#000;

    border-color:#AFFA01;

    transform:translateY(-5px);

}








.language-banner{
    position: relative;
}


#viewed-section {
  display: none !important;
}

.TU-categories-1 .category-card-hover h4.text-primary {
  font-weight: 700 !important;
}


.s-localization-modal-input{
    appearance:auto !important;
    -webkit-appearance:radio !important;
    accent-color:#AFFA01 !important;
}

/* OK Button */
.s-localization-modal-inner .s-button-primary{

    background:#AFFA01 !important;
    border-color:#AFFA01 !important;
    color:#000 !important;

}

.language-banner img{
    width:100%;
    display:block;
}

.language-banner .banner-hidden{
    display:none !important;
}
/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --pf-primary:#AFFA01;
    --pf-primary-hover:#C8FF00;

    --pf-black:#000;
    --pf-dark:#111;
    --pf-white:#fff;

    --pf-radius:12px;
    --pf-radius-pill:999px;

    --pf-transition:.30s ease;

}



/* ==========================================================
   GLOBAL FIXES
========================================================== */

html,
body{

    overflow-x:hidden;

}

img{

    max-width:100%;
    height:auto;

}
html,
body{
    overflow-x:hidden !important;
}
    .mm-ocd--open{
        z-index:99999 !important;
    }
.container{
    overflow-x:hidden;
}
salla-slider[id^="categories-slider"] .swiper-slide{
    width:unset !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* ==========================================================
   REMOVE GAP BELOW HEADER
========================================================== */

.s-block--bundle-html-content,
.s-block-html-content{

    margin-top:0 !important;
    padding-top:0 !important;

}



/* ==========================================================
   HEADER
========================================================== */

.store-header{

    position:relative;
    z-index:999;

}


/* ==========================================================
   DESKTOP NAVBAR BACKGROUND
========================================================== */

@media (min-width:993px){

    #mainnav,
    #mainnav .inner{

        background-image:url("https://cdn.files.salla.network/homepage/1133464509/5b49a1f0-83c8-4cf4-9a25-b4a789195b3d_1440x60.webp");

        background-position:center;
        background-repeat:no-repeat;
        background-size:cover;
        background-color:#000;

    }

    #mainnav::before{

        content:"";
        position:absolute;
        inset:0;
        background:rgba(0,0,0,.15);
        pointer-events:none;

    }

}

/* Desktop only */
@media (min-width: 993px) {

    .mm-spn{
        top: 88px !important;      /* Match your header height */
        height: calc(100vh - 88px) !important;
    }

}
/* Desktop */
@media (min-width: 993px){

    .mm-ocd--open{
        z-index:99999 !important;
    }

    #mobile-menu{
        top:72px !important;      /* Adjust to your header height */
        height:calc(100vh - 72px) !important;
    }

}
/* ==========================================================
   MOBILE NAVBAR
========================================================== */

@media (max-width:992px){

    #mainnav,
    #mainnav .inner{

        background:#000 !important;
        background-image:none !important;

    }

    #mainnav::before{

        display:none !important;

    }

}


/* Overlay */

#mainnav::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.15);

    pointer-events:none;

}



/* ==========================================================
   DESKTOP HEADER
========================================================== */

@media (min-width:993px){

    #mainnav{

        min-height:88px;

    }

    #mainnav .container{

        padding:10px 20px;

    }

}



/* ==========================================================
   MOBILE HEADER
========================================================== */

@media (max-width:992px){

    #mainnav{

        height:auto !important;

        min-height:64px !important;

    }

    #mainnav .container{

        padding:8px 12px !important;

    }

    #mainnav .grid{

        display:flex !important;

        align-items:center !important;

        justify-content:space-between !important;

        gap:10px !important;

    }

    #mainnav .row-start-2,
    #mainnav .md\:row-start-1{

        grid-row:auto !important;

    }

}



/* ==========================================================
   LEFT HEADER
========================================================== */

#mainnav .justify-start{

    display:flex;

    align-items:center;

    gap:10px;

}



/* ==========================================================
   RIGHT HEADER
========================================================== */

#mainnav .hidden_right{

    display:flex;

    align-items:center;

    gap:8px;

}



/* ==========================================================
   LOGO
========================================================== */

.brand{

    background:none !important;

    border:none !important;

    box-shadow:none !important;

    padding:0 !important;

}

/* Hide WhatsApp floating button */
a.wa-s-n{
    display: none !important;
}

/* Desktop */

@media (min-width:993px){

    .brand img{

    display:block !important;

    }

}

/* Mobile */
@media (max-width:992px){

    .navbar-brand img{
        max-width: 220px !important;   /* Change to any size */
        width: 220px !important;
        max-height: none !important;
        height: auto !important;
    }

}


/* Mobile */

@media (max-width:992px){

    .brand{

        width:auto;

        height:auto;

    }

    .brand img{

        display:block !important;

        width:180px !important;

    }

}



/* ==========================================================
   MENU BUTTON
========================================================== */

.rtl\:ml-2,
.ltr\:mr-2{

    border:none;

    box-shadow:none;

}



@media (max-width:992px){

    .rtl\:ml-2,
    .ltr\:mr-2{

        width:42px !important;

        height:42px !important;

        display:flex;

        align-items:center;

        justify-content:center;

        padding:0 !important;

    }

}



/* ==========================================================
   HEADER ICONS
========================================================== */

.cart,
.hidden_cart,
.whishlist{

    transition:var(--pf-transition);

}



/* ==========================================================
   LANGUAGE SWITCHER
========================================================== */

.header-buttons{

    display:flex;

    align-items:center;

}



.header-buttons button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:42px;

    padding:0 14px;

    border-radius:12px;

    background:#111;

    color:#fff;

    border:1px solid rgba(255,255,255,.12);

    transition:.3s;

}



/* Hide SAR */

.header-buttons .sicon-sar{

    display:none;

}



/* Hide separator */

.header-buttons .mx-1\\.5{

    display:none;

}



/* Globe */

.header-buttons button::before{

    content:"🌐";

}



/* Arrow */

.header-buttons button::after{

    content:"⌄";

    opacity:.6;

}



/* Hover */

.header-buttons button:hover{

    border-color:var(--pf-primary);

    color:var(--pf-primary);

}



/* ==========================================================
   MOBILE HEADER
========================================================== */

@media (max-width:992px){

    .hidden_cart,
    .whishlist,
    .header-btn{

        display:none !important;

    }

}




/* ==========================================================
   PART 2
   HOMEPAGE + PRODUCT CARDS
========================================================== */



/* ==========================================================
   CATEGORY ICONS
========================================================== */

.s-block--categories .slide--cat-entry i{

    color:var(--pf-primary) !important;
    transition:.3s;

}

.s-block--categories .slide--cat-entry:hover i{

    transform:scale(1.08);

}



/* ==========================================================
   CATEGORY CARD
========================================================== */

.s-block--categories .slide--cat-entry{

    transition:.3s;

}

.s-block--categories .slide--cat-entry:hover{

    transform:translateY(-4px);

}



/* ==========================================================
   HOMEPAGE SECTIONS
========================================================== */

section{

    position:relative;

}



/* Space between sections */

section:not(:first-child){

    margin-top:18px;

}



/* ==========================================================
   PRODUCT CARD
========================================================== */

.s-product-card-entry{

    border-radius:18px;

    overflow:hidden;

    transition:.35s ease;

    background:#fff;

}

.s-product-card-entry:hover{

    transform:translateY(-6px);

    box-shadow:

        0 18px 45px rgba(0,0,0,.12);

}



/* ==========================================================
   PRODUCT IMAGE
========================================================== */

.s-product-card-image{

    overflow:hidden;

}

.s-product-card-image img{

    transition:.45s;

}

.s-product-card-entry:hover img{

    transform:scale(1.05);

}



/* ==========================================================
   PRODUCT TITLE
========================================================== */

.s-product-card-content-title,
.s-product-card-content-title a,
.s-product-card-content-title *{

    color:#000 !important;

    transition:.3s;

    font-weight:700;

}

.s-product-card-entry:hover
.s-product-card-content-title{

    color:#000 !important;

}



/* ==========================================================
   PRODUCT DESCRIPTION
========================================================== */

.s-product-card-content-subtitle{

    opacity:.75;

}



/* ==========================================================
   PRICE TAG
========================================================== */

.s-product-card-price,
.s-product-card-sale-price h4{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:7px 16px;

    border-radius:999px;

    background:#000;

    color:var(--pf-primary)!important;

    font-weight:700;

    transition:.3s;

    box-shadow:

        0 8px 22px rgba(0,0,0,.15);

}



.s-product-card-price *,
.s-product-card-sale-price h4 *{

    color:var(--pf-primary)!important;

}



/* Hover */

.s-product-card-entry:hover
.s-product-card-price,

.s-product-card-entry:hover
.s-product-card-sale-price h4{

    background:var(--pf-primary);

    color:#000!important;

}



.s-product-card-entry:hover
.s-product-card-price *,

.s-product-card-entry:hover
.s-product-card-sale-price h4 *{

    color:#000!important;

}



/* ==========================================================
   PRODUCT BADGES
========================================================== */

.s-product-card-sale-badge,
.s-product-card-status{

    border-radius:999px;

    font-weight:700;

}



/* ==========================================================
   ADD TO CART
========================================================== */

.s-product-card-btn{

    border-radius:999px;

    transition:.3s;

}

.s-product-card-btn:hover{

    transform:translateY(-2px);

}



/* ==========================================================
   CARD ACTIONS
========================================================== */

.s-product-card-wishlist{

    transition:.3s;

}

.s-product-card-wishlist:hover{

    transform:scale(1.15);

}



/* ==========================================================
   BUTTONS
========================================================== */

button,
.btn,
a.button{

    transition:.3s;

}



/* ==========================================================
   SHOW MORE BUTTON
========================================================== */

.pf-show-more{

    display:flex;

    justify-content:center;

    margin:40px 0;

}

.pf-show-more a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 36px;

    border-radius:999px;

    background:var(--pf-primary);

    color:#111;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

    box-shadow:

        0 10px 30px rgba(175,250,1,.25);

}

.pf-show-more a:hover{

    background:var(--pf-primary-hover);

    transform:translateY(-3px);

    box-shadow:

        0 18px 45px rgba(175,250,1,.45);

}

.pf-arrow{

    transition:.3s;

}

.pf-show-more a:hover
.pf-arrow{

    transform:translateX(6px);

}



/* RTL */

html[lang="ar"] .pf-show-more a{

    flex-direction:row-reverse;

}

html[lang="ar"] .pf-show-more a:hover
.pf-arrow{

    transform:translateX(-6px);

}


/* ==========================================================
   PART 3
   PRODUCT PAGE
========================================================== */



/* ==========================================================
   PRODUCT LAYOUT
========================================================== */

.product-entry{

    padding:30px 0;

}

.product-entry .grid{

    gap:40px;

}



/* ==========================================================
   PRODUCT TITLE
========================================================== */

.product-entry h1{

    font-size:clamp(28px,4vw,42px);

    font-weight:800;

    color:#111;

    line-height:1.2;

}



/* ==========================================================
   PRODUCT PRICE
========================================================== */

.product-entry h2.text-dark-primary,
.product-form h2.text-dark-primary,
.product-details h2.text-dark-primary{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 22px;

    border-radius:999px;

    background:#000;

    color:var(--pf-primary)!important;

    font-weight:700;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

}

.product-entry h2.text-dark-primary *,
.product-form h2.text-dark-primary *,
.product-details h2.text-dark-primary *{

    color:var(--pf-primary)!important;

}



/* ==========================================================
   PRODUCT GALLERY
========================================================== */

.s-product-image{

    border-radius:20px;

    overflow:hidden;

}

.s-product-image img{

    transition:.4s;

}

.s-product-image:hover img{

    transform:scale(1.03);

}



/* ==========================================================
   THUMBNAILS
========================================================== */

.s-product-thumb{

    border-radius:14px;

    overflow:hidden;

    transition:.3s;

}

.s-product-thumb:hover{

    transform:translateY(-2px);

}



/* ==========================================================
   QUANTITY SELECTOR
========================================================== */

.quantity-input,

.quantity-selector{

    border-radius:999px;

    overflow:hidden;

}

.quantity-selector button{

    transition:.3s;

}



/* ==========================================================
   ADD TO CART
========================================================== */

.product-form button[type="submit"],

.btn--add-to-cart{

    background:var(--pf-primary);

    color:#111;

    border-radius:999px;

    font-weight:700;

    transition:.3s;

}

.product-form button[type="submit"]:hover,

.btn--add-to-cart:hover{

    background:var(--pf-primary-hover);

    transform:translateY(-2px);

    box-shadow:0 14px 35px rgba(175,250,1,.35);

}



/* ==========================================================
   BUY NOW
========================================================== */

.btn--buy-now{

    border-radius:999px;

}



/* ==========================================================
   PRODUCT INFORMATION
========================================================== */

.product-details{

    line-height:1.8;

}

.product-details p{

    color:#555;

}



/* ==========================================================
   PRODUCT TABS
========================================================== */

.tabs__nav button{

    border-radius:999px;

    transition:.3s;

}

.tabs__nav button.active{

    background:var(--pf-primary);

    color:#111;

}



/* ==========================================================
   RELATED PRODUCTS
========================================================== */

.related-products{

    margin-top:60px;

}



/* ==========================================================
   SEARCH POPUP
========================================================== */

.search-container{

    border-radius:18px;

}



/* ==========================================================
   WISHLIST
========================================================== */

.s-product-wishlist{

    transition:.3s;

}

.s-product-wishlist:hover{

    transform:scale(1.15);

}



/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:992px){

    .product-entry{

        padding:20px 0;

    }

    .product-entry .grid{

        gap:25px;

    }

    .product-entry h1{

        font-size:28px;

    }

}



/* ==========================================================
   MOBILE STICKY ADD TO CART
========================================================== */

@media(max-width:992px){

    .product-form{

        position:sticky;

        bottom:0;

        background:#fff;

        padding:12px;

        z-index:50;

        box-shadow:0 -10px 30px rgba(0,0,0,.08);

    }

}



/* ==========================================================
   PART 4
   FOOTER + UTILITIES
========================================================== */


/* ==========================================================
   HIDE DEFAULT FOOTER
========================================================== */

.store-footer{
    display:none !important;
}


/* ==========================================================
   BILINGUAL SUPPORT
========================================================== */

/* Default Language */

.lang-en{
    display:inline !important;
}

.lang-ar{
    display:none !important;
}

/* Arabic */

html[lang="ar"] .lang-en{
    display:none !important;
}

html[lang="ar"] .lang-ar{
    display:inline !important;
}

/* English */

html:not([lang="ar"]) .lang-en{
    display:inline !important;
}

html:not([lang="ar"]) .lang-ar{
    display:none !important;
}



/* ==========================================================
   RTL / LTR
========================================================== */

html[lang="ar"]{

    direction:rtl;

}

html:not([lang="ar"]){

    direction:ltr;

}



/* Description */

html[lang="ar"] .pf-description{

    direction:rtl;
    text-align:right;

}

html:not([lang="ar"]) .pf-description{

    direction:ltr;
    text-align:left;

}



/* Columns */

html[lang="ar"] .pf-column{

    direction:rtl;
    text-align:right;

}

html:not([lang="ar"]) .pf-column{

    direction:ltr;
    text-align:left;

}



/* Contact */

html[lang="ar"] .pf-contact-card{

    direction:rtl;

}

html:not([lang="ar"]) .pf-contact-card{

    direction:ltr;

}



/* ==========================================================
   FOOTER LINKS
========================================================== */

.pff-footer a{

    transition:.3s;

}

.pff-footer a:hover{

    color:var(--pf-primary);

}



/* ==========================================================
   FOOTER ICONS
========================================================== */

.pff-contact-icon{

    transition:.3s;

}

.pff-contact-card:hover .pff-contact-icon{

    transform:scale(1.08);

}



/* ==========================================================
   SOCIAL ICONS
========================================================== */

.pff-social a{

    transition:.3s;

}

.pff-social a:hover{

    transform:translateY(-3px);

}



/* ==========================================================
   PAYMENT ICONS
========================================================== */

.pff-payments img{

    transition:.3s;

}

.pff-payments img:hover{

    transform:translateY(-2px);

}



/* ==========================================================
   IMAGE ANIMATIONS
========================================================== */

img{

    transition:.35s;

}



/* ==========================================================
   LINKS
========================================================== */

a{

    transition:.3s;

}



/* ==========================================================
   BUTTONS
========================================================== */

button{

    transition:.3s;

}



/* ==========================================================
   INPUTS
========================================================== */

input,
textarea,
select{

    border-radius:12px;

}



/* ==========================================================
   FOCUS
========================================================== */

input:focus,
textarea:focus,
select:focus,
button:focus{

    outline:none;

}



/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#f5f5f5;

}

::-webkit-scrollbar-thumb{

    background:#bbb;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--pf-primary);

}



/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:var(--pf-primary);

    color:#111;

}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    .desktop-only{

        display:none !important;

    }

}



@media(min-width:993px){

    .mobile-only{

        display:none !important;

    }

}



/* ==========================================================
   UTILITIES
========================================================== */

.text-primary{

    color:var(--pf-primary)!important;

}

.bg-primary{

    background:var(--pf-primary)!important;

}

.rounded{

    border-radius:12px;

}

.rounded-pill{

    border-radius:999px;

}



/* ==========================================================
   PERFORMANCE
========================================================== */

*{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

/* ==========================================
   CATEGORY GRID (NO SLIDER)
========================================== */

/* Works with any categories slider */
salla-slider[id^="categories-slider"] .swiper{
    overflow:hidden !important;
    width:100% !important;
}

salla-slider[id^="categories-slider"] .swiper-wrapper{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    width:100% !important;
    transform:none !important;
    margin:0 !important;
    padding:0 !important;
}

/* Each category */
salla-slider[id^="categories-slider"] .swiper-slide{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    flex:none !important;
    height:auto !important;
}

/* Hide slider controls */
salla-slider[id^="categories-slider"] .swiper-button-next,
salla-slider[id^="categories-slider"] .swiper-button-prev,
salla-slider[id^="categories-slider"] .swiper-pagination{
    display:none !important;
}

/* Desktop */
@media (min-width:993px){

    salla-slider[id^="categories-slider"] .swiper-wrapper{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:20px;
    }

}


@media (max-width: 992px) {

    .wa-s-n{
        bottom: 90px !important;
    }

}




/* STC Pay - keep it slightly smaller but sharper */
.pff-payments img[alt="STC Pay"]{
    height: 20px !important;
    width: auto !important;
    object-fit: contain;
}

@media (max-width: 992px) {
    .pf-menu-item{
        font-size: 15px !important; /* Increase from 13px */
    }
}
@media (max-width: 992px) {
    .s-product-card-content-title,
    .s-product-card-content-title a{
        font-size: 16px !important;
    }
}
@media (max-width: 992px) {
    .pff-footer{
        font-size: 16px;
    }
}

/* ===========================
   Desktop Header Layout
=========================== */
@media (min-width: 993px) {




    /* Hide mobile cart on desktop */
    .row-start-2.md\:row-start-1.md\:col-start-1 .hidden_cart{
        display:none !important;
    }

    /* Language stays after logo */
    .row-start-2.md\:row-start-1.md\:col-start-1 .header-buttons{
        order:2;
        margin-left:24px;
    }

    /* Menu stays after language */
    .row-start-2.md\:row-start-1.md\:col-start-1 .rtl\:ml-2,
    .row-start-2.md\:row-start-1.md\:col-start-1 .ltr\:mr-2{
        order:3;
        margin-left:16px;
        margin-right:0 !important;
    }

    /* Right icons remain on far right */
    .hidden_right{
        margin-left:auto;
        display:flex !important;
        align-items:center;
        justify-content:flex-end;
        gap:12px;
    }
}

/* ==========================================
   CATEGORY GRID (NO SLIDER)
========================================== */

/* Remove slider behaviour */
salla-slider[id^="categories-slider"] .swiper{
    overflow: visible !important;
}

salla-slider[id^="categories-slider"] .swiper-wrapper{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    transform: none !important;
    width: 100% !important;
}

/* Category item */
salla-slider[id^="categories-slider"] .swiper-slide{
    width: 100% !important;
    margin: 0 !important;
    flex: none !important;
    height: auto !important;
}

/* Hide slider controls */
salla-slider[id^="categories-slider"] .swiper-button-next,
salla-slider[id^="categories-slider"] .swiper-button-prev,
salla-slider[id^="categories-slider"] .swiper-pagination{
    display: none !important;
}

/* Desktop */
@media (min-width:993px){

    salla-slider[id^="categories-slider"] .swiper-wrapper{
        grid-template-columns: repeat(4,1fr);
        gap:20px;
    }

}

/* ==========================================
   REMOVE SWIPER SIDE PADDING
========================================== */

/* LTR */
.carousel-slider .swiper[dir="ltr"],
.carousel-slider .swiper:where([dir="ltr"], [dir="ltr"] *){
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* RTL */
.carousel-slider .swiper[dir="rtl"],
.carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *){
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Before hydration */
salla-slider[type]:not(.hydrated) > div,
salla-slider[type]:not(.hydrated) .swiper > div > div{
    padding-right: 0 !important;
    padding-left: 0 !important;
}
/* ==========================================================
   END OF FILE
========================================================== */