/* Blog in the nav */
.main-nav-container ul #blog {
  order: 999;}
@media (max-width: 767px) {
  .mobile-menu ul {
  display: flex;
  flex-direction: column;}
.mobile-menu ul #blog {
  order: 999;}
.mobile-menu ul:after {
  display: none;}}
/* Edit header */
.breadcrumbs {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;}
.breadcrumbs .s-breadcrumb-wrapper {
  justify-content: flex-start;
  padding-right: 2rem;}
.s-breadcrumb-item {
  color: #fff;}
.s-breadcrumb-arrow svg {
  fill: #fff !important;}
/* Hero */
.main-banner-component div.container.relative.z-\[5\] {
  max-width: 98% !important;}
.main-banner-component div.container.relative.z-\[5\] div {
  justify-content: flex-start;}
.main-banner-component div.container.relative.z-\[5\] > div > div > a {
  padding-bottom: 20px;}
.main-banner-component .relative {
    min-height: 530px; /* Adjust as needed */}
.main-banner-component div.container.relative.z-\[5\] a {
  padding-bottom: 15px !important;
  border: solid 2px;
  border-radius: 0px;}
@media (max-width: 767px) {
  .main-banner-component div.container.relative.z-\[5\] a {
  padding-bottom: 8px !important;}}
/* Categories */
/* 1. Center the slide wrapper and disable swiper's automatic movement */
.special-categories-component .swiper-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;}
/* 2. Convert circular shape to rectangular aspect ratio */
.special-categories-component .swiper-slide .aspect-square.rounded-full {
    aspect-ratio: 16 / 9 !important; /* Sets the rectangular shape */
    border-radius: 1.5rem !important; /* Large rounded corners */
    width: 100% !important;
    height: auto !important;}
/* 3. Make the individual category items larger */
.special-categories-component .swiper-slide {
    width: 480px !important; /* Increase this number to make it even bigger */
    margin: 0 15px !important; /* Horizontal spacing between items */}
@media (max-width: 767px) {
.special-categories-component .swiper-slide {
    width: 155px !important; /* Increase this number to make it even bigger */
    margin: 0 10px !important; /* Horizontal spacing between items */}}
/* Products tabs */
.products-with-tabs-component .tab-trigger button:hover {
  color: #d4bb6b !important;}
.products-with-tabs-component .tab-trigger.is-active button {
  border-color: #e7e2ce !important;
  color: #d4bb6b !important;
  background-color: #fdf3ed !important;}
/* Product card */
@media (min-width: 992px) {
.s-product-card-image {
    min-height: 350px;}}
.s-product-card-entry .s-product-card-image {
  background-color: #fff;}
.s-product-card-content-title,
.s-product-card-content-category,
.s-product-card-content-subtitle {
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;}
button.s-button-element {
  padding: 5px !important;}
button.s-button-element span.s-button-text {
  line-height: 1.7;}
/* Main banner sections */
.main-banner-component:not(:first-of-type) div.container.relative.z-\[5\] { /* تغيير العرض للحاوية */
  max-width: 95% !important;}
.main-banner-component:not(:first-of-type) div.container.relative.z-\[5\] .content { /* محاذاة المحتوى لليسار (أو النهاية) */
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding-top: 100px;}
.main-banner-component:not(:first-of-type) div.container.relative.z-\[5\] a { /* إضافة حشو (Padding) للزر */
  background-color: #ffffff00 !important}
.main-banner-component div.container.relative.z-\[5\] h3 {
  border-bottom: solid 4px !important;
  padding-bottom: 18px;
  font-size: 32px;}
.main-banner-component div.container.relative.z-\[5\] p {
  line-height: 1.6em !important;
  font-size: 18px}
/* Sections */
#main-content > section:nth-child(11) {
    margin: 0;}
#main-content > section:nth-child(11) > div {
    max-width: 100%;
    padding: 0;}
#main-content > section:nth-child(13) > div img {
    border-radius: 0px;}
/* Footer */
.store-footer {
  padding-bottom: 0px}
.store-footer .s-social-list .s-social-link a svg {
    height: 26px;
    width: 26px;}
.copyright-text a:hover {
  color: #d4bb6bcc !important;}

/* Natinonal Day */
/* Hero section */
#main-content > section:nth-child(2) {
    margin: 0;}
#main-content > section:nth-child(2) > div {
    max-width: 100%;
    padding: 0;}
#main-content > section:nth-child(2) > div img {
    border-radius: 0px;}

@media(max-width:767px){
    *:hover {
        transition:none !important;}}
.object-cover {
    -o-object-fit: cover;
    object-fit: inherit;
}