/* =========================================================
   KAFO STORE — PREMIUM CONVERSION UI
   Brand: #9F3135
   ========================================================= */

:root{
  --kafo:#9F3135;
  --kafo-dark:#7E282C;
  --kafo-soft:#F8EEEE;

  --text:#20242C;
  --muted:#747B87;

  --border:#E8E8EC;
  --white:#FFFFFF;

  --normal-price:#20242C;
  --sale-price:#C92531;
  --old-price:#959AA3;

  --success:#1F8A57;
  --success-dark:#176B43;
  --success-soft:#EEF8F2;

  --radius:16px;

  --shadow-card:0 6px 20px rgba(0,0,0,.055);
  --shadow-card-hover:0 12px 28px rgba(0,0,0,.085);
}


/* =========================================================
   REMOVE OLD CUSTOM ELEMENTS
   ========================================================= */

#kafo-dark-toggle,
#kafo-free-shipping{
  display:none !important;
}


/* =========================================================
   HEADER
   ========================================================= */

header,
.site-header,
.main-header{
  border-bottom:1px solid rgba(0,0,0,.045);
  box-shadow:0 3px 14px rgba(0,0,0,.035);
}

header a,
.site-header a,
.main-header a{
  transition:color .18s ease;
}

header a:hover,
.site-header a:hover,
.main-header a:hover{
  color:var(--kafo);
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.dropdown-menu,
.sub-menu,
.menu-dropdown{
  background:#fff !important;

  border:1px solid var(--border) !important;

  border-radius:12px !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,.10) !important;

  overflow:hidden;
}

.dropdown-menu a,
.sub-menu a,
.menu-dropdown a{
  transition:
    background-color .15s ease,
    color .15s ease;
}

.dropdown-menu a:hover,
.sub-menu a:hover,
.menu-dropdown a:hover{
  background:var(--kafo-soft) !important;
  color:var(--kafo) !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

input[type="search"],
.search-input,
salla-search input{
  border-radius:999px !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

input[type="search"]:focus,
.search-input:focus,
salla-search input:focus{
  border-color:
    rgba(159,49,53,.35) !important;

  box-shadow:
    0 0 0 3px rgba(159,49,53,.07) !important;

  outline:none !important;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-entry,
.product-card,
.s-product-card-entry{
  position:relative;

  background:#fff !important;

  border:
    1px solid #EEE1E2 !important;

  border-radius:
    var(--radius) !important;

  overflow:hidden;

  box-shadow:
    var(--shadow-card);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


/* خط كفو */

.product-entry::before,
.product-card::before,
.s-product-card-entry::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:3px;

  background:var(--kafo);

  z-index:4;
}


.product-entry:hover,
.product-card:hover,
.s-product-card-entry:hover{
  transform:translateY(-3px);

  border-color:
    rgba(159,49,53,.22) !important;

  box-shadow:
    var(--shadow-card-hover);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.product-entry img,
.product-card img,
.s-product-card-entry img{
  object-fit:contain;

  transition:
    transform .28s ease;
}

.product-entry:hover img,
.product-card:hover img,
.s-product-card-entry:hover img{
  transform:scale(1.02);
}


/* =========================================================
   PRODUCT TITLE
   ========================================================= */

.product-entry h3,
.product-card h3,
.s-product-card-entry h3,
.s-product-card-content-title{
  color:var(--text) !important;

  font-weight:800 !important;

  line-height:1.5 !important;
}


/* =========================================================
   PRODUCT DESCRIPTION
   ========================================================= */

.s-product-card-content-sub,
.s-product-card-content-description{
  color:var(--muted) !important;

  font-weight:400 !important;

  line-height:1.7 !important;
}


/* =========================================================
   PRICE SYSTEM
   ========================================================= */

/* السعر العادي */

.s-product-card-price,
.product-price,
.price{
  color:var(--normal-price) !important;

  font-size:18px !important;

  font-weight:800 !important;

  line-height:1.35 !important;
}


/* العملة */

.s-product-card-price salla-money,
.product-price salla-money,
.price salla-money{
  color:inherit !important;

  font-size:inherit !important;

  font-weight:inherit !important;
}


/* السعر القديم */

.s-product-card-regular-price,
.old-price,
.original-price,
.regular-price,
.s-product-card-entry del,
.product-details del,
.product-single del{
  color:var(--old-price) !important;

  font-size:15px !important;

  font-weight:500 !important;

  opacity:1 !important;

  text-decoration-line:
    line-through !important;

  text-decoration-thickness:
    1.5px !important;

  text-decoration-color:
    #9A9FA7 !important;
}


/* السعر بعد الخصم */

.s-product-card-sale-price,
.sale-price,
.discounted-price,
.special-price{
  color:var(--sale-price) !important;

  font-size:21px !important;

  font-weight:900 !important;

  opacity:1 !important;
}


/* إذا البطاقة فيها سعر قديم */

@supports selector(.s-product-card-entry:has(del)){

  .s-product-card-entry:has(del)
  .s-product-card-price{

    color:
      var(--sale-price) !important;

    font-size:
      21px !important;

    font-weight:
      900 !important;
  }

}


/* المنتج العادي */

@supports selector(.s-product-card-entry:not(:has(del))){

  .s-product-card-entry:not(:has(del))
  .s-product-card-price{

    color:
      var(--normal-price) !important;

    font-size:
      18px !important;

    font-weight:
      800 !important;
  }

}


/* =========================================================
   PROMOTION BADGE
   ========================================================= */

.product-badge,
.badge,
.s-product-card-promotion-title{
  border-radius:
    999px !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  padding:
    5px 11px !important;
}


.s-product-card-promotion-title{
  background:
    var(--sale-price) !important;

  color:#fff !important;

  box-shadow:
    0 5px 14px
    rgba(201,37,49,.18);
}


/* =========================================================
   ADD TO CART
   ========================================================= */

button[type="submit"],
.btn-primary,
.s-button-primary,
.add-to-cart,
salla-add-product-button button{
  background:
    var(--kafo) !important;

  border-color:
    var(--kafo) !important;

  color:#fff !important;

  border-radius:
    12px !important;

  font-weight:
    800 !important;

  min-height:
    48px;

  transition:
    background-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}


button[type="submit"]:hover,
.btn-primary:hover,
.s-button-primary:hover,
.add-to-cart:hover,
salla-add-product-button button:hover{
  background:
    var(--kafo-dark) !important;

  transform:
    translateY(-1px);

  box-shadow:
    0 6px 18px
    rgba(159,49,53,.20);
}


/* نجاح الإضافة */

.kafo-add-success{
  animation:
    kafoAddSuccess .45s ease;
}


@keyframes kafoAddSuccess{

  0%{
    transform:scale(1);
  }

  45%{
    transform:scale(1.035);
  }

  100%{
    transform:scale(1);
  }

}


/* =========================================================
   WISHLIST
   ========================================================= */

.s-product-card-wishlist-btn,
salla-button[shape="icon"]{
  border-radius:
    50% !important;
}


/* =========================================================
   PRODUCT PAGE
   ========================================================= */

.product-details h1,
.product-single h1{
  color:var(--text) !important;

  font-weight:800 !important;

  line-height:1.5 !important;
}


/* =========================================================
   PRODUCT GALLERY
   ========================================================= */

.product-slider,
.product-gallery{
  border-radius:
    16px !important;

  overflow:hidden;
}

.product-slider img,
.product-gallery img{
  object-fit:contain;
}


/* =========================================================
   INPUTS
   ========================================================= */

.product-options input,
.product-options select,
.product-options textarea,
.product-details input,
.product-details select,
.product-details textarea{
  border-radius:
    10px !important;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}


.product-options input:focus,
.product-options select:focus,
.product-options textarea:focus,
.product-details input:focus,
.product-details select:focus,
.product-details textarea:focus{
  border-color:
    rgba(159,49,53,.40) !important;

  box-shadow:
    0 0 0 3px
    rgba(159,49,53,.07) !important;

  outline:none !important;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.breadcrumb,
.breadcrumbs,
salla-breadcrumb{
  font-size:
    12px !important;

  opacity:
    .65;
}


/* =========================================================
   CUSTOMERS ALSO BOUGHT
   ========================================================= */

.s-block--features-products,
.s-block--products-slider{
  margin-top:
    30px;

  margin-bottom:
    30px;
}


.s-block--features-products h2,
.s-block--products-slider h2{
  color:
    var(--text);

  font-size:
    21px;

  font-weight:
    800;
}


/* =========================================================
   PRODUCT PAGE SHIPPING BOX
   يظهر فقط إذا JS أنشأه
   ========================================================= */

#kafo-product-shipping{
  margin-top:
    12px;

  padding:
    12px 14px;

  background:
    var(--kafo-soft);

  border:
    1px solid
    rgba(159,49,53,.15);

  border-radius:
    12px;

  color:
    var(--kafo-dark);

  font-size:
    13px;

  font-weight:
    700;

  text-align:
    center;

  overflow:
    hidden;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}


#kafo-product-shipping strong{
  color:
    var(--kafo);

  font-weight:
    900;
}


/* progress */

.kafo-shipping-progress{
  height:
    5px;

  margin-top:
    8px;

  background:
    rgba(159,49,53,.12);

  border-radius:
    999px;

  overflow:
    hidden;
}


.kafo-shipping-progress span{
  display:
    block;

  height:
    100%;

  width:
    0;

  background:
    var(--kafo);

  border-radius:
    999px;

  transition:
    width .35s ease;
}


/* مؤهل */

#kafo-product-shipping.qualified{
  background:
    var(--success-soft);

  border-color:
    rgba(31,138,87,.18);

  color:
    var(--success-dark);
}


#kafo-product-shipping.qualified strong{
  color:
    var(--success-dark);
}


#kafo-product-shipping.qualified
.kafo-shipping-progress{
  background:
    rgba(31,138,87,.13);
}


#kafo-product-shipping.qualified
.kafo-shipping-progress span{
  background:
    var(--success);
}


/* قريب من الشحن */

#kafo-product-shipping.close{
  box-shadow:
    0 0 0 4px
    rgba(159,49,53,.055);
}


/* =========================================================
   SHIPPING SUGGESTION
   ========================================================= */

.kafo-shipping-suggestion{
  display:flex;

  align-items:center;

  gap:8px;

  margin-top:
    10px;

  padding:
    9px 11px;

  border-radius:
    10px;

  text-decoration:
    none !important;

  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}


.kafo-shipping-suggestion:hover{
  transform:
    translateY(-1px);
}


.kafo-suggestion-label{
  font-size:
    11px;

  opacity:
    .72;

  white-space:
    nowrap;
}


.kafo-shipping-suggestion strong{
  flex:
    1;

  font-size:
    12px;

  font-weight:
    800;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kafo-suggestion-price{
  font-size:
    12px;

  font-weight:
    900;

  white-space:
    nowrap;
}


/* داخل صفحة المنتج */

#kafo-product-shipping
.kafo-shipping-suggestion{
  background:
    #fff;

  border:
    1px solid
    rgba(159,49,53,.12);

  color:
    var(--kafo-dark) !important;
}


#kafo-product-shipping
.kafo-shipping-suggestion:hover{
  background:
    #FFF9F9;

  border-color:
    rgba(159,49,53,.22);
}


/* =========================================================
   SHIPPING POPUP
   ========================================================= */

#kafo-shipping-toast{
  position:
    fixed;

  top:
    95px;

  left:
    50%;

  transform:
    translate(-50%, -18px)
    scale(.97);

  width:
    min(
      calc(100% - 28px),
      440px
    );

  background:
    #1F2023;

  color:
    #fff;

  padding:
    14px 16px;

  border-radius:
    14px;

  box-shadow:
    0 16px 42px
    rgba(0,0,0,.24);

  text-align:
    center;

  font-size:
    14px;

  font-weight:
    700;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  z-index:
    999999;

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}


#kafo-shipping-toast.show{
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translate(-50%, 0)
    scale(1);
}


#kafo-shipping-toast strong{
  color:
    #FFD9DB;

  font-weight:
    900;
}


/* Popup suggestion */

#kafo-shipping-toast
.kafo-shipping-suggestion{
  background:
    rgba(255,255,255,.10);

  border:
    1px solid
    rgba(255,255,255,.10);

  color:
    #fff !important;
}


#kafo-shipping-toast
.kafo-shipping-suggestion:hover{
  background:
    rgba(255,255,255,.16);
}


/* Popup progress */

#kafo-shipping-toast
.kafo-shipping-progress{
  background:
    rgba(255,255,255,.15);
}


#kafo-shipping-toast
.kafo-shipping-progress span{
  background:
    #fff;
}


/* مؤهل */

#kafo-shipping-toast.qualified{
  background:
    var(--success-dark);
}


/* قريب */

#kafo-shipping-toast.close{
  background:
    linear-gradient(
      135deg,
      #7E282C,
      #A63339
    );
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  border-top:
    1px solid
    rgba(255,255,255,.08);
}


footer a{
  transition:
    opacity .18s ease;
}


footer a:hover{
  opacity:
    .78;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:768px){

  .product-entry,
  .product-card,
  .s-product-card-entry{
    border-radius:
      13px !important;

    box-shadow:
      0 4px 15px
      rgba(0,0,0,.045);
  }


  .product-entry:hover,
  .product-card:hover,
  .s-product-card-entry:hover{
    transform:
      none;
  }


  .product-entry:hover img,
  .product-card:hover img,
  .s-product-card-entry:hover img{
    transform:
      none;
  }


  .product-details h1,
  .product-single h1{
    font-size:
      20px !important;
  }


  salla-add-product-button button,
  .s-button-primary,
  .btn-primary{
    min-height:
      46px;
  }


  .s-block--features-products h2,
  .s-block--products-slider h2{
    font-size:
      19px;
  }


  #kafo-shipping-toast{
    top:
      74px;

    font-size:
      13px;

    padding:
      12px 14px;
  }


  #kafo-product-shipping{
    font-size:
      12px;

    padding:
      10px 12px;
  }


  .kafo-shipping-suggestion{
    gap:
      6px;
  }


  .kafo-suggestion-label{
    display:
      none;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}