/* =========================================================
   TOGA | Custom CSS
   الهوية: بترولي + رملي
========================================================= */

:root {
  --toga-primary: #0E3A3D;
  --toga-primary-dark: #08363C;
  --toga-primary-soft: #14535A;
  --toga-gold: #C49A5A;
  --toga-logo-color: #C49A5A;
  --toga-sand: #F3E7D1;
  --toga-bg: #F8F7F4;
  --toga-white: #FFFFFF;
  --toga-text: #1F2933;
  --toga-muted: #66777A;
  
}

/* =========================================================
   General
========================================================= */
 
.s-app-install-alert-wrapper {
  z-index: 125;
}

.h2hidd {
  font-size: 0.1px;
  visibility: hidden;
}

@media (min-width: 1024px) {
  .rtl\:lg\:mr-16:where([dir="rtl"], [dir="rtl"] *) {
    margin-right: 0rem;
  }

  .store-header {
    z-index: 9;
    min-height: 130px;
  }

  .s-app-install-alert-wrapper.open[position="bottom"] {
    display: none;
  }
}

/* =========================================================
   TOGA | Top Nav
========================================================= */

.top-nav.hidden.lg\:block {
  display: none;
}

@media (min-width: 1024px) {
  .top-nav.hidden.lg\:block {
    display: block;
  }

  .topnav-is-dark .top-nav,
  .top-nav {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    overflow: hidden !important;
    background: var(--toga-primary-dark) !important;
    border-bottom: 1px solid rgba(196, 154, 90, 0.26) !important;
    color: #ffffff !important;
    position: relative;
    z-index: 30;
  }
 

  .top-nav .right-side,
  .top-nav .left-side {
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .top-nav .left-side {
    justify-content: flex-end !important;
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 12px !important;
  }
 

  .top-nav .s-menu-topnav-item:not(:last-child)::after,
  .top-nav .topnav-link-item:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    width: 1px;
    height: 13px;
    background: rgba(243, 231, 209, 0.25);
    transform: translateY(-50%);
  }

  .top-nav .s-menu-topnav-item:hover,
  .top-nav .topnav-link-item:hover {
    color: var(--toga-gold) !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }
}

/* =========================================================
   TOGA | Header Mainbar
========================================================= */

.header-mainbar,
#header-mainbar.header-mainbar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(229, 231, 235, 0.9) !important;
  box-shadow: none !important;
}

#header-mainbar .inner {
  background: #ffffff !important;
}

@media (min-width: 1024px) {
  .header-mainbar .sides-wrap {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
  }

  .header-mainbar .search-bar {
    display: block;
    max-width: 100%;
  }
}

/* Logo */
#header-mainbar .navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--toga-logo-color) !important;
}

#header-mainbar .navbar-brand img {
  object-fit: contain !important;
}

#header-mainbar .navbar-brand svg,
#header-mainbar .navbar-brand svg path,
#header-mainbar .navbar-brand svg rect,
#header-mainbar .navbar-brand svg circle {
  fill: var(--toga-logo-color) !important;
  color: var(--toga-logo-color) !important;
}

/* Search */
.header-mainbar .search-bar,
#header-mainbar .search-bar {
  position: relative;
  z-index: 0;
  height: 37px;
  flex-grow: 1;
  border-radius: 40px;
  background-color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(196, 154, 90, 0.32) !important;
}

.header-mainbar .search-bar .s-search-input,
#header-mainbar .search-bar .s-search-input {
  height: 36px !important;
  max-height: 38px;
  font-size: 0.875rem;
  background-color: #ffffff !important;
  color: var(--toga-text) !important;
  border-radius: 10.5px;
  border: 1px solid rgba(229, 231, 235, 0.95) !important;
  --tw-border-opacity: 0;
}

#header-mainbar .search-bar .s-search-input::placeholder {
  color: var(--toga-muted) !important;
  opacity: 0.86 !important;
}

#header-mainbar .s-search-icon svg,
#header-mainbar .s-search-icon path {
  fill: var(--toga-primary) !important;
}

#header-mainbar .search-bar:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(196, 154, 90, 0.58),
    0 2px 8px rgba(14, 58, 61, 0.04) !important;
}

#header-mainbar .search-bar:focus-within .s-search-input {
  background: #ffffff !important;
  border-color: rgba(196, 154, 90, 0.45) !important;
}

/* Header Icons */
#header-mainbar .header-icon-button {
  color: var(--toga-primary) !important;
  border-color: rgba(14, 58, 61, 0.12) !important;
}

#header-mainbar .header-icon-button:hover {
  color: var(--toga-primary-dark) !important;
}

#header-mainbar .header-icon-button i,
#header-mainbar .header-icon-button .icon {
  color: var(--toga-primary) !important;
}

/* Login */
#header-mainbar .login-button .text span:first-child {
  color: var(--toga-text) !important;
  font-weight: 600 !important;
}

#header-mainbar .login-button .text span:last-child {
  color: var(--toga-muted) !important;
}

/* Cart */
#header-mainbar .s-cart-summary-wrapper {
  color: var(--toga-primary) !important;
}

#header-mainbar #s-cart-icon,
#header-mainbar #s-cart-icon i,
#header-mainbar #s-cart-icon svg,
#header-mainbar #s-cart-icon path {
  color: var(--toga-primary) !important;
  fill: var(--toga-primary) !important;
}

#header-mainbar .s-cart-summary-count {
  background: var(--toga-gold) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

#header-mainbar .s-cart-summary-total {
  color: var(--toga-primary-dark) !important;
  font-weight: 700 !important;
}

#header-mainbar .s-cart-summary-total i {
  color: var(--toga-gold) !important;
}

/* Mobile header icons */
#header-mainbar .search-button {
  color: var(--toga-primary) !important;
}

#header-mainbar .search-button i {
  color: var(--toga-primary) !important;
}

#header-mainbar .humb-icon span {
  background: var(--toga-primary) !important;
}

/* =========================================================
   TOGA | Main Navigation
========================================================= */

#mainnav.main-nav-container {
  background: #ffffff !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(196, 154, 90, 0.28) !important;
  box-shadow: none !important;
  color: var(--toga-text) !important;
}

#mainnav .inner {
  background: #ffffff !important;
}

#mainnav .container {
  max-width: 1280px !important;
  margin-inline: auto !important;
}

#mainnav #main-store-menu {
  height: 47px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* All categories button */
#mainnav #cats-dropdown-trigger,
#mainnav .cats-dropdown-trigger {
  height: 47px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--toga-primary) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}

#mainnav #cats-dropdown-trigger i,
#mainnav .cats-dropdown-trigger i {
  color: var(--toga-gold) !important;
  font-size: 18px !important;
}

#mainnav #cats-dropdown-trigger span,
#mainnav .cats-dropdown-trigger span {
  color: inherit !important;
}

#mainnav #cats-dropdown-trigger:hover,
#mainnav #cats-dropdown-trigger:focus,
#mainnav #cats-dropdown-trigger.active,
#mainnav #cats-dropdown-trigger.is-active,
#mainnav #cats-dropdown-trigger[aria-expanded="true"],
#mainnav .cats-dropdown-trigger:hover,
#mainnav .cats-dropdown-trigger:focus,
#mainnav .cats-dropdown-trigger.active,
#mainnav .cats-dropdown-trigger.is-active,
#mainnav .cats-dropdown-trigger[aria-expanded="true"] {
  color: var(--toga-primary-dark) !important;
  background: rgba(243, 231, 209, 0.45) !important;
}

/* Main menu links */
#mainnav .main-menu {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mainnav .main-menu > li.root-level {
  position: relative !important;
}

#mainnav .main-menu > li.root-level > a {
  height: 47px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: var(--toga-text) !important;
  background: transparent !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}

#mainnav .main-menu > li.root-level > a:hover {
  color: var(--toga-primary) !important;
  background: rgba(243, 231, 209, 0.28) !important;
}

#mainnav .main-menu > li.root-level > a::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 0;
  height: 2px;
  background: var(--toga-gold);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

#mainnav .main-menu > li.root-level:hover > a::after {
  transform: scaleX(1);
}

#mainnav .main-menu a span {
  color: inherit !important;
}

/* Small dropdown under normal menu items */
#mainnav .main-menu .sub-menu {
  background: #ffffff !important;
  border: 1px solid rgba(196, 154, 90, 0.22) !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 12px 28px rgba(14, 58, 61, 0.08) !important;
  overflow: hidden !important;
}

#mainnav .main-menu .sub-menu a {
  color: var(--toga-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

#mainnav .main-menu .sub-menu a:hover {
  color: var(--toga-primary) !important;
  background: var(--toga-bg) !important;
}

/* =========================================================
   TOGA | Categories Mega Dropdown
========================================================= */

#mainnav #cats-dropdown {
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  width: 100% !important;
  max-width: 1280px !important;
  min-height: 245px !important;
  max-height: none !important;
  margin-inline: auto !important;

  background: #ffffff !important;
  border: 1px solid rgba(196, 154, 90, 0.24) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 18px 40px rgba(14, 58, 61, 0.12) !important;
  overflow: hidden !important;
  direction: rtl !important;
}

/* Right column */
#mainnav #cats-dropdown .root-cats {
  position: static !important;
  width: 280px !important;
  max-width: 280px !important;
  min-height: 245px !important;
  max-height: none !important;
  padding: 8px !important;
  margin: 0 !important;
  background: #FAF9F7 !important;
  border-inline-start: 1px solid rgba(196, 154, 90, 0.24) !important;
  overflow: visible !important;
}

/* لا تعرض قوائم فاضية */
#mainnav #cats-dropdown .root-cats > li:not(.has-children) > .sub-menu {
  display: none !important;
}

/* خلي قائمة جميع العبايات تظهر لأنها الوحيدة اللي فيها أبناء */
#mainnav #cats-dropdown .root-cats > li.has-children > .sub-menu {
  display: grid !important;
}

/* Root category item */
#mainnav #cats-dropdown .root-cats > li > a {
  min-height: 56px !important;
  padding: 7px 10px  !important;
 
  color: var(--toga-text) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

#mainnav #cats-dropdown .root-cats > li > a:hover,
#mainnav #cats-dropdown .root-cats > li.is-hovered > a,
#mainnav #cats-dropdown .root-cats > li.has-children > a {
  color: var(--toga-primary) !important;
  background: #ffffff !important;
}

#mainnav #cats-dropdown .root-cats > li > a pan,
#mainnav #cats-dropdown .root-cats > li > a span {
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Root images */
#mainnav #cats-dropdown .root-cats > li > a img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  background: #ffffff !important;
  border: 1px solid rgba(14, 58, 61, 0.08) !important;
}

/* Arrow */
#mainnav #cats-dropdown .sfi-Chevron-Left {
  color: var(--toga-gold) !important;
  font-size: 16px !important;
}

/* Big sub menu area */
#mainnav #cats-dropdown .root-cats > li.has-children > .sub-menu {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  right: 280px !important;
  left: 0 !important;

  min-height: 245px !important;
  height: auto !important;
  padding: 16px 26px !important;

  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 48px !important;
  align-content: start !important;
  gap: 8px 34px !important;
}

/* Sub items */
#mainnav #cats-dropdown .sub-menu li > a {
  min-height: 48px !important;
  height: 48px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  color: var(--toga-text) !important;
  background: transparent !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

#mainnav #cats-dropdown .sub-menu li > a:hover {
  color: var(--toga-primary) !important;
  background: #FAF9F7 !important;
}

#mainnav #cats-dropdown .sub-menu li > a pan,
#mainnav #cats-dropdown .sub-menu li > a span {
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Sub images */
#mainnav #cats-dropdown .sub-menu li > a img {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  background: #ffffff !important;
  border: 1px solid rgba(14, 58, 61, 0.08) !important;
}

/* Remove ugly blocks / scrollbars */
#mainnav #cats-dropdown-trigger::before,
#mainnav #cats-dropdown-trigger::after,
#mainnav .cats-dropdown-trigger::before,
#mainnav .cats-dropdown-trigger::after,
#mainnav #cats-dropdown::before,
#mainnav #cats-dropdown::after {
  display: none !important;
}

#mainnav #cats-dropdown .sub-menu,
#mainnav #cats-dropdown .root-cats,
#mainnav #cats-dropdown ul {
  scrollbar-width: none !important;
}

#mainnav #cats-dropdown .sub-menu::-webkit-scrollbar,
#mainnav #cats-dropdown .root-cats::-webkit-scrollbar,
#mainnav #cats-dropdown ul::-webkit-scrollbar {
  display: none !important;
}

/* =========================================================
   Product Cards - نفس كودك القديم بدون تغيير منطقي
========================================================= */

.s-product-card-content-sub {
  margin-bottom: 0.35rem;
}

.mt-4 {
  margin-top: 0rem;
}

.gap-2 {
  gap: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.25rem;
}

.s-product-card-entry .s-product-card-content-subtitle {
  font-weight: 400;
  width: 100%;
  text-align: justify;
  opacity: 0.9;
  padding: 0.29rem 0rem;
  color: rgb(14 140 0);
  margin: 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.75rem;
  line-height: 0.72rem;
}

.s-product-card-entry .s-product-card-content-title a {
  font-weight: 400;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 15px;
}

#app .s-products-list-vertical-cards {
  gap: 0px;
}

.s-product-card-entry {
  border-radius: 1px;
}

.s-product-card-vertical .s-product-card-image {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

@media only screen and (max-width: 300px) {
  .s-product-card-fit-height .s-product-card-image {
    height: 26rem;
    max-height: 26rem;
  }
}

@media only screen and (min-width: 300px) {
  .s-product-card-fit-height .s-product-card-image {
    height: 26rem;
    max-height: 26rem;
  }
}

@media only screen and (min-width: 400px) {
  .s-product-card-fit-height .s-product-card-image {
    height: 22rem;
    max-height: 22rem;
  }
}

@media only screen and (min-width: 500px) {
  .s-product-card-fit-height .s-product-card-image {
    height: 30rem;
    max-height: 31rem;
  }
}

@media only screen and (min-width: 600px) {
  .s-product-card-fit-height .s-product-card-image {
    height: 30rem;
    max-height: 31rem;
  }
}

.s-product-card-content-footer {
  margin-top: auto;
  display: none;
  align-items: center;
}

.s-product-card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.15rem 0.75rem 0.75rem;
}

body {
    
    background-color: #F8F7F4;
}






/* ===============================
   Toga Features Strip
   هوية توجا - بترولي / رملي
================================ */
  

 
  
.s-block--enhances-features .s-block--features__item:hover {
  background: #f8f7f4 !important;
  transform: translateY(-1px) !important;
}

/* الأيقونات */
.s-block--enhances-features .feature-icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;

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

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.s-block--enhances-features .feature-icon img {
  width: 58px !important;
  height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;

  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 5px 10px rgba(14, 58, 61, 0.08)) !important;
}

/* النص */
.s-block--enhances-features .s-block--features__item > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: right !important;
  min-width: 0 !important;
}

.s-block--enhances-features .s-block--features__item h3 {
  margin: 0 !important;
  padding: 0 !important;

  color: #1f2933 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
}

.s-block--enhances-features .s-block--features__item p {
  margin: 0 !important;
  padding: 0 !important;

  color: #66777a !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* لمسة هوية خفيفة */
.s-block--enhances-features .s-block--features__item:hover h3 {
  color: #0e3a3d !important;
}

/* فواصل ناعمة بين العناصر */
.s-block--enhances-features .swiper-slide:not(:last-child) .s-block--features__item {
  border-left: 1px solid rgba(229, 231, 235, 0.9) !important;
}

/* ===============================
   Tablet
================================ */
@media (max-width: 1024px) {
  .s-block--enhances-features .swiper-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 22px !important;
  }

  .s-block--enhances-features .swiper-slide:not(:last-child) .s-block--features__item {
    border-left: 0 !important;
  }

  .s-block--enhances-features .s-block--features__item {
    justify-content: flex-start !important;
    background: #fbfaf8 !important;
    border: 1px solid #e5e7eb !important;
  }
}

/* ===============================
   Mobile
================================ */
@media (max-width: 640px) {
  .s-block.s-block--features.s-block--enhances-features {
    margin: 18px auto !important;
    padding: 0 12px !important;
  }

  .s-block--enhances-features .s-slider-container,
  .s-block--enhances-features .swiper {
    overflow: hidden !important;
  }

  .s-block--enhances-features .swiper-wrapper {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;

    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;

    padding: 14px !important;
    border-radius: 16px !important;
  }

  .s-block--enhances-features .swiper-wrapper::-webkit-scrollbar {
    display: none !important;
  }

  .s-block--enhances-features .swiper-slide {
    width: 78% !important;
    min-width: 78% !important;
    flex: 0 0 78% !important;
    scroll-snap-align: start !important;
  }

  .s-block--enhances-features .s-block--features__item {
    min-height: 72px !important;
    padding: 12px !important;
    justify-content: flex-start !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
  }

  .s-block--enhances-features .feature-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .s-block--enhances-features .feature-icon img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }

  .s-block--enhances-features .s-block--features__item h3 {
    font-size: 14px !important;
  }

  .s-block--enhances-features .s-block--features__item p {
    font-size: 12px !important;
    white-space: normal !important;
  }
}