/* Add custom CSS styles below */ 
/* Header */
#mainnav {
    background: #296d78 !important;
}

/* DESKTOP ONLY - menu text */
@media (min-width: 1024px) {
    #mobile-menu .main-menu > li > a,
    #mobile-menu .main-menu > li > a span {
        color: #ffffff !important;
    }
}

/* Icons */
#mainnav svg,
#mainnav i {
    color: #ffffff !important;
}

#mainnav svg path {
    stroke: #ffffff !important;
}




@media (min-width: 1024px) {

  /* ===== 1) Hamburger button (circle, icon centered) ===== */
  .store-header [data-testid="store-header-mobile-toggle"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background .2s ease;
  }
  .store-header [data-testid="store-header-mobile-toggle"] i,
  .store-header [data-testid="store-header-mobile-toggle"] .sicon-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 20px !important;
    color: #fff !important;
  }
  .store-header [data-testid="store-header-mobile-toggle"]::before,
  .store-header [data-testid="store-header-mobile-toggle"]::after {
    display: none !important;
  }
  .store-header [data-testid="store-header-mobile-toggle"]:hover {
    background: rgba(255,255,255,.15);
  }

  /* ===== 2) Drawer ===== */
  #mobile-menu {
    position: fixed !important;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 360px;
    max-width: 90vw;
    height: 100vh;
    background: #fff;
    z-index: 99999;
    overflow-y: auto;
    padding: 60px 20px 20px;
    display: block !important;
    box-shadow: 0 0 30px rgba(0,0,0,.2);
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  html[dir="rtl"] #mobile-menu { transform: translateX(100%); }
  #mobile-menu.is-open { transform: translateX(0) !important; }

  /* ===== 3) Vertical list inside the drawer ===== */
  #mobile-menu .main-menu {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #mobile-menu .main-menu li {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  #mobile-menu .main-menu a {
    display: block;
    padding: 12px 0;
  }

  /* Show mobile items, hide desktop duplicates */
  #mobile-menu .main-menu > li.lg\:hidden {
    display: block !important;
  }
  #mobile-menu .main-menu > li[data-menu-item] {
    display: none !important;
  }

  /* ===== 4) Link colours (override the old white !important rule) ===== */
  html body #mobile-menu .main-menu > li > a,
  html body #mobile-menu .main-menu > li > span,
  html body #mobile-menu .main-menu li a,
  html body #mobile-menu .main-menu li span {
    color: #1a6b7a !important;   /* your brand colour */
  }

  /* ===== 5) Sub-menus: static and indented ===== */
  #mobile-menu .main-menu ul,
  #mobile-menu .main-menu .sub-menu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    padding-inline-start: 15px !important;
    width: 100% !important;
  }

  /* ===== 6) Close button: always dark, even on hover/focus ===== */
  #mobile-menu .btn--close {
    display: block !important;
    position: absolute;
    top: 15px;
    inset-inline-end: 15px;
    font-size: 22px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  html body #mobile-menu .btn--close,
  html body #mobile-menu .btn--close::before,
  html body #mobile-menu .btn--close:hover,
  html body #mobile-menu .btn--close:hover::before,
  html body #mobile-menu .btn--close:focus,
  html body #mobile-menu .btn--close:focus::before,
  html body #mobile-menu .btn--close:active,
  html body #mobile-menu .btn--close:active::before {
    color: #1a6b7a !important;
    background: transparent !important;
  }
  html body #mobile-menu .btn--close:hover {
    opacity: .7;
  }

  /* ===== 7) Dark overlay behind the drawer ===== */
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
  }
  .menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}




body{
  background: white !important;
}

/* ========================================
   Header - Teal Background + White
======================================== */

/* خلفية الهيدر بالكامل */
/* .store-header,
.store-header .top-navbar,
.store-header #mainnav,
.store-header #mainnav .inner {
    background-color: #1A6C79 !important;
} */

/* ========================================
   كل النصوص والروابط
======================================== */
span.s-cart-summary-count {
  background-color:#fff !important ;
  border:1px solid ;
}
.store-header,
.store-header a,
.store-header span,
.store-header p,
.store-header b,
.store-header h1,
.store-header h2,
.store-header h3,
.store-header i,
.store-header button {
    color: #1a6b7a !important;
}

/* ========================================
   Top Navbar
======================================== */

.store-header .top-navbar {
    background-color: #1A6C79 !important;
}

.store-header .top-navbar a,
.store-header .top-navbar span {
    color: #ffffff !important;
}

/* ========================================
   البحث
======================================== */

.store-header .header-search,
.store-header .s-search-input-wrapper,
.store-header .s-search-placeholder-wrapper {
    background-color: transparent !important;
}

.store-header .s-search-input {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.store-header .s-search-input::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* أيقونة البحث */
.store-header .s-search-icon,
.store-header .s-search-icon svg,
.store-header .s-search-icon svg path {
    color: #1a6b7a !important;
    fill: #1a6b7a !important;
}

/* ========================================
   اللوجو
======================================== */

.store-header .navbar-brand {
    background: transparent !important;
}

.store-header .navbar-brand img {
    background: transparent !important;
}

/* ========================================
   القائمة الرئيسية
======================================== */


.store-header custom-main-menu,
.store-header custom-main-menu a,
.store-header custom-main-menu span,
.store-header custom-main-menu i {
    color: #1a6b7a !important;
}

/* ========================================
   أيقونات الهيدر
======================================== */

.store-header i,
.store-header svg,
.store-header svg path {
    color: #1a6b7a !important;
    fill: #1a6b7a !important;
}

/* ========================================
   حساب المستخدم
======================================== */

.store-header .s-user-menu-trigger,
.store-header .s-user-menu-trigger-content,
.store-header .s-user-menu-trigger-hello,
.store-header .s-user-menu-trigger-name,
.store-header .s-user-menu-trigger-icon {
    color: #1a6b7a !important;
}

.store-header .s-user-menu-trigger-icon svg,
.store-header .s-user-menu-trigger-icon svg path {
    fill: #1a6b7a !important;
}

/* ========================================
   السلة
======================================== */

.store-header .s-cart-summary-wrapper,
.store-header .s-cart-summary-content,
.store-header .s-cart-summary-total,
.store-header .s-cart-summary-count {
    color: #1a6b7a !important;
}

.store-header .s-cart-summary-icon,
.store-header .header-btn__icon {
    color: #1a6b7a !important;
}

.store-header .s-cart-summary-icon svg,
.store-header .s-cart-summary-icon svg path {
    fill: #1a6b7a !important;
}

/* ========================================
   التواصل
======================================== */

.store-header .s-contacts,
.store-header .s-contacts a,
.store-header .s-contacts span {
    color: #ffffff !important;
}

/* ========================================
   زر الموبايل
======================================== */

.store-header .mburger,
.store-header .mburger i,
.store-header .mburger .sicon-menu {
    color: #ffffff !important;
}

/* ========================================
   إزالة أي خلفية بيضاء من أجزاء الهيدر
======================================== */



/* ========================================
   Hover
======================================== */

.store-header a:hover,
.store-header button:hover,
.store-header i:hover {
    color: #ffffff !important;
}

/* منع تغيير لون الأيقونات عند Hover */
.store-header svg:hover,
.store-header svg path:hover {
    fill: #1a6b7a !important;
}
/**    silder block ***/
section.s-block.s-block--photos-slider {
    margin-top: 0;
}
section.s-block.s-block--photos-slider .swiper-slide {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
section.s-block.s-block--photos-slider .swiper-slide,
section.s-block.s-block--photos-slider .swiper-slide img {
    border-radius: 0 !important;
}
section.s-block.s-block--photos-slider .swiper.s-slider-container {
    padding: 0 !important;
}
.home-slider.photos-slider .s-slider-block__title-nav {
    display:none !important;
}
/** End silder block ***/
/** banners blocks ***/
section#IRT__photos-slider-0
{
    margin-bottom: 0 !important;
}
section.s-block.s-block--fixed-banner.wide-placeholder > .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: unset !important;
}
.banner--fixed img {
    border-radius: 0 !important;
}
/** End banners ***/

.square-photos-grid.square-photos-grid--equal-2{
  display: flex !important;
  justify-content:center !important;
  align-items:center !important;
}
.banner-entry.square-photos {
    padding: 0px !important;
      background: transparent !important;
}
.banner-entry.square-photos img{
    object-fit: contain !important;
}

/* Mobile فقط */
@media (max-width: 767px) {
    .square-photos-grid.square-photos-grid--equal-2{
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
}
}



/* ========================================
   Single Page 
======================================== */
/* إخفاء عدد مرات الشراء في صفحة المنتج */
.bg-white.py-2\.5.mb-5.rounded-md.inline-flex.text-sm {
    display: none !important;
}

/* ========================================
إالغاء تايتل السكاشن
======================================== */
section[component-id="77745988"] .s-block__title,
section[component-id="1417089099"] .s-block__title,
section[component-id="643579732"] .s-block__title,
section[component-id="1207861944"] .s-block__title
{
    display: none !important;
}

/* ========================================
   Footer - Solid Light Blue
======================================== */

.store-footer,
.store-footer__inner {
    background-color: #5B9BD5 !important;
    opacity: 1 !important;
}

/* إلغاء أي شفافية */
.store-footer,
.store-footer__inner,
.store-footer .container {
    opacity: 1 !important;
}

/* ========================================
   كل النصوص أبيض
======================================== */

.store-footer,
.store-footer p,
.store-footer span,
.store-footer b,
.store-footer h3,
.store-footer a,
.store-footer strong {
    color: #ffffff !important;
}

/* ========================================
   إزالة كلمة ستار من مكان اللوجو فقط
======================================== */

.store-footer > .store-footer__inner > .container > div:first-child > a h3 {
    display: none !important;
}

/* ========================================
   الروابط
======================================== */

.store-footer a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.store-footer a:hover {
    color: #ffffff !important;
}

/* ========================================
   الأيقونات
======================================== */






/* ========================================
   روابط التواصل
======================================== */

.store-footer .s-contacts-item,
.store-footer .unicode {
    color: #ffffff !important;
}

/* ========================================
   روابط مهمة
======================================== */

.store-footer .s-menu-footer-item {
    color: #ffffff !important;
}

/* ========================================
   السجل التجاري والرقم الضريبي
======================================== */

.store-footer .s-trust-badges-label,
.store-footer .s-trust-badges-number,
.store-footer .text-text-grey {
    color: #ffffff !important;
}

/* ========================================
   حقوق الطباعة
======================================== */

.store-footer .copyright-text,
.store-footer .copyright-text p,
.store-footer .copyright-text a {
    color: #ffffff !important;
}

/* ========================================
   الموبايل + التابلت
======================================== */
footer a[href*="instagram"] {
  background: linear-gradient(
    45deg,
    #f09433 0,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  color: white;
  rotate: 440deg;
}
footer a[href*="tiktok"] {
  background: black;
  color: white;
}
footer a[href*="snapchat"] {
  background: yellow;
  color: black;
}
.store-footer [title="youtube"] {
  background-color: #f60039;
}

footer a[href*="snapchat"] svg {
  fill: black;
}
@media (max-width: 1024px) {

    .store-footer,
    .store-footer__inner {
        background-color: #5B9BD5 !important;
        opacity: 1 !important;
    }

    .store-footer,
    .store-footer p,
    .store-footer span,
    .store-footer b,
    .store-footer h3,
    .store-footer a,
    .store-footer strong {
        color: #ffffff !important;
    }


}

@media (max-width: 992px) {

  footer * {
    justify-content:center;
    align-items:center;
    text-align:center;
}
  .main-nav-container span.s-cart-summary-count {
  background-color: white;
  color: #1a6b7a;
  border: 1px solid ;
}

i.sicon-menu.text-primary.text-2xl {
  color: #eb0000;
  border: 1px solid ;
  width: 40px !important;
  height: 40px;
  padding: 2px;
  overflow: hidden;
  position: relative;
  border-radius: 50px;
}

.sicon-menu:before {
  left: 50% !important;
  top: 50% !important;
  position: absolute;
  transform: translate(-50%, -50%);
}

.store-header .mburger, .store-header .mburger i, .store-header .mburger .sicon-menu {
    color: #1a6c79 !important;
}
}


button.s-button-element.s-button-btn {
    background: #296d78  !important;
    color:white !important;
}
.s-product-card-image{
    background: white !important;
}
.store-footer,.store-footer__inner{
    background: #296d78  !important;
}