/* =====================================================
   GLOBAL STYLES
   ===================================================== */

/* Store header stays above other elements */
.store-header {
  z-index: 50 !important;
}
.store-header .logo-normal{
  border-radius: 50%;
}
.main-nav-container .inner {
  padding-top: 16px;
}

.top-navbar{
  border: none;
  min-height: 36px;
}
.top-navbar .container{
  flex-wrap: wrap;
    gap:16px;
  justify-content: center;
}
.top-navbar .container .flex-1{
  display: none;
  
}

.top-navbar .topnav-link-item span{
    display:block;
}

/* Blog section title spacing */
.s-block--blog .home-block-title{
  margin-bottom:80px;
}

/* Blog section title underline positioning */
.s-block--blog .home-block-title h2::after{
  top:8.5vh;
}

/* Fixed pinned element background */
.fixed-pinned .inner {
  background-color: var(--color-primary);
}

/* Slider link with blur effect */
.slider-link {
  background: #FFFFFF14;
  backdrop-filter: blur(8px);
  border-radius: 100px;
}

/* Home title paragraph order */
.home-block-title p{
  order:3;
}

/* Home title flex layout */
.home-block-title{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Simplified products card padding */
body:not(.enhanced_add_btn_in_mobile) .simplified-products .offer-slide .product-card--simplified .product-card__content, body:not(.enhanced_add_btn_in_mobile) .simplified-products .s-products-list-wrapper .product-card--simplified .product-card__content, body:not(.enhanced_add_btn_in_mobile) .simplified-products .s-products-slider-card .product-card--simplified .product-card__content{
  padding:8px 0px 0px 0px !important;
}


/* =====================================================
   HERO SLIDER SECTION
   ===================================================== */

/* Caption container top margin */
@media (min-width: 640px) {
    .advanced-slider--0{
        margin-top: 2.2rem;
    }
}
.advanced-slider__caption .container {
  margin-top: 8vh;
}

/* Hide extra products after enhanced features block */
.s-block--enhanced-features + .s-block--custom-products salla-products-list {
  display: none;
}

/* Dark gradient overlay on slides */
.advanced-slider--0 .advanced-slider__slide::before {
  background: linear-gradient(180deg, rgb(0 0 0 / 70%), transparent) !important;
}

/* Hero heading styles */
.advanced-slider--0 .advanced-slider__caption__inner__content__heading {
  position: relative;
  max-width: 399px;
  font-size: clamp(1.375rem, 0.648rem + 3.102vw, 3.75rem);
  color: var(--color-primary) !important;
}

/* First line of heading white */
.advanced-slider--0 .advanced-slider__caption__inner__content__heading::first-line {
  color: #fff !important;
}

/* Badge above heading */
.advanced-slider--0 .advanced-slider__caption__inner__content__heading::before {
  content: "تجربة قهوة استثنائية";
  position: absolute;
  bottom: 100%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 38px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 100px;
  background: #63A8A633;
  border: 1px solid #63A8A666;
  color: #7DABA9;
}

/* Main text with gradient background */
.advanced-slider--0 .advanced-slider__caption__inner__content__text {
  position: relative;
  max-width: 380px;
  margin-bottom: 8vh;
  padding: 8px 12px;
  font-size: clamp(1.5rem, 1.2704rem + 0.9796vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  border-right: 1px solid var(--color-primary);
  background: linear-gradient(to bottom, #7DABA926 0%, #00000000 100%);
}

/* Sub text description */
.advanced-slider--0 .advanced-slider__caption__inner__content__text::after {
  content: "محاصيل فاخرة تُحمص بحرفية، لنقدم لك تجربة قهوة لا تُنسى.";
  position: absolute;
  top: 110%;
  right: 0;
  width: 170%;
  font-size: clamp(0.75rem, 0.5969rem + 0.6531vw, 1.25rem);
  font-weight: 300;
  line-height: 1.3;
  max-width:70vw;
}

/* Slider button styling */
.advanced-slider--0 .advanced-slider__caption__inner__content__button {
  padding: 10px 24px;
  border-radius: 100px;
}

.advanced-slider--0 .advanced-slider__caption__inner__content__button::before {
  border-radius: 100px;
}

/* =====================================================
   ABOUT SECTION
   ===================================================== */

/* About text container */
.s-block--about .text-store-text-primary {
  position: relative;
  max-width: 680px;
  padding-top: 22px;
  color: #47462AB2;
}

/* About description text */
.s-block--about .text-store-text-primary::after {
  content: "نختار حبوب القهوة بعناية فائقة من أجود المزارع حول العالم، ونحمصها بحرفية عالية للحصول على مذاق استثنائي يرضي ذائقتكم.";
  display: block;
  padding-top: 2vh;
}

/* Green accent line above about text */
.s-block--about .text-store-text-primary::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 4px;
  border-radius: 100px;
  background-color: var(--color-primary);
}

/* About section subheading */
.s-block--about h3 {
  width: fit-content;
  padding: 8px 16px;
  border-radius: 100px;
  color: var(--color-primary);
  background-color: #63A8A61A;
}

/* About section main heading */
.s-block--about h2 {
  max-width: 400px;
  font-size: clamp(1.75rem, 1.3673rem + 1.6327vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  color: #47462A;
}

/* Hide about button */
.s-block--about .btn {
display: none;
}

/* =====================================================
   ENHANCED FEATURES SECTION
   ===================================================== */

/* Features section container */
.s-block--enhanced-features {
  position: relative;
  padding: 80px 0px 0px 0px;
}

/* Grid padding */
.s-block--enhanced-features .grid {
  padding: 25px 0;
}

/* Main title - "معايير الجودة لدينا" */
.s-block--enhanced-features::after {
  content: "معايير الجودة لدينا";
  position: absolute;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(1rem, 0.6173rem + 1.6327vw, 2.25rem);
  font-weight: 700;
  color: #47462A;
}

/* Subtitle - "عملية الإنتاج" */
.s-block--enhanced-features::before {
  content: "عملية الإنتاج";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #63A8A6;
}

/* Feature items positioning */
.s-block--enhanced-features > div,
.s-block--enhanced-features > div > div {
  position: relative;
}

.s-block--enhanced-features > div > div {
  z-index: 3;
  background-color: transparent;
}

/* Remove default borders/shadow */
.s-block--enhanced-features__item {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Feature icon circle */
.feature-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: #fff;
}

/* Feature icon image size */
.feature-icon > img {
  width: 50%;
}

/* Decorative line between features */
@media (min-width: 768px) {
  .s-block--enhanced-features > div::after {
    content: "";
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    background-color: #47462A1A;
  }
}

/* =====================================================
   CUSTOM PRODUCTS – CARDS
   ===================================================== */

.product-card--vertical .product-card__image{
  flex:2 !important;
}
.product-card--vertical .product-card__content{
  flex:1 !important;
  justify-content: end !important;
  gap: 10px;
}
salla-products-list .product-card--vertical.product-card--fit-height .product-card__image{
  flex:2 !important;
  height: auto;

}

/* Product card padding */
  .product-card--vertical {
    padding: 10px;
  }

/* Card content alignment */
  .product-card__content {
    padding: 0px !important;
    text-align: start;
  }

/* Cart button alignment */
  .product-card__normal-cart__btn {
    display: flex;
    justify-content: end;
  }

/* Mini cart button alignment */
.product-card__mini-cart__btn{
  display:flex;
  justify-content: end;
}

/* Mini cart button width */
  .product-card__mini-cart__btn  > div.w-full {
    width: 60%;
  }
  
/* Mini cart button text size */
  .product-card__mini-cart__btn  > div.w-full .s-button-text {
    font-size: 14px;
  }

/* Price positioning */
  .product-card--vertical .product-card__price {
    position: absolute;
    bottom: 8px;
    right: 0;
    max-width: 30%;
  }

/* Sale price layout */
  .product-card--vertical .price_is_on_sale {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: start;
      gap:4px;
    margin-bottom:-6px;
  }
  
/* Card line height */
.product-card--vertical *{
  line-height:1;
}

/* Custom products title size */
.s-block--custom-products .home-block-title h2{
  font-size: clamp(1.25rem, 0.7143rem + 2.2857vw, 3rem) !important;
} 

/* Hide last product card after fixed banner */
.s-block--fixed-banner + .s-block--custom-products custom-salla-product-card:last-of-type {
  display: none;
}

/* Blog title size */
.s-block--blog .home-block-title h2{
    font-size: clamp(1.25rem, 0.7143rem + 2.2857vw, 3rem) !important;

}

/* Blog title description */
.s-block--blog .home-block-title h2::after{
content:"اكتشف أفضل الطرق لتحضير قهوتك المفضلة";
    content: "اكتشف أفضل الطرق لتحضير قهوتك المفضلة";
    font-size: 18px;
    font-weight: 400;
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}
}

/* Custom products title flex layout */
.s-block--custom-products .home-block-title {
  display: flex;
  flex-direction: column;
}

/* Secondary text order */
.s-block--custom-products .home-block-title .text-store-text-secondary {
  order: 3;
}

/* Divider after secondary text */
.s-block--custom-products .home-block-title .text-store-text-secondary + div {
  width: 96px;
  margin-top: 16px;
}

/* Card padding */
.product-card--vertical {
  padding: 8px;
}

/* Hide cart icon */
.product-card__normal-cart__btn > div i {
  display: none;
}

/* Cart button styling */
.product-card__normal-cart__btn > div.w-full .s-button-element {
  padding: 10px 16px;
  border-radius: 100px;
  background-color: var(--color-primary);
  color: #fff;
}

/* Cart button text color */
.product-card__normal-cart__btn > div.w-full .s-button-element .s-button-text {
  color: #fff;
}

/* Add product button styling */
.product-card--vertical salla-add-product-button .s-button-element {
  border-radius: 100px !important;
  background: var(--color-primary);
}

/* Add product button text color */
.product-card--vertical salla-add-product-button .s-button-element .s-button-text {
  color: #fff;
}

/* Hide add product button icon */
.product-card--vertical salla-add-product-button .s-button-element .s-button-text i {
  display: none;
}

/* =====================================================
   BANNERS SECTION
   ===================================================== */

/* Banners container */
.s-block--banners {
  max-width: 95vw;
  margin: auto;
  padding: 24px 12px 12px 12px;
  background: white;
  border-radius:24px;
}

/* Banners heading */
.s-block--banners h2 {
  font-size: clamp(1.25rem, 0.7143rem + 2.2857vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  color: #47462A;
}

/* Branch locations under heading */
.s-block--banners h2::after {
  content: "فرع الأندلس، فرع قرطبة، فرع الغدير، فرع الحمراء";
  display: block;
  font-size: clamp(0.875rem, 0.7985rem + 0.3265vw, 1.125rem);
  font-weight: 300;
  margin-top: 16px;
}

/* Banner grid layout */
.s-block--banners .one-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: clamp(15rem, 10.0255rem + 21.2245vw, 31.25rem);
}

/* Individual banner */
.s-block--banners .banner-entry {
  height: 100%;
  border-radius:12px;
}

/* Banner title alignment */
.s-block--banners .banner-entry h3 {
  text-align: start;
}

/* Banner subtitle */
.s-block--banners .banner-entry h3::after {
  content: "مساحة مصممة للعمل والاسترخاء";
  font-size: 16px;
  font-weight: 400;
  display: block;
  margin-top:8px;
  line-height: 1;
}

/* First banner spans 2 rows */
.s-block--banners .banner-entry:first-child {
  grid-row: span 2 / span 2;
  height: 100%;
}

/* Banner text styling */
.s-block--banners .banner-entry .text-with-border {
  opacity: 1;
  justify-content: end;
  align-items: start;
  padding: 0px;
  border: none;
}

/* Banner overlay opacity */
.s-block--banners .banner-entry.has-overlay::after {
  opacity: 0.4;
}

/* =====================================================
   BLOG SECTION
   ===================================================== */

/* Blog article styling */
.s-block--blog article {
  border-radius: 24px;
  background-color: #eae2cd;
}

/* Blog image positioning */
.post-entry__image:last-of-type img{
  object-position: right;
}

/* Blog slide padding */
.s-block--blog .swiper-slide {
  padding: 16px;
}

/* =====================================================
   BUTTON STYLES
   ===================================================== */

/* Outline button styling */
.btn.btn--outline-primary {
  padding: 8px 12px !important;
  border-radius: 100px !important;
  background: var(--color-primary);
  color: #fff;
}

/* =====================================================
   CUSTOM REVIEWS / TESTIMONIALS
   ===================================================== */

/* Testimonials section background */
.s-block--testimonials {
  padding: 10vh 0;
  background: linear-gradient(to bottom, #F5F1E8 0%, #E8DFC8 100%);
}

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

/* Desktop styles - 1024px and above */
@media (min-width: 1024px) {
  .top-navbar .container{

  justify-content: start;
}
.top-navbar .container .flex-1{
  display: flex;
  
}
  .main-nav-container .inner {
  padding-top: 6px;
}
  /* Main text padding */
.advanced-slider--0 .advanced-slider__caption__inner__content__text {
  padding: 16px 25px;
}
  
  /* Banner text padding */
  .s-block--banners .banner-entry .text-with-border {
      padding: 16px;
  }

  /* Banner border radius */
  .s-block--banners {
    border-radius: 48px;
  }
  
  /* Individual banner border radius */
  .s-block--banners .banner-entry {
        border-radius: 36px;
  }

  /* Banner container padding */
  .s-block--banners {
    padding: 112px 64px 64px 64px;
  }

  /* Enhanced features grid padding */
  .s-block--enhanced-features .grid {
    padding: 50px 0;
  }

  /* Enhanced features section padding */
  .s-block--enhanced-features {
    padding: 100px 0;
  }

  /* Home title bottom margin */
  .home-block-title {
    margin-bottom: 64px;
  }
  
  /* Slider content spacing */
  .advanced-slider__caption__inner__content > * {
    margin-bottom: 24px;
  }

  /* Slider button font size */
  .advanced-slider--0 .advanced-slider__caption__inner__content__button {
    font-size: 18px;
  }

  /* Products grid - 3 columns */
  .s-products-list-vertical-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Large desktop - 1280px and above */
@media (min-width: 1280px) {
  /* Custom products max width */
  .s-block--custom-products {
    max-width: 70vw;
  }
}

/* Tablet styles - 768px and above */
@media (min-width: 768px) {
  /* Product card padding */
  .product-card--vertical {
    padding: 20px;
  }

  /* Card content padding */
  .product-card__content {
    padding: 20px 0 0 0 !important;
    text-align: start;
  }

  /* Cart button alignment */
  .product-card__normal-cart__btn {
    display: flex;
    justify-content: end;
  }

  /* Cart button width */
  .product-card__normal-cart__btn > div.w-full {
    width: 50%;
    justify-self: start;
  }

  /* Price positioning */
  .product-card--vertical .product-card__price {
    position: absolute;
    bottom: 8px;
    right: 0;
    max-width: 30%;
  }

  /* Sale price layout */
  .product-card--vertical .price_is_on_sale {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: start;
    gap:4px;
    margin-bottom:-8px;
  }

  /* Blog title underline position */
  .s-block--blog .home-block-title h2::after{
top:12vh;}
  
  /* Blog title bottom margin */
    .s-block--blog .home-block-title h2{
    margin-bottom:16px;
  }
}