/** Shopify CDN: Minification failed

Line 30:0 All "@import" rules must come first

**/
/* ===== CLS FIX: Reserve space for announcement + header ===== */

/* Reserve announcement bar height */
m-announcement-bar {
  display: block;
  min-height: 40px;
}

/* Reserve header height before JS runs */
:root {
  --m-header-height: 120px;
}

/* Mobile adjustment */
@media (max-width: 767px) {
  :root {
    --m-header-height: 96px;
  }
}
/* Prevent CLS when announcement bar is dismissed */
body:has(.m-announcement-bar--hidden) {
  --m-announcement-height: 0px;
}

@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans+Arabic:wght@300;400;500;600;700&display=swap');

@media screen and (max-width: 767px) {
    .m-wishlist-remove-button {
        position: relative!important;
      top: 0!important;
      right: 0!important;
    }
}
@media (max-width: 767px){
  .m-product-card__action-wrapper a.m-product-form span{
    font-size: 14px;
  }
  .m-product-card__content .m-product-card__action-wrapper a.m-product-form{
    padding: 0 10px !important;
  }
  .m-product-card--style-4 .m-product-card__content .m-product-card__action-wrapper {
    margin: 20px auto 20px!important;
}
}

.m-collection-page-header__inner.m-section-py {
  padding-left: 0!important;
  padding-right: 0!important;
}
.m-collection-page-header__description {
  max-width: none !important;
}

.template-product .m-tabs__header .m-tabs__header-inner .m-tab-header.active::after
{
    display: none;
}
.template-product .m-tabs__header .m-tabs__header-inner {
    padding: 0;
}

body.template-product .m-tabs__header .m-tabs__header-inner .m-tab-header {
    padding-left: 102px !important;
}
.template-product .m-tabs__header .m-tabs__header-inner .m-tab-header.active {
    background-color: #1FA764 !important;
}
/* m-header.m-header.m-mega-active .m-header__desktop,
m-header.m-header.m-mega-active .m-header__desktop .m-header__bg 
{
    background-color: #1FA764;
    color: white;
}
 */
 .f-menu-mobile .f-menu__link .f-menu__arrow {
   width: 100% !important;
   transform: none !important;
   justify-content: end;
 }
 .f-menu-mobile .f-menu__link .f-menu__arrow svg {
   width: 44px !important;
   transform: rotate(90deg);
   transition: all .25s;
 }

 .f-menu-mobile .f-menu__item.is-active>.f-menu__link>.f-menu__arrow svg {
    transform: rotate(-90deg);
 }

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

.m-product-card .m-product-card__content {
  flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.m-product-card__title {
  max-width: 77%;
}
.m-product-card__content.m\:text-center .m-product-card__title {
  margin-left: auto;
  margin-right: auto;
}

 m-header.m-header.m-mega-active .m-header__desktop .m-header__menu .m-menu__item--active a.m-menu__link--main,
  m-header.m-header.m-mega-active .m-header__desktop .m-header__menu .m-menu__item--active div.m-mega-menu
{
    background-color: #f6f6f6;
 }


@media (min-width: 768px){
body .m-product-card__media:hover .m-product-card__action.m-product-card__addons {
    top: 3rem;
    height: fit-content;
    width: fit-content;
    margin-inline: auto;
}
}
@media (max-width: 767px){
  .m-cart-drawer__footer .m-cart-addon__header{
    justify-content: space-around;
  }
}

.m-product-card__content .m-product-card__action-wrapper .m-button {
    width: auto !important;
    line-height: 40px !important;
    padding: -7px 10px !important;
}

.m-product-card--style-4 .m-product-card__action.m-product-card__addons {
  align-items: start;
   top: 10px;
  height:20px !important;
}

@media screen and (min-width: 1024px) {
 .m-product-card--style-4 .m-product-card__action.m-product-card__addons {
    align-items: start;
    top: 20px;
    bottom: 0px;
  }
}

/* =====================================================================================================================================================
                                                                    STYLE BY BEARD DEV                                                                   
======================================================================================================================================================== */

/* ===============================
   INLINE SEARCH CSS START
================================ */

/* Common */
.m-search-form--inline {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 720px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgb(var(--color-border));
  border-radius: 999px;
  background: #fff;
}

.m-search-form--inline input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  padding: 0;
}

.m-search-form--inline button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* ===============================
   DESKTOP INLINE SEARCH – FINAL
   1024–1219 : 750px
   1220+     : 900px
================================ */

/* Medium desktop: 1024px – 1219px */
@media (min-width: 1024px) and (max-width: 1219px) {

  .m-header__search-inline-desktop {
    width: 550px !important;
    max-width: 550px !important;
    flex: 0 0 750px !important;
    margin-left: 20px;
    margin-right: 20px;
  }

  .m-header__search-inline-desktop .m-search-form--inline {
    width: 100% !important;
    height: 46px;
  }

  .m-header__search-inline-desktop input {
    width: 100% !important;
    height: 100%;
    font-size: 16px;
    padding-left: 20px;
    padding-right: 48px;
  }
}

/* Large desktop: 1220px – 2560px */
@media (min-width: 1220px) and (max-width: 2560px) {

  .m-header__search-inline-desktop {
    width: 900px !important;
    max-width: 900px !important;
    flex: 0 0 900px !important;
    margin-left: 24px;
    margin-right: 24px;
  }

  .m-header__search-inline-desktop .m-search-form--inline {
    width: 100% !important;
    height: 48px;
  }

  .m-header__search-inline-desktop input {
    width: 100% !important;
    height: 100%;
    font-size: 16px;
    padding-left: 20px;
    padding-right: 48px;
  }
}

/* ===============================
   TABLET HEADER FIX (768–1023)
   Search bar below header row
================================ */

@media (min-width: 768px) and (max-width: 1023px) {

  /* Allow wrapping like mobile */
  .m-header__mobile {
    flex-wrap: wrap;
    padding-bottom: 8px;
  }

  /* Top row: menu | logo | cart */
  .m-menu-button {
    width: 20%;
    justify-content: flex-start;
  }

  .m-logo--mobile {
    width: 60%;
    justify-content: center;
  }

  .m-header__mobile-right {
    width: 20%;
    justify-content: flex-end;
  }

  /* Search row below */
  .m-header__mobile-search {
    width: 100%;
    order: 10; /* force below */
    margin-top: 10px;
    padding: 0 16px;
  }

  .m-search-form--inline {
    width: 100%;
    height: 44px;
    border-radius: 999px;
  }
}

/* ===============================
   MOBILE HEADER – FINAL STYLES
================================ */
@media (max-width: 767px) {

  /* Mobile header container */
  .m-header__mobile {
    flex-wrap: wrap;
    padding-bottom: 6px;
  }

  /* Top row: menu | logo | cart */
  .m-menu-button {
    width: 20%;
    justify-content: flex-start;
  }

  .m-logo--mobile {
    width: 60%;
    justify-content: center;
  }

  .m-header__mobile-right {
    width: 20%;
    justify-content: flex-end;
  }

  /* Search row (below header row) */
  .m-header__mobile-search {
    width: 100%;
    margin-top: 8px;
    padding: 0 12px;
  }

  .m-search-form--inline {
    width: 100%;
    height: 42px;
    border-radius: 999px;
  }

  .m-search-form--inline input {
    font-size: 14px;
  }
}
/* ===============================
   INLINE SEARCH CSS END
================================ */

/* =======================================
   SEARCH DROPDOWN CSS START
========================================== */
/* Search container anchor */
.m-header__search-inline-desktop,
.m-header__mobile-search {
  position: relative;
}

/* Main dropdown – EXACT search bar width */
.cs-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;

  width: 900px;          /* search bar ke equal */
  max-width: 900px;     /* overflow prevent */

  z-index: 9999;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

@media (min-width: 1220px) {
  .cs-search-dropdown {
    width: 720px;
    max-width: 720px;
  }
}

/* 🔹 Medium desktop (1024px – 1219px)
   → compact laptops */
@media (min-width: 1024px) and (max-width: 1219px) {
  .cs-search-dropdown {
    width: 550px;
    max-width: 550px;
  }
}

/* 🔹 Tablet landscape / large tablet
   → iPad, tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .cs-search-dropdown {
    left: 12px;
    width: 710px;
    max-width: 710px;
  }
}

/* Mobile full width */
@media (max-width: 767px) {
  .cs-search-dropdown {
    left: 10px;
    right: 0;
    width: 320px;
  }
}
/* =======================================
   SEARCH DROPDOWN CSS END
========================================== */
/* =======================================
      POPULAR SEARCHES TITLES CSS START 
========================================== */
.cs-search-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

/* Icon ONLY for Popular choices title */
.cs-search-block--popular .cs-search-title::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 17L9 11L13 15L21 7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 7H21V11' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cs-search-block--recommended .cs-title-icon{
  margin-right: 6px; 
}

   /* POPULAR SEARCH TAGS */
.cs-popular-links a {
  display: inline-block;
  background: #e6f5ec;
  color: #1f7a4d;
  padding: 3px 8px;
  margin: 4px 6px 0 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.cs-popular-links a:hover {
  background: #ccebdc;
  color: #145c3a;
}
/* =======================================
      POPULAR SEARCHES TITLES CSS END 
========================================== */
/* ===========================================
   RECOMMENDED PRODUCTS – CAROUSEL CSS START
============================================== */
.cs-search-block--recommended {
  margin-top: 14px;
}

/* Swiper container */
.cs-recommended-slider {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}

/* 👉 CARD SIZE INCREASED → ONLY 3 CARDS FIT */
.cs-recommended-slider .swiper-slide {
  width: 220px !important;   /* ⬅️ increased from 200 */
}

/* Product card */
.cs-product-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

/* Image wrapper */
.cs-product-image {
  width: 100%;
  height: 210px;             /* ⬅️ slightly bigger */
  overflow: hidden;
  border-radius: 10px;
}

.cs-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product text */
.cs-product-title {
  font-size: 14px;
  font-weight: 500;
  margin-top: 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-product-price {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}

/* =====================================================
   CAROUSEL ARROWS – INSIDE & CLEAN
===================================================== */
.cs-swiper-prev,
.cs-swiper-next {
  position: absolute;
  top: 45%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1fa463;
  cursor: pointer;
  z-index: 2;
}

/* ⬅️ arrows moved INSIDE */
.cs-swiper-prev { left: 6px; }
.cs-swiper-next { right: 6px; }

.cs-swiper-prev::after,
.cs-swiper-next::after {
  content: '';
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  position: absolute;
  top: 11px;
  left: 11px;
}

.cs-swiper-prev::after { transform: rotate(135deg); }
.cs-swiper-next::after { transform: rotate(-45deg); }

/* =====================================================
                  MOBILE TWEAKS
===================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

  .cs-recommended-slider .swiper-slide {
    width: 216px !important;  
  }
  .cs-swiper-prev,
  .cs-swiper-next {
    display: none !important;
  }

}

@media (max-width: 767px) {

  .cs-recommended-slider .swiper-slide {
    width: 130px !important;
  }

  .cs-product-image {
    height: 125px;
  }

  .cs-swiper-prev,
  .cs-swiper-next {
    display: none !important;
  }
}
/* ===========================================
   RECOMMENDED PRODUCTS – CAROUSEL CSS END
============================================== */

/* ================================
   PREDICTIVE SEARCH – CSS START
=================================== */

/* Grid container */
.cs-predictive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Same card sizing as recommended */
.cs-predictive-grid .cs-product-card {
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

/* Image size SAME as recommended */
.cs-predictive-grid .cs-product-image {
  width: 100%;
  height: 210px;
  overflow: hidden;
  border-radius: 10px;
}

.cs-predictive-grid .cs-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text styling */
.cs-predictive-grid .cs-product-title {
  font-size: 14px;
  font-weight: 500;
  margin-top: 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-predictive-grid .cs-product-price {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}

/* ================= MOBILE ================= */
@media (max-width: 767px) {
  .cs-predictive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .cs-predictive-grid .cs-product-image {
    height: 125px;
  }

  .cs-predictive-grid > .cs-product-card:nth-child(n+5) {
    display: none;
  }
}
/* ================================
   PREDICTIVE SEARCH – CSS END
=================================== */