/********************************************
Salla Pro v4 — Light, Cohesive, Animated
Brand: #5b3317  | Accent: #c07a3f
*********************************************/
:root{
  /* palette */
  --bg:#ffffff;
  --surface:#f8fafc;
  --ink:#1f2328;
  --muted:#64748b;
  --border:#e5e9f0;

  --brand:#5b3317;
  --accent:#c07a3f;

  /* ui */
  --radius:16px;
  --round:999px;
  --shadow-sm:0 6px 18px rgba(2,6,23,.06);
  --shadow:0 24px 60px rgba(2,6,23,.12);

  /* motion */
  --t1:160ms; --t2:260ms; --t3:.6s;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* base */
html,body{background:var(--bg);color:var(--ink);font-synthesis-weight:none}
a{color:var(--brand)} a:hover{opacity:.9}

/* header */
.store-header,.store-header .header,.store-header .top-header,.store-header .bottom-header{
  background:#fff !important;border:none !important;box-shadow:0 1px 0 var(--border) inset !important;
}
.store-header .header,.store-header .bottom-header{padding:.6rem 1rem}
.store-header .search-input,input[type="search"]{
  background:#fff;border:1px solid var(--border);border-radius:var(--round);
  color:var(--ink);padding:.7rem 1rem !important;
  transition:box-shadow var(--t2) var(--ease),border-color var(--t2) var(--ease);
}
.store-header .search-input:focus{box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 20%, transparent);border-color:color-mix(in oklab, var(--brand) 55%, #fff)}
.header-btn__icon{
  width:40px;height:40px;border-radius:var(--round);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:#fff;color:var(--brand);
  transition:transform var(--t1) var(--ease);
}
.header-btn__icon:hover{transform:translateY(-2px)}
.store-header .header svg,*[class*="icon"] svg{fill:var(--brand);stroke:var(--brand)}

/* sections */
.s-block{margin-top:2rem}
@media(max-width:767px){.s-block{margin-top:1rem}}

/* hero full-width */
section.s-block.s-block--fixed-banner{padding:0 !important;margin:0 !important;background:transparent !important}
section.s-block.s-block--fixed-banner>.container{max-width:100% !important;padding:0 !important}
.s-block--fixed-banner .banner--fixed{border-radius:0 !important;overflow:hidden !important}
.s-block--fixed-banner .banner--fixed img{display:block;width:100%;height:auto;object-fit:cover}

/* banners transparent */
.s-block--banners,.s-block--banners.container,.s-block--banners .s-block__content,.s-block--banners .s-block__wrapper{
  background:transparent !important;box-shadow:none !important;border:none !important;
}
.s-block--banners.container .grid{display:grid;gap:18px}
@media(min-width:992px){.s-block--banners.container .grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:991px){.s-block--banners.container .grid{grid-template-columns:repeat(3,1fr)}}
.s-block--banners.container .banner-entry{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease),border-color var(--t2) var(--ease);
}
.s-block--banners.container .banner-entry:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#dfe3ea}
.s-block--banners.container .banner-entry img{display:block;width:100%;height:100%;object-fit:cover;background:transparent}

/* headings */
.s-block__title,.s-slider-block__title,h1,h2,h3{color:var(--ink);font-weight:900;letter-spacing:.2px}
.s-block__subtitle{color:var(--muted)}

/* product card */
.s-products-grid article,.s-products-slider-wrapper .swiper-slide>article{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease),border-color var(--t2) var(--ease);
}
.s-products-grid article:hover,.s-products-slider-wrapper .swiper-slide>article:hover{
  transform:translateY(-6px);box-shadow:var(--shadow);border-color:#dfe3ea;
}

/* image */
.s-products-grid article [class*="thumb"],.s-products-slider-wrapper .swiper-slide [class*="thumb"],
.s-products-grid article [class*="img"],  .s-products-slider-wrapper .swiper-slide [class*="img"]{
  aspect-ratio:4/5;background:#f3f5f8;position:relative;
}
.s-products-grid article img,.s-products-slider-wrapper .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block}

/* title + price */
.s-products-grid article [class*="title"],.s-products-slider-wrapper .swiper-slide [class*="title"]{
  color:var(--ink);font-weight:800;font-size:1rem;line-height:1.35;margin:.65rem .9rem .35rem;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.s-products-grid article [class*="price"],.s-products-slider-wrapper .swiper-slide [class*="price"],
.s-products-grid article .s-price,.s-products-slider-wrapper .swiper-slide .s-price{
  color:var(--brand);font-weight:900;font-size:1.05rem;margin:0 .9rem .85rem;
}
.s-products-grid article [class*="price"] .old,.s-products-slider-wrapper .swiper-slide [class*="price"] .old{
  color:#94a3b8;text-decoration:line-through;margin-inline-start:.5rem
}

/* add-to-cart button */
salla-add-product-button .s-button-element{
  width:calc(100% - 1.2rem);margin:0 .6rem .95rem;border:none;border-radius:var(--round);
  background:linear-gradient(90deg,var(--brand),var(--accent));color:#fff;
  padding:.78rem 1rem;font-weight:900;letter-spacing:.2px;
  transition:transform var(--t1) var(--ease),filter var(--t1) var(--ease);
}
salla-add-product-button .s-button-element:hover{transform:translateY(-2px);filter:saturate(1.06)}
salla-add-product-button .s-button-outline{background:linear-gradient(90deg,var(--brand),var(--accent));border-color:transparent;color:#fff}

/* slider controls */
.s-products-slider-wrapper .swiper-slide{height:auto}
.s-products-slider-wrapper .swiper-button-next,.s-products-slider-wrapper .swiper-button-prev{
  width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border);
  color:var(--brand);box-shadow:var(--shadow-sm);
  transition:transform var(--t1) var(--ease),background var(--t1) var(--ease);
}
.s-products-slider-wrapper .swiper-button-next:hover,.s-products-slider-wrapper .swiper-button-prev:hover{transform:translateY(-2px);background:#fdfdfd}
.s-products-slider-wrapper .swiper-pagination-bullet{background:var(--brand)}

/* footer (dark for contrast) */
.store-footer,.store-footer .container,.store-footer [class*="bg-"],.store-footer [style*="background"]{
  background:#111827 !important;color:#fff !important;border:none !important;box-shadow:none !important;
}
.store-footer{padding:56px 20px !important;text-align:center !important}
.store-footer h3,.store-footer .title{color:#fff !important;font-weight:800;margin-bottom:.5rem}
.store-footer p,.store-footer li,.store-footer a,.store-footer span,.store-footer small{color:rgba(255,255,255,.92) !important}
.store-footer a:hover{color:var(--accent) !important;text-decoration:underline}
.store-footer__copyright{margin-top:20px;color:#fff !important;opacity:.9;text-align:center}

/* reveal animation */
.reveal{opacity:0;transform:translateY(22px) scale(.99);transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease)}
.reveal.in{opacity:1;transform:none}

/* mobile */
@media(max-width:767px){
  .s-products-slider-wrapper .swiper-slide{width:33.333% !important;max-width:33.333% !important}
  .s-products-slider-wrapper .swiper-slide [class*="thumb"]{aspect-ratio:3/4}
  .s-products-slider-wrapper .swiper-slide [class*="title"]{font-size:.84rem;margin:.45rem .6rem .2rem}
  .s-products-slider-wrapper .swiper-slide [class*="price"],.s-products-slider-wrapper .swiper-slide .s-price{font-size:.9rem;margin:0 .6rem .5rem}
  salla-add-product-button .s-button-element{margin:0 .6rem .65rem;padding:.55rem .75rem;font-size:.84rem}
  .s-block.s-block--banners{margin:0 !important;padding:6px 0 !important}
  .s-block + .s-block{margin-top:.85rem !important}
}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

.s-block--features__item .feature-icon i {
    color: #ff6767;
    color: #ffffff;
    font-size: 1.875rem;
    line-height: 2.25rem
36px
;
}
.s-block--features__item .feature-icon {
    align-items: center;
    background-color: #414042;
    background-color: #593014;
    border-radius: 9999px;
    display: flex
;
    height: 4rem;
    justify-content: center;
    margin-bottom: .75rem;
    overflow: hidden;
    width: 4rem;
}
.store-header .header svg, *[class*="icon"] svg {
    fill: #fff5ed;
    stroke: #fffefd;
}

/* Mobile cart button fix */
@media(max-width:767px){
  /* داخل السلايدر */
  .s-products-slider-wrapper .swiper-slide salla-add-product-button .s-button-element{
    width:calc(100% - 1.2rem) !important;
    margin:0 .6rem .6rem !important;
    padding:.6rem .75rem !important;
    min-height:38px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.4rem !important;

    font-size:.82rem !important;
    line-height:1 !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }

  /* في شبكة المنتجات أيضًا */
  .s-products-grid salla-add-product-button .s-button-element{
    width:100% !important;
    padding:.6rem .8rem !important;
    min-height:40px !important;
    font-size:.84rem !important;
    line-height:1 !important;
  }

  /* حجم الأيقونة داخل الزر */
  salla-add-product-button .s-button-element svg{
    width:16px !important;
    height:16px !important;
    flex:0 0 16px !important;
  }

  /* مساحة تحت السعر حتى ما يلزق بالزر */
  .s-products-slider-wrapper .swiper-slide [class*="price"],
  .s-products-grid [class*="price"]{ margin-bottom:.55rem !important; }
}

/* ==== Fix: Mobile Add-to-Cart button width + text alignment ==== */
@media (max-width: 767px){
  /* اجبر أزرار سلة سلة على الامتداد الكامل داخل الكرت */
  salla-add-product-button .s-button-element,
  salla-add-product-button .s-button-element.s-button-wide,
  .s-products-slider-wrapper .swiper-slide salla-add-product-button .s-button-element,
  .s-products-grid salla-add-product-button .s-button-element{
    width: calc(100% - 1.2rem) !important;
    margin: 0 .6rem .7rem !important;

    min-height: 42px !important;
    padding: .65rem .9rem !important;
    border-radius: 999px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;

    font-size: .92rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    color: #fff !important;           /* تأكيد وضوح النص */
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* في حال سلة تضيف حاوية داخلية للنص */
  salla-add-product-button .s-button-element span,
  salla-add-product-button .s-button-element .text,
  salla-add-product-button .s-button-element .btn__text{
    display: inline-block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
  }

  /* حجم الأيقونة والمسافة */
  salla-add-product-button .s-button-element svg,
  salla-add-product-button .s-button-element i{
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  /* مسافة تحت السعر حتى ما يلتصق بالزر */
  .s-products-slider-wrapper .swiper-slide [class*="price"],
  .s-products-grid [class*="price"]{
    margin-bottom: .55rem !important;
  }
}

/* ===== أزرار الإضافة للسلة – تخصيص للموبايل ===== */
@media(max-width:767px){
  .s-product-card-vertical .s-button-primary,
  .product-card .s-button-primary,
  button.s-button-element.s-button-primary {
    font-size: 12px !important;    /* تصغير حجم النص */
    padding: 6px 14px !important;  /* توازن أفضل للزر */
    min-height: 34px !important;   /* يخلي الارتفاع أصغر ومناسب */
    border-radius: 20px !important;/* شكل دائري أنيق */
  }
  
  /* الأيقونة جنب النص – تصغير المسافة */
  .s-product-card-vertical .s-button-primary svg,
  .product-card .s-button-primary svg {
    width: 14px !important;
    height: 14px !important;
    margin-inline-start: 4px !important;
  }
}