@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');
:root{--pink:#b82d6d;--pink2:#f6d7e5;--gold:#c99a32;--dark:#321827;--cream:#fff9fc;--line:#ead8e2}*{box-sizing:border-box}body{margin:0;font-family:Vazirmatn,Tahoma,sans-serif;background:var(--cream);color:var(--dark)}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}header{position:sticky;top:0;z-index:20;background:#fff9fcf5;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.top{max-width:1200px;margin:auto;padding:14px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.logo{font-weight:800;font-size:20px;color:var(--pink);letter-spacing:1px}.logo span{color:var(--gold);font-size:12px}.search{display:flex;flex:1;max-width:360px;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:white}.search input{border:0;outline:0;padding:10px 15px;width:100%;background:transparent}.search button{border:0;background:var(--pink);color:#fff;width:48px}.top nav{display:flex;gap:14px;flex:1;justify-content:center;font-size:13px}.top nav a:hover,.actions a:hover{color:var(--pink)}.actions{display:flex;gap:14px;font-size:14px}.actions b{background:var(--gold);color:white;border-radius:99px;padding:1px 6px;font-size:10px}.hero{max-width:1200px;margin:30px auto;padding:60px 35px;border-radius:28px;background:linear-gradient(135deg,#f9dce9,#fff,#f4e4bb);display:flex;justify-content:space-between;align-items:center;gap:30px}.hero h1{font-size:clamp(30px,5vw,58px);margin:8px 0}.hero p{max-width:560px;color:#6e5963}.btn{border:0;background:var(--pink);color:#fff;padding:11px 18px;border-radius:12px;cursor:pointer;font-weight:700}.btn.gold{background:var(--gold)}.btn.light{background:#fff;color:var(--pink);border:1px solid var(--line)}.section{max-width:1200px;margin:45px auto;padding:0 20px}.section-title{text-align:center;margin-bottom:24px}.section-title span{color:var(--gold);font-size:12px;font-weight:700}.section-title h2{margin:5px}.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.cat{padding:25px;background:#fff;border:1px solid var(--line);border-radius:20px;text-align:center;font-weight:700}.cat:hover{transform:translateY(-2px);border-color:var(--gold)}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}.product:hover{box-shadow:0 12px 35px #b82d6d16}.product-image{height:230px;background:linear-gradient(135deg,#fff,#f8e5ee);display:flex;align-items:center;justify-content:center;font-size:70px;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:cover}.product-info{padding:15px}.brand{color:var(--gold);font-size:11px;font-weight:700}.product h3{margin:5px 0;font-size:16px}.type{font-size:12px;color:#806d77;min-height:25px}.product-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.price{font-weight:800;color:var(--pink)}.price small{font-size:10px}.add{border:0;background:var(--pink);color:#fff;border-radius:10px;width:38px;height:38px;cursor:pointer}.page{max-width:1100px;margin:30px auto;padding:0 20px}.detail{display:grid;grid-template-columns:1fr 1fr;gap:30px;background:#fff;border:1px solid var(--line);border-radius:25px;padding:25px}.gallery{display:flex;flex-direction:column;gap:10px}.mainimg{height:450px;background:#f9e8ef;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:100px;overflow:hidden}.mainimg img{width:100%;height:100%;object-fit:cover}.thumbs{display:flex;gap:8px;overflow:auto}.thumbs img{width:70px;height:70px;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:pointer}.colors{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}.color{width:35px;height:35px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #bbb;cursor:pointer}.color.selected{box-shadow:0 0 0 2px var(--pink)}.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:18px}.form{display:grid;gap:10px}.form input,.form textarea,.form select{border:1px solid var(--line);border-radius:10px;padding:11px;background:#fff;outline:0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.tablewrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}.cart-item{display:grid;grid-template-columns:90px 1fr auto;gap:15px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.cart-item img{width:90px;height:90px;object-fit:cover;border-radius:12px;background:#f8e5ee}.qty{display:flex;align-items:center;gap:8px}.qty button{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:30px}.notice{padding:14px;border-radius:12px;background:#fff3f7;border:1px solid var(--pink2)}.adminnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.adminnav button{border:1px solid var(--line);background:#fff;padding:9px 12px;border-radius:10px;cursor:pointer}.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{padding:20px;background:#fff;border:1px solid var(--line);border-radius:15px}.stat b{font-size:24px;color:var(--pink)}footer{margin-top:70px;padding:35px 20px;background:#321827;color:#fff;display:flex;justify-content:space-around;gap:20px;flex-wrap:wrap}footer p{color:#dbc7d1}#toast{position:fixed;bottom:25px;left:25px;background:#321827;color:#fff;padding:12px 18px;border-radius:12px;display:none;z-index:50}.empty{text-align:center;padding:45px;color:#806d77}@media(max-width:900px){.top nav{order:5;width:100%;overflow:auto;justify-content:flex-start}.products{grid-template-columns:repeat(2,1fr)}.cats{grid-template-columns:repeat(2,1fr)}.detail{grid-template-columns:1fr}.statgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.hero{margin:15px;padding:35px 20px}.products{grid-template-columns:1fr 1fr;gap:10px}.product-image{height:170px}.grid2{grid-template-columns:1fr}.top{padding:10px}.search{order:3;max-width:none;width:100%}.detail{padding:15px}.mainimg{height:330px}}

/* Cart add motion */
.cart-added-motion{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:99999;
  min-width:300px;
  max-width:calc(100vw - 32px);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 15px 45px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  gap:12px;
  direction:rtl;
  transform:translateY(120px);
  opacity:0;
  animation:cartAddedIn .45s cubic-bezier(.2,.8,.2,1) forwards;
}

.cart-added-motion.hide{
  animation:cartAddedOut .35s ease forwards;
}

.cart-added-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4ead1;
  color:#9a7428;
  font-size:21px;
  flex:none;
}

.cart-added-text{
  flex:1;
}

.cart-added-text strong{
  display:block;
  margin-bottom:4px;
}

.cart-added-text small{
  color:#777;
}

.cart-added-link{
  display:inline-block;
  margin-top:7px;
  color:#9a7428;
  font-weight:700;
  text-decoration:none;
}

@keyframes cartAddedIn{
  from{
    transform:translateY(120px) scale(.96);
    opacity:0;
  }
  to{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}

@keyframes cartAddedOut{
  from{
    transform:translateY(0);
    opacity:1;
  }
  to{
    transform:translateY(120px);
    opacity:0;
  }
}

@media(max-width:600px){
  .cart-added-motion{
    right:12px;
    left:12px;
    bottom:12px;
    min-width:0;
  }
}


/* Home product cart */
.product{
  position:relative;
}

.home-colors{
  padding:10px 14px 4px;
}

.home-colors-title{
  font-size:13px;
  font-weight:700;
  margin-bottom:8px;
}

.home-color-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.home-color{
  border:1px solid #ddd;
  background:#fff;
  border-radius:10px;
  padding:6px 9px;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:5px;
  transition:.2s;
}

.home-color:hover{
  transform:translateY(-1px);
}

.home-color.selected{
  border-color:#111;
  box-shadow:0 0 0 2px rgba(0,0,0,.08);
}

.color-dot{
  width:15px;
  height:15px;
  border-radius:50%;
  display:inline-block;
  border:1px solid rgba(0,0,0,.15);
}

.home-add-cart{
  width:calc(100% - 28px);
  margin:10px 14px 14px;
  border:0;
  border-radius:12px;
  padding:11px 12px;
  background:#111;
  color:#fff;
  font-family:inherit;
  font-size:11.2px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.home-add-cart:hover{
  transform:translateY(-2px);
  opacity:.92;
}

.home-add-cart:active{
  transform:scale(.97);
}


/* ===== CART ADDED MOTION ===== */

.cart-added-motion{
  position:fixed;
  top:24px;
  right:24px;
  z-index:99999;
  width:min(360px,calc(100vw - 32px));
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:0 15px 45px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  gap:12px;
  direction:rtl;
  transform:translateY(-140px) scale(.9);
  opacity:0;
  transition:
    transform .45s cubic-bezier(.2,.9,.25,1.2),
    opacity .3s ease;
  border:1px solid rgba(0,0,0,.08);
}

.cart-added-motion.show{
  transform:translateY(0) scale(1);
  opacity:1;
}

.cart-added-motion.hide{
  transform:translateY(-140px) scale(.9);
  opacity:0;
}

.cart-added-motion img{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:13px;
  flex:none;
}

.cart-added-motion-icon{
  width:58px;
  height:58px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f5f5f5;
  font-size:27px;
  flex:none;
}

.cart-added-motion-content{
  flex:1;
  min-width:0;
}

.cart-added-motion-content strong{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}

.cart-added-motion-content span{
  display:block;
  font-size:13px;
  color:#777;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cart-added-motion-link{
  display:inline-block;
  margin-top:7px;
  color:#111;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}

@media(max-width:600px){
  .cart-added-motion{
    top:12px;
    right:12px;
    width:calc(100vw - 24px);
  }
}


/* ===== PRODUCT -> CART FLY MOTION ===== */

.cart-fly-clone{
  position:fixed;
  z-index:100000;
  pointer-events:none;
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 12px 35px rgba(0,0,0,.25);
  transition:
    left .75s cubic-bezier(.2,.8,.25,1),
    top .75s cubic-bezier(.2,.8,.25,1),
    width .75s ease,
    height .75s ease,
    opacity .75s ease,
    transform .75s cubic-bezier(.2,.8,.25,1);
}

.cart-fly-clone.fly{
  width:30px;
  height:30px;
  transform:rotate(360deg) scale(.65);
  opacity:.25;
}

.cart-target-pulse{
  animation:cartTargetPulse .8s ease;
}

@keyframes cartTargetPulse{
  0%{transform:scale(1)}
  35%{transform:scale(1.35)}
  70%{transform:scale(.9)}
  100%{transform:scale(1)}
}

.cart-added-message{
  position:fixed;
  top:22px;
  right:22px;
  z-index:100001;
  direction:rtl;
  background:#fff;
  border-radius:16px;
  padding:13px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  font-weight:700;
  opacity:0;
  transform:translateY(-25px);
  transition:.35s ease;
}

.cart-added-message.show{
  opacity:1;
  transform:translateY(0);
}


/* =====================================================
   ROZALI BEAUTY - RESPONSIVE DESIGN
   Mobile / Tablet / Desktop
   ===================================================== */

/* جلوگیری از بیرون‌زدگی محتوا */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  width:100%;
  overflow-x:hidden;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img{
  max-width:100%;
}

/* کانتینرهای اصلی */
.page,
.section,
.hero{
  width:min(1200px,calc(100% - 32px));
  margin-left:auto;
  margin-right:auto;
}

/* محصولات */
.products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

.grid2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.statgrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

/* =====================================================
   TABLET
   ===================================================== */

@media (max-width:1000px){

  .products{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
  }

  .statgrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero{
    gap:25px;
  }

  .hero h1{
    font-size:38px;
  }

}

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

@media (max-width:700px){

  .page,
  .section,
  .hero{
    width:calc(100% - 24px);
  }

  /* هدر */
  header{
    padding:10px 12px;
  }

  header .row{
    flex-wrap:wrap;
    gap:10px;
  }

  nav{
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }

  nav a{
    display:inline-block;
  }

  /* هیرو */
  .hero{
    grid-template-columns:1fr !important;
    text-align:center;
    padding:30px 20px !important;
  }

  .hero > div:last-child{
    display:none;
  }

  .hero h1{
    font-size:30px;
    line-height:1.35;
  }

  .hero p{
    font-size:11.2px;
    line-height:1.9;
  }

  /* دسته بندی */
  .cats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
  }

  /* محصولات */
  .products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .product{
    min-width:0;
  }

  .product h3{
    font-size:11.2px;
    line-height:1.5;
  }

  .product .brand,
  .product .type{
    font-size:11px;
  }

  .price{
    font-size:11.2px;
  }

  .home-add-cart{
    width:calc(100% - 16px);
    margin:8px;
    font-size:12px;
    padding:10px 6px;
  }

  .home-colors{
    padding:8px;
  }

  .home-color{
    font-size:10px;
    padding:5px 6px;
  }

  /* فرم ها */
  .grid2{
    grid-template-columns:1fr;
    gap:12px;
  }

  input,
  textarea,
  select,
  button{
    max-width:100%;
  }

  /* کارت های محتوا */
  .card{
    max-width:100%;
    overflow:hidden;
  }

  /* سبد خرید */
  .cart-item{
    display:grid !important;
    grid-template-columns:64px 1fr !important;
    gap:10px;
    align-items:center;
  }

  .cart-item > img{
    width:64px !important;
    height:64px !important;
  }

  .cart-item .qty{
    grid-column:1 / -1;
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  /* ردیف های افقی */
  .row{
    flex-wrap:wrap;
    gap:10px;
  }

  .row > *{
    max-width:100%;
  }

  /* جدول مدیریت */
  .tablewrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .table{
    min-width:650px;
  }

  /* پنل مدیریت */
  .adminnav{
    display:flex;
    overflow-x:auto;
    gap:8px;
    white-space:nowrap;
  }

  .adminnav button{
    flex:none;
  }

  /* آمار */
  .statgrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .stat{
    min-width:0;
    padding:14px !important;
  }

  /* صفحه محصول */
  .product-page,
  .product-detail{
    grid-template-columns:1fr !important;
  }

  /* موشن سبد خرید */
  .cart-added-message{
    top:12px;
    right:12px;
    left:12px;
    width:auto;
    text-align:center;
  }

  /* دکمه ها */
  .btn{
    max-width:100%;
  }

}

/* =====================================================
   SMALL PHONES
   ===================================================== */

@media (max-width:430px){

  .page,
  .section,
  .hero{
    width:calc(100% - 16px);
  }

  .products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .product-info{
    padding:8px !important;
  }

  .product h3{
    font-size:13px;
  }

  .home-add-cart{
    font-size:11px;
    padding:9px 4px;
  }

  .hero{
    padding:24px 14px !important;
  }

  .hero h1{
    font-size:25px;
  }

  .cats{
    grid-template-columns:1fr 1fr !important;
  }

  .statgrid{
    grid-template-columns:1fr 1fr;
  }

}

/* =====================================================
   LARGE DESKTOP
   ===================================================== */

@media (min-width:1400px){

  .page,
  .section,
  .hero{
    width:min(1320px,calc(100% - 60px));
  }

  .products{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

}

/* جلوگیری از اسکرول افقی */
#app{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}


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

.cart-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:20px;
}

.cart-product-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:15px;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.cart-product-image{
  width:105px;
  height:105px;
  flex:none;
  border-radius:14px;
  overflow:hidden;
  background:#f7f7f7;
}

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

.cart-no-image{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:35px;
}

.cart-product-info{
  flex:1;
  min-width:0;
}

.cart-product-name{
  font-size:17px;
  font-weight:800;
  margin-bottom:7px;
}

.cart-product-color{
  color:#777;
  font-size:13px;
  margin-bottom:7px;
}

.cart-product-price{
  font-weight:800;
  font-size:15px;
}

.cart-product-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:13px;
}

.cart-qty{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid #ddd;
  border-radius:11px;
  overflow:hidden;
  background:#fff;
}

.cart-qty button{
  width:38px;
  height:36px;
  border:0;
  background:#f7f7f7;
  cursor:pointer;
  font-size:20px;
}

.cart-qty b{
  min-width:38px;
  text-align:center;
  font-size:11.2px;
}

.cart-delete-btn{
  height:36px;
  padding:0 14px;
  border:1px solid #eee;
  border-radius:10px;
  background:#fff;
  color:#b42318;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.cart-delete-btn:hover{
  background:#fff1f0;
  border-color:#f0b5b0;
  transform:translateY(-1px);
}

.cart-total-card{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.cart-total-card > div{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.cart-total-card strong{
  font-size:20px;
}

.cart-checkout-btn{
  white-space:nowrap;
}

.cart-empty{
  text-align:center;
  padding:50px 20px;
  line-height:2;
  font-size:16px;
}

/* موبایل */
@media(max-width:700px){

  .cart-product-card{
    gap:12px;
    padding:11px;
    border-radius:15px;
  }

  .cart-product-image{
    width:82px;
    height:82px;
  }

  .cart-product-name{
    font-size:11.2px;
  }

  .cart-product-price{
    font-size:13px;
  }

  .cart-product-actions{
    gap:7px;
    flex-wrap:wrap;
  }

  .cart-qty button{
    width:32px;
    height:34px;
  }

  .cart-qty b{
    min-width:32px;
  }

  .cart-delete-btn{
    padding:0 10px;
    font-size:12px;
  }

  .cart-total-card{
    flex-direction:column;
    align-items:stretch;
  }

  .cart-checkout-btn{
    width:100%;
  }

}


/* ===== SEARCH FINAL FIX ===== */
.search{
  flex: 1 1 700px !important;
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  height: 54px !important;
  border-radius: 16px !important;
}

.search input{
  flex: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 54px !important;
  font-size: 18px !important;
  padding: 0 20px !important;
}

.search button{
  flex: 0 0 64px !important;
  width: 64px !important;
  height: 54px !important;
  font-size: 30px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

@media(max-width:900px){
  .search{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media(max-width:600px){
  .search{
    height: 50px !important;
  }

  .search input{
    height: 50px !important;
    font-size: 16px !important;
  }

  .search button{
    flex-basis: 58px !important;
    width: 58px !important;
    height: 50px !important;
    font-size: 27px !important;
  }
}

/* ===== GREEN CART & CHECKOUT BUTTONS ===== */

.add{
  background:#16a34a !important;
  color:#fff !important;
  border:none !important;
}

.add:hover{
  background:#15803d !important;
  transform:translateY(-1px);
}

.btn.cart-green,
.btn.checkout-green,
.btn.green{
  background:#16a34a !important;
  color:#fff !important;
  border:none !important;
}

.btn.cart-green:hover,
.btn.checkout-green:hover,
.btn.green:hover{
  background:#15803d !important;
  transform:translateY(-1px);
}

/* دکمه‌های سبز داخل سبد و پرداخت */
button[type="submit"],
.cart-actions .btn,
.checkout-actions .btn{
  transition:all .2s ease;
}

/* اگر دکمه متن «ادامه سفارش» یا «پرداخت» باشد */
.btn{
  transition:all .2s ease;
}


/* ===== ROZALI GREEN CART / CHECKOUT ===== */

.add,
.home-add-cart,
button.btn:not(.light),
a.btn:not(.light),
.cart-checkout-btn {
  background: #16a34a !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 5px 14px rgba(22,163,74,.20);
  transition: all .2s ease;
}

.add:hover,
.home-add-cart:hover,
button.btn:not(.light):hover,
a.btn:not(.light):hover,
.cart-checkout-btn:hover {
  background: #15803d !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(22,163,74,.28);
}

/* دکمه ادامه سفارش و پرداخت در سبد */
.cart-checkout-btn {
  background: #16a34a !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* دکمه افزودن به سبد در صفحه محصول */
.detail .btn {
  background: #16a34a !important;
  color: #fff !important;
}

/* دکمه ثبت سفارش و پرداخت */
form .btn {
  background: #16a34a !important;
  color: #fff !important;
}

/* حذف رنگ طلایی از دکمه‌های خرید */
.btn.gold {
  background: #16a34a !important;
  color: #fff !important;
}

/* حالت کلیک */
.add:active,
.home-add-cart:active,
.btn:active,
.cart-checkout-btn:active {
  transform: translateY(1px);
}

/* روی موبایل */
@media (max-width:600px){
  .home-add-cart,
  .cart-checkout-btn,
  .detail .btn,
  form .btn {
    min-height: 46px;
  }
}


/* ===== GREEN CART & HOME BUTTONS ===== */

/* دکمه سبد خرید و بازگشت به صفحه اصلی */
.cart-back-btn,
a[href="#/cart"].btn,
a[href="#/"].btn {
  background: #16a34a !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 5px 14px rgba(22,163,74,.20);
  transition: all .2s ease;
}

.cart-back-btn:hover,
a[href="#/cart"].btn:hover,
a[href="#/"].btn:hover {
  background: #15803d !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(22,163,74,.28);
}


/* ===== DISCOUNT PRICE ===== */

.price-box{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.old-price{
  color:#b82d6d !important;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  font-size:12px;
  font-weight:600;
  opacity:.9;
}

.new-price{
  color:#22a06b !important;
  font-size:17px;
  font-weight:800;
}


/* ===== DISCOUNT PRICE ===== */

.price-box{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.old-price{
  color:#b82d6d !important;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  font-size:12px;
  font-weight:600;
  opacity:.9;
}

.new-price{
  color:#22a06b !important;
  font-size:17px;
  font-weight:800;
}


/* ===== FINAL DISCOUNT PRICE ===== */
.price-box{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:3px !important;
}

.price-box .old-price{
  color:#b82d6d !important;
  text-decoration-line:line-through !important;
  text-decoration-thickness:2px !important;
  text-decoration-color:#b82d6d !important;
  font-size:12px !important;
  font-weight:600 !important;
  opacity:1 !important;
  line-height:1.4 !important;
}

.price-box .new-price{
  color:#6fbd91 !important;
  font-size:17px !important;
  font-weight:800 !important;
  line-height:1.5 !important;
}

/* PRODUCT DETAIL DISCOUNT PRICE */
.product-detail .price-box,
.product-page .price-box,
.product-view .price-box {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}

.price-box .old-price {
  color:#b82d6d !important;
  text-decoration:line-through !important;
  text-decoration-thickness:2px !important;
  font-size:12px !important;
  font-weight:600 !important;
}

.price-box .new-price {
  font-weight:700 !important;
}


.detail-price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin: 8px 0 16px;
}

.detail-old-price {
  color: #999;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  font-size: 14px;
  font-weight: 600;
}

.detail-new-price {
  margin: 0 !important;
}


/* رنگ قیمت در صفحه محصول */
.detail-old-price {
  color: #d32f2f !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
  font-size: 14px;
  font-weight: 600;
}

.detail-new-price {
  color: #168a45 !important;
  margin: 0 !important;
  font-weight: 800 !important;
}


/* دکمه حساب کاربری */
a[href="#/account"] {
  background: #e91e63 !important;
  color: #fff !important;
  border-color: #e91e63 !important;
}

/* آدمک داخل دکمه حساب کاربری */
a[href="#/account"] svg,
a[href="#/account"] svg *,
a[href="#/account"] i {
  color: #2196f3 !important;
  fill: #2196f3 !important;
  stroke: #2196f3 !important;
}


/* حساب کاربری - صورتی ملایم */
a[href="#/account"] {
  background: #fce4ec !important;
  color: #e91e63 !important;
  border-color: #f8bbd0 !important;
}

/* آیکون آدمک - آبی آسمانی */
a[href="#/account"] svg,
a[href="#/account"] svg *,
a[href="#/account"] i {
  color: #4fc3f7 !important;
  fill: #4fc3f7 !important;
  stroke: #4fc3f7 !important;
}


/* فرم دکمه حساب کاربری با گوشه‌های کاملاً گرد */
a[href="#/account"] {
  border-radius: 14px !important;
  padding: 9px 16px !important;
  background: #fce4ec !important;
  border: 1px solid #f8bbd0 !important;
  color: #e91e63 !important;
  overflow: hidden !important;
}


/* نمایش کامل نوشته حساب کاربری */
a[href="#/account"] {
  width: auto !important;
  min-width: 120px !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex-shrink: 0 !important;
}


/* کادرهای منوی دسته‌بندی زیر سرچ */
.nav a,
nav a,
.categories a,
.category-nav a {
  background: #fceef3 !important;
  border: 1px solid #f8d5e1 !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  margin: 3px !important;
  color: #555 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  transition: all .2s ease;
}

/* حالت لمس/هاور */
.nav a:hover,
nav a:hover,
.categories a:hover,
.category-nav a:hover {
  background: #f9dce7 !important;
  border-color: #f2b8cb !important;
}


/* تنظیم نهایی منوی دسته‌بندی */
.nav a,
nav a,
.categories a,
.category-nav a {
  background: #f9e3ea !important;
  border: 1px solid #f2c5d3 !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  margin: 2px !important;
  font-size: 13px !important;
  min-height: 30px !important;
  color: #555 !important;
}

.nav a:hover,
nav a:hover,
.categories a:hover,
.category-nav a:hover {
  background: #f5d3df !important;
  border-color: #ecafc2 !important;
}


/* منوی دسته‌بندی - مناسب موبایل */
.nav,
nav,
.categories,
.category-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;
  padding: 2px !important;
  margin: 0 !important;
  width: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.nav::-webkit-scrollbar,
nav::-webkit-scrollbar,
.categories::-webkit-scrollbar,
.category-nav::-webkit-scrollbar {
  display: none !important;
}

.nav a,
nav a,
.categories a,
.category-nav a {
  margin: 0 !important;
  padding: 5px 7px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  flex: 0 0 auto !important;
  min-height: 28px !important;
}

@media (max-width: 600px) {
  .nav a,
  nav a,
  .categories a,
  .category-nav a {
    padding: 4px 6px !important;
    font-size: 10.5px !important;
  }
}


/* بزرگ‌تر کردن کادرهای منوی موبایل */
.nav a,
nav a,
.categories a,
.category-nav a {
  padding: 5px 8px !important;
  font-size: 12px !important;
  min-height: 32px !important;
}

@media (max-width: 600px) {
  .nav a,
  nav a,
  .categories a,
  .category-nav a {
    padding: 5px 7px !important;
    font-size: 11.5px !important;
    min-height: 31px !important;
  }
}


/* افزایش ۱۰ درصدی اندازه کادرهای منو */
.nav a,
nav a,
.categories a,
.category-nav a {
  padding: 6px 9px !important;
  font-size: 13px !important;
  min-height: 35px !important;
}

@media (max-width: 600px) {
  .nav a,
  nav a,
  .categories a,
  .category-nav a {
    padding: 6px 8px !important;
    font-size: 12.5px !important;
    min-height: 34px !important;
  }
}


/* کاهش ۴ درصدی اندازه کادرها */
.nav a,
nav a,
.categories a,
.category-nav a {
  padding: 5.7px 8.6px !important;
  font-size: 12.5px !important;
  min-height: 33.5px !important;
}

@media (max-width: 600px) {
  .nav a,
  nav a,
  .categories a,
  .category-nav a {
    padding: 5.7px 7.7px !important;
    font-size: 12px !important;
    min-height: 32.5px !important;
  }
}


/* ================================
   دکمه سبد خرید
   ================================ */

a[href="#/cart"] {
  background: #fce4ec !important;
  color: #e91e63 !important;
  border: 1px solid #f8bbd0 !important;
  border-radius: 14px !important;

  width: auto !important;
  min-width: 125px !important;
  max-width: none !important;

  min-height: 34px !important;
  padding: 6px 12px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;

  white-space: nowrap !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

/* عدد سبد خرید */
.cart-count,
.cart-badge,
a[href="#/cart"] .count,
a[href="#/cart"] .badge {
  background: #69d98b !important;
  color: #ffffff !important;
  border-radius: 50% !important;

  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
}

/* وقتی سبد خالی است عدد مخفی باشد */
.cart-count:empty,
.cart-badge:empty {
  display: none !important;
}



/* ROZ COMPACT PRODUCTS */
.product,.product-card{padding:8px!important;margin-bottom:8px!important}
.product img,.product-card img{margin-bottom:5px!important}
.product h3,.product-card h3,.product h2,.product-card h2{margin-top:2px!important;margin-bottom:3px!important;line-height:1.35!important}
.product p,.product-card p{margin-top:2px!important;margin-bottom:4px!important;line-height:1.4!important}
.product .price,.product-card .price,.product .product-price,.product-card .product-price{margin-top:2px!important;margin-bottom:3px!important;padding:0!important;line-height:1.3!important}
.product .colors,.product-card .colors,.product .color-options,.product-card .color-options{margin-top:3px!important;margin-bottom:3px!important;padding:0!important;gap:3px!important}
.product .actions,.product-card .actions,.product .product-actions,.product-card .product-actions{margin-top:4px!important;padding-top:0!important;gap:4px!important}
.product button,.product-card button,.product .add-to-cart,.product-card .add-to-cart{margin-top:3px!important;margin-bottom:0!important}
@media(max-width:600px){.product,.product-card{padding:6px!important}.product h3,.product-card h3{margin:1px 0 2px!important}.product p,.product-card p{margin:1px 0 3px!important}.product .price,.product-card .price{margin:1px 0 3px!important}.product .colors,.product-card .colors{margin:2px 0 3px!important;gap:2px!important}.product .actions,.product-card .actions{margin-top:3px!important;gap:3px!important}}



/* =========================================================
   ROZALI BEAUTY - COMPACT HOME PRODUCT CARDS V2
   ========================================================= */

/* خود کارت */
.product {
  padding: 8px !important;
  margin: 0 !important;
}

/* تصویر محصول */
.product .product-image {
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
}

/* بخش اطلاعات */
.product .product-info {
  padding: 0 !important;
  margin: 0 !important;
}

/* برند */
.product .brand {
  margin: 0 0 2px 0 !important;
  line-height: 1.2 !important;
}

/* نام */
.product h3 {
  margin: 0 0 3px 0 !important;
  line-height: 1.3 !important;
}

/* توضیح کوتاه */
.product .type {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  min-height: 0 !important;
}

/* بخش قیمت */
.product .product-bottom {
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* باکس قیمت */
.product .price-box {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}

/* قیمت قبلی */
.product .old-price {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* قیمت اصلی */
.product .new-price,
.product .price {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* =========================
   انتخاب رنگ
   ========================= */

.product .home-colors {
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
}

/* عنوان انتخاب رنگ */
.product .home-colors-title {
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* لیست رنگ‌ها */
.product .home-color-list {
  margin: 0 !important;
  padding: 0 !important;
  gap: 3px !important;
  line-height: 1 !important;
}

/* دکمه رنگ */
.product .home-color {
  margin: 0 !important;
  padding: 2px 4px !important;
  min-height: 0 !important;
  line-height: 1.1 !important;
}

/* نقطه رنگ */
.product .home-color .color-dot {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  margin: 0 2px 0 0 !important;
}

/* =========================
   دکمه افزودن به سبد
   ========================= */

.product .home-add-cart {
  display: block !important;
  width: 100% !important;

  margin: 5px 0 0 0 !important;
  padding: 7px 8px !important;

  min-height: 0 !important;
  line-height: 1.2 !important;
}

/* =========================
   موبایل
   ========================= */

@media (max-width: 600px) {

  .product {
    padding: 6px !important;
  }

  .product .product-image {
    margin-bottom: 4px !important;
  }

  .product .brand {
    margin-bottom: 1px !important;
    line-height: 1.15 !important;
  }

  .product h3 {
    margin-bottom: 2px !important;
    line-height: 1.25 !important;
  }

  .product .type {
    line-height: 1.2 !important;
  }

  .product .product-bottom {
    margin-top: 2px !important;
  }

  .product .home-colors {
    margin-top: 3px !important;
  }

  .product .home-colors-title {
    margin-bottom: 2px !important;
  }

  .product .home-color-list {
    gap: 2px !important;
  }

  .product .home-color {
    padding: 2px 3px !important;
  }

  .product .home-add-cart {
    margin-top: 4px !important;
    padding: 6px 6px !important;
  }
}


/* جلوگیری از ارتفاع اضافی ناشی از flex/grid */
.product > a {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product > a > .product-info {
  margin: 0 !important;
  padding: 0 !important;
}

/* آخرین عنصر بدون فاصله */
.product *:last-child {
  margin-bottom: 0 !important;
}

/* =========================================================
   ACCOUNT PAGE
   ========================================================= */

.account-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0 28px;
  direction:rtl;
}

.account-actions .btn{
  white-space:nowrap;
}



/* =========================================================
   ROZALI BEAUTY - PROFESSIONAL CUSTOMER ACCOUNT
   ========================================================= */

.customer-auth-page{
  max-width:1000px;
  margin:40px auto;
}

.customer-auth-header{
  text-align:center;
  margin-bottom:30px;
}

.customer-auth-header span{
  color:var(--gold);
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
}

.customer-auth-header h1{
  margin:7px 0;
}

.customer-auth-header p{
  color:#806d77;
}

.customer-auth-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.customer-auth-card{
  padding:28px;
}

.customer-auth-card h2{
  margin:8px 0;
}

.customer-auth-card .muted{
  color:#806d77;
  font-size:13px;
  margin-bottom:20px;
}

.customer-auth-card label{
  font-size:13px;
  font-weight:700;
}

.customer-auth-icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:#fff3f7;
  font-size:25px;
}

.customer-back-store{
  text-align:center;
  margin-top:20px;
}


/* =========================
   DASHBOARD
   ========================= */

.customer-dashboard{
  max-width:1100px;
}

.customer-dashboard-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:22px;
}

.customer-dashboard-top h1{
  margin:5px 0;
}

.customer-dashboard-top p{
  margin:0;
  color:#806d77;
}

.customer-welcome{
  color:var(--gold);
  font-size:12px;
  font-weight:800;
}

.customer-dashboard-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}


/* =========================
   PROFILE
   ========================= */

.customer-profile{
  padding:24px;
}

.customer-profile-title{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
}

.customer-profile-title h2{
  margin:0 0 3px;
}

.customer-profile-title p{
  margin:0;
  color:#806d77;
  font-size:13px;
}

.customer-profile-avatar{
  width:58px;
  height:58px;
  border-radius:50%;
  background:linear-gradient(
    135deg,
    var(--pink),
    var(--gold)
  );
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:800;
}

.customer-info-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.customer-info-item{
  background:#fff9fc;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}

.customer-info-item span{
  display:block;
  color:#806d77;
  font-size:11px;
  margin-bottom:6px;
}

.customer-info-item strong{
  display:block;
  font-size:11.2px;
  overflow-wrap:anywhere;
}


/* =========================
   STATISTICS
   ========================= */

.customer-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:18px 0 35px;
}

.customer-stat{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  margin:0;
}

.customer-stat-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:#fff3f7;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex:none;
}

.customer-stat span{
  display:block;
  color:#806d77;
  font-size:12px;
  margin-bottom:5px;
}

.customer-stat strong{
  display:block;
  color:var(--pink);
  font-size:19px;
}


/* =========================
   ORDERS
   ========================= */

.customer-orders-section{
  margin-top:10px;
}

.customer-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:15px;
  margin-bottom:15px;
}

.customer-section-heading span:first-child{
  color:var(--gold);
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
}

.customer-section-heading h2{
  margin:4px 0 0;
}

.customer-order-count{
  background:#fff;
  border:1px solid var(--line);
  padding:7px 12px;
  border-radius:99px;
  font-size:12px;
  color:#806d77;
}

.customer-order-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  margin-bottom:15px;
  box-shadow:0 5px 20px rgba(50,24,39,.04);
}

.customer-order-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
}

.customer-order-head strong{
  font-size:15px;
}

.customer-order-label{
  color:#806d77;
  font-size:11px;
  margin-left:5px;
}

.customer-order-status{
  background:#fff3f7;
  color:var(--pink);
  border:1px solid var(--pink2);
  padding:6px 11px;
  border-radius:99px;
  font-size:11px;
  font-weight:700;
}

.customer-order-date{
  color:#806d77;
  font-size:11px;
  margin:7px 0 15px;
}

.customer-order-products{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.customer-order-product{
  display:grid;
  grid-template-columns:62px 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid #f1e6eb;
}

.customer-order-product:last-child{
  border-bottom:0;
}

.customer-order-product-image{
  width:62px;
  height:62px;
  border-radius:12px;
  overflow:hidden;
  background:#f8e5ee;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:25px;
}

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

.customer-order-product-info strong{
  display:block;
  font-size:13px;
  margin-bottom:4px;
}

.customer-order-product-info>div{
  color:#806d77;
  font-size:11px;
  margin-top:3px;
}

.customer-order-color{
  display:flex;
  align-items:center;
  gap:5px;
}

.customer-color-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.15);
  display:inline-block;
}

.customer-order-product-price{
  color:var(--pink);
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}

.customer-order-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:15px;
  font-size:13px;
}

.customer-order-footer span{
  color:#806d77;
}

.customer-order-footer strong{
  color:var(--pink);
  font-size:17px;
}


/* =========================
   EMPTY / ERROR
   ========================= */

.customer-empty-orders{
  background:#fff;
  border:1px dashed var(--line);
  border-radius:20px;
  text-align:center;
  padding:45px 20px;
}

.customer-empty-orders>div{
  font-size:45px;
}

.customer-empty-orders h3{
  margin:10px 0 5px;
}

.customer-empty-orders p{
  color:#806d77;
  margin:0 auto 18px;
  font-size:13px;
}

.customer-error{
  text-align:center;
  padding:50px 20px;
}

.customer-error>div{
  font-size:45px;
}


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

@media(max-width:900px){

  .customer-auth-grid{
    grid-template-columns:1fr;
  }

  .customer-info-grid{
    grid-template-columns:1fr 1fr;
  }

  .customer-stat-grid{
    grid-template-columns:1fr;
  }

  .customer-dashboard-top{
    align-items:flex-start;
  }

}


@media(max-width:600px){

  .customer-auth-page{
    margin:20px auto;
  }

  .customer-auth-card{
    padding:20px;
  }

  .customer-dashboard-top{
    display:block;
  }

  .customer-dashboard-actions{
    margin-top:15px;
  }

  .customer-dashboard-actions .btn{
    flex:1;
    text-align:center;
  }

  .customer-info-grid{
    grid-template-columns:1fr;
  }

  .customer-stat-grid{
    gap:10px;
  }

  .customer-stat{
    padding:14px;
  }

  .customer-section-heading{
    align-items:flex-start;
  }

  .customer-order-card{
    padding:14px;
  }

  .customer-order-product{
    grid-template-columns:52px 1fr;
  }

  .customer-order-product-image{
    width:52px;
    height:52px;
  }

  .customer-order-product-price{
    grid-column:2;
  }

  .customer-order-head{
    align-items:flex-start;
  }

}


/* ================================
   PROFESSIONAL ADMIN PANEL
================================ */

.admin-section{
  width:100%;
}

.admin-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}

.admin-section-head h2{
  margin:0 0 6px;
}

.muted{
  color:#777;
  margin:0;
}

.admin-loading{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.spinner{
  width:25px;
  height:25px;
  border:3px solid #ddd;
  border-top-color:#b28a45;
  border-radius:50%;
  animation:adminSpin .8s linear infinite;
}

@keyframes adminSpin{
  to{transform:rotate(360deg)}
}

.product-admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:20px;
}

.product-admin-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.product-admin-image{
  height:220px;
  position:relative;
  background:#f7f5f2;
}

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

.no-image{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#999;
}

.product-status{
  position:absolute;
  top:12px;
  right:12px;
  padding:5px 10px;
  border-radius:20px;
  font-size:12px;
  background:#fff;
}

.product-status.on{
  color:#237a42;
}

.product-status.off{
  color:#a33;
}

.product-admin-body{
  padding:18px;
}

.product-category{
  font-size:12px;
  color:#a27a35;
  margin-bottom:8px;
}

.product-admin-body h3{
  margin:0 0 7px;
  font-size:18px;
}

.product-brand{
  color:#777;
  margin:0 0 12px;
}

.product-price{
  font-size:18px;
  font-weight:700;
}

.compare-price{
  color:#999;
  text-decoration:line-through;
  font-size:13px;
}

.product-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:18px;
}

.product-actions .danger{
  grid-column:1/-1;
}

.empty-admin{
  grid-column:1/-1;
  text-align:center;
  padding:70px 20px;
  background:#fff;
  border-radius:20px;
  border:1px dashed #ddd;
}

.empty-admin div{
  font-size:50px;
  margin-bottom:10px;
}

/* Product form */

.admin-form-page{
  width:100%;
  max-width:1100px;
  margin:auto;
}

.product-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.form-card{
  background:#fff;
  border:1px solid #e9e5df;
  border-radius:20px;
  padding:26px;
  box-shadow:0 5px 25px rgba(0,0,0,.04);
}

.form-card-title{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:25px;
}

.form-card-title>span{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#f2eadc;
  color:#8d6b34;
  font-weight:700;
}

.form-card-title h3{
  margin:0 0 4px;
}

.form-card-title p{
  margin:0;
  color:#888;
  font-size:13px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field-wide{
  grid-column:1/-1;
}

.field>span{
  font-weight:600;
  font-size:11.2px;
}

.field input,
.field select,
.field textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #ddd;
  background:#fff;
  border-radius:11px;
  padding:13px 14px;
  font:inherit;
  outline:none;
}

.field textarea{
  resize:vertical;
  min-height:150px;
  line-height:1.8;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:#b28a45;
  box-shadow:0 0 0 3px rgba(178,138,69,.10);
}

.input-unit{
  display:flex;
  align-items:center;
  border:1px solid #ddd;
  border-radius:11px;
  overflow:hidden;
}

.input-unit input{
  border:0;
  border-radius:0;
}

.input-unit b{
  padding:0 14px;
  color:#888;
  font-size:12px;
  white-space:nowrap;
}

.upload-box{
  min-height:180px;
  border:2px dashed #d8d0c3;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  cursor:pointer;
  background:#fcfaf7;
}

.upload-box:hover{
  border-color:#b28a45;
}

.upload-icon{
  font-size:40px;
}

.upload-box small{
  color:#888;
}

.upload-box input{
  max-width:90%;
}

.existing-images{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;
  margin-bottom:20px;
}

.existing-image{
  border:1px solid #eee;
  border-radius:14px;
  overflow:hidden;
  background:#fafafa;
}

.existing-image img{
  display:block;
  width:100%;
  height:130px;
  object-fit:cover;
}

.existing-image label{
  display:flex;
  gap:7px;
  align-items:center;
  padding:9px;
  font-size:12px;
}

.colorrow{
  display:grid !important;
  grid-template-columns:1fr 1fr 50px auto;
  gap:10px;
  align-items:center;
  padding:12px;
  background:#fafafa;
  border:1px solid #eee;
  border-radius:12px;
  margin-bottom:10px !important;
}

.colorrow input{
  min-width:0;
}

.switch-field{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  background:#fafafa;
  border-radius:12px;
}

.form-submit-bar{
  position:sticky;
  bottom:15px;
  z-index:10;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:15px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border:1px solid #eee;
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.btn.danger{
  background:#fff0f0;
  color:#b22;
  border:1px solid #f0cccc;
}

.error-card{
  text-align:center;
  padding:40px;
}

@media(max-width:700px){

  .admin-section-head{
    align-items:stretch;
    flex-direction:column;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .field-wide{
    grid-column:auto;
  }

  .form-card{
    padding:18px;
    border-radius:15px;
  }

  .colorrow{
    grid-template-columns:1fr 1fr;
  }

  .product-admin-grid{
    grid-template-columns:1fr;
  }

  .form-submit-bar{
    bottom:5px;
  }

}

/* نماد اعتماد الکترونیکی */
.enamad-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto 10px;
  padding: 10px;
}
.enamad-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.enamad-footer img {
  width: 110px;
  max-width: 110px;
  height: auto;
  display: block;
  object-fit: contain;
  cursor: pointer;
}
@media (max-width: 600px) {
  .enamad-footer {
    margin-top: 18px;
  }
  .enamad-footer img {
    width: 100px;
    max-width: 100px;
  }
}

/* =========================================================
   ROZALI BEAUTY FOOTER
   ========================================================= */

.roz-site-footer{
  margin-top:70px;
  background:#321827;
  color:#fff;
  padding:45px 20px 20px;
}

.roz-footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:40px;
  align-items:start;
}

.roz-footer-logo{
  color:#f0c86b;
  font-size:22px;
  font-weight:900;
  letter-spacing:1px;
  margin-bottom:12px;
}

.roz-footer-brand p{
  color:#dbc7d1;
  line-height:2;
  max-width:400px;
  margin:0;
}

.roz-footer-inner h3{
  margin:0 0 15px;
  font-size:15px;
  color:#fff;
}

.roz-footer-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.roz-footer-links a{
  color:#dbc7d1;
  transition:.2s;
}

.roz-footer-links a:hover{
  color:#f0c86b;
}

.roz-footer-enamad{
  text-align:center;
}

.roz-footer-enamad > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:14px;
  padding:12px;
  min-width:125px;
  min-height:125px;
  box-shadow:0 8px 25px rgba(0,0,0,.18);
}

.roz-footer-enamad img{
  display:block;
  width:105px;
  height:auto;
  max-width:105px;
  object-fit:contain;
}

.roz-footer-copy{
  max-width:1200px;
  margin:35px auto 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
  color:#bdaab5;
  font-size:12px;
}

@media(max-width:800px){

  .roz-footer-inner{
    grid-template-columns:1fr;
    text-align:center;
    gap:30px;
  }

  .roz-footer-brand p{
    margin:0 auto;
  }

  .roz-footer-links{
    align-items:center;
  }

  .roz-footer-enamad{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
}


/* FIX ENAMAD IMAGE */
.roz-footer-enamad {
  display: block !important;
  text-align: center !important;
}

.enamad-box {
  display: inline-flex !important;
  width: 135px !important;
  height: 135px !important;
  padding: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border-radius: 12px !important;
  overflow: visible !important;
}

.enamad-box a {
  display: flex !important;
  width: 115px !important;
  height: 115px !important;
  align-items: center !important;
  justify-content: center !important;
}

.enamad-box img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 110px !important;
  height: 110px !important;
  min-width: 110px !important;
  min-height: 110px !important;
  max-width: 110px !important;
  max-height: 110px !important;
  object-fit: contain !important;
  border: 0 !important;
}


/* ENAMAD LOGO DISPLAY FIX */
.roz-enamad-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 30px 0 !important;
  padding: 20px 0 !important;
}

.roz-enamad-footer .enamad-box {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 160px !important;
  height: 160px !important;
  min-width: 160px !important;
  min-height: 160px !important;
  padding: 10px !important;
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.roz-enamad-footer .enamad-box a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
}

.roz-enamad-footer .enamad-box img {
  display: block !important;
  width: 135px !important;
  height: 135px !important;
  max-width: 135px !important;
  max-height: 135px !important;
  min-width: 135px !important;
  min-height: 135px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== ENAMAD FINAL ===== */

.roz-enamad-footer {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 30px 0 !important;
  padding: 20px 0 !important;
}

.roz-enamad-footer .enamad-link {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 160px !important;
  height: 160px !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 12px !important;
  text-decoration: none !important;
}

.roz-enamad-footer .enamad-logo {
  display: block !important;
  width: 140px !important;
  height: 140px !important;
  max-width: 140px !important;
  max-height: 140px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: 0 !important;
}

@media (max-width: 700px) {
  .roz-enamad-footer .enamad-link {
    width: 140px !important;
    height: 140px !important;
  }

  .roz-enamad-footer .enamad-logo {
    width: 120px !important;
    height: 120px !important;
  }
}

/* ================================
   ROZALI BEAUTY - ENAMAD FOOTER
   ================================ */

.roz-enamad-footer {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 35px 0 !important;
  padding: 20px 0 !important;
  box-sizing: border-box !important;
}

.roz-enamad-footer .enamad-box {
  width: 170px !important;
  height: 170px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.roz-enamad-footer .enamad-box a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
}

.roz-enamad-footer .enamad-box img {
  display: block !important;
  width: 145px !important;
  height: 145px !important;
  max-width: 145px !important;
  max-height: 145px !important;
  object-fit: contain !important;
  border: 0 !important;
  outline: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 700px) {
  .roz-enamad-footer .enamad-box {
    width: 150px !important;
    height: 150px !important;
  }

  .roz-enamad-footer .enamad-box img {
    width: 125px !important;
    height: 125px !important;
    max-width: 125px !important;
    max-height: 125px !important;
  }
}

.admin-gender-field {
  transition: opacity .2s ease;
}

.admin-help-text {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  opacity: .7;
}


.perfume-gender-filter {
  max-width: 760px;
  margin: 0 auto 25px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  text-align: center;
}

.perfume-gender-title {
  margin-bottom: 12px;
  font-size: 13px;
  color: #806d77;
  font-weight: 700;
}

.perfume-gender-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.perfume-gender-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--dark);
  padding: 10px 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: .2s;
  font-weight: 700;
}

.perfume-gender-btn:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.perfume-gender-btn.active {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
}

.perfume-results-info {
  max-width: 1200px;
  margin: 0 auto 15px;
  padding: 0 5px;
  color: #806d77;
  font-size: 13px;
  text-align: right;
}

@media(max-width:600px){
  .perfume-gender-filter {
    margin-left: 10px;
    margin-right: 10px;
    padding: 14px;
  }

  .perfume-gender-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .perfume-gender-btn {
    padding: 10px 8px;
  }
}


/* =========================================
   فیلتر جنسیت عطر و ادکلن
   ========================================= */

.perfume-gender-filter {
  margin: 16px auto 22px;
  text-align: center;
}

.perfume-gender-title {
  margin-bottom: 9px;
  font-size: 13px;
  color: #5f7478;
}

.perfume-gender-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

.perfume-gender-btn {
  border: 1px solid #b8d9d7;
  background: #dff2f0;
  color: #315f63;
  border-radius: 9px;
  padding: 6px 13px;
  min-width: 62px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}

.perfume-gender-btn:hover {
  background: #cce9e6;
  border-color: #9fcfcb;
  transform: translateY(-1px);
}

.perfume-gender-btn.active {
  background: #b9ddd9;
  border-color: #82bdb8;
  color: #244f53;
  box-shadow: 0 2px 7px rgba(70,130,125,.15);
}

/* موبایل */
@media (max-width: 600px) {

  .perfume-gender-filter {
    margin: 12px auto 18px;
  }

  .perfume-gender-title {
    font-size: 12px;
    margin-bottom: 7px;
  }

  .perfume-gender-buttons {
    gap: 5px;
    justify-content: center;
  }

  .perfume-gender-btn {
    min-width: 0;
    padding: 5px 9px;
    font-size: 11px;
    border-radius: 8px;
  }
}


/* بزرگ‌تر شدن ۲۰ درصدی دکمه‌های جنسیت */
.perfume-gender-btn {
  padding: 7px 16px;
  min-width: 74px;
  font-size: 13px;
}

@media (max-width: 600px) {
  .perfume-gender-btn {
    padding: 6px 11px;
    min-width: 0;
    font-size: 12px;
  }
}




/* فقط دکمه بازگشت صفحه دسته‌بندی */
.category-back-btn {
  font-size: 66%;
  padding: 0.6em 1em;
  transform: scale(0.6);
  transform-origin: right center;
}


/* دکمه بازگشت صفحه همه محصولات - 30 درصد کوچک‌تر */
.all-products-back-btn {
  transform: scale(0.7);
  transform-origin: right center;
}


/* اصلاح اندازه دکمه بازگشت در صفحه همه محصولات */
.all-products-page .all-products-back-btn {
  font-size: 0.7rem !important;
  padding: 0.5rem 0.8rem !important;
  min-height: auto !important;
  width: fit-content !important;
  transform: none !important;
}



/* =========================================================
   COUPON UI
   ========================================================= */

.coupon-message.success {
  color: #168a45 !important;
  font-weight: 600;
}

.coupon-message.error {
  color: #d64545 !important;
  font-weight: 600;
}

/* دکمه اعمال کد تخفیف کمی جمع‌وجورتر */
#couponCode + button,
button[onclick="applyCoupon()"] {
  width: auto !important;
  min-width: 72px !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ===== FINAL COUPON APPLY BUTTON ===== */

button[onclick="applyCoupon()"] {
  width: auto !important;
  min-width: 68px !important;
  max-width: 82px !important;

  height: 40px !important;
  padding: 0 14px !important;

  flex: 0 0 auto !important;
  white-space: nowrap !important;

  border-radius: 10px !important;

  font-size: 14px !important;
  line-height: 1 !important;

  box-sizing: border-box !important;
}


/* ===== COUPON BUTTON - EXTRA COMPACT ===== */

button[onclick="applyCoupon()"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;

  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 8px !important;

  flex: 0 0 58px !important;
  box-sizing: border-box !important;

  font-size: 12px !important;
  line-height: 34px !important;
  white-space: nowrap !important;

  overflow: hidden !important;
}


/* ===== COUPON APPLY BUTTON - MATCH INPUT ===== */

button[onclick="applyCoupon()"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;

  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;

  padding: 0 12px !important;
  margin: 0 !important;

  flex: 0 0 78px !important;
  box-sizing: border-box !important;

  border-radius: 12px !important;
  border: 0 !important;

  font-size: 14px !important;
  line-height: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}


/* ===== COUPON ROW - FIX BUTTON CLIPPING ===== */

#couponCode {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

button[onclick="applyCoupon()"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;

  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;

  padding: 0 !important;
  margin: 0 0 0 8px !important;

  flex: 0 0 78px !important;

  box-sizing: border-box !important;

  border-radius: 12px !important;
  border: 0 !important;

  position: relative !important;
  z-index: 5 !important;

  overflow: visible !important;

  white-space: nowrap !important;
}

/* اگر ردیف کد تخفیف flex باشد، اجازه بده دکمه فضای واقعی داشته باشد */
#couponCode + button {
  flex-shrink: 0 !important;
}


.hero.hero-image {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 420px;
  background: #fff;
}

.hero.hero-image > img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 30px;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent 45%);
}

.hero-overlay .btn {
  font-size: 16px;
  padding: 13px 25px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

@media (max-width: 600px) {
  .hero.hero-image {
    margin: 15px;
    min-height: 300px;
  }

  .hero.hero-image > img {
    height: 300px;
  }

  .hero-overlay {
    padding: 20px;
  }
}


/* =========================================================
   ROZALI BEAUTY - HERO + PROMO TICKER FINAL FIX
   ========================================================= */

.hero-wrap {
  max-width: 1200px;
  margin: 30px auto;
  overflow: hidden;
}

/* -------------------------
   HERO IMAGE
   ------------------------- */

.hero-wrap .hero.hero-image {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 420px;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
}

.hero-wrap .hero.hero-image > img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
}

.hero-wrap .hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 28px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.30),
    rgba(0,0,0,0) 45%
  );
}

.hero-wrap .hero-overlay .btn {
  position: relative;
  z-index: 2;
}

/* -------------------------
   PINK PROMO TICKER
   ------------------------- */

.promo-ticker {
  width: 100%;
  height: 52px;
  margin-top: 12px;
  overflow: hidden;
  position: relative;

  display: flex;
  align-items: center;

  background: linear-gradient(
    90deg,
    #b82d6d,
    #d94d89,
    #b82d6d
  );

  color: #fff;
  border-radius: 14px;

  box-shadow: 0 6px 18px rgba(184,45,109,.20);

  direction: ltr;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 55px;

  width: max-content;

  animation: rozaliPromoTicker 32s linear infinite;

  will-change: transform;
}

.ticker-track span {
  display: inline-flex;
  align-items: center;

  flex-shrink: 0;

  font-size: 14px;
  font-weight: 700;

  direction: rtl;

  white-space: nowrap;
}

@keyframes rozaliPromoTicker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* -------------------------
   PRODUCT TICKER
   ------------------------- */





@keyframes rozaliProductTicker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* موبایل */

@media (max-width: 600px) {

  .hero-wrap {
    margin: 15px auto;
  }

  .hero-wrap .hero.hero-image {
    border-radius: 18px;
    min-height: 300px;
  }

  .hero-wrap .hero.hero-image > img {
    height: 300px;
  }

  .hero-wrap .hero-overlay {
    padding: 18px;
  }

  .promo-ticker {
    height: 46px;
    margin-top: 10px;
    border-radius: 11px;
  }

  .ticker-track {
    gap: 35px;
    animation-duration: 26s;
  }

  .ticker-track span {
    font-size: 12px;
  }

  
}


/* =====================================================
   ROZALI - FINAL HERO / PROMO / MINI PRODUCT TICKER
   ===================================================== */

/* حذف فاصله اضافی اطراف Hero */
.hero-wrap {
  max-width: 1200px;
  margin: 20px auto 0 !important;
  padding: 0 20px;
  overflow: hidden;
}

/* نوار تبلیغاتی صورتی */
.promo-ticker {
  width: 100%;
  height: 42px;
  overflow: hidden;
  white-space: nowrap;
  background: var(--pink);
  color: #fff;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  direction: ltr;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 55px;
  width: max-content;
  animation: rozPromoTicker 32s linear infinite;
  padding-left: 30px;
}

.ticker-track span {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
}

@keyframes rozPromoTicker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Hero دقیقاً زیر نوار */
.hero-wrap .hero.hero-image {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 420px;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
}

.hero-wrap .hero.hero-image > img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 28px;
  background: linear-gradient(
    to bottom,
    transparent 55%,
    rgba(0,0,0,.18)
  );
}

/* =====================================================
   نوار محصولات کوچک
   هر محصول داخل یک کارت کوچک قرار می‌گیرد
   ===================================================== */





/* کارت کوچک محصول */
.mini-product {
  flex: 0 0 205px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  direction: rtl;
}

.mini-product:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(184,45,109,.12);
}

.mini-product-image {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  background: #f8e5ee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}

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

.mini-product-info {
  min-width: 0;
  flex: 1;
  text-align: right;
}

.mini-product-name {
  font-size: 11px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-product-price {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 800;
  color: var(--pink);
  white-space: nowrap;
}

@keyframes rozProductTicker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* =====================================================
   حذف فاصله بین نوار محصولات و دسته‌بندی
   ===================================================== */

.hero-wrap + .section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* عنوان دسته‌بندی هم کمی جمع‌تر */
.hero-wrap + .section .section-title {
  margin-top: 0 !important;
  padding-top: 12px;
  margin-bottom: 18px;
}

/* موبایل */
@media (max-width: 600px) {

  .hero-wrap {
    margin-top: 10px !important;
    padding: 0 10px;
  }

  .promo-ticker {
    height: 38px;
    border-radius: 9px 9px 0 0;
  }

  .ticker-track {
    gap: 35px;
  }

  .ticker-track span {
    font-size: 11px;
  }

  .hero-wrap .hero.hero-image {
    min-height: 260px;
  }

  .hero-wrap .hero.hero-image > img {
    height: 260px;
  }

  .hero-overlay {
    padding: 18px;
  }

  

  

  .mini-product {
    flex-basis: 175px;
    height: 60px;
  }

  .mini-product-image {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .mini-product-name {
    font-size: 10px;
  }

  .mini-product-price {
    font-size: 9px;
  }

  .hero-wrap + .section .section-title {
    padding-top: 8px;
    margin-bottom: 12px;
  }
}


/* =========================================================
   ROZALI FINAL HERO LAYOUT
   تبلیغ بالا / عکس کامل / محصولات متحرک پایین عکس
   ========================================================= */

/* کانتینر اصلی */
.hero-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0 !important;
  padding: 0 20px;
  overflow: hidden;
}

/* ---------------------------------------------------------
   1. نوار تبلیغاتی
   --------------------------------------------------------- */

.hero-wrap .promo-ticker {
  position: relative;
  width: 100%;
  height: 42px;
  overflow: hidden;
  white-space: nowrap;

  background: var(--pink) !important;
  color: #fff !important;

  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;

  z-index: 2;
}

.hero-wrap .ticker-track {
  display: flex;
  align-items: center;
  gap: 55px;

  width: max-content;
  height: 100%;

  animation: roz-promo-move 32s linear infinite;
  will-change: transform;
}

.hero-wrap .ticker-track span {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

@keyframes roz-promo-move {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* ---------------------------------------------------------
   2. عکس Hero
   مهم: عکس نباید از بالا یا پایین بریده شود
   --------------------------------------------------------- */

.hero-wrap .hero.hero-image {
  position: relative;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  min-height: 0 !important;

  background: #fff !important;

  border-radius: 0 !important;

  overflow: hidden;
}

/*
   عکس کامل نمایش داده می‌شود.
   contain باعث می‌شود هیچ قسمت عکس بریده نشود.
*/
.hero-wrap .hero.hero-image > img {
  display: block;

  width: 100%;
  height: auto;

  min-height: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  background: #fff;

  margin: 0;
}


/* دکمه روی عکس */
.hero-wrap .hero-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding: 25px;

  background: linear-gradient(
    to bottom,
    transparent 55%,
    rgba(0,0,0,.12)
  );

  pointer-events: none;
}

.hero-wrap .hero-overlay .btn {
  pointer-events: auto;
}


/* ---------------------------------------------------------
   3. نوار محصولات
   دقیقاً زیر عکس
   --------------------------------------------------------- */

.hero-wrap 


/* ردیف متحرک */
.hero-wrap 


/* ---------------------------------------------------------
   کارت بسیار کوچک محصول
   --------------------------------------------------------- */

.hero-wrap .mini-product {
  flex: 0 0 210px;

  width: 210px;
  height: 70px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 5px 8px;

  background: #fff;

  border: 1px solid var(--line);
  border-radius: 10px;

  overflow: hidden;

  direction: rtl;

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

.hero-wrap .mini-product:hover {
  transform: translateY(-2px);

  box-shadow:
    0 5px 16px rgba(184,45,109,.15);
}


/* عکس کوچک محصول */
.hero-wrap .mini-product-image {
  flex: 0 0 56px;

  width: 56px;
  height: 56px;

  overflow: hidden;

  border-radius: 8px;

  background: #f8e5ee;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
}

.hero-wrap .mini-product-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover !important;
}


/* اطلاعات محصول */
.hero-wrap .mini-product-info {
  flex: 1;

  min-width: 0;

  text-align: right;
}

.hero-wrap .mini-product-name {
  width: 100%;

  font-size: 11px;
  line-height: 1.5;

  font-weight: 700;

  color: var(--dark);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-wrap .mini-product-price {
  margin-top: 3px;

  font-size: 10px;

  font-weight: 800;

  color: var(--pink);

  white-space: nowrap;
}


/* حرکت محصولات */
@keyframes roz-products-move {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* ---------------------------------------------------------
   4. دسته‌بندی بلافاصله بعد از نوار محصولات
   --------------------------------------------------------- */

.hero-wrap + .section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hero-wrap + .section .section-title {
  margin-top: 0 !important;
  padding-top: 10px;
  margin-bottom: 18px;
}


/* ---------------------------------------------------------
   5. موبایل
   --------------------------------------------------------- */

@media (max-width: 600px) {

  .hero-wrap {
    margin-top: 10px !important;
    padding: 0 10px;
  }

  .hero-wrap .promo-ticker {
    height: 38px;
    border-radius: 9px 9px 0 0;
  }

  .hero-wrap .ticker-track {
    gap: 35px;
  }

  .hero-wrap .ticker-track span {
    font-size: 11px;
  }


  /* عکس در موبایل هم کامل */
  .hero-wrap .hero.hero-image {
    min-height: 0 !important;
    height: auto !important;
  }

  .hero-wrap .hero.hero-image > img {
    width: 100%;
    height: auto !important;

    object-fit: contain !important;
  }


  /* نوار محصول */
  .hero-wrap 

  .hero-wrap 


  /* کارت کوچک‌تر */
  .hero-wrap .mini-product {
    flex-basis: 180px;

    width: 180px;
    height: 62px;

    gap: 7px;

    padding: 4px 6px;
  }

  .hero-wrap .mini-product-image {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .hero-wrap .mini-product-name {
    font-size: 10px;
  }

  .hero-wrap .mini-product-price {
    font-size: 9px;
  }


  .hero-wrap + .section .section-title {
    padding-top: 7px;
    margin-bottom: 12px;
  }
}


/* =========================================================
   FINAL FIX: HERO ORDER
   ========================================================= */

/* کانتینر */
.hero-wrap {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0 !important;
  padding: 0 20px;
  overflow: hidden;
}

/* =========================================================
   اول: نوار تبلیغاتی
   ========================================================= */

.hero-wrap > .promo-ticker {
  order: 1 !important;

  position: relative !important;

  width: 100% !important;
  height: 42px !important;

  background: var(--pink) !important;
  color: #fff !important;

  overflow: hidden !important;
  white-space: nowrap !important;

  display: flex !important;
  align-items: center !important;

  border-radius: 12px 12px 0 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   دوم: عکس Hero
   ========================================================= */

.hero-wrap > .hero.hero-image {
  order: 2 !important;

  position: relative !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  min-height: 0 !important;

  background: #fff !important;

  border-radius: 0 !important;

  overflow: hidden !important;
}

.hero-wrap > .hero.hero-image > img {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  min-height: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: 0 !important;
}


/* =========================================================
   سوم: نوار محصولات
   ========================================================= */

.hero-wrap > 

.hero-wrap > 


/* کارت کوچک */
.hero-wrap .mini-product {
  flex: 0 0 210px !important;

  width: 210px !important;
  height: 70px !important;

  display: flex !important;
  align-items: center !important;

  gap: 9px !important;

  padding: 5px 8px !important;

  background: #fff !important;

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

  overflow: hidden !important;

  direction: rtl !important;
}


/* عکس کوچک محصول */
.hero-wrap .mini-product-image {
  flex: 0 0 56px !important;

  width: 56px !important;
  height: 56px !important;

  overflow: hidden !important;

  border-radius: 8px !important;

  background: #f8e5ee !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-wrap .mini-product-image img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
}


/* حرکت نوار محصولات */
@keyframes roz-products-final {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* دسته بندی بدون فاصله زیاد */
.hero-wrap + .section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hero-wrap + .section .section-title {
  margin-top: 0 !important;
  padding-top: 8px !important;
}


/* موبایل */
@media (max-width: 600px) {

  .hero-wrap {
    margin-top: 10px !important;
    padding: 0 10px !important;
  }

  .hero-wrap > .promo-ticker {
    height: 38px !important;
  }

  .hero-wrap > .hero.hero-image > img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .hero-wrap > 

  .hero-wrap > 

  .hero-wrap .mini-product {
    flex-basis: 180px !important;
    width: 180px !important;
    height: 62px !important;
  }

  .hero-wrap .mini-product-image {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
  }
}


/* =========================================================
   FIX: عکس محصولات داخل نوار متحرک پایین Hero
   ========================================================= */

/* خود نوار */
.hero-wrap > 

/* ردیف متحرک */
.hero-wrap > 

/* کارت محصول */
.hero-wrap > 

/* =========================================================
   مهم‌ترین قسمت:
   ظرف عکس محصول کوچک
   ========================================================= */

.hero-wrap > 

/* خود عکس محصول */
.hero-wrap > 

/* اطلاعات */
.hero-wrap > 

/* نام محصول */
.hero-wrap > 

/* قیمت */
.hero-wrap > 


/* =========================================================
   موبایل
   ========================================================= */

@media (max-width: 600px) {

  .hero-wrap > 

  .hero-wrap > 

  .hero-wrap > 

  .hero-wrap > 

  .hero-wrap > 

  .hero-wrap > 
}



/* =========================================================
   ROZALI BEAUTY - HERO PRODUCT TICKER FINAL FIX
   ========================================================= */

/* فاصله کلی Hero از بخش‌های دیگر */
.hero-wrap {
  max-width: 1200px;
  margin: 30px auto 0;
  padding: 0 20px;
  overflow: hidden;
}

/* ---------------------------------------------------------
   نوار تبلیغاتی بالای عکس
   --------------------------------------------------------- */

.hero-wrap .promo-ticker {
  width: 100%;
  height: 44px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  background: #b82d6d;
  color: #fff;
  border-radius: 14px 14px 0 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.hero-wrap .promo-ticker .ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 55px;
  width: max-content;
  animation: rozaliPromoTicker 30s linear infinite;
  will-change: transform;
}

.hero-wrap .promo-ticker .ticker-track span {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
}

@keyframes rozaliPromoTicker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------
   عکس اصلی Hero
   عکس کامل داخل کادر قرار می‌گیرد
   --------------------------------------------------------- */

.hero-wrap .hero.hero-image {
  position: relative;
  width: 100%;
  height: 420px;
  min-height: 420px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: #fff;
  display: block;
}

.hero-wrap .hero.hero-image > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
  background: #fff;
}

/* اگر عکس نسبت متفاوتی داشت، بریده نشود */
.hero-wrap .hero.hero-image .hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 25px;
  pointer-events: none;
}

.hero-wrap .hero.hero-image .hero-overlay .btn {
  pointer-events: auto;
}

/* ---------------------------------------------------------
   نوار محصولات دقیقاً زیر عکس
   --------------------------------------------------------- */

.hero-wrap 

/* مسیر حرکت */
.hero-wrap 

/* هر محصول = یک کارت کوچک داخل نوار */
.hero-wrap 

/* عکس کوچک محصول */
.hero-wrap 

/*
 * مهم:
 * اینجا عمداً object-fit: contain است تا خود محصول
 * کامل دیده شود و بریده نشود.
 */
.hero-wrap 

/* محصولی که عکس ندارد */
.hero-wrap 

/* متن کنار عکس */
.hero-wrap 

/* نام محصول */
.hero-wrap 

/* قیمت */
.hero-wrap 

/* حرکت نوار محصولات */
@keyframes rozaliProductTicker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* توقف حرکت با Hover برای دیدن محصول */
.hero-wrap 

/* ---------------------------------------------------------
   حذف فاصله اضافه بعد از Hero
   --------------------------------------------------------- */

.hero-wrap + .section {
  margin-top: 0 !important;
  padding-top: 25px !important;
}

/* ---------------------------------------------------------
   موبایل
   --------------------------------------------------------- */

@media (max-width: 600px) {

  .hero-wrap {
    margin: 15px auto 0;
    padding: 0 10px;
  }

  .hero-wrap .promo-ticker {
    height: 40px;
    border-radius: 10px 10px 0 0;
  }

  .hero-wrap .promo-ticker .ticker-track span {
    font-size: 11px;
  }

  .hero-wrap .hero.hero-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .hero-wrap .hero.hero-image > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap + .section {
    padding-top: 15px !important;
  }
}

/* ===== FINAL: کوچک‌تر کردن محصولات نوار متحرک ===== */

.hero-wrap 

.hero-wrap 

/* کارت محصول کوچک‌تر */
.hero-wrap 

/* عکس کوچک‌تر */
.hero-wrap 

.hero-wrap 

/* متن کوچک‌تر و جمع‌وجورتر */
.hero-wrap 

.hero-wrap 

.hero-wrap 

/* موبایل: حتی جمع‌وجورتر */
@media (max-width: 600px) {

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 
}


/* =====================================================
   ULTRA SMALL PRODUCT TICKER
   ===================================================== */

.hero-wrap 

.hero-wrap 

/* کارت خیلی کوچک */
.hero-wrap 

/* عکس بسیار کوچک */
.hero-wrap 

.hero-wrap 

/* متن */
.hero-wrap 

.hero-wrap 

.hero-wrap 

/* موبایل */
@media (max-width: 600px) {

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 
}


/* =====================================================
   HERO FINAL POSITION FIX
   عکس کامل + نوار تبلیغ بالا + نوار محصولات پایین
   ===================================================== */

/* کل Hero بدون فاصله اضافه */
.hero-wrap {
  margin: 30px auto 0 !important;
  padding: 0 20px !important;
  overflow: visible !important;
}

/* نوار تبلیغاتی بالای عکس */
.hero-wrap .promo-ticker {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

/* =====================================================
   عکس اصلی
   مهم: ارتفاع بیشتر و بدون برش
   ===================================================== */

.hero-wrap .hero.hero-image {
  position: relative !important;

  width: 100% !important;

  /* ارتفاع واقعی عکس */
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #fff !important;

  display: block !important;

  border-radius: 0 !important;
}

/* خود تصویر */
.hero-wrap .hero.hero-image > img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  max-width: 100% !important;

  min-height: 100% !important;
  max-height: 100% !important;

  /*
   * contain یعنی کل عکس دیده شود
   * و هیچ قسمت بالایی/پایینی بریده نشود
   */
  object-fit: contain !important;
  object-position: center center !important;

  background: #fff !important;
}

/* دکمه روی عکس */
.hero-wrap .hero.hero-image .hero-overlay {
  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;

  padding: 20px !important;

  pointer-events: none !important;
}

/* =====================================================
   نوار محصولات
   کاملاً پایین عکس
   ===================================================== */

.hero-wrap 

/* مسیر حرکت */
.hero-wrap 

/* =====================================================
   محصول کوچک ولی کامل
   ===================================================== */

.hero-wrap 

/* عکس محصول */
.hero-wrap 

.hero-wrap 

/* اطلاعات محصول */
.hero-wrap 

/* نام */
.hero-wrap 

/* قیمت */
.hero-wrap 

/* =====================================================
   جلوگیری از فاصله زیاد تا دسته‌بندی
   ===================================================== */

.hero-wrap + .section {
  margin-top: 0 !important;
  padding-top: 20px !important;
}

/* =====================================================
   موبایل
   ===================================================== */

@media (max-width: 600px) {

  .hero-wrap {
    margin: 15px auto 0 !important;
    padding: 0 10px !important;
  }

  /* عکس روی موبایل کمی کوتاه‌تر ولی کامل */
  .hero-wrap .hero.hero-image {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: 16 / 9 !important;
  }

  .hero-wrap .hero.hero-image > img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
  }

  /* نوار پایین بلندتر */
  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap + .section {
    padding-top: 12px !important;
  }
}


/* =========================================================
   FINAL HERO PRODUCT STRIP
   فقط عکس محصولات - بدون قیمت و متن
   ========================================================= */

.hero-wrap {
  max-width: 1200px;
  margin: 20px auto 0 !important;
  overflow: hidden;
}

/* نوار تبلیغاتی بالای عکس */
.promo-ticker {
  width: 100%;
  height: 46px;
  overflow: hidden;
  white-space: nowrap;
  background: var(--pink) !important;
  color: #fff;
  border-radius: 14px 14px 0 0;
  display: flex;
  align-items: center;
  margin: 0 !important;
}

/* عکس هرو - کامل دیده شود */
.hero-wrap .hero.hero-image {
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 0 !important;
  background: #fff;
}

.hero-wrap .hero.hero-image > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* دکمه روی هرو */
.hero-wrap .hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 25px;
  pointer-events: none;
}

.hero-wrap .hero-overlay .btn {
  pointer-events: auto;
}

/* =========================================================
   نوار محصولات - دقیقاً زیر عکس
   ========================================================= */



/* ریل متحرک */


.hero-product-track-inner {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  height: 100% !important;
  gap: 10px !important;
  animation: heroProductsMove 28s linear infinite !important;
  will-change: transform;
}

/* هر محصول فقط یک عکس کوچک */
.hero-product-mini {
  flex: 0 0 82px !important;
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  padding: 4px !important;
  margin: 0 !important;
  text-decoration: none !important;
}

/* عکس محصول کوچک و کامل */
.hero-product-mini img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* بدون بزرگ شدن عکس */
.hero-product-mini:hover img {
  transform: none !important;
}

.hero-product-mini span {
  font-size: 28px;
}

/* حرکت پیوسته از راست به چپ */
@keyframes heroProductsMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* فاصله بین هرو و دسته‌بندی حذف شود */
.hero-wrap + .section {
  margin-top: 0 !important;
  padding-top: 25px !important;
}

/* موبایل */
@media (max-width: 600px) {

  .promo-ticker {
    height: 42px;
    border-radius: 10px 10px 0 0;
  }

  

  .hero-product-mini {
    flex-basis: 68px !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }

  .hero-product-track-inner {
    gap: 7px !important;
    animation-duration: 24s !important;
  }
}


/* =====================================================
   فقط نوار محصولات زیر هرو
   به نوار تبلیغاتی بالای هرو دست نزن
   ===================================================== */

/* خود نوار پایین */


/* ظرف داخلی */


/* ردیف محصولات متحرک */
.hero-product-strip {
  display: flex !important;
  align-items: center !important;

  width: max-content !important;
  height: 100% !important;

  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;

  animation: rozaliProductMove 32s linear infinite !important;
  will-change: transform;
}

/* هر محصول فقط یک عکس کوچک */
.hero-product-mini {
  display: flex !important;
  flex: 0 0 76px !important;

  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;

  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;

  padding: 3px !important;
  margin: 0 !important;

  align-items: center !important;
  justify-content: center !important;

  background: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;

  overflow: hidden !important;
  text-decoration: none !important;
}

/* فقط خود عکس */
.hero-product-mini img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
}

/* hover هم نباید عکس را بزرگ کند */
.hero-product-mini:hover {
  transform: none !important;
  box-shadow: none !important;
}

.hero-product-mini:hover img {
  transform: none !important;
}

/* اگر محصول عکس نداشت */
.hero-product-mini span {
  font-size: 25px !important;
}

/* حرکت پیوسته */
@keyframes rozaliProductMove {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* هیچ فاصله اضافه‌ای بعد از نوار محصولات */


/* موبایل */
@media (max-width: 600px) {

  

  .hero-product-mini {
    flex-basis: 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;

    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;

    padding: 2px !important;
  }

  .hero-product-strip {
    gap: 2px !important;
    animation-duration: 27s !important;
  }
}


/* ==========================================================
   ROZALI - CLEAN PRODUCT IMAGE STRIP
   فقط عکس، بدون متن، بدون قیمت، بدون کارت
   ========================================================== */

/* کانتینر اصلی نوار */


/* این عنصر فقط ریل را نگه می‌دارد */


/* ریل متحرک */


/* هر آیتم فقط یک عکس */


/* فقط تصویر */


/* هر چیزی غیر از عکس داخل نوار ممنوع */


/* hover هیچ تغییری ایجاد نکند */


/* حرکت کاملاً پیوسته */
@keyframes rozaliStripMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* موبایل */
@media (max-width: 600px) {

  

  

  
}


/* =========================================================
   FINAL FIX
   نوار محصولات فقط و فقط زیر عکس HERO
   ========================================================= */

/* خود نوار محصول هرگز روی عکس قرار نگیرد */


/* فقط خود ریل */


/* ریل عکس‌ها */


/* فقط عکس */


/* عکس کامل */


/* هیچ متن/قیمت/عنوانی */


/* حرکت */


@keyframes rozaliFinalStripMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* خیلی مهم:
   نوار محصول باید بعد از HERO در جریان عادی صفحه باشد */
.hero-wrap .hero-image {
  position: relative !important;
  z-index: 1 !important;
}

.hero-wrap 

/* دسته بندی بلافاصله بعد از نوار محصول */
.hero-wrap + .section {
  margin-top: 0 !important;
  padding-top: 20px !important;
}

@media (max-width: 600px) {

  

  
}


/* =========================================================
   FINAL FIX
   نوار محصولات فقط و فقط زیر عکس HERO
   ========================================================= */

/* خود نوار محصول هرگز روی عکس قرار نگیرد */


/* فقط خود ریل */


/* ریل عکس‌ها */


/* فقط عکس */


/* عکس کامل */


/* هیچ متن/قیمت/عنوانی */


/* حرکت */


@keyframes rozaliFinalStripMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* خیلی مهم:
   نوار محصول باید بعد از HERO در جریان عادی صفحه باشد */
.hero-wrap .hero-image {
  position: relative !important;
  z-index: 1 !important;
}

.hero-wrap 

/* دسته بندی بلافاصله بعد از نوار محصول */
.hero-wrap + .section {
  margin-top: 0 !important;
  padding-top: 20px !important;
}

@media (max-width: 600px) {

  

  
}


/* =========================================================
   ROZALI HERO - CLEAN FINAL
   این بخش مستقل از CSS های قدیمی است
   ========================================================= */

/* کل قسمت هرو در جریان عادی صفحه */
.roz-home-hero {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 0 20px;
  box-sizing: border-box;

  display: block !important;
  position: static !important;
  overflow: visible !important;
}

/* =========================================================
   1 - نوار تبلیغاتی بالای هرو
   ========================================================= */

.roz-promo-bar {
  width: 100%;
  height: 44px;

  overflow: hidden;
  position: relative;

  display: flex;
  align-items: center;

  background: var(--pink);
  color: #fff;

  border-radius: 14px 14px 0 0;
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

.roz-promo-track {
  display: flex;
  align-items: center;

  width: max-content;
  white-space: nowrap;

  animation: rozPromoMove 30s linear infinite;
}

.roz-promo-track span {
  display: inline-block;
  margin: 0 28px;

  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* =========================================================
   2 - عکس اصلی هرو
   ========================================================= */

.roz-main-hero {
  width: 100%;

  display: block !important;
  position: relative !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #fff;

  border-radius: 0 !important;
}

/* عکس کامل، بدون crop */
.roz-main-hero > img {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: none !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
}

/* دکمه روی عکس، بدون تأثیر روی جای عکس */
.roz-hero-button {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 20px;

  display: flex;
  justify-content: center;

  pointer-events: none;
}

.roz-hero-button .btn {
  pointer-events: auto;
}

/* =========================================================
   3 - نوار محصولات
   دقیقاً بعد از عکس
   ========================================================= */

.roz-product-bar {
  width: 100%;
  height: 92px;

  display: block !important;
  position: static !important;

  margin: 0 !important;
  padding: 4px 0 !important;

  overflow: hidden !important;

  background: #fff;

  border: 1px solid var(--line);
  border-top: 0;

  border-radius: 0 0 14px 14px;

  box-sizing: border-box;
}

.roz-product-window {
  width: 100%;
  height: 100%;

  overflow: hidden !important;

  display: block;
  position: static;
}

.roz-product-track {
  width: max-content;
  height: 100%;

  display: flex !important;
  align-items: center !important;

  flex-wrap: nowrap !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  animation: rozProductsMove 32s linear infinite;

  will-change: transform;
}

/* =========================================================
   فقط عکس محصول
   ========================================================= */

.roz-mini-product {
  display: flex !important;

  flex: 0 0 70px !important;

  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;

  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;

  margin: 0 !important;
  padding: 2px !important;

  box-sizing: border-box;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: transparent;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  text-decoration: none;
}

/* فقط تصویر؛ هیچ متن یا قیمت */
.roz-mini-product img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

/* هیچ بزرگنمایی */
.roz-mini-product:hover,
.roz-mini-product:hover img {
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   فاصله دسته بندی
   ========================================================= */

.roz-categories-section {
  margin-top: 0 !important;
  padding-top: 25px !important;
}

/* =========================================================
   انیمیشن‌ها
   ========================================================= */

@keyframes rozPromoMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes rozProductsMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   موبایل
   ========================================================= */

@media (max-width: 600px) {

  .roz-home-hero {
    padding: 0 10px;
    margin-top: 10px;
  }

  .roz-promo-bar {
    height: 42px;
  }

  .roz-promo-track span {
    font-size: 11px;
    margin: 0 18px;
  }

  .roz-product-bar {
    height: 82px;
  }

  .roz-mini-product {
    flex-basis: 58px !important;

    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;

    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;

    padding: 1px !important;
  }

  .roz-product-track {
    animation-duration: 26s;
  }
}



/* =========================================================
   FINAL ROZALI HERO / TICKER FIX
   ========================================================= */

/* کانتینر اصلی هدر */
.hero-wrap {
  max-width: 1200px;
  margin: 30px auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ---------------------------------------------------------
   نوار تبلیغاتی:
   فقط بالای عکس هرو
   --------------------------------------------------------- */
.hero-wrap .promo-ticker {
  position: relative !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 20px !important;

  display: flex !important;
  align-items: center !important;

  overflow: hidden !important;
  white-space: nowrap !important;

  background: #d92f72 !important;
  color: #fff !important;

  border-radius: 14px 14px 0 0 !important;
  z-index: 3 !important;
}

/* متن‌های نوار بالایی */
.hero-wrap .promo-ticker .ticker-track {
  display: inline-flex !important;
  align-items: center !important;
  gap: 45px !important;
  width: max-content !important;
  white-space: nowrap !important;

  animation: rozPromoMove 24s linear infinite !important;
}

.hero-wrap .promo-ticker span {
  display: inline-block !important;
  flex: 0 0 auto !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* ---------------------------------------------------------
   خود عکس هرو
   عکس کامل دیده شود
   هیچ ticker روی آن قرار نگیرد
   --------------------------------------------------------- */
.hero-wrap .hero.hero-image {
  position: relative !important;
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  min-height: 0 !important;
  height: auto !important;

  overflow: hidden !important;

  background: #fff !important;
  border-radius: 0 !important;

  display: block !important;
}

.hero-wrap .hero.hero-image > img {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  min-height: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* دکمه روی عکس */
.hero-wrap .hero-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 28px !important;

  top: auto !important;
  inset-block-start: auto !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 0 !important;

  z-index: 5 !important;
}

/* دکمه صورتی پررنگ + کمی پایین‌تر */
.hero-wrap .hero-overlay .btn {
  background: #d41468 !important;
  color: #fff !important;

  border: none !important;
  box-shadow: 0 6px 18px rgba(50,24,39,.22) !important;

  transform: translateY(10px) !important;

  padding: 13px 25px !important;
  border-radius: 13px !important;

  font-weight: 800 !important;
}

/* ---------------------------------------------------------
   نوار محصولات:
   فقط زیر عکس هرو
   بدون قیمت
   بدون نوشته
   محصولات کوچک و به هم چسبیده
   --------------------------------------------------------- */
.hero-wrap 

/* ریل متحرک */
.hero-wrap 

/* هر محصول */
.hero-wrap 

/* عکس محصول کوچک */
.hero-wrap 

/* هر نوشته، قیمت یا اطلاعات متنی داخل نوار محصولات مخفی شود */
.hero-wrap 

/* لینک هم نباید فاصله ایجاد کند */
.hero-wrap 

/* حرکت نوار تبلیغاتی */
@keyframes rozPromoMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* حرکت محصولات */
@keyframes rozProductsMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* موبایل */
@media (max-width: 600px) {

  .hero-wrap {
    margin-top: 15px !important;
  }

  .hero-wrap .promo-ticker {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
  }

  .hero-wrap .promo-ticker span {
    font-size: 12px !important;
  }

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap .hero-overlay {
    bottom: 20px !important;
  }

  .hero-wrap .hero-overlay .btn {
    transform: translateY(6px) !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   ROZALI — PRODUCT TICKER ONLY
   ========================================================= */

/* فقط نوار محصولات زیر Hero */
.hero-wrap 

/* ریل محصولات */
.hero-wrap 

/* هر محصول */
.hero-wrap 

/* فقط عکس محصول */
.hero-wrap 

/* هیچ متن یا قیمت داخل نوار */
.hero-wrap 

/*
 * حرکت دائمی.
 * چون محصولات 4 بار تکرار شده‌اند، فضای سفید دیده نمی‌شود.
 */
@keyframes rozaliInfiniteProducts {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-25%, 0, 0);
  }
}

/* توقف خیلی کوتاه هنگام Hover اختیاری نیست؛
   حرکت همیشه ادامه دارد */
.hero-wrap 

/* موبایل */
@media (max-width: 600px) {

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 

  .hero-wrap 
}


/* =================================================
   ROZALI - PRODUCT TICKER
   محصولات کوچک، چسبیده و حرکت کاملاً پیوسته
   ================================================= */





.product-ticker-track-inner {
  display: flex;
  width: max-content;
  flex-shrink: 0;
  animation: rozaliProductTicker 45s linear infinite;
  will-change: transform;
}

.product-ticker-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  padding-right: 6px;
}

.hero-ticker-product {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 72px;
  width: 72px;
  height: 76px;
  padding: 2px;
  margin: 0;
  background: #fff;
  border: 0;
  text-decoration: none;
  overflow: hidden;
}

.hero-ticker-product img {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
  background: #fff;
}

@keyframes rozaliProductTicker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* مهم:
   نوار محصول فقط زیر Hero است و روی عکس نمی‌آید */
.hero-wrap {
  overflow: visible;
}

.hero-wrap .hero {
  margin-bottom: 0;
}

.hero-wrap 

/* دکمه مشاهده همه محصولات */
.hero-overlay .btn,
.hero.hero-image .hero-overlay .btn {
  background: #e91e63 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
  top: 18px;
}

.hero-overlay .btn:hover,
.hero.hero-image .hero-overlay .btn:hover {
  background: #d81b5b !important;
}

/* موبایل */
@media (max-width: 600px) {
  

  .hero-ticker-product {
    flex-basis: 62px;
    width: 62px;
    height: 68px;
  }

  .hero-ticker-product img {
    width: 58px;
    height: 58px;
  }

  .product-ticker-group {
    gap: 4px;
    padding-right: 4px;
  }

  .product-ticker-track-inner {
    animation-duration: 38s;
  }
}


/* =====================================================
   ROZALI FINAL PRODUCT TICKER
   ===================================================== */



#heroProductTicker {
  display: block !important;
  width: max-content !important;
  height: 80px !important;
  overflow: visible !important;
}

.rozali-ticker-moving {
  display: flex !important;
  width: max-content !important;
  height: 80px !important;
  animation: rozaliTickerMove 60s linear infinite !important;
  will-change: transform;
}

.rozali-ticker-set {
  display: flex !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  height: 80px !important;
  gap: 3px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.rozali-ticker-item {
  display: flex !important;
  flex: 0 0 74px !important;
  width: 74px !important;
  height: 78px !important;
  padding: 2px !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 0 !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

.rozali-ticker-item img {
  display: block !important;
  width: 70px !important;
  height: 70px !important;
  max-width: 70px !important;
  max-height: 70px !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 6px !important;
}

@keyframes rozaliTickerMove {
  0% {
    transform: translate3d(0,0,0);
  }

  100% {
    transform: translate3d(-50%,0,0);
  }
}

/* هیچ متن، قیمت یا نامی داخل نوار محصول نباشد */
.rozali-ticker-item::before,
.rozali-ticker-item::after {
  display: none !important;
}

/* نوار پایین دقیقاً بعد از Hero */
.hero-wrap {
  overflow: visible !important;
  margin-bottom: 0 !important;
}

.hero-wrap .hero {
  margin-bottom: 0 !important;
}

.hero-wrap 

/* دکمه Hero */
.hero-overlay .btn {
  background: #e91e63 !important;
  color: #fff !important;
  border-color: #e91e63 !important;
  position: relative !important;
  top: 18px !important;
}

/* موبایل */
@media(max-width:600px) {
  

  .rozali-ticker-moving,
  .rozali-ticker-set {
    height: 74px !important;
  }

  .rozali-ticker-item {
    flex-basis: 62px !important;
    width: 62px !important;
    height: 72px !important;
  }

  .rozali-ticker-item img {
    width: 58px !important;
    height: 58px !important;
  }

  .rozali-ticker-moving {
    animation-duration: 55s !important;
  }
}


/* =========================================================
   ROZALI - SNAKE STYLE PRODUCT TICKER
   ========================================================= */



#heroProductTicker {
  width: 100% !important;
  height: 84px !important;
  overflow: hidden !important;
  position: relative !important;
}

.rozali-snake-track {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  height: 84px !important;
  gap: 2px !important;
  animation: rozaliSnakeMove 120s linear infinite !important;
  will-change: transform !important;
}

.rozali-snake-item {
  display: flex !important;
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 78px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
  margin: 0 !important;
  border: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

.rozali-snake-item img {
  display: block !important;
  width: 68px !important;
  height: 68px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 6px !important;
}

/*
 * حرکت بسیار آهسته.
 * محصولات پشت سر هم حرکت می‌کنند.
 */
@keyframes rozaliSnakeMove {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* دکمه Hero همچنان صورتی */
.hero-overlay .btn,
.hero.hero-image .hero-overlay .btn {
  background: #e91e63 !important;
  color: #fff !important;
  border-color: #e91e63 !important;
}

/* موبایل */
@media(max-width:600px) {

  

  #heroProductTicker {
    height: 76px !important;
  }

  .rozali-snake-track {
    height: 76px !important;
    animation-duration: 105s !important;
  }

  .rozali-snake-item {
    flex-basis: 62px !important;
    width: 62px !important;
    height: 70px !important;
  }

  .rozali-snake-item img {
    width: 58px !important;
    height: 58px !important;
  }
}

/* =====================================================
   ALL PRODUCTS - CONTINUOUS TICKER
   ===================================================== */



#heroProductTicker {
  width: 100% !important;
  height: 89px !important;
  overflow: hidden !important;
  position: relative !important;
}

.rozali-snake-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: max-content !important;
  height: 89px !important;
  gap: 0 !important;
  animation: rozaliAllProducts
    var(--ticker-duration, 120s)
    linear
    infinite !important;
  will-change: transform !important;
}

.rozali-snake-set {
  display: flex !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  gap: 0 !important;
  height: 89px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.rozali-snake-item {
  display: flex !important;
  flex: 0 0 74px !important;
  width: 74px !important;
  height: 82px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px !important;
  margin: 0 !important;
  background: #fff !important;
  border: 0 !important;
  overflow: hidden !important;
}

.rozali-snake-item img {
  display: block !important;
  width: 68px !important;
  height: 68px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 6px !important;
}

/*
 * حرکت دقیقاً به اندازه یک مجموعه کامل.
 * بنابراین هیچ فضای سفیدی بین مجموعه اول
 * و مجموعه دوم ایجاد نمی‌شود.
 */
@keyframes rozaliAllProducts {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(
      calc(-1 * var(--ticker-distance)),
      0,
      0
    );
  }
}

/* دکمه Hero */
.hero-overlay .btn,
.hero.hero-image .hero-overlay .btn {
  background: #e91e63 !important;
  color: #fff !important;
  border-color: #e91e63 !important;
}

/* موبایل */
@media(max-width:600px) {

  

  #heroProductTicker {
    height: 76px !important;
  }

  .rozali-snake-track,
  .rozali-snake-set {
    height: 76px !important;
  }

  .rozali-snake-item {
    flex-basis: 62px !important;
    width: 62px !important;
    height: 70px !important;
  }

  .rozali-snake-item img {
    width: 58px !important;
    height: 58px !important;
  }
}


/* =========================================================
   ROZALI BEAUTY - FINAL INFINITE PRODUCT TICKER
   این نوار فقط زیر عکس Hero است.
   ========================================================= */

.hero-wrap{
  max-width:1200px;
  margin:30px auto 0;
  padding:0;
  overflow:hidden;
}

/* نوار محصول فقط پایین Hero */
.product-ticker{
  position:relative;
  width:100%;
  height:112px;
  margin:0;
  padding:10px 0;
  overflow:hidden;
  white-space:nowrap;
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
  box-sizing:border-box;
}

/* مسیر بی‌نهایت */
#heroProductTicker{
  width:100%;
  height:100%;
  overflow:hidden;
  position:relative;
  display:block;
}

/* ریل */
#heroProductTicker .hero-product-marquee{
  height:100%;
  display:flex;
  width:max-content;
  flex-wrap:nowrap;
  align-items:center;
  animation:rozaliProductMarquee 45s linear infinite;
  will-change:transform;
}

/* هر مجموعه کاملاً به هم چسبیده */
#heroProductTicker .hero-product-set{
  display:flex;
  flex-shrink:0;
  flex-wrap:nowrap;
  align-items:center;
  height:100%;
  gap:0;
  margin:0;
  padding:0;
}

/* هیچ فاصله‌ای بین محصولات */
#heroProductTicker .hero-product-item{
  display:flex;
  flex-shrink:0;
  width:92px;
  height:92px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:#fff;
  overflow:hidden;
  text-decoration:none;
}

/* عکس کوچک محصول */
#heroProductTicker .hero-product-img{
  width:92px;
  height:92px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  overflow:hidden;
}

/* خود عکس */
#heroProductTicker .hero-product-img img{
  display:block;
  width:78px;
  height:78px;
  max-width:78px;
  max-height:78px;
  object-fit:contain;
  margin:7px;
  padding:0;
  border:0;
}

/* اگر محصول عکس نداشت */
#heroProductTicker .hero-product-img span{
  font-size:38px;
  line-height:1;
}

/* حرکت آرام و بدون توقف */
@keyframes rozaliProductMarquee{
  from{
    transform:translate3d(0,0,0);
  }
  to{
    transform:translate3d(-25%,0,0);
  }
}

/* در زمان hover متوقف نشود */
#heroProductTicker .hero-product-marquee:hover{
  animation-play-state:running;
}

/* موبایل */
@media(max-width:600px){
  .product-ticker{
    height:100px;
  }

  #heroProductTicker .hero-product-item{
    width:82px;
    height:82px;
  }

  #heroProductTicker .hero-product-img{
    width:82px;
    height:82px;
  }

  #heroProductTicker .hero-product-img img{
    width:70px;
    height:70px;
    max-width:70px;
    max-height:70px;
    margin:6px;
  }

  #heroProductTicker .hero-product-marquee{
    animation-duration:38s;
  }
}


/* =========================================================
   ROZALI BEAUTY
   FINAL CLEAN HERO + TICKER
   ========================================================= */

/* ظرف اصلی */
.hero-wrap{
  width:100%;
  max-width:1200px;
  margin:30px auto 0;
  padding:0;
  overflow:hidden;
}

/* =========================================================
   PROMO TICKER
   باید بالای عکس باشد
   ========================================================= */

.hero-wrap > .promo-ticker{
  position:relative;
  width:100%;
  height:46px;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#b82d6d;
  color:#fff;
  border:0;
  border-radius:14px 14px 0 0;
  display:flex;
  align-items:center;
  white-space:nowrap;
}

.hero-wrap > .promo-ticker .ticker-track{
  display:flex;
  width:max-content;
  flex-shrink:0;
  align-items:center;
  gap:55px;
  white-space:nowrap;
  animation:rozaliPromoMove 35s linear infinite;
}

.hero-wrap > .promo-ticker .ticker-track span{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  color:#fff;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

@keyframes rozaliPromoMove{
  from{
    transform:translate3d(0,0,0);
  }
  to{
    transform:translate3d(-50%,0,0);
  }
}

/* =========================================================
   HERO IMAGE
   عکس کامل دیده شود
   ========================================================= */

.hero-wrap > .hero.hero-image{
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border-radius:0;
  background:#fff;
}

.hero-wrap > .hero.hero-image > img{
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  object-fit:contain;
  object-position:center center;
  margin:0;
  padding:0;
}

/* دکمه */
.hero-wrap > .hero.hero-image .hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 20px 28px;
  pointer-events:none;
  background:transparent;
}

.hero-wrap > .hero.hero-image .hero-overlay .btn{
  pointer-events:auto;
  background:#c21868 !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 5px 18px rgba(194,24,104,.30);
  padding:12px 24px;
  border-radius:12px;
  font-weight:800;
}

/* =========================================================
   PRODUCT TICKER
   دقیقاً زیر عکس
   ========================================================= */

.hero-wrap > .product-ticker{
  position:relative;
  width:100%;
  height:105px;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  border:1px solid #ead8e2;
  border-top:0;
  border-radius:0 0 14px 14px;
  white-space:nowrap;
}

/* viewport */
#heroProductTicker{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0;
  padding:0;
}

/* مسیر */
#heroProductTicker .rozali-ticker-viewport{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

/*
 * مهم:
 * track با JS حرکت می‌کند.
 * هیچ animation CSS روی آن نیست.
 */
#heroProductTicker .rozali-ticker-track{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:max-content;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:0;
  margin:0;
  padding:0;
  will-change:transform;
}

/* هر مجموعه */
#heroProductTicker .rozali-ticker-set{
  display:flex;
  flex-shrink:0;
  flex-wrap:nowrap;
  align-items:center;
  height:100%;
  gap:0;
  margin:0;
  padding:0;
}

/* هر محصول کاملاً چسبیده */
#heroProductTicker .rozali-ticker-item{
  display:flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  width:88px;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:#fff;
  text-decoration:none;
  overflow:hidden;
}

/* عکس کوچک */
#heroProductTicker .rozali-ticker-item img{
  display:block;
  width:72px;
  height:72px;
  max-width:72px;
  max-height:72px;
  margin:0;
  padding:0;
  border:0;
  object-fit:contain;
}

/*
 * هیچ متن، قیمت یا نامی داخل نوار نمایش داده نمی‌شود.
 */
#heroProductTicker .rozali-ticker-item::before,
#heroProductTicker .rozali-ticker-item::after{
  display:none !important;
  content:none !important;
}

/* موبایل */
@media(max-width:600px){

  .hero-wrap{
    width:100%;
    margin-top:15px;
  }

  .hero-wrap > .promo-ticker{
    height:42px;
    border-radius:10px 10px 0 0;
  }

  .hero-wrap > .promo-ticker .ticker-track span{
    font-size:11px;
  }

  .hero-wrap > .hero.hero-image > img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .hero-wrap > .product-ticker{
    height:92px;
  }

  #heroProductTicker .rozali-ticker-item{
    width:78px;
  }

  #heroProductTicker .rozali-ticker-item img{
    width:64px;
    height:64px;
    max-width:64px;
    max-height:64px;
  }
}

/* =========================================================
   REMOVE HERO - KEEP ONLY ALL PRODUCTS BUTTON
   ========================================================= */

.roz-only-all-products{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:22px 0 28px;
  padding:0;
}

.roz-only-all-products .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 28px;
  border-radius:12px;
  background:#c21868 !important;
  color:#fff !important;
  text-decoration:none;
  font-weight:800;
  border:0;
  box-shadow:0 5px 18px rgba(194,24,104,.25);
}

.roz-only-all-products .btn:hover{
  transform:translateY(-1px);
}


/* =========================================================
   ROZALI HERO SLIDER
   ========================================================= */

.roz-hero{
  position:relative;
  width:100%;
  max-width:1400px;
  margin:0 auto 35px;
  overflow:hidden;
  border-radius:22px;
  background:#f5f5f5;
  min-height:280px;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.roz-hero-track{
  position:relative;
  width:100%;
  min-height:280px;
}

.roz-hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease;
  pointer-events:none;
}

.roz-hero-slide.active{
  position:relative;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.roz-hero-slide picture,
.roz-hero-slide img{
  display:block;
  width:100%;
}

.roz-hero-slide img{
  height:min(520px,42vw);
  min-height:280px;
  object-fit:cover;
}

.roz-hero-content{
  position:absolute;
  right:7%;
  top:50%;
  transform:translateY(-50%);
  max-width:42%;
  text-align:right;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

.roz-hero-content h1{
  margin:0 0 12px;
  font-size:clamp(24px,4vw,48px);
}

.roz-hero-content p{
  margin:0 0 20px;
  font-size:clamp(15px,2vw,22px);
}

.roz-hero-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 24px;
  border-radius:12px;
  background:#fff;
  color:#222;
  text-decoration:none;
  font-weight:700;
  text-shadow:none;
}

.roz-hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:#222;
  font-size:34px;
  line-height:40px;
  cursor:pointer;
}

.roz-hero-prev{
  right:18px;
}

.roz-hero-next{
  left:18px;
}

.roz-hero-dots{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  gap:7px;
}

.roz-hero-dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.7);
  cursor:pointer;
}

.roz-hero-dot.active{
  transform:scale(1.35);
}

@media(max-width:700px){

  .roz-hero{
    margin-bottom:25px;
    border-radius:14px;
  }

  .roz-hero-track{
    min-height:220px;
  }

  .roz-hero-slide img{
    height:62vw;
    min-height:220px;
  }

  .roz-hero-content{
    right:5%;
    max-width:70%;
  }

  .roz-hero-content h1{
    font-size:24px;
  }

  .roz-hero-content p{
    font-size:11.2px;
  }

  .roz-hero-button{
    padding:8px 15px;
    font-size:13px;
  }

  .roz-hero-arrow{
    width:36px;
    height:36px;
    font-size:28px;
    line-height:32px;
  }

  .roz-hero-prev{
    right:8px;
  }

  .roz-hero-next{
    left:8px;
  }
}


/* عنوان Hero بالای عکس */
.roz-hero-slide{
  display:flex !important;
  flex-direction:column !important;
}

.roz-hero-content{
  order:1 !important;
  position:static !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:12px 16px 10px !important;
  text-align:center !important;
  background:#fff !important;
  color:#000 !important;
}

.roz-hero-slide picture{
  order:2 !important;
  display:block !important;
  width:100% !important;
}

.roz-hero-content h1{
  margin:0 !important;
  color:#000 !important;
  font-size:24px !important;
  font-weight:700 !important;
}

.roz-hero-content p{
  color:#000 !important;
  margin:6px 0 0 !important;
}

.roz-hero-button{
  margin-top:8px !important;
}

@media (max-width:700px){
  .roz-hero-content{
    padding:10px 12px 8px !important;
  }

  .roz-hero-content h1{
    font-size:19px !important;
  }
}


/* عنوان Hero داخل عکس - وسط چین و مشکی */
.roz-hero-slide{
  display:block !important;
  position:relative !important;
}

.roz-hero-slide picture{
  display:block !important;
  width:100% !important;
}

.roz-hero-content{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%, -50%) !important;

  width:90% !important;
  padding:0 !important;
  margin:0 !important;

  background:transparent !important;
  color:#000 !important;
  text-align:center !important;
  z-index:5 !important;
}

.roz-hero-content h1{
  margin:0 !important;
  color:#000 !important;
  font-size:32px !important;
  font-weight:800 !important;
  text-align:center !important;
  text-shadow:0 1px 3px rgba(255,255,255,.65) !important;
}

.roz-hero-content p{
  margin:8px 0 0 !important;
  color:#000 !important;
  text-align:center !important;
}

.roz-hero-button{
  margin-top:12px !important;
  text-align:center !important;
}

@media (max-width:700px){
  .roz-hero-content{
    width:92% !important;
  }

  .roz-hero-content h1{
    font-size:22px !important;
  }

  .roz-hero-content p{
    font-size:14px !important;
  }
}


/* عنوان Hero: داخل تصویر، نزدیک بالای تصویر و وسط‌چین */
.roz-hero-slide{
  position:relative !important;
}

.roz-hero-content{
  position:absolute !important;
  top:12% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;

  width:90% !important;
  padding:0 !important;
  margin:0 !important;

  background:transparent !important;
  text-align:center !important;
  color:#000 !important;
  z-index:5 !important;
}

.roz-hero-content h1{
  margin:0 !important;
  color:#000 !important;
  text-align:center !important;
  font-size:32px !important;
  font-weight:800 !important;
  text-shadow:0 1px 3px rgba(255,255,255,.7) !important;
}

.roz-hero-content p{
  margin:7px 0 0 !important;
  color:#000 !important;
  text-align:center !important;
}

@media (max-width:700px){
  .roz-hero-content{
    top:10% !important;
    width:92% !important;
  }

  .roz-hero-content h1{
    font-size:21px !important;
  }

  .roz-hero-content p{
    font-size:13px !important;
  }
}


/* رنگ عنوان Hero */
.roz-hero-content h1{
  color:#168a45 !important;
}

.roz-hero-content p{
  color:#168a45 !important;
}


/* =========================================================
   HERO FINAL FIX
   اسلایدها روی هم قرار می‌گیرند و فقط یکی نمایش داده می‌شود
   ========================================================= */

.roz-hero{
  position:relative !important;
  overflow:hidden !important;
}

.roz-hero-track{
  position:relative !important;
  width:100% !important;
}

.roz-hero-slide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  display:block !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .35s ease !important;
}

.roz-hero-slide.active{
  position:relative !important;
  inset:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.roz-hero-slide picture{
  display:block !important;
  width:100% !important;
}

.roz-hero-slide img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

/* عنوان: داخل تصویر، بالای تصویر و وسط‌چین */
.roz-hero-content{
  position:absolute !important;
  top:12% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;

  width:90% !important;
  padding:0 !important;
  margin:0 !important;

  background:transparent !important;
  text-align:center !important;
  color:#168a45 !important;
  z-index:10 !important;
}

.roz-hero-content h1{
  margin:0 !important;
  color:#168a45 !important;
  text-align:center !important;
  font-size:32px !important;
  font-weight:800 !important;
}

.roz-hero-content p{
  margin:7px 0 0 !important;
  color:#168a45 !important;
  text-align:center !important;
}

@media (max-width:700px){
  .roz-hero-content{
    top:10% !important;
    width:92% !important;
  }

  .roz-hero-content h1{
    font-size:21px !important;
  }
}


/* تماس با ما کنار نماد اعتماد */
.roz-enamad-footer{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:50px !important;
  flex-wrap:wrap !important;
}

.roz-footer-contact{
  direction:rtl;
  text-align:right;
  min-width:230px;
}

.roz-footer-contact-title{
  font-size:20px;
  font-weight:800;
  margin-bottom:12px;
}

.roz-footer-contact-item{
  font-size:11.2px;
  line-height:2;
}

@media (max-width:700px){
  .roz-enamad-footer{
    flex-direction:column !important;
    gap:25px !important;
  }

  .roz-footer-contact{
    text-align:center;
  }
}


/* =========================================================
   ROZ SIDE MENU
   ========================================================= */

.roz-menu-toggle{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  padding:0;
  transition:.2s;
  order:-1;
}

.roz-menu-toggle:hover{
  border-color:var(--pink);
  transform:translateY(-1px);
}

.roz-menu-toggle span{
  display:block;
  width:20px;
  height:2px;
  border-radius:10px;
  background:var(--dark);
}

/* لایه تاریک پشت منو */
.roz-side-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.38);
  z-index:100;
  opacity:0;
  visibility:hidden;
  transition:.25s;
}

.roz-side-overlay.open{
  opacity:1;
  visibility:visible;
}

/* پنل سمت راست */
.roz-side-menu{
  position:fixed;
  top:0;
  right:0;
  width:min(340px,88vw);
  height:100vh;
  background:#fff;
  z-index:101;
  box-shadow:-12px 0 40px rgba(0,0,0,.16);
  transform:translateX(105%);
  transition:transform .28s ease;
  direction:rtl;
  overflow-y:auto;
}

.roz-side-menu.open{
  transform:translateX(0);
}

.roz-side-menu-header{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.roz-side-menu-header strong{
  font-size:19px;
  color:var(--dark);
}

.roz-side-menu-header button{
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  background:#f8edf3;
  color:var(--pink);
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

.roz-side-categories{
  padding:14px;
}

.roz-side-home,
.roz-side-category{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:10px 12px;
  margin-bottom:7px;
  border-radius:13px;
  color:var(--dark);
  transition:.2s;
}

.roz-side-home{
  background:#fff4f8;
  color:var(--pink);
  font-weight:800;
}

.roz-side-category{
  border:1px solid transparent;
}

.roz-side-category:hover,
.roz-side-category:active{
  background:#fff4f8;
  border-color:var(--pink2);
  color:var(--pink);
}

.roz-side-category img{
  width:38px;
  height:38px;
  border-radius:10px;
  object-fit:cover;
  background:#f8e5ee;
  flex:0 0 38px;
}

.roz-side-category-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  background:#f8e5ee;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
}

.roz-side-title{
  font-size:12px;
  color:var(--gold);
  font-weight:800;
  padding:18px 10px 8px;
}

.roz-side-loading,
.roz-side-empty{
  padding:25px 10px;
  text-align:center;
  color:#806d77;
  font-size:11.2px;
}

/* موبایل */
@media(max-width:600px){
  .roz-menu-toggle{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .roz-side-menu{
    width:min(320px,88vw);
  }
}


/* چیدمان عمودی دسته‌بندی‌های منوی موبایل */
@media(max-width:600px){

  .roz-side-menu{
    width:82vw !important;
    max-width:320px !important;
    height:100vh !important;
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  .roz-side-categories{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    padding:14px !important;
  }

  .roz-side-home,
  .roz-side-category{
    width:100% !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    margin:0 0 8px 0 !important;
    box-sizing:border-box !important;
  }

  .roz-side-title{
    width:100% !important;
    flex:0 0 auto !important;
    box-sizing:border-box !important;
  }

}


/* =========================================================
   ROZ SIDE MENU - CATEGORY ACCORDION
   ========================================================= */

.roz-side-category-list{
  width:100%;
}

.roz-side-category-group{
  width:100%;
  margin-bottom:7px;
}

.roz-side-category-parent{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  font-family:inherit;
  font-size:inherit;
  cursor:pointer;
  text-align:right;
  box-sizing:border-box;
  position:relative;
}

.roz-side-category-parent:hover{
  background:#fff4f8;
  border-color:var(--pink2);
}

.roz-side-category-name{
  flex:1;
  text-align:right;
}

.roz-side-arrow{
  margin-right:auto;
  width:28px;
  height:28px;
  border-radius:8px;
  background:#f8edf3;
  color:var(--pink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  transition:transform .22s ease, background .22s ease;
}

.roz-side-category-group.open
.roz-side-arrow{
  transform:rotate(180deg);
  background:#f5dce8;
}

.roz-side-subcategories{
  display:none;
  margin:2px 0 10px 0;
  padding:5px 10px 5px 0;
  border-right:2px solid #f1d6e1;
}

.roz-side-category-group.open
.roz-side-subcategories{
  display:block;
}

.roz-side-subcategory{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:8px 12px;
  margin:3px 0;
  border-radius:10px;
  color:#55454d;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  transition:.18s ease;
  box-sizing:border-box;
}

.roz-side-subcategory:hover,
.roz-side-subcategory:active{
  background:#fff4f8;
  color:var(--pink);
}

.roz-side-subcategory-all{
  background:#fff7fa;
  color:var(--pink);
  font-weight:800;
}

.roz-side-subcategory-dot{
  width:18px;
  text-align:center;
  color:var(--pink);
  font-size:20px;
  line-height:1;
}

.roz-side-menu-icon{
  width:24px;
  text-align:center;
}


/* موبایل */

@media(max-width:600px){

  .roz-side-category-list{
    width:100%;
  }

  .roz-side-category-group{
    width:100%;
    margin-bottom:7px;
  }

  .roz-side-category-parent{
    width:100% !important;
    min-height:52px !important;
  }

  .roz-side-subcategories{
    width:100%;
    box-sizing:border-box;
    padding-right:8px;
  }

  .roz-side-subcategory{
    width:100%;
    min-height:44px;
    box-sizing:border-box;
  }

}

/* =========================================================
   FIX: زیرمجموعه‌های منوی موبایل کاملاً عمودی
   ========================================================= */

@media (max-width: 600px){

  .roz-side-menu .roz-side-category-group{
    display:block !important;
    width:100% !important;
  }

  .roz-side-menu .roz-side-category-parent{
    display:flex !important;
    flex-direction:row !important;
    width:100% !important;
  }

  .roz-side-menu .roz-side-subcategories{
    display:none !important;
    width:100% !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    box-sizing:border-box !important;
    margin:4px 0 10px 0 !important;
    padding:5px 10px 5px 0 !important;
  }

  .roz-side-menu
  .roz-side-category-group.open
  .roz-side-subcategories{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
  }

  .roz-side-menu .roz-side-subcategory{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;

    flex:0 0 auto !important;

    box-sizing:border-box !important;
    margin:3px 0 !important;
  }

  .roz-side-menu .roz-side-subcategory span{
    white-space:normal !important;
  }

  .roz-side-menu .roz-side-subcategory-all{
    width:100% !important;
  }

}



/* =========================================================
   ROZ SIDE MENU - FINAL CSS FIX
   ========================================================= */

body.roz-side-menu-open{
  overflow:hidden !important;
}


/*
 * خود منوی کناری
 */
#rozSideMenu{
  position:fixed !important;

  top:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:min(390px, 88vw) !important;

  z-index:99999 !important;

  background:#fff !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  transform:translateX(110%) !important;

  visibility:hidden !important;

  opacity:0 !important;

  transition:
    transform .3s ease,
    opacity .25s ease,
    visibility .3s ease !important;

  box-shadow:
    -10px 0 40px rgba(0,0,0,.15) !important;
}


/*
 * وضعیت باز
 */
#rozSideMenu.open{
  transform:translateX(0) !important;

  visibility:visible !important;

  opacity:1 !important;
}


/*
 * Overlay
 */
#rozSideOverlay{
  position:fixed !important;

  inset:0 !important;

  z-index:99998 !important;

  background:rgba(0,0,0,.45) !important;

  opacity:0 !important;

  visibility:hidden !important;

  pointer-events:none !important;

  transition:
    opacity .3s ease,
    visibility .3s ease !important;
}


#rozSideOverlay.open{
  opacity:1 !important;

  visibility:visible !important;

  pointer-events:auto !important;
}


/*
 * لیست دسته‌بندی
 */
.roz-side-category-list{
  display:flex !important;

  flex-direction:column !important;

  width:100% !important;

  padding:10px 14px 30px !important;

  box-sizing:border-box !important;
}


/*
 * هر دسته
 */
.roz-side-category{
  width:100% !important;

  min-height:58px !important;

  display:flex !important;

  align-items:center !important;

  gap:12px !important;

  box-sizing:border-box !important;

  padding:10px 12px !important;

  margin:3px 0 !important;

  border:0 !important;

  border-radius:14px !important;

  background:transparent !important;

  color:inherit !important;

  text-decoration:none !important;

  cursor:pointer !important;

  font:inherit !important;

  text-align:right !important;
}


.roz-side-category:hover{
  background:rgba(0,0,0,.05) !important;
}


/*
 * عکس دسته
 */
.roz-side-category img{
  width:44px !important;

  height:44px !important;

  min-width:44px !important;

  object-fit:cover !important;

  border-radius:12px !important;
}


.roz-side-category-icon{
  width:44px !important;

  min-width:44px !important;

  height:44px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  font-size:24px !important;
}


/*
 * نام
 */
.roz-side-category-name{
  flex:1 !important;

  font-weight:700 !important;
}


/*
 * فلش
 */
.roz-side-arrow{
  width:30px !important;

  height:30px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  font-size:22px !important;

  transition:transform .25s ease !important;
}


/*
 * وقتی باز است
 */
.roz-side-category-group.open
.roz-side-arrow{
  transform:rotate(-90deg) !important;
}


/*
 * زیر دسته‌ها
 */
.roz-side-subcategories{
  display:none;

  padding:
    4px
    12px
    10px
    18px !important;

  margin:
    0
    8px
    8px
    8px !important;

  border-radius:14px !important;

  background:rgba(0,0,0,.035) !important;
}


.roz-side-category-group.open
.roz-side-subcategories{
  display:block !important;
}


/*
 * لینک زیر دسته
 */
.roz-side-subcategory{
  display:flex !important;

  align-items:center !important;

  gap:9px !important;

  min-height:43px !important;

  padding:8px 10px !important;

  color:inherit !important;

  text-decoration:none !important;

  border-radius:10px !important;

  font-size:14px !important;
}


.roz-side-subcategory:hover{
  background:rgba(0,0,0,.06) !important;
}


.roz-side-subcategory-dot{
  font-size:18px !important;
}


.roz-side-subcategory-all{
  font-weight:700 !important;

  border-bottom:
    1px solid rgba(0,0,0,.08) !important;

  border-radius:0 !important;
}


/*
 * عنوان
 */
.roz-side-title{
  padding:18px 20px 8px !important;

  font-size:18px !important;

  font-weight:800 !important;
}


/*
 * خانه
 */
.roz-side-home{
  display:flex !important;

  align-items:center !important;

  gap:10px !important;

  margin:15px !important;

  padding:13px 15px !important;

  border-radius:13px !important;

  background:rgba(0,0,0,.045) !important;

  color:inherit !important;

  text-decoration:none !important;

  font-weight:700 !important;
}


/*
 * loading
 */
.roz-side-loading{
  padding:30px 20px !important;

  text-align:center !important;

  opacity:.7 !important;
}


.roz-side-empty{
  padding:30px 20px !important;

  text-align:center !important;

  opacity:.65 !important;
}


/*
 * موبایل
 */
@media(max-width:600px){

  #rozSideMenu{
    width:88vw !important;
    max-width:360px !important;
  }

}


/* =========================================================
   ROZ SIDE MENU - ABSOLUTE FINAL OVERRIDE
   ========================================================= */

body.roz-side-menu-open{
  overflow:hidden !important;
}

#rozSideOverlay{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  background:rgba(0,0,0,.45) !important;
  z-index:99998 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .25s ease !important;
}

#rozSideOverlay.open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

#rozSideMenu{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;

  width:min(390px,88vw) !important;
  max-width:390px !important;
  height:100vh !important;

  background:#fff !important;

  z-index:99999 !important;

  overflow-x:hidden !important;
  overflow-y:auto !important;

  transform:translate3d(110%,0,0) !important;

  visibility:hidden !important;
  opacity:0 !important;

  pointer-events:none !important;

  transition:
    transform .28s ease,
    opacity .2s ease,
    visibility .28s ease !important;

  box-shadow:-15px 0 45px rgba(0,0,0,.20) !important;

  direction:rtl !important;
}

#rozSideMenu.open{
  transform:translate3d(0,0,0) !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

#rozSideMenu .roz-side-menu-header{
  position:sticky !important;
  top:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  width:100% !important;
  box-sizing:border-box !important;

  padding:18px !important;

  background:#fff !important;

  z-index:5 !important;

  border-bottom:1px solid #eee !important;
}

#rozSideMenu .roz-side-categories{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:14px !important;
}

#rozSideMenu .roz-side-category-list{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  gap:7px !important;
}

#rozSideMenu .roz-side-category-group{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}

#rozSideMenu .roz-side-category,
#rozSideMenu .roz-side-category-parent,
#rozSideMenu .roz-side-home{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  width:100% !important;
  min-height:54px !important;
  box-sizing:border-box !important;
}

#rozSideMenu .roz-side-category-parent{
  justify-content:flex-start !important;
  border:0 !important;
  cursor:pointer !important;
}

#rozSideMenu .roz-side-category-name{
  flex:1 !important;
}

#rozSideMenu .roz-side-arrow{
  margin-right:auto !important;
  transition:transform .2s ease !important;
}

#rozSideMenu .roz-side-category-group.open .roz-side-arrow{
  transform:rotate(180deg) !important;
}

#rozSideMenu .roz-side-subcategories{
  display:none !important;
  flex-direction:column !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:5px 12px 8px 0 !important;
  margin:0 !important;
}

#rozSideMenu .roz-side-category-group.open .roz-side-subcategories{
  display:flex !important;
}

#rozSideMenu .roz-side-subcategory{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;

  width:100% !important;
  min-width:0 !important;

  box-sizing:border-box !important;

  min-height:42px !important;

  margin:2px 0 !important;
  padding:8px 12px !important;

  white-space:normal !important;
}

@media(max-width:600px){

  #rozSideMenu{
    width:82vw !important;
    max-width:330px !important;
  }

}


/* =========================================================
   ROZ MENU - DEFINITIVE MOBILE/DESKTOP FIX
   ========================================================= */

#rozSideMenu{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:min(390px,88vw) !important;
  height:100vh !important;
  z-index:999999 !important;
  background:#fff !important;
  direction:rtl !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  transform:translateX(110%) !important;
  visibility:hidden !important;
  opacity:0 !important;
  transition:
    transform .28s ease,
    opacity .28s ease,
    visibility .28s ease !important;
}

#rozSideMenu.open{
  transform:translateX(0) !important;
  visibility:visible !important;
  opacity:1 !important;
}

#rozSideOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:999998 !important;
  background:rgba(0,0,0,.42) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:
    opacity .25s ease,
    visibility .25s ease !important;
}

#rozSideOverlay.open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

#rozSideMenu .roz-side-categories{
  display:block !important;
  width:100% !important;
  padding:14px !important;
  box-sizing:border-box !important;
}

#rozSideMenu .roz-side-category-list{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  gap:7px !important;
}

#rozSideMenu .roz-side-category-group{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

#rozSideMenu .roz-side-category,
#rozSideMenu .roz-side-category-parent,
#rozSideMenu .roz-side-home{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  width:100% !important;
  min-height:54px !important;
  box-sizing:border-box !important;
}

#rozSideMenu .roz-side-category-parent{
  justify-content:flex-start !important;
  border:0 !important;
  cursor:pointer !important;
  text-align:right !important;
}

#rozSideMenu .roz-side-category-name{
  flex:1 1 auto !important;
  text-align:right !important;
}

#rozSideMenu .roz-side-arrow{
  margin-right:auto !important;
  transition:transform .2s ease !important;
}

#rozSideMenu .roz-side-category-group.open .roz-side-arrow{
  transform:rotate(180deg) !important;
}

#rozSideMenu .roz-side-subcategories{
  display:none !important;
  flex-direction:column !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:5px 12px 8px 0 !important;
  margin:0 !important;
}

#rozSideMenu .roz-side-category-group.open .roz-side-subcategories{
  display:flex !important;
}

#rozSideMenu .roz-side-subcategory{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-width:0 !important;
  min-height:42px !important;
  box-sizing:border-box !important;
  margin:2px 0 !important;
  padding:8px 12px !important;
  white-space:normal !important;
  text-align:right !important;
}

@media(max-width:600px){

  #rozSideMenu{
    width:82vw !important;
    max-width:330px !important;
  }

  #rozSideMenu .roz-side-category-list{
    display:flex !important;
    flex-direction:column !important;
  }

  #rozSideMenu .roz-side-category-group{
    display:block !important;
  }

  #rozSideMenu .roz-side-subcategories{
    display:none !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
  }

  #rozSideMenu .roz-side-category-group.open .roz-side-subcategories{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
  }

  #rozSideMenu .roz-side-subcategory{
    display:flex !important;
    flex-direction:row !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    flex:0 0 auto !important;
  }

}

/* =========================================================
   ROZ - Makeup category buttons
   ========================================================= */

.makeup-subcategory-box{
  width:100%;
  max-width:720px;
  margin:14px auto 18px;
  padding:10px 12px;
  box-sizing:border-box;

  background:#fff1f6;
  border:1px solid #f7d5e2;
  border-radius:14px;

  box-shadow:0 2px 8px rgba(180,80,120,.06);
}

.makeup-subcategory-title{
  text-align:center;
  font-size:11.2px;
  font-weight:700;
  color:#8d536c;
  margin-bottom:9px;
}

.makeup-subcategory-buttons{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:7px;

  width:100%;
  box-sizing:border-box;
}

.makeup-subcategory-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  flex:1 1 0;
  min-width:0;

  padding:7px 8px;
  min-height:34px;
  box-sizing:border-box;

  border-radius:9px;
  border:1px solid #f1c6d7;

  background:#ffe4ee;
  color:#7f465f;

  font-size:13px;
  font-weight:600;
  text-decoration:none;

  white-space:nowrap;

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

.makeup-subcategory-btn:hover{
  background:#ffd5e4;
  border-color:#eeb4c9;
  transform:translateY(-1px);
}

.makeup-subcategory-btn.active{
  background:#f7b8ce;
  border-color:#ef9fba;
  color:#6f2947;
  font-weight:700;
}

/* موبایل */
@media(max-width:600px){

  .makeup-subcategory-box{
    max-width:100%;
    margin:12px auto 16px;
    padding:9px 8px;
    border-radius:12px;
  }

  .makeup-subcategory-title{
    font-size:13px;
    margin-bottom:8px;
  }

  .makeup-subcategory-buttons{
    gap:4px;
  }

  .makeup-subcategory-btn{
    padding:6px 4px;
    min-height:32px;
    font-size:12px;
    border-radius:8px;
  }

}


/* عنوان صفحه آرایشی */
.section-title h2{
  color:#d94f83 !important;
}


/* =========================================================
   ROZ - دکمه‌های بازگشت به صفحه اصلی
   ========================================================= */

.category-back-btn{
  background:#d9f2e3 !important;
  border:1px solid #b9dfc9 !important;
  color:#347653 !important;
}

.category-back-btn:hover{
  background:#c9ead6 !important;
  border-color:#a9d5ba !important;
  color:#286343 !important;
}


/* =========================================================
   ROZ - ALL "BACK TO HOME" BUTTONS - PASTEL GREEN
   ========================================================= */

/* صفحه همه محصولات */
.page > div > a.btn.light[href="#/"],

/* صفحات دسته‌بندی */
.category-back-btn,

/* صفحه جزئیات محصول */
.detail + a.btn.light[href="#/"],

/* سبد خرید */
.cart-back-btn{
  background:#d8f3e3 !important;
  background-color:#d8f3e3 !important;
  border-color:#b8dfc7 !important;
  color:#347653 !important;
}

.page > div > a.btn.light[href="#/"]:hover,
.category-back-btn:hover,
.detail + a.btn.light[href="#/"]:hover,
.cart-back-btn:hover{
  background:#c6ead4 !important;
  background-color:#c6ead4 !important;
  border-color:#9fd2b3 !important;
  color:#286343 !important;
}


/* فقط دکمه بازگشت در صفحات دسته‌بندی */
.category-back-btn{
  background:#d9f2e3 !important;
  background-color:#d9f2e3 !important;
  border:1px solid #b7ddc6 !important;
  color:#347653 !important;
}

.category-back-btn:hover{
  background:#c8ead6 !important;
  background-color:#c8ead6 !important;
  border-color:#a4d2b4 !important;
  color:#286343 !important;
}


/* =========================================================
   دکمه بازگشت صفحه دسته‌بندی - سبز پاستیلی
   ========================================================= */

a.btn.light.category-back-btn,
a.category-back-btn{
  background: #d8f3e3 !important;
  background-color: #d8f3e3 !important;
  color: #347653 !important;
  border: 1px solid #b8dfc7 !important;
  box-shadow: none !important;
}

a.btn.light.category-back-btn:hover,
a.category-back-btn:hover{
  background: #c7ead5 !important;
  background-color: #c7ead5 !important;
  color: #286343 !important;
  border-color: #a5d3b5 !important;
}


/* =========================================================
   ROZ - Hamburger Menu
   Compact pastel pink style
   ========================================================= */

.roz-side-category-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:4px 8px 10px;
}

.roz-side-category,
.roz-side-category-parent{
  width:100%;
  min-height:42px !important;
  padding:7px 10px !important;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  gap:8px;

  background:#ffe8f0 !important;
  border:1px solid #f5cfdd !important;
  border-radius:10px !important;

  color:#7d4560 !important;

  font-size:13px !important;
  font-weight:600;

  box-shadow:none !important;

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

.roz-side-category:hover,
.roz-side-category-parent:hover{
  background:#ffdeea !important;
  border-color:#efbfd1 !important;
  transform:translateY(-1px);
}

/* تصویر / آیکن دسته */
.roz-side-category img{
  width:30px !important;
  height:30px !important;
  object-fit:cover;
  border-radius:8px;
  flex:0 0 30px;
}

.roz-side-category-icon{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 30px;

  background:#ffdbe8;
  border-radius:8px;
  font-size:15px;
}

/* نام دسته */
.roz-side-category-name{
  flex:1;
  min-width:0;
  text-align:right;
}

/* فلش دسته‌هایی که زیرمجموعه دارند */
.roz-side-arrow{
  width:20px;
  height:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 20px;

  font-size:13px;
  color:#a65376;

  transition:transform .2s ease;
}

/* وقتی دسته باز است فلش بچرخد */
.roz-side-category-group.open .roz-side-arrow{
  transform:rotate(180deg);
}

/* زیرمجموعه‌ها */
.roz-side-subcategories{
  margin:4px 4px 2px;
  padding:4px 6px;

  gap:4px !important;

  border-right:2px solid #f3bfd2;
}

.roz-side-subcategory{
  min-height:34px;
  padding:6px 8px !important;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  gap:6px;

  background:#fff3f7 !important;
  border:1px solid #f7dce6 !important;
  border-radius:8px !important;

  color:#85536a !important;
  font-size:12px !important;
}

.roz-side-subcategory:hover{
  background:#ffe5ee !important;
}

.roz-side-subcategory-dot{
  color:#d76c94;
  font-size:12px;
}

/* لینک همه محصولات */
.roz-side-subcategory-all{
  background:#ffe9f1 !important;
  color:#8a4663 !important;
  font-weight:700;
}

/* عنوان منو */
.roz-side-title{
  margin:8px 12px 6px !important;
  font-size:13px !important;
}

/* خانه */
.roz-side-home{
  min-height:40px !important;
  padding:7px 10px !important;
  margin:6px 8px !important;

  background:#ffe8f0 !important;
  border:1px solid #f5cfdd !important;
  border-radius:10px !important;

  font-size:13px !important;
}

/* موبایل */
@media(max-width:600px){

  .roz-side-category-list{
    gap:5px;
    padding-left:7px;
    padding-right:7px;
  }

  .roz-side-category,
  .roz-side-category-parent{
    min-height:40px !important;
    padding:6px 8px !important;
    border-radius:9px !important;
    font-size:12px !important;
  }

  .roz-side-category img,
  .roz-side-category-icon{
    width:28px !important;
    height:28px !important;
    flex-basis:28px;
  }

  .roz-side-subcategory{
    min-height:32px;
    font-size:11px !important;
  }
}


/* =========================================================
   ROZ SIDE MENU - COMPACT MOBILE ITEMS
   ========================================================= */

#rozSideMenu .roz-side-category-list {
  width: calc(100% + 18px);
  margin-right: -18px;
  gap: 3px !important;
}

#rozSideMenu .roz-side-category {
  min-height: 36px !important;
  height: 36px !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  background: #f9dce8 !important;
  box-sizing: border-box;
}

#rozSideMenu .roz-side-category-group {
  margin: 0 !important;
  padding: 0 !important;
}

#rozSideMenu .roz-side-category-parent {
  width: 100% !important;
}

#rozSideMenu .roz-side-subcategories {
  margin: 2px 0 2px 0 !important;
  padding: 0 !important;
  gap: 2px !important;
}

#rozSideMenu .roz-side-subcategory {
  min-height: 31px !important;
  height: 31px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  box-sizing: border-box;
}

#rozSideMenu .roz-side-category-name {
  font-size: 14px !important;
}

#rozSideMenu .roz-side-arrow {
  font-size: 12px !important;
  margin-right: 4px !important;
}


/* =========================================================
   ROZ SIDE MENU - HOME BUTTON SAME SIZE AS CATEGORIES
   ========================================================= */

#rozSideMenu .roz-side-home {
  width: calc(100% + 18px) !important;
  min-height: 36px !important;
  height: 36px !important;
  box-sizing: border-box !important;

  margin: 0 0 3px -18px !important;
  padding: 5px 10px !important;

  border-radius: 7px !important;
  background: #f9dce8 !important;

  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#rozSideMenu .roz-side-home + .roz-side-title {
  margin-top: 0 !important;
}

#rozSideMenu .roz-side-home {
  font-size: 14px !important;
}


/* =========================================================
   ROZ SIDE MENU - TIGHT COMPACT LAYOUT
   ========================================================= */

#rozSideMenu .roz-side-title{
  display:none !important;
}

/* لیست دسته‌ها بدون فاصله */
#rozSideMenu .roz-side-category-list{
  width:calc(100% + 18px) !important;
  margin-right:-18px !important;
  padding:0 !important;
  gap:0 !important;
}

/* صفحه اصلی */
#rozSideMenu .roz-side-home{
  width:calc(100% + 18px) !important;
  height:36px !important;
  min-height:36px !important;

  margin:0 0 0 -18px !important;
  padding:5px 10px !important;

  box-sizing:border-box !important;
  border-radius:7px !important;

  background:#f9dce8 !important;
  border:1px solid #f2c9d9 !important;

  display:flex !important;
  align-items:center !important;
}

/* دسته‌ها کاملاً چسبیده */
#rozSideMenu .roz-side-category-group{
  margin:0 !important;
  padding:0 !important;
}

#rozSideMenu .roz-side-category,
#rozSideMenu .roz-side-category-parent{
  width:100% !important;
  height:36px !important;
  min-height:36px !important;

  margin:0 !important;
  padding:5px 10px !important;

  box-sizing:border-box !important;
  border-radius:7px !important;

  background:#f9dce8 !important;
  border:1px solid #f2c9d9 !important;
}

/* زیر دسته‌ها هم بدون فاصله اضافی */
#rozSideMenu .roz-side-subcategories{
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  border-right:2px solid #f3bfd2;
}

#rozSideMenu .roz-side-subcategory{
  width:100% !important;
  height:31px !important;
  min-height:31px !important;

  margin:0 !important;
  padding:4px 10px !important;

  box-sizing:border-box !important;
  border-radius:6px !important;
}

/* عنوان داخلی هم حذف شود */
#rozSideMenu .roz-side-title{
  display:none !important;
}


/* =========================================================
   ROZ SIDE MENU
   کاهش عرض کادرها از سمت چپ - حدود 35 درصد
   ========================================================= */

#rozSideMenu .roz-side-category-list{
  width:65% !important;
  margin-right:0 !important;
  margin-left:auto !important;
  padding:0 !important;
  gap:0 !important;
}

/* صفحه اصلی دقیقاً هم‌راستا با دسته‌ها */
#rozSideMenu .roz-side-home{
  width:65% !important;
  margin-right:0 !important;
  margin-left:auto !important;

  height:36px !important;
  min-height:36px !important;

  box-sizing:border-box !important;
}

/* کادرهای دسته‌بندی */
#rozSideMenu .roz-side-category,
#rozSideMenu .roz-side-category-parent{
  width:100% !important;
  height:36px !important;
  min-height:36px !important;

  margin:0 !important;
  box-sizing:border-box !important;
}

/* گروه دسته‌بندی */
#rozSideMenu .roz-side-category-group{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* زیر دسته‌ها */
#rozSideMenu .roz-side-subcategories{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* موبایل */
@media(max-width:600px){

  #rozSideMenu .roz-side-category-list{
    width:65% !important;
    margin-right:0 !important;
    margin-left:auto !important;
  }

  #rozSideMenu .roz-side-home{
    width:65% !important;
    margin-right:0 !important;
    margin-left:auto !important;
  }

}


/* =========================================================
   ROZ SIDE MENU - WIDTH +30% / HEIGHT +30%
   ========================================================= */

/* همه کادرهای اصلی */
#rozSideMenu .roz-side-category-list{
  width:84.5% !important;
  margin-right:0 !important;
  margin-left:auto !important;
  padding:0 !important;
  gap:0 !important;
}

/* صفحه اصلی */
#rozSideMenu .roz-side-home{
  width:84.5% !important;
  margin-right:0 !important;
  margin-left:auto !important;

  height:47px !important;
  min-height:47px !important;

  padding:7px 10px !important;
  box-sizing:border-box !important;
}

/* دسته‌های اصلی */
#rozSideMenu .roz-side-category,
#rozSideMenu .roz-side-category-parent{
  width:100% !important;

  height:47px !important;
  min-height:47px !important;

  padding:7px 10px !important;
  margin:0 !important;

  box-sizing:border-box !important;
}

/* گروه‌ها */
#rozSideMenu .roz-side-category-group{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

/* زیر دسته‌ها */
#rozSideMenu .roz-side-subcategories{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
}

/* موبایل */
@media(max-width:600px){

  #rozSideMenu .roz-side-category-list{
    width:84.5% !important;
    margin-right:0 !important;
    margin-left:auto !important;
  }

  #rozSideMenu .roz-side-home{
    width:84.5% !important;
    height:47px !important;
    min-height:47px !important;

    margin-right:0 !important;
    margin-left:auto !important;
  }

  #rozSideMenu .roz-side-category,
  #rozSideMenu .roz-side-category-parent{
    height:47px !important;
    min-height:47px !important;
  }

}


/* افزایش 15 درصدی عرض کادرها از سمت چپ */
#rozSideMenu .roz-side-category-list{
  width:97.2% !important;
  margin-right:0 !important;
  margin-left:auto !important;
}

#rozSideMenu .roz-side-home{
  width:97.2% !important;
  margin-right:0 !important;
  margin-left:auto !important;
}

@media(max-width:600px){
  #rozSideMenu .roz-side-category-list{
    width:97.2% !important;
    margin-right:0 !important;
    margin-left:auto !important;
  }

  #rozSideMenu .roz-side-home{
    width:97.2% !important;
    margin-right:0 !important;
    margin-left:auto !important;
  }
}


/* =========================================================
   ROZ CONTACT MENU
   ========================================================= */

.roz-contact-menu-btn{
  width:100%;
  box-sizing:border-box;
  border:0;
  cursor:pointer;
}

.roz-contact-arrow{
  margin-right:auto;
  font-size:11.2px;
  line-height:1;
}

.roz-contact-box{
  width:100%;
  box-sizing:border-box;
  flex-direction:column;
  gap:0;
  margin:0;
  padding:0;
}

.roz-contact-item{
  width:100%;
  box-sizing:border-box;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  margin:0;
  text-decoration:none;
  color:#555;
  background:#fce4ec;
  border-top:1px solid rgba(255,255,255,.8);
  font-size:13px;
}

.roz-contact-item strong{
  margin-right:auto;
  direction:ltr;
  font-size:12px;
  font-weight:600;
}

.roz-contact-item:hover{
  background:#f8d5e0;
}


/* =========================================================
   CONTACT - SAME SIZE AS MENU ITEMS
   ========================================================= */

.roz-contact-menu-box .roz-side-category-icon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  flex:0 0 38px !important;
}

.roz-contact-arrow{
  margin-right:auto !important;
  font-size:14px !important;
}

.roz-contact-box{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}



/* ===== FINAL CONTACT MENU FIX ===== */

.roz-contact-menu-box .roz-side-category-icon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  flex:0 0 38px !important;
}

.roz-contact-menu-box .roz-contact-arrow{
  margin-right:auto !important;
}

.roz-contact-box{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}



/* =========================================================
   CONTACT MENU - LAST ITEM
   ========================================================= */

.roz-contact-menu-box{
  width:100%;
  margin:3px 0 0 0;
  padding:0;
  box-sizing:border-box;
}

.roz-contact-menu-btn{
  width:100%;
  min-height:58px;
  height:58px;
  margin:0;
  padding:10px 12px;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  gap:10px;

  border:0;
  border-radius:12px;

  background:#f8c8dc;
  color:#5f2941;

  cursor:pointer;
}

.roz-contact-menu-btn .roz-side-category-icon{
  width:30px;
  min-width:30px;
  text-align:center;
  font-size:20px;
}

.roz-contact-menu-btn .roz-side-category-name{
  flex:1;
  text-align:right;
  font-size:15px;
  font-weight:600;
}

.roz-contact-arrow{
  font-size:18px;
  line-height:1;
}

.roz-contact-box{
  width:100%;
  box-sizing:border-box;
  margin:4px 0 0 0;
  padding:6px;
  border-radius:12px;
  background:#fce3ed;
}

.roz-contact-item{
  width:100%;
  min-height:52px;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  gap:8px;

  margin:3px 0;
  padding:9px 10px;

  border-radius:10px;
  background:#f8c8dc;
  color:#5f2941;

  text-decoration:none;
}

.roz-contact-item span:first-child{
  width:24px;
  min-width:24px;
  text-align:center;
}

.roz-contact-item span:nth-child(2){
  flex:1;
  text-align:right;
}

.roz-contact-item strong{
  direction:ltr;
  white-space:nowrap;
  font-size:13px;
}

/* =========================================================
   تماس با ما - نمایش گزینه‌ها به صورت عمودی
   ========================================================= */

.roz-contact-box{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  box-sizing:border-box !important;
  padding:6px 0 !important;
}

.roz-contact-item{
  width:100% !important;
  min-height:50px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
}

.roz-contact-item strong{
  margin-right:auto !important;
}


/* =========================================================
   CONTACT BOX - HIDDEN UNTIL CLICK
   ========================================================= */

.roz-contact-menu-box .roz-contact-box{
  width:100% !important;
  box-sizing:border-box !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:6px 0 !important;
}

/* فقط وقتی JS آن را باز کرد، نمایش داده شود */
.roz-contact-menu-box .roz-contact-box[style*="display: block"]{
  display:flex !important;
}

/* گزینه‌های تماس همیشه زیر هم */
.roz-contact-item{
  width:100% !important;
  min-height:50px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.roz-contact-item strong{
  margin-right:auto !important;
}


/* FINAL CONTACT MENU STATE */

.roz-contact-menu-box .roz-contact-box{
  width:100%;
  box-sizing:border-box;
  padding:6px 0;
  gap:6px;
}

/* پیش‌فرض کاملاً مخفی */
.roz-contact-menu-box .roz-contact-box[style*="display:none"]{
  display:none !important;
}

/* فقط بعد از کلیک باز شود */
.roz-contact-menu-box .roz-contact-box[style*="display: block"]{
  display:flex !important;
  flex-direction:column !important;
}

/* تماس و واتساپ زیر هم */
.roz-contact-menu-box .roz-contact-item{
  width:100% !important;
  min-height:50px !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
  margin:0 !important;
}

.roz-contact-menu-box .roz-contact-item strong{
  margin-right:auto !important;
}


/* =========================================================
   FINAL CONTACT TOGGLE FIX
   باز و بسته شدن فقط با کلاس is-open
   ========================================================= */

.roz-contact-menu-box .roz-contact-box{
  display:none !important;
  flex-direction:column !important;
  width:100% !important;
  box-sizing:border-box !important;
}

.roz-contact-menu-box .roz-contact-box.is-open{
  display:flex !important;
  flex-direction:column !important;
}

.roz-contact-menu-box .roz-contact-item{
  width:100% !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
}


/* =========================================================
   CONTACT MENU - هماهنگ با عرض کادرهای اصلی همبرگر
   ========================================================= */

.roz-contact-menu-box{
  width:97% !important;
  margin-left:0 !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

.roz-contact-menu-box .roz-contact-box{
  width:100% !important;
  box-sizing:border-box !important;
}


/* =========================================================
   CONTACT MENU - ALIGN RIGHT ON MOBILE
   ========================================================= */

.roz-contact-menu-box{
  width:100% !important;
  max-width:100% !important;
  margin-right:0 !important;
  margin-left:0 !important;
  padding-right:0 !important;
  padding-left:0 !important;
  box-sizing:border-box !important;
}

.roz-contact-menu-box .roz-contact-menu-btn{
  width:100% !important;
  max-width:100% !important;
  margin-right:0 !important;
  margin-left:0 !important;
  box-sizing:border-box !important;
}

.roz-contact-menu-box .roz-contact-box{
  width:100% !important;
  max-width:100% !important;
  margin-right:0 !important;
  margin-left:0 !important;
  box-sizing:border-box !important;
}

@media (max-width:768px){
  .roz-contact-menu-box{
    width:100% !important;
    margin-right:0 !important;
    margin-left:0 !important;
  }
}


/* CONTACT - 3% narrower from the left, right edge unchanged */
.roz-contact-menu-box{
  width:97% !important;
  max-width:97% !important;
  margin-right:0 !important;
  margin-left:auto !important;
}

.roz-contact-menu-box .roz-contact-menu-btn{
  width:100% !important;
}

.roz-contact-menu-box .roz-contact-box{
  width:100% !important;
}


/* =========================================================
   ACCOUNT BUTTON - HOME HEADER
   ========================================================= */

header .actions a[href="/account"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;

  min-height:42px !important;
  height:42px !important;
  padding:0 14px !important;

  border:1px solid rgba(255,255,255,.75) !important;
  border-radius:12px !important;

  background:#f8c8dc !important;
  color:#5f2941 !important;

  text-decoration:none !important;
  white-space:nowrap !important;

  font-size:14px !important;
  font-weight:600 !important;

  box-shadow:none !important;
}

header .actions a[href="/account"]:hover{
  background:#f5bfd5 !important;
}


/* =========================================================
   CART BUTTON - SAME STYLE AS ACCOUNT BUTTON
   ========================================================= */

header .actions a[href="#/cart"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;

  min-height:42px !important;
  height:42px !important;
  padding:0 14px !important;

  border:1px solid rgba(255,255,255,.75) !important;
  border-radius:12px !important;

  background:#f8c8dc !important;
  color:#5f2941 !important;

  text-decoration:none !important;
  white-space:nowrap !important;

  font-size:14px !important;
  font-weight:600 !important;

  box-shadow:none !important;
}

header .actions a[href="#/cart"]:hover{
  background:#f5bfd5 !important;
}


/* =========================================================
   HOME CATEGORIES - CIRCULAR MOBILE STYLE
   فقط دسته‌بندی‌های صفحه اصلی
   ========================================================= */

.roz-categories-section .cats{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  gap:14px !important;

  width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;

  padding:6px 2px 12px !important;
  box-sizing:border-box !important;

  scrollbar-width:none !important;
}

.roz-categories-section .cats::-webkit-scrollbar{
  display:none !important;
}

.roz-categories-section .cat{
  flex:0 0 82px !important;
  width:82px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  padding:0 !important;
  margin:0 !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;

  text-decoration:none !important;
  color:#555 !important;

  font-size:12px !important;
  line-height:1.5 !important;
  text-align:center !important;

  box-sizing:border-box !important;
}

.roz-categories-section .cat img{
  display:block !important;

  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  min-height:72px !important;

  object-fit:cover !important;

  border-radius:50% !important;

  border:2px solid #f8c8dc !important;

  box-sizing:border-box !important;

  margin:0 0 7px !important;
}

.roz-categories-section .cat br{
  display:none !important;
}

@media (max-width:600px){

  .roz-categories-section .cats{
    gap:13px !important;
    padding-left:3px !important;
    padding-right:3px !important;
  }

  .roz-categories-section .cat{
    flex-basis:78px !important;
    width:78px !important;
    font-size:11.5px !important;
  }

  .roz-categories-section .cat img{
    width:68px !important;
    height:68px !important;
    min-width:68px !important;
    min-height:68px !important;
  }

}


/* =========================================================
   مشاهده همه محصولات - سبز پاستیلی
   ========================================================= */

.roz-only-all-products .btn{
  background:#c8e6c9 !important;
  border:1px solid #a5d6a7 !important;
  color:#315b35 !important;

  box-sizing:border-box !important;
  text-decoration:none !important;
}

.roz-only-all-products .btn:hover{
  background:#b9dfbb !important;
  border-color:#8fcf93 !important;
  color:#315b35 !important;
}

.roz-only-all-products .btn:active{
  background:#aed6b0 !important;
  border-color:#8fcf93 !important;
  color:#315b35 !important;
}


/* =========================================================
   HOME PAGE
   دکمه «مشاهده همه محصولات»
   سبز پاستیلی
   ========================================================= */

.roz-home-top .roz-only-all-products a.btn{
  background-color:#c8e6c9 !important;
  background:#c8e6c9 !important;

  border:1px solid #a5d6a7 !important;
  border-color:#a5d6a7 !important;

  color:#315b35 !important;

  box-shadow:none !important;
  text-shadow:none !important;
}

.roz-home-top .roz-only-all-products a.btn:hover{
  background-color:#b9dfbb !important;
  background:#b9dfbb !important;

  border-color:#8fcf93 !important;
  color:#315b35 !important;
}

.roz-home-top .roz-only-all-products a.btn:active,
.roz-home-top .roz-only-all-products a.btn:focus{
  background-color:#aed6b0 !important;
  background:#aed6b0 !important;

  border-color:#8fcf93 !important;
  color:#315b35 !important;
}


/* =========================================================
   HOME PAGE
   کاهش 50 درصدی فاصله بین:
   «مشاهده همه محصولات» و «دسته‌بندی‌ها»
   ========================================================= */

.roz-home-top{
  margin-bottom:10px !important;
  padding-bottom:0 !important;
}

.roz-home-top + .roz-categories-section{
  margin-top:10px !important;
  padding-top:0 !important;
}


/* =========================================================
   HOME CATEGORIES
   دایره‌ها 20٪ بزرگ‌تر
   فاصله بین دایره‌ها 50٪ کمتر
   ========================================================= */

.roz-categories-section .cats{
  gap:7px !important;
}

/* اندازه دایره‌ها */
.roz-categories-section .cat{
  flex:0 0 94px !important;
  width:94px !important;
}

.roz-categories-section .cat img{
  width:82px !important;
  height:82px !important;
  min-width:82px !important;
  min-height:82px !important;
}

/* تنظیم مخصوص موبایل */
@media (max-width:600px){

  .roz-categories-section .cats{
    gap:6px !important;
    padding-left:3px !important;
    padding-right:3px !important;
  }

  .roz-categories-section .cat{
    flex:0 0 94px !important;
    width:94px !important;
    font-size:11.5px !important;
  }

  .roz-categories-section .cat img{
    width:82px !important;
    height:82px !important;
    min-width:82px !important;
    min-height:82px !important;
  }

}


/* =========================================================
   LUXURY FIRE EFFECT
   شعله ظریف و متحرک دور دایره‌های دسته‌بندی
   ========================================================= */

.roz-categories-section .cat{
  position:relative !important;
  isolation:isolate !important;
}

/* هاله آتش دور دایره */
.roz-categories-section .cat::before{
  content:"" !important;

  position:absolute !important;
  top:-5px !important;
  left:50% !important;

  width:82px !important;
  height:82px !important;

  transform:translateX(-50%) !important;

  border-radius:50% !important;

  pointer-events:none !important;
  z-index:-1 !important;

  background:
    radial-gradient(
      circle,
      transparent 62%,
      rgba(255,180,90,.08) 68%,
      rgba(255,130,60,.18) 76%,
      rgba(255,95,40,.08) 84%,
      transparent 92%
    ) !important;

  filter:blur(2px) !important;

  animation:
    rozFireGlow 1.8s ease-in-out infinite alternate !important;
}

/* شعله‌های ظریف */
.roz-categories-section .cat::after{
  content:"" !important;

  position:absolute !important;
  top:-9px !important;
  left:50% !important;

  width:88px !important;
  height:88px !important;

  transform:translateX(-50%) !important;

  border-radius:50% !important;

  pointer-events:none !important;
  z-index:-1 !important;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255,190,100,.16) 18deg,
      transparent 34deg,
      rgba(255,115,50,.13) 57deg,
      transparent 78deg,
      rgba(255,175,80,.18) 103deg,
      transparent 125deg,
      rgba(255,100,45,.12) 151deg,
      transparent 175deg,
      rgba(255,185,95,.16) 205deg,
      transparent 230deg,
      rgba(255,120,50,.13) 257deg,
      transparent 280deg,
      rgba(255,190,100,.17) 310deg,
      transparent 335deg,
      transparent 360deg
    );

  filter:blur(3px);

  animation:
    rozFireRotate 3.5s linear infinite !important;
}

/* حرکت نرم هاله */
@keyframes rozFireGlow{

  0%{
    opacity:.45;
    transform:translateX(-50%) scale(.96);
    filter:blur(2px);
  }

  50%{
    opacity:.75;
    transform:translateX(-50%) scale(1.04);
    filter:blur(3px);
  }

  100%{
    opacity:.5;
    transform:translateX(-50%) scale(.98);
    filter:blur(2px);
  }

}

/* چرخش بسیار آرام شعله‌ها */
@keyframes rozFireRotate{

  0%{
    transform:translateX(-50%) rotate(0deg) scale(.98);
    opacity:.45;
  }

  25%{
    transform:translateX(-50%) rotate(8deg) scale(1.02);
    opacity:.65;
  }

  50%{
    transform:translateX(-50%) rotate(-5deg) scale(.97);
    opacity:.5;
  }

  75%{
    transform:translateX(-50%) rotate(10deg) scale(1.03);
    opacity:.7;
  }

  100%{
    transform:translateX(-50%) rotate(0deg) scale(.98);
    opacity:.45;
  }

}

/* حفظ عکس دایره‌ای */
.roz-categories-section .cat img{
  position:relative !important;
  z-index:2 !important;
}

/* در موبایل هم ظریف باقی بماند */
@media (max-width:600px){

  .roz-categories-section .cat::before{
    width:82px !important;
    height:82px !important;
    top:-5px !important;
  }

  .roz-categories-section .cat::after{
    width:88px !important;
    height:88px !important;
    top:-9px !important;
  }

}

/* =========================================================
   BEAUTIFUL LUXURY CATEGORY CIRCLES
   دایره‌های دسته‌بندی - ظریف و لوکس
   ========================================================= */

.roz-categories-section .cat{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  text-decoration:none !important;

  padding:5px !important;

  color:#6b4655 !important;

  transition:
    transform .3s ease,
    filter .3s ease !important;
}

/* حلقه بیرونی */
.roz-categories-section .cat::before{
  content:"" !important;

  position:absolute !important;

  top:0 !important;
  left:50% !important;

  width:90px !important;
  height:90px !important;

  transform:translateX(-50%) !important;

  border-radius:50% !important;

  border:2px solid rgba(244,170,195,.65) !important;

  box-shadow:
    0 0 0 3px rgba(255,225,235,.65),
    0 5px 16px rgba(210,105,145,.16) !important;

  pointer-events:none !important;

  z-index:1 !important;
}

/* عکس دایره‌ای */
.roz-categories-section .cat img{
  position:relative !important;

  width:82px !important;
  height:82px !important;

  min-width:82px !important;
  min-height:82px !important;

  object-fit:cover !important;

  border-radius:50% !important;

  border:3px solid #fff !important;

  box-shadow:
    0 3px 12px rgba(180,80,120,.20),
    0 0 0 2px rgba(244,170,195,.55) !important;

  z-index:2 !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease !important;
}

/* حالت لمس / هاور */
.roz-categories-section .cat:hover{
  transform:translateY(-3px) !important;
}

.roz-categories-section .cat:hover img{
  transform:scale(1.04) !important;

  box-shadow:
    0 6px 18px rgba(180,80,120,.25),
    0 0 0 2px rgba(240,145,175,.75) !important;
}

/* نام دسته‌بندی */
.roz-categories-section .cat{
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.5 !important;
}

/* موبایل */
@media (max-width:600px){

  .roz-categories-section .cat{
    padding-top:5px !important;
  }

  .roz-categories-section .cat::before{
    width:90px !important;
    height:90px !important;
  }

  .roz-categories-section .cat img{
    width:82px !important;
    height:82px !important;
  }

}


/* =========================================================
   ROZALI BEAUTY — LUXURY CATEGORY CIRCLES V2
   ========================================================= */

.roz-categories-section .cat{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  width:96px !important;
  min-width:96px !important;

  padding:8px 2px 4px !important;

  color:#704557 !important;
  font-size:12px !important;
  font-weight:600 !important;

  overflow:visible !important;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    filter .35s ease !important;
}

/* هاله لطیف */
.roz-categories-section .cat::before{
  content:"" !important;

  position:absolute !important;

  width:96px !important;
  height:96px !important;

  top:3px !important;
  left:50% !important;

  transform:translateX(-50%) !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      circle,
      rgba(255,205,220,.20) 0%,
      rgba(255,190,210,.13) 58%,
      transparent 72%
    ) !important;

  box-shadow:
    0 0 18px rgba(235,130,165,.18) !important;

  z-index:0 !important;

  pointer-events:none !important;
}

/* حلقه تزئینی اصلی */
.roz-categories-section .cat::after{
  content:"" !important;

  position:absolute !important;

  width:88px !important;
  height:88px !important;

  top:7px !important;
  left:50% !important;

  transform:translateX(-50%) !important;

  border-radius:50% !important;

  border:1px solid rgba(231,139,170,.75) !important;

  box-shadow:
    0 0 0 3px rgba(255,255,255,.9),
    0 0 0 4px rgba(246,177,199,.48),
    inset 0 0 10px rgba(245,160,190,.12),
    0 5px 15px rgba(210,100,140,.16) !important;

  z-index:1 !important;

  pointer-events:none !important;
}

/* عکس */
.roz-categories-section .cat img{
  position:relative !important;

  z-index:3 !important;

  width:80px !important;
  height:80px !important;

  min-width:80px !important;
  min-height:80px !important;

  object-fit:cover !important;

  border-radius:50% !important;

  border:3px solid #fff !important;

  box-shadow:
    0 3px 12px rgba(170,75,115,.20),
    0 0 0 1px rgba(239,155,181,.65) !important;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease !important;
}

/* چهار نقطه تزئینی اطراف دایره */
.roz-categories-section .cat span{
  position:relative;
}

/* حرکت ظریف هنگام لمس */
.roz-categories-section .cat:hover,
.roz-categories-section .cat:active{
  transform:translateY(-4px) !important;
}

.roz-categories-section .cat:hover img,
.roz-categories-section .cat:active img{
  transform:scale(1.055) !important;

  box-shadow:
    0 7px 18px rgba(170,75,115,.25),
    0 0 0 2px rgba(239,145,177,.7) !important;
}

/* فاصله نام از دایره */
.roz-categories-section .cat br{
  display:block !important;
  content:"" !important;
  height:4px !important;
}

/* موبایل */
@media (max-width:600px){

  .roz-categories-section .cat{
    width:96px !important;
    min-width:96px !important;
    padding-top:8px !important;
  }

  .roz-categories-section .cat::before{
    width:96px !important;
    height:96px !important;
  }

  .roz-categories-section .cat::after{
    width:88px !important;
    height:88px !important;
  }

  .roz-categories-section .cat img{
    width:80px !important;
    height:80px !important;
  }

}


/* =========================================================
   ROZALI BEAUTY — PREMIUM CATEGORY CIRCLES
   ========================================================= */

.roz-categories-section .cat{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  width:100px !important;
  min-width:100px !important;

  padding:8px 0 5px !important;

  overflow:visible !important;

  color:#684454 !important;
  font-weight:600 !important;
  font-size:12px !important;

  transition:
    transform .35s ease,
    filter .35s ease !important;
}

/* هاله‌ی خیلی ظریف پشت دایره */
.roz-categories-section .cat::before{
  content:"" !important;

  position:absolute !important;

  top:3px !important;
  left:50% !important;

  width:94px !important;
  height:94px !important;

  transform:translateX(-50%) !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      circle,
      rgba(255,213,226,.38) 0%,
      rgba(255,225,235,.20) 55%,
      rgba(255,255,255,0) 72%
    ) !important;

  box-shadow:
    0 5px 20px rgba(205,100,140,.14) !important;

  z-index:0 !important;

  pointer-events:none !important;
}

/* حلقه‌ی بیرونی لوکس */
.roz-categories-section .cat::after{
  content:"" !important;

  position:absolute !important;

  top:6px !important;
  left:50% !important;

  width:88px !important;
  height:88px !important;

  transform:translateX(-50%) !important;

  border-radius:50% !important;

  border:1px solid rgba(225,132,166,.65) !important;

  box-shadow:
    0 0 0 2px rgba(255,255,255,.95),
    0 0 0 4px rgba(246,183,202,.45),
    0 0 0 5px rgba(255,235,242,.65),
    0 7px 18px rgba(190,85,125,.14) !important;

  z-index:1 !important;

  pointer-events:none !important;
}

/* عکس اصلی */
.roz-categories-section .cat img{
  position:relative !important;

  z-index:3 !important;

  width:80px !important;
  height:80px !important;

  min-width:80px !important;
  min-height:80px !important;

  object-fit:cover !important;

  border-radius:50% !important;

  border:3px solid #ffffff !important;

  box-shadow:
    0 4px 14px rgba(150,65,105,.20),
    0 0 0 1px rgba(235,151,180,.75),
    inset 0 0 0 1px rgba(255,255,255,.8) !important;

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease !important;
}

/* یک برق خیلی ظریف روی دایره */
.roz-categories-section .cat img::after{
  content:"" !important;
}

/* حالت لمس */
.roz-categories-section .cat:hover,
.roz-categories-section .cat:active{
  transform:translateY(-4px) !important;
}

.roz-categories-section .cat:hover img,
.roz-categories-section .cat:active img{
  transform:scale(1.06) !important;

  box-shadow:
    0 8px 20px rgba(150,65,105,.25),
    0 0 0 2px rgba(229,135,168,.8),
    0 0 14px rgba(246,173,199,.35) !important;
}

/* فاصله‌ی اسم دسته از دایره */
.roz-categories-section .cat br{
  height:6px !important;
}

/* موبایل */
@media (max-width:600px){

  .roz-categories-section .cat{
    width:100px !important;
    min-width:100px !important;
  }

  .roz-categories-section .cat::before{
    width:94px !important;
    height:94px !important;
  }

  .roz-categories-section .cat::after{
    width:88px !important;
    height:88px !important;
  }

  .roz-categories-section .cat img{
    width:80px !important;
    height:80px !important;
  }

}


/* =========================================================
   ROZALI BEAUTY — PREMIUM CATEGORY CIRCLES
   ========================================================= */

.roz-categories-section .cat{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  width:100px !important;
  min-width:100px !important;

  padding:8px 0 5px !important;

  overflow:visible !important;

  color:#684454 !important;
  font-weight:600 !important;
  font-size:12px !important;

  transition:
    transform .35s ease,
    filter .35s ease !important;
}

/* هاله‌ی خیلی ظریف پشت دایره */
.roz-categories-section .cat::before{
  content:"" !important;

  position:absolute !important;

  top:3px !important;
  left:50% !important;

  width:94px !important;
  height:94px !important;

  transform:translateX(-50%) !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      circle,
      rgba(255,213,226,.38) 0%,
      rgba(255,225,235,.20) 55%,
      rgba(255,255,255,0) 72%
    ) !important;

  box-shadow:
    0 5px 20px rgba(205,100,140,.14) !important;

  z-index:0 !important;

  pointer-events:none !important;
}

/* حلقه‌ی بیرونی لوکس */
.roz-categories-section .cat::after{
  content:"" !important;

  position:absolute !important;

  top:6px !important;
  left:50% !important;

  width:88px !important;
  height:88px !important;

  transform:translateX(-50%) !important;

  border-radius:50% !important;

  border:1px solid rgba(225,132,166,.65) !important;

  box-shadow:
    0 0 0 2px rgba(255,255,255,.95),
    0 0 0 4px rgba(246,183,202,.45),
    0 0 0 5px rgba(255,235,242,.65),
    0 7px 18px rgba(190,85,125,.14) !important;

  z-index:1 !important;

  pointer-events:none !important;
}

/* عکس اصلی */
.roz-categories-section .cat img{
  position:relative !important;

  z-index:3 !important;

  width:80px !important;
  height:80px !important;

  min-width:80px !important;
  min-height:80px !important;

  object-fit:cover !important;

  border-radius:50% !important;

  border:3px solid #ffffff !important;

  box-shadow:
    0 4px 14px rgba(150,65,105,.20),
    0 0 0 1px rgba(235,151,180,.75),
    inset 0 0 0 1px rgba(255,255,255,.8) !important;

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease !important;
}

/* یک برق خیلی ظریف روی دایره */
.roz-categories-section .cat img::after{
  content:"" !important;
}

/* حالت لمس */
.roz-categories-section .cat:hover,
.roz-categories-section .cat:active{
  transform:translateY(-4px) !important;
}

.roz-categories-section .cat:hover img,
.roz-categories-section .cat:active img{
  transform:scale(1.06) !important;

  box-shadow:
    0 8px 20px rgba(150,65,105,.25),
    0 0 0 2px rgba(229,135,168,.8),
    0 0 14px rgba(246,173,199,.35) !important;
}

/* فاصله‌ی اسم دسته از دایره */
.roz-categories-section .cat br{
  height:6px !important;
}

/* موبایل */
@media (max-width:600px){

  .roz-categories-section .cat{
    width:100px !important;
    min-width:100px !important;
  }

  .roz-categories-section .cat::before{
    width:94px !important;
    height:94px !important;
  }

  .roz-categories-section .cat::after{
    width:88px !important;
    height:88px !important;
  }

  .roz-categories-section .cat img{
    width:80px !important;
    height:80px !important;
  }

}


/* =========================================================
   ROZALI BEAUTY — LIGHT / DARK MODE
   ========================================================= */

/* دکمه ماه و خورشید */
.roz-theme-toggle{
  position:relative;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  margin:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid #f2c5d3 !important;
  border-radius:50% !important;

  background:#f9e3ea !important;
  color:#321827 !important;

  cursor:pointer !important;
  font-size:20px !important;
  line-height:1 !important;

  box-shadow:0 3px 12px rgba(180,80,120,.12) !important;

  transition:
    background .3s ease,
    border-color .3s ease,
    transform .25s ease,
    box-shadow .3s ease !important;

  flex:none !important;
  z-index:100 !important;
}

.roz-theme-toggle:hover{
  transform:translateY(-2px) scale(1.04) !important;
  box-shadow:0 5px 16px rgba(180,80,120,.20) !important;
}

.roz-theme-toggle:active{
  transform:scale(.94) !important;
}

.roz-theme-toggle span{
  display:block !important;
  transition:transform .35s ease !important;
}

.roz-theme-toggle:hover span{
  transform:rotate(20deg) !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.roz-dark body{
  background:#171116 !important;
  color:#f8eaf0 !important;
}

html.roz-dark header{
  background:rgba(29,18,25,.94) !important;
  border-bottom-color:#4a303c !important;
}

html.roz-dark .logo{
  color:#f28caf !important;
}

html.roz-dark .logo span{
  color:#e1b96a !important;
}

html.roz-dark .search{
  background:#241922 !important;
  border-color:#4a303c !important;
}

html.roz-dark .search input{
  color:#fff !important;
  background:transparent !important;
}

html.roz-dark .search input::placeholder{
  color:#bdaab4 !important;
}

html.roz-dark .top nav a,
html.roz-dark .actions a{
  color:#f2dce5 !important;
}

html.roz-dark .top nav a:hover,
html.roz-dark .actions a:hover{
  color:#f28caf !important;
}


/* دکمه تغییر حالت در دارک */
html.roz-dark .roz-theme-toggle{
  background:#30212b !important;
  border-color:#694354 !important;
  color:#ffe7a8 !important;
}


/* دسته‌بندی‌ها */
html.roz-dark .roz-categories-section .cat,
html.roz-dark .cat{
  background:#241922 !important;
  border-color:#4a303c !important;
  color:#f8eaf0 !important;
}

html.roz-dark .roz-categories-section .cat:hover,
html.roz-dark .cat:hover{
  border-color:#e783a4 !important;
}


/* کارت محصولات */
html.roz-dark .product,
html.roz-dark .card,
html.roz-dark .detail,
html.roz-dark .stat{
  background:#241922 !important;
  border-color:#4a303c !important;
  color:#f8eaf0 !important;
}

html.roz-dark .product-image,
html.roz-dark .mainimg{
  background:#30212b !important;
}

html.roz-dark .product h3,
html.roz-dark .product-info,
html.roz-dark .type,
html.roz-dark .brand{
  color:#f8eaf0 !important;
}

html.roz-dark .type{
  color:#cbb7c0 !important;
}


/* فرم‌ها */
html.roz-dark input,
html.roz-dark textarea,
html.roz-dark select{
  background:#241922 !important;
  color:#fff !important;
  border-color:#4a303c !important;
}

html.roz-dark input::placeholder,
html.roz-dark textarea::placeholder{
  color:#bdaab4 !important;
}


/* دکمه‌های سفید */
html.roz-dark .btn.light{
  background:#30212b !important;
  color:#f28caf !important;
  border-color:#694354 !important;
}

html.roz-dark .qty button{
  background:#30212b !important;
  color:#fff !important;
  border-color:#4a303c !important;
}


/* اطلاعیه */
html.roz-dark .notice{
  background:#30212b !important;
  border-color:#694354 !important;
}


/* بخش عنوان */
html.roz-dark .section-title h2{
  color:#f8eaf0 !important;
}


/* فوتر */
html.roz-dark footer{
  background:#0e090c !important;
}


/* منوی کناری */
html.roz-dark .roz-side-menu{
  background:#20151c !important;
  color:#f8eaf0 !important;
}

html.roz-dark .roz-side-menu-header{
  border-bottom-color:#4a303c !important;
}


/* جلوگیری از سفید ماندن بعضی بخش‌ها */
html.roz-dark .adminnav button{
  background:#30212b !important;
  color:#f8eaf0 !important;
  border-color:#4a303c !important;
}


/* موبایل */
@media(max-width:600px){

  .roz-theme-toggle{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    font-size:18px !important;
  }

}


/* =========================================================
   ROZALI BEAUTY — DARK MODE TEXT FIX
   ========================================================= */

html.roz-dark{
  --dark:#f8eaf0 !important;
  --cream:#171116 !important;
  --line:#4a303c !important;
}


/* متن عمومی */
html.roz-dark body{
  color:#f8eaf0 !important;
}


/* تمام عنوان‌ها و متن‌های داخل صفحه */
html.roz-dark h1,
html.roz-dark h2,
html.roz-dark h3,
html.roz-dark h4,
html.roz-dark h5,
html.roz-dark h6,
html.roz-dark p,
html.roz-dark label,
html.roz-dark span,
html.roz-dark strong,
html.roz-dark b{
  color:#f8eaf0;
}


/* متن‌های کم‌رنگ */
html.roz-dark .hero p,
html.roz-dark .type,
html.roz-dark .empty,
html.roz-dark small{
  color:#cdb9c3 !important;
}


/* تمام کارت‌ها */
html.roz-dark .card,
html.roz-dark .product,
html.roz-dark .detail,
html.roz-dark .stat,
html.roz-dark .notice{
  background:#241922 !important;
  color:#f8eaf0 !important;
  border-color:#4a303c !important;
}


/* متن داخل کارت‌ها */
html.roz-dark .card *,
html.roz-dark .product *,
html.roz-dark .detail *,
html.roz-dark .stat *,
html.roz-dark .notice *{
  color:inherit;
}


/* قیمت‌ها همچنان صورتی */
html.roz-dark .price,
html.roz-dark .product .price{
  color:#f28caf !important;
}


/* برند محصولات */
html.roz-dark .brand{
  color:#e1b96a !important;
}


/* عنوان دسته‌بندی */
html.roz-dark .roz-categories-section .cat{
  color:#f8eaf0 !important;
}


/* متن دسته‌بندی */
html.roz-dark .roz-categories-section .cat{
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}


/* فیلدهای فرم */
html.roz-dark input,
html.roz-dark textarea,
html.roz-dark select{
  background:#1d1419 !important;
  color:#ffffff !important;
  border:1px solid #59404b !important;
}


/* متن placeholder */
html.roz-dark input::placeholder,
html.roz-dark textarea::placeholder{
  color:#bdaab4 !important;
}


/* گزینه‌های select */
html.roz-dark option{
  background:#241922 !important;
  color:#ffffff !important;
}


/* جدول */
html.roz-dark .table{
  color:#f8eaf0 !important;
}

html.roz-dark .table th,
html.roz-dark .table td{
  color:#f8eaf0 !important;
  border-color:#4a303c !important;
}


/* ردیف‌های سبد خرید */
html.roz-dark .cart-item{
  color:#f8eaf0 !important;
  border-color:#4a303c !important;
}

html.roz-dark .cart-item *{
  color:inherit;
}


/* تعداد محصول */
html.roz-dark .qty button{
  background:#30212b !important;
  color:#ffffff !important;
  border-color:#59404b !important;
}


/* دکمه‌های سفید */
html.roz-dark button{
  color:#f8eaf0;
}


/* دکمه‌های اصلی */
html.roz-dark .btn,
html.roz-dark .home-add-cart,
html.roz-dark .add{
  color:#ffffff !important;
}


/* دکمه روشن */
html.roz-dark .btn.light{
  background:#30212b !important;
  color:#f28caf !important;
  border-color:#694354 !important;
}


/* منوی دسته‌بندی بالای سایت */
html.roz-dark .nav a,
html.roz-dark nav a,
html.roz-dark .categories a,
html.roz-dark .category-nav a{
  color:#f8eaf0 !important;
}


/* سرچ */
html.roz-dark .search input{
  color:#ffffff !important;
}


/* پروفایل */
html.roz-dark .customer-profile,
html.roz-dark .customer-profile-title,
html.roz-dark .customer-profile-avatar{
  color:#f8eaf0 !important;
}


/* لینک‌ها */
html.roz-dark a{
  color:#f8eaf0;
}

html.roz-dark a:hover{
  color:#f28caf !important;
}


/* متن‌های حساب کاربری */
html.roz-dark .account-actions,
html.roz-dark .account-actions *,
html.roz-dark .customer-profile *,
html.roz-dark .account-page *{
  color:#f8eaf0;
}


/* منوی کناری */
html.roz-dark .roz-side-menu,
html.roz-dark .roz-side-menu *{
  color:#f8eaf0 !important;
}

html.roz-dark .roz-side-menu{
  background:#20151c !important;
  border-color:#4a303c !important;
}


/* فوتر */
html.roz-dark footer{
  color:#ffffff !important;
}

html.roz-dark footer *{
  color:inherit;
}


/* اعلان اضافه شدن محصول به سبد */
html.roz-dark .cart-added-motion{
  background:#241922 !important;
  color:#ffffff !important;
  border-color:#4a303c !important;
}

html.roz-dark .cart-added-motion *{
  color:inherit;
}


/* جلوگیری از سفید ماندن بعضی کادرهای داخلی */
html.roz-dark [style*="background:#fff"],
html.roz-dark [style*="background: #fff"],
html.roz-dark [style*="background:white"],
html.roz-dark [style*="background: white"]{
  background:#241922 !important;
}


/* متن‌های تیره inline */
html.roz-dark [style*="color:#321827"],
html.roz-dark [style*="color: #321827"],
html.roz-dark [style*="color:#333"],
html.roz-dark [style*="color: #333"],
html.roz-dark [style*="color:#555"],
html.roz-dark [style*="color: #555"]{
  color:#f8eaf0 !important;
}


/* موبایل */
@media(max-width:600px){

  html.roz-dark .card,
  html.roz-dark .product,
  html.roz-dark .detail,
  html.roz-dark .stat{
    color:#f8eaf0 !important;
  }

}

/* =========================================================
   ROZALI — FORCE DARK MODE READABLE TEXT
   ========================================================= */

/* حالت دارک با هر کلاس رایج */
html.dark body,
body.dark,
html.dark-mode body,
body.dark-mode,
html[data-theme="dark"] body,
body[data-theme="dark"]{
  background:#171116 !important;
  color:#f9edf2 !important;
}


/* تمام کادرهای اصلی */
html.dark .card,
body.dark .card,
html.dark-mode .card,
body.dark-mode .card,
html[data-theme="dark"] .card,
body[data-theme="dark"] .card,

html.dark .product,
body.dark .product,
html.dark-mode .product,
body.dark-mode .product,
html[data-theme="dark"] .product,
body[data-theme="dark"] .product,

html.dark .detail,
body.dark .detail,
html.dark-mode .detail,
body.dark-mode .detail,
html[data-theme="dark"] .detail,
body[data-theme="dark"] .detail,

html.dark .stat,
body.dark .stat,
html.dark-mode .stat,
body.dark-mode .stat,
html[data-theme="dark"] .stat,
body[data-theme="dark"] .stat{
  background:#261b22 !important;
  color:#fff !important;
  border-color:#513744 !important;
}


/* هر نوشته داخل این کادرها */
html.dark .card *,
body.dark .card *,
html.dark-mode .card *,
body.dark-mode .card *,
html[data-theme="dark"] .card *,
body[data-theme="dark"] .card *,

html.dark .product *,
body.dark .product *,
html.dark-mode .product *,
body.dark-mode .product *,
html[data-theme="dark"] .product *,
body[data-theme="dark"] .product *,

html.dark .detail *,
body.dark .detail *,
html.dark-mode .detail *,
body.dark-mode .detail *,
html[data-theme="dark"] .detail *,
body[data-theme="dark"] .detail *{
  color:#fff !important;
}


/* توضیحات و نوشته‌های فرعی */
html.dark .type,
body.dark .type,
html.dark-mode .type,
body.dark-mode .type,
html[data-theme="dark"] .type,
body[data-theme="dark"] .type,

html.dark p,
body.dark p,
html.dark-mode p,
body.dark-mode p,
html[data-theme="dark"] p,
body[data-theme="dark"] p{
  color:#d9c8d0 !important;
}


/* قیمت */
html.dark .price,
body.dark .price,
html.dark-mode .price,
body.dark-mode .price,
html[data-theme="dark"] .price,
body[data-theme="dark"] .price{
  color:#f28eae !important;
}


/* برند */
html.dark .brand,
body.dark .brand,
html.dark-mode .brand,
body.dark-mode .brand,
html[data-theme="dark"] .brand,
body[data-theme="dark"] .brand{
  color:#e5c176 !important;
}


/* دسته‌بندی‌ها */
html.dark .cat,
body.dark .cat,
html.dark-mode .cat,
body.dark-mode .cat,
html[data-theme="dark"] .cat,
body[data-theme="dark"] .cat{
  color:#fff !important;
  background:#261b22 !important;
  border-color:#513744 !important;
}

html.dark .cat *,
body.dark .cat *,
html.dark-mode .cat *,
body.dark-mode .cat *,
html[data-theme="dark"] .cat *,
body[data-theme="dark"] .cat *{
  color:#fff !important;
}


/* فرم‌ها */
html.dark input,
body.dark input,
html.dark textarea,
body.dark textarea,
html.dark select,
body.dark select,
html.dark-mode input,
body.dark-mode input,
html.dark-mode textarea,
body.dark-mode textarea,
html.dark-mode select,
body.dark-mode select,
html[data-theme="dark"] input,
body[data-theme="dark"] input,
html[data-theme="dark"] textarea,
body[data-theme="dark"] textarea,
html[data-theme="dark"] select,
body[data-theme="dark"] select{
  background:#1d151a !important;
  color:#fff !important;
  border-color:#59404b !important;
}

html.dark input::placeholder,
body.dark input::placeholder,
html.dark-mode input::placeholder,
body.dark-mode input::placeholder,
html[data-theme="dark"] input::placeholder,
body[data-theme="dark"] input::placeholder{
  color:#bdaab4 !important;
}


/* جدول‌ها */
html.dark .table th,
html.dark .table td,
body.dark .table th,
body.dark .table td,
html.dark-mode .table th,
html.dark-mode .table td,
body.dark-mode .table th,
body.dark-mode .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
body[data-theme="dark"] .table th,
body[data-theme="dark"] .table td{
  color:#fff !important;
  border-color:#513744 !important;
}


/* سبد خرید */
html.dark .cart-item *,
body.dark .cart-item *,
html.dark-mode .cart-item *,
body.dark-mode .cart-item *,
html[data-theme="dark"] .cart-item *,
body[data-theme="dark"] .cart-item *{
  color:#fff !important;
}


/* هدر */
html.dark header,
body.dark header,
html.dark-mode header,
body.dark-mode header,
html[data-theme="dark"] header,
body[data-theme="dark"] header{
  background:#1d151a !important;
  color:#fff !important;
  border-color:#513744 !important;
}

html.dark header *,
body.dark header *,
html.dark-mode header *,
body.dark-mode header *,
html[data-theme="dark"] header *,
body[data-theme="dark"] header *{
  color:#fff !important;
}


/* لینک‌ها */
html.dark a,
body.dark a,
html.dark-mode a,
body.dark-mode a,
html[data-theme="dark"] a,
body[data-theme="dark"] a{
  color:#fff !important;
}

html.dark a:hover,
body.dark a:hover,
html.dark-mode a:hover,
body.dark-mode a:hover,
html[data-theme="dark"] a:hover,
body[data-theme="dark"] a:hover{
  color:#f28eae !important;
}


/* دکمه‌ها */
html.dark button,
body.dark button,
html.dark-mode button,
body.dark-mode button,
html[data-theme="dark"] button,
body[data-theme="dark"] button{
  color:#fff !important;
}


/* کادر اعلان */
html.dark .notice,
body.dark .notice,
html.dark-mode .notice,
body.dark-mode .notice,
html[data-theme="dark"] .notice,
body[data-theme="dark"] .notice{
  background:#302029 !important;
  color:#fff !important;
  border-color:#694354 !important;
}


/* فوتر */
html.dark footer,
body.dark footer,
html.dark-mode footer,
body.dark-mode footer,
html[data-theme="dark"] footer,
body[data-theme="dark"] footer{
  color:#fff !important;
}


/* جلوگیری از متن سیاه inline */
html.dark [style*="color"],
body.dark [style*="color"],
html.dark-mode [style*="color"],
body.dark-mode [style*="color"],
html[data-theme="dark"] [style*="color"],
body[data-theme="dark"] [style*="color"]{
  color:#fff !important;
}


/* =========================================================
   ROZALI BEAUTY — DARK MODE TEXT FIX
   اصلاح خوانایی نوشته‌ها در تمام کارت‌ها و بخش‌ها
   ========================================================= */

/* رنگ اصلی متن در دارک مود */
html.dark-mode,
body.dark-mode,
html.dark,
body.dark,
html[data-theme="dark"],
body[data-theme="dark"]{
  background:#171217 !important;
  color:#f7eef3 !important;
}

/* تمام متن‌های عمومی */
html.dark-mode .card,
body.dark-mode .card,
html.dark .card,
body.dark .card,
html[data-theme="dark"] .card,
body[data-theme="dark"] .card,

html.dark-mode .product,
body.dark-mode .product,
html.dark .product,
body.dark .product,
html[data-theme="dark"] .product,
body[data-theme="dark"] .product,

html.dark-mode .detail,
body.dark-mode .detail,
html.dark .detail,
body.dark .detail,
html[data-theme="dark"] .detail,
body[data-theme="dark"] .detail,

html.dark-mode .stat,
body.dark-mode .stat,
html.dark .stat,
body.dark .stat,
html[data-theme="dark"] .stat,
body[data-theme="dark"] .stat{
  background:#241d23 !important;
  color:#f7eef3 !important;
  border-color:#4b3843 !important;
}

/* تیترها */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6{
  color:#fff4f8 !important;
}

/* متن توضیحات */
html.dark-mode p,
html.dark-mode span,
html.dark-mode label,
html.dark-mode strong,
html.dark-mode small,
html.dark-mode .type,
html.dark-mode .brand,
body.dark-mode p,
body.dark-mode span,
body.dark-mode label,
body.dark-mode strong,
body.dark-mode small,
body.dark-mode .type,
body.dark-mode .brand,
html.dark p,
html.dark span,
html.dark label,
html.dark strong,
html.dark small,
html.dark .type,
html.dark .brand,
body.dark p,
body.dark span,
body.dark label,
body.dark strong,
body.dark small,
body.dark .type,
body.dark .brand,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] strong,
html[data-theme="dark"] small,
html[data-theme="dark"] .type,
html[data-theme="dark"] .brand,
body[data-theme="dark"] p,
body[data-theme="dark"] span,
body[data-theme="dark"] label,
body[data-theme="dark"] strong,
body[data-theme="dark"] small,
body[data-theme="dark"] .type,
body[data-theme="dark"] .brand{
  color:#eadde4 !important;
}

/* قیمت */
html.dark-mode .price,
body.dark-mode .price,
html.dark .price,
body.dark .price,
html[data-theme="dark"] .price,
body[data-theme="dark"] .price{
  color:#f39abb !important;
}

/* فرم‌ها */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
html.dark input,
html.dark textarea,
html.dark select,
body.dark input,
body.dark textarea,
body.dark select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select{
  background:#1e191d !important;
  color:#fff !important;
  border-color:#5a4651 !important;
}

/* متن placeholder */
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder,
body.dark input::placeholder,
body.dark textarea::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder{
  color:#a995a0 !important;
  opacity:1 !important;
}

/* جدول */
html.dark-mode .table,
body.dark-mode .table,
html.dark .table,
body.dark .table,
html[data-theme="dark"] .table,
body[data-theme="dark"] .table{
  color:#f5eaf0 !important;
}

html.dark-mode .table th,
html.dark-mode .table td,
body.dark-mode .table th,
body.dark-mode .table td,
html.dark .table th,
html.dark .table td,
body.dark .table th,
body.dark .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
body[data-theme="dark"] .table th,
body[data-theme="dark"] .table td{
  color:#f5eaf0 !important;
  border-color:#4b3843 !important;
}

/* سبد خرید */
html.dark-mode .cart-item,
body.dark-mode .cart-item,
html.dark .cart-item,
body.dark .cart-item,
html[data-theme="dark"] .cart-item,
body[data-theme="dark"] .cart-item{
  color:#f5eaf0 !important;
  border-color:#4b3843 !important;
}

html.dark-mode .cart-item *,
body.dark-mode .cart-item *,
html.dark .cart-item *,
body.dark .cart-item *,
html[data-theme="dark"] .cart-item *,
body[data-theme="dark"] .cart-item *{
  color:#f5eaf0 !important;
}

/* دکمه‌های تعداد سبد */
html.dark-mode .qty button,
body.dark-mode .qty button,
html.dark .qty button,
body.dark .qty button,
html[data-theme="dark"] .qty button,
body[data-theme="dark"] .qty button{
  background:#30262d !important;
  color:#fff !important;
  border-color:#5a4651 !important;
}

/* کارت‌های دسته‌بندی */
html.dark-mode .cat,
body.dark-mode .cat,
html.dark .cat,
body.dark .cat,
html[data-theme="dark"] .cat,
body[data-theme="dark"] .cat{
  background:#241d23 !important;
  color:#fff !important;
  border-color:#5a4651 !important;
}

/* نام دسته‌بندی */
html.dark-mode .cat *,
body.dark-mode .cat *,
html.dark .cat *,
body.dark .cat *,
html[data-theme="dark"] .cat *,
body[data-theme="dark"] .cat *{
  color:#fff !important;
}

/* اطلاعیه‌ها */
html.dark-mode .notice,
body.dark-mode .notice,
html.dark .notice,
body.dark .notice,
html[data-theme="dark"] .notice,
body[data-theme="dark"] .notice{
  background:#302128 !important;
  color:#f9eaf0 !important;
  border-color:#694454 !important;
}

/* هدر */
html.dark-mode header,
body.dark-mode header,
html.dark header,
body.dark header,
html[data-theme="dark"] header,
body[data-theme="dark"] header{
  background:rgba(29,23,28,.96) !important;
  border-color:#4b3843 !important;
}

/* نوشته‌های هدر */
html.dark-mode header a,
html.dark-mode header span,
html.dark-mode header b,
body.dark-mode header a,
body.dark-mode header span,
body.dark-mode header b,
html.dark header a,
html.dark header span,
html.dark header b,
body.dark header a,
body.dark header span,
body.dark header b,
html[data-theme="dark"] header a,
html[data-theme="dark"] header span,
html[data-theme="dark"] header b,
body[data-theme="dark"] header a,
body[data-theme="dark"] header span,
body[data-theme="dark"] header b{
  color:#fff !important;
}

/* سرچ */
html.dark-mode .search,
body.dark-mode .search,
html.dark .search,
body.dark .search,
html[data-theme="dark"] .search,
body[data-theme="dark"] .search{
  background:#1e191d !important;
  border-color:#5a4651 !important;
}

html.dark-mode .search input,
body.dark-mode .search input,
html.dark .search input,
body.dark .search input,
html[data-theme="dark"] .search input,
body[data-theme="dark"] .search input{
  color:#fff !important;
  background:transparent !important;
}

/* لینک‌ها */
html.dark-mode a,
body.dark-mode a,
html.dark a,
body.dark a,
html[data-theme="dark"] a,
body[data-theme="dark"] a{
  color:#f7eaf0 !important;
}

/* دکمه‌های معمولی */
html.dark-mode button,
body.dark-mode button,
html.dark button,
body.dark button,
html[data-theme="dark"] button,
body[data-theme="dark"] button{
  color:#fff;
}

/* دکمه‌های اصلی سایت همچنان رنگ خودشان را حفظ کنند */
html.dark-mode .btn,
body.dark-mode .btn,
html.dark .btn,
body.dark .btn,
html[data-theme="dark"] .btn,
body[data-theme="dark"] .btn,
html.dark-mode .home-add-cart,
body.dark-mode .home-add-cart,
html.dark .home-add-cart,
body.dark .home-add-cart,
html[data-theme="dark"] .home-add-cart,
body[data-theme="dark"] .home-add-cart{
  color:#fff !important;
}

/* فوتر */
html.dark-mode footer,
body.dark-mode footer,
html.dark footer,
body.dark footer,
html[data-theme="dark"] footer,
body[data-theme="dark"] footer{
  background:#100c10 !important;
  color:#fff !important;
}


/* =========================================================
   ROZALI — DARK MODE TEXT FIX
   خوانایی کامل نوشته‌های منوی دسته‌بندی و همبرگری
   ========================================================= */

/* دسته‌بندی‌های زیر سرچ */
html.dark .nav a,
body.dark .nav a,
html.dark-mode .nav a,
body.dark-mode .nav a,
html[data-theme="dark"] .nav a,
body[data-theme="dark"] .nav a,

html.dark nav a,
body.dark nav a,
html.dark-mode nav a,
body.dark-mode nav a,
html[data-theme="dark"] nav a,
body[data-theme="dark"] nav a,

html.dark .categories a,
body.dark .categories a,
html.dark-mode .categories a,
body.dark-mode .categories a,
html[data-theme="dark"] .categories a,
body[data-theme="dark"] .categories a,

html.dark .category-nav a,
body.dark .category-nav a,
html.dark-mode .category-nav a,
body.dark-mode .category-nav a,
html[data-theme="dark"] .category-nav a,
body[data-theme="dark"] .category-nav a {
  color:#ffffff !important;
  background:#29202a !important;
  border-color:#55404f !important;
  text-shadow:none !important;
  opacity:1 !important;
}

/* نوشته داخل تمام عناصر منوی همبرگری */
html.dark .roz-side-menu,
body.dark .roz-side-menu,
html.dark-mode .roz-side-menu,
body.dark-mode .roz-side-menu,
html[data-theme="dark"] .roz-side-menu,
body[data-theme="dark"] .roz-side-menu {
  color:#ffffff !important;
}

/* لینک‌های منوی همبرگری */
html.dark .roz-side-menu a,
body.dark .roz-side-menu a,
html.dark-mode .roz-side-menu a,
body.dark-mode .roz-side-menu a,
html[data-theme="dark"] .roz-side-menu a,
body[data-theme="dark"] .roz-side-menu a {
  color:#ffffff !important;
  opacity:1 !important;
  background:#29202a !important;
  border-color:#55404f !important;
}

/* نوشته‌های داخل آیتم‌های همبرگری */
html.dark .roz-side-menu *,
body.dark .roz-side-menu *,
html.dark-mode .roz-side-menu *,
body.dark-mode .roz-side-menu *,
html[data-theme="dark"] .roz-side-menu *,
body[data-theme="dark"] .roz-side-menu * {
  text-shadow:none !important;
}

/* حالت هاور */
html.dark .roz-side-menu a:hover,
body.dark .roz-side-menu a:hover,
html.dark-mode .roz-side-menu a:hover,
body.dark-mode .roz-side-menu a:hover,
html[data-theme="dark"] .roz-side-menu a:hover,
body[data-theme="dark"] .roz-side-menu a:hover {
  color:#ffffff !important;
  background:#3a2936 !important;
}

/* متن‌های کم‌رنگی که به صورت مستقیم داخل این قسمت‌ها
   با رنگ inline تعریف شده‌اند */
html.dark .roz-side-menu [style*="color"],
body.dark .roz-side-menu [style*="color"],
html.dark-mode .roz-side-menu [style*="color"],
body.dark-mode .roz-side-menu [style*="color"],
html[data-theme="dark"] .roz-side-menu [style*="color"],
body[data-theme="dark"] .roz-side-menu [style*="color"] {
  color:#ffffff !important;
  opacity:1 !important;
}

/* دسته‌بندی‌های کوچک: نوشته کاملاً سفید */
html.dark .categories a *,
body.dark .categories a *,
html.dark-mode .categories a *,
body.dark-mode .categories a *,
html[data-theme="dark"] .categories a *,
body[data-theme="dark"] .categories a * {
  color:#ffffff !important;
  opacity:1 !important;
}

/* اگر دسته‌بندی‌ها با کلاس دیگری ساخته شده باشند */
html.dark .roz-side-categories a *,
body.dark .roz-side-categories a *,
html.dark-mode .roz-side-categories a *,
body.dark-mode .roz-side-categories a *,
html[data-theme="dark"] .roz-side-categories a *,
body[data-theme="dark"] .roz-side-categories a * {
  color:#ffffff !important;
  opacity:1 !important;
}


/* =========================================================
   ROZALI BEAUTY — SOFT DARK MODE
   ========================================================= */

html.dark body,
body.dark,
html.dark-mode body,
body.dark-mode,
html[data-theme="dark"] body,
body[data-theme="dark"]{
  background:#2b2429 !important;
  color:#f8eef2 !important;
}

/* هدر */
html.dark header,
body.dark header,
html.dark-mode header,
body.dark-mode header,
html[data-theme="dark"] header,
body[data-theme="dark"] header{
  background:#33292f !important;
  border-bottom-color:#5b4650 !important;
}

/* کادرهای اصلی */
html.dark .card,
body.dark .card,
html.dark-mode .card,
body.dark-mode .card,
html[data-theme="dark"] .card,
body[data-theme="dark"] .card,

html.dark .product,
body.dark .product,
html.dark-mode .product,
body.dark-mode .product,
html[data-theme="dark"] .product,
body[data-theme="dark"] .product,

html.dark .detail,
body.dark .detail,
html.dark-mode .detail,
body.dark-mode .detail,
html[data-theme="dark"] .detail,
body[data-theme="dark"] .detail,

html.dark .stat,
body.dark .stat,
html.dark-mode .stat,
body.dark-mode .stat,
html[data-theme="dark"] .stat,
body[data-theme="dark"] .stat{
  background:#3a3036 !important;
  color:#fff !important;
  border-color:#66515b !important;
}

/* متن اصلی */
html.dark .card *,
body.dark .card *,
html.dark-mode .card *,
body.dark-mode .card *,
html[data-theme="dark"] .card *,
body[data-theme="dark"] .card *,

html.dark .product *,
body.dark .product *,
html.dark-mode .product *,
body.dark-mode .product *,
html[data-theme="dark"] .product *,
body[data-theme="dark"] .product *{
  color:#fff !important;
}

/* توضیحات */
html.dark p,
body.dark p,
html.dark-mode p,
body.dark-mode p,
html[data-theme="dark"] p,
body[data-theme="dark"] p{
  color:#eadde3 !important;
}

/* دسته‌بندی‌های زیر سرچ */
html.dark .top nav a,
body.dark .top nav a,
html.dark-mode .top nav a,
body.dark-mode .top nav a,
html[data-theme="dark"] .top nav a,
body[data-theme="dark"] .top nav a{
  background:#463840 !important;
  color:#fff !important;
  border-color:#6b5360 !important;
}

/* منوی دسته‌بندی افقی */
html.dark .nav a,
body.dark .nav a,
html.dark-mode .nav a,
body.dark-mode .nav a,
html[data-theme="dark"] .nav a,
body[data-theme="dark"] .nav a,
html.dark .categories a,
body.dark .categories a,
html.dark-mode .categories a,
body.dark-mode .categories a,
html[data-theme="dark"] .categories a,
body[data-theme="dark"] .categories a{
  background:#463840 !important;
  color:#fff !important;
  border-color:#6b5360 !important;
  opacity:1 !important;
}

/* منوی همبرگری */
html.dark .roz-side-menu,
body.dark .roz-side-menu,
html.dark-mode .roz-side-menu,
body.dark-mode .roz-side-menu,
html[data-theme="dark"] .roz-side-menu,
body[data-theme="dark"] .roz-side-menu{
  background:#33292f !important;
  color:#fff !important;
  border-color:#66515b !important;
}

html.dark .roz-side-menu *,
body.dark .roz-side-menu *,
html.dark-mode .roz-side-menu *,
body.dark-mode .roz-side-menu *,
html[data-theme="dark"] .roz-side-menu *,
body[data-theme="dark"] .roz-side-menu *{
  color:#fff !important;
  opacity:1 !important;
}

html.dark .roz-side-menu a,
body.dark .roz-side-menu a,
html.dark-mode .roz-side-menu a,
body.dark-mode .roz-side-menu a,
html[data-theme="dark"] .roz-side-menu a,
body[data-theme="dark"] .roz-side-menu a{
  background:#463840 !important;
  border-color:#6b5360 !important;
}

/* کادرهای دسته‌بندی اصلی */
html.dark .cat,
body.dark .cat,
html.dark-mode .cat,
body.dark-mode .cat,
html[data-theme="dark"] .cat,
body[data-theme="dark"] .cat{
  background:#3a3036 !important;
  color:#fff !important;
  border-color:#66515b !important;
}

/* ورودی‌ها */
html.dark input,
html.dark textarea,
html.dark select,
body.dark input,
body.dark textarea,
body.dark select,
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select{
  background:#40353b !important;
  color:#fff !important;
  border-color:#705965 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder,
body.dark input::placeholder,
body.dark textarea::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder{
  color:#d2c1c9 !important;
  opacity:1 !important;
}

/* قیمت */
html.dark .price,
body.dark .price,
html.dark-mode .price,
body.dark-mode .price,
html[data-theme="dark"] .price,
body[data-theme="dark"] .price{
  color:#f39ab9 !important;
}

/* برند */
html.dark .brand,
body.dark .brand,
html.dark-mode .brand,
body.dark-mode .brand,
html[data-theme="dark"] .brand,
body[data-theme="dark"] .brand{
  color:#e6c477 !important;
}

/* جدول */
html.dark .table th,
html.dark .table td,
body.dark .table th,
body.dark .table td,
html.dark-mode .table th,
html.dark-mode .table td,
body.dark-mode .table th,
body.dark-mode .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
body[data-theme="dark"] .table th,
body[data-theme="dark"] .table td{
  color:#fff !important;
  border-color:#66515b !important;
}

/* سبد خرید */
html.dark .cart-item,
body.dark .cart-item,
html.dark-mode .cart-item,
body.dark-mode .cart-item,
html[data-theme="dark"] .cart-item,
body[data-theme="dark"] .cart-item{
  color:#fff !important;
  border-color:#66515b !important;
}

html.dark .qty button,
body.dark .qty button,
html.dark-mode .qty button,
body.dark-mode .qty button,
html[data-theme="dark"] .qty button,
body[data-theme="dark"] .qty button{
  background:#463840 !important;
  color:#fff !important;
  border-color:#705965 !important;
}

/* لینک‌ها */
html.dark a,
body.dark a,
html.dark-mode a,
body.dark-mode a,
html[data-theme="dark"] a,
body[data-theme="dark"] a{
  color:#fff !important;
}

/* دکمه‌ها */
html.dark button,
body.dark button,
html.dark-mode button,
body.dark-mode button,
html[data-theme="dark"] button,
body[data-theme="dark"] button{
  color:#fff !important;
}

/* دکمه‌های صورتی و اصلی */
html.dark .btn,
body.dark .btn,
html.dark-mode .btn,
body.dark-mode .btn,
html[data-theme="dark"] .btn,
body[data-theme="dark"] .btn{
  background:#c94f82 !important;
  color:#fff !important;
}

/* فوتر */
html.dark footer,
body.dark footer,
html.dark-mode footer,
body.dark-mode footer,
html[data-theme="dark"] footer,
body[data-theme="dark"] footer{
  background:#21191e !important;
  color:#fff !important;
}


/* =========================================================
   ROZALI — شروع دسته‌بندی‌ها از سمت راست موبایل
   کاهش 80 درصدی فاصله‌ی ابتدای لیست
   ========================================================= */

@media (max-width: 600px){

  .roz-categories-section .cats{
    padding-right: 4px !important;
    padding-left: 4px !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    justify-content: flex-start !important;
  }

  .roz-categories-section .cat:first-child{
    margin-right: 0 !important;
  }

}


/* =========================================================
   ROZALI — CATEGORY CIRCLES
   شروع کاملاً نزدیک به لبه راست موبایل
   ========================================================= */

@media (max-width:600px){

  .roz-categories-section{
    padding-right:2px !important;
    padding-left:0 !important;
    margin-right:0 !important;
    margin-left:0 !important;
  }

  .roz-categories-section .cats{
    width:100vw !important;
    max-width:none !important;

    margin-right:-2px !important;
    margin-left:0 !important;

    padding-right:0 !important;
    padding-left:0 !important;

    display:flex !important;
    flex-wrap:nowrap !important;

    justify-content:flex-start !important;
    align-items:flex-start !important;

    gap:6px !important;

    overflow-x:auto !important;
    overflow-y:visible !important;

    scrollbar-width:none !important;
  }

  .roz-categories-section .cats::-webkit-scrollbar{
    display:none !important;
  }

  .roz-categories-section .cat{
    flex:0 0 100px !important;
    width:100px !important;
    min-width:100px !important;

    margin-right:0 !important;
    margin-left:0 !important;
  }

  .roz-categories-section .cat:first-child{
    margin-right:0 !important;
  }

}


/* طلایی کردن ستاره‌های نظرات محصول */
.roz-review-stars {
  color: #d4af37 !important;
  letter-spacing: 2px;
  font-size: 18px;
  font-weight: 700;
}


/* دکمه مشاهده همه محصولات - صفحه اصلی */
.roz-home-top .roz-only-all-products{
  display:flex;
  justify-content:flex-start;
  width:100%;
  margin:0 0 28px;
}

.roz-home-top .roz-only-all-products .btn{
  background:#b7d9c2 !important;
  color:#244b35 !important;
  border:1px solid #a4cbb1 !important;
  box-shadow:none !important;
  margin:0 !important;
}

.roz-home-top .roz-only-all-products .btn:hover{
  background:#a9d0b5 !important;
  color:#1f432f !important;
}


/* جابه‌جایی دکمه مشاهده همه محصولات */
.roz-home-top .roz-only-all-products{
  transform: translate(-30%, 30%);
}


/* موقعیت دقیق دکمه مشاهده همه محصولات */
.roz-home-top .roz-only-all-products{
  position:relative !important;
  left:-30vw !important;
  top:30vh !important;
  transform:none !important;
}


/* موقعیت دکمه مشاهده همه محصولات */
.roz-home-all-products-button{
  position:relative !important;
  left:-30vw !important;
  top:30vh !important;
}

.roz-home-all-products-button .btn{
  background:#b7d9c2 !important;
  color:#244b35 !important;
  border:1px solid #a4cbb1 !important;
}

.roz-home-all-products-button .btn:hover{
  background:#a9d0b5 !important;
  color:#1f432f !important;
}


/* تنظیم نهایی موقعیت دکمه */
.roz-home-all-products-button{
  left:-25vw !important;
  top:5vh !important;
}


.roz-home-all-products-button{
  left:-23vw !important;
  top:3vh !important;
}


.roz-home-all-products-button .btn{
  background:#B7DCC6 !important;
  color:#24513A !important;
  border:1px solid #9FCBB0 !important;
}

.roz-home-all-products-button .btn:hover{
  background:#A8D2B8 !important;
  color:#1E4531 !important;
}


/* سبز پاستیلی قطعی برای دکمه مشاهده همه محصولات */
div.roz-home-all-products-button > a.btn{
  background-color:#B7DCC6 !important;
  background-image:none !important;
  color:#24513A !important;
  border-color:#9FCBB0 !important;
  box-shadow:none !important;
}

div.roz-home-all-products-button > a.btn:hover{
  background-color:#A8D2B8 !important;
  background-image:none !important;
  color:#1E4531 !important;
}


/* بازگردانی رنگ دکمه مشاهده همه محصولات */
.roz-home-all-products-button .btn,
div.roz-home-all-products-button > a.btn{
  background:initial !important;
  background-color:initial !important;
  background-image:initial !important;
  color:initial !important;
  border-color:initial !important;
  box-shadow:initial !important;
}


div.roz-home-all-products-button > a.btn{
  background:#4CAF50 !important;
  background-image:none !important;
  color:#fff !important;
  border:1px solid #43A047 !important;
  box-shadow:none !important;
}

div.roz-home-all-products-button > a.btn:hover{
  background:#43A047 !important;
  color:#fff !important;
}


div.roz-home-all-products-button > a.btn{
  background:#22963F !important;
  background-color:#22963F !important;
  color:#fff !important;
  border-color:#197A32 !important;
}

div.roz-home-all-products-button > a.btn:hover{
  background:#197A32 !important;
  background-color:#197A32 !important;
}


.roz-home-all-products-button{
  left:-21vw !important;
}


.roz-home-all-products-button{
  left:-20vw !important;
}


.product-stock{
  margin:8px 0;
  font-size:11.2px;
  font-weight:600;
  color:#198754;
}

.product-stock[data-stock="0"]{
  color:#dc3545;
}


.product-stock-detail{
  display:flex;
  align-items:center;
  gap:5px;
  margin:8px 0 12px;
  font-size:11.2px;
  font-weight:600;
}

.product-stock-detail strong{
  font-size:12px;
}

.product-stock-available{
  color:#16803c;
}

.product-stock-unavailable{
  color:#d32f2f;
  font-weight:700;
}


.product-price-box{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.product-price{
  font-size:24px;
  font-weight:800;
}

.product-old-price{
  font-size:16px;
  text-decoration:line-through;
  opacity:.55;
}

.product-stock{
  font-size:14px;
  font-weight:700;
  margin-top:4px;
}

.product-stock-available{
  color:#16803c;
}

.product-stock-unavailable{
  color:#d62828;
}



/* =========================================
   PRODUCT PAGE - FINAL CLEAN DESIGN
========================================= */

.product-page{
  max-width:900px;
  margin:0 auto;
  padding:24px 18px 70px;
  box-sizing:border-box;
}


/* -------------------------
   BACK BUTTON
------------------------- */

.product-back-wrap{
  width:100%;
  margin-bottom:32px;
}

.product-back-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#198754;
  color:#fff !important;

  text-decoration:none;

  padding:11px 20px;

  border-radius:10px;

  font-size:14px;
  font-weight:700;

  transition:
    background .2s ease,
    transform .2s ease;
}

.product-back-button:hover{
  background:#157347;
  transform:translateY(-1px);
}


/* -------------------------
   PRODUCT IMAGE
------------------------- */

.product-main-image{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;

  border-radius:18px;

  padding:24px;

  box-sizing:border-box;

  margin-bottom:30px;

  box-shadow:
    0 4px 20px rgba(0,0,0,.06);
}

.product-main-image img{
  display:block;

  width:auto;
  max-width:100%;

  height:auto;

  max-height:500px;

  object-fit:contain;

  border-radius:12px;
}

.product-no-image{
  font-size:80px;
  padding:80px 0;
}


/* -------------------------
   PRODUCT INFO
------------------------- */

.product-main-info{
  width:100%;
  box-sizing:border-box;
}


/* -------------------------
   NAME
------------------------- */

.product-main-title{
  margin:0 0 8px;

  font-size:26px;

  line-height:1.8;

  font-weight:900;

  color:#222;
}


/* -------------------------
   BRAND
------------------------- */

.product-main-brand{
  margin-bottom:22px;

  font-size:14px;

  color:#777;

  line-height:1.8;
}


/* -------------------------
   PRICES
------------------------- */

.product-main-prices{
  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:5px;

  margin-bottom:10px;
}


/* قیمت قبلی */

.product-old-price{
  color:#d62828 !important;

  font-size:16px;

  font-weight:600;

  text-decoration-line:line-through;

  text-decoration-thickness:2px;

  text-decoration-color:#d62828;

  line-height:1.8;
}


/* قیمت جدید */

.product-price{
  color:#222;

  font-size:27px;

  font-weight:900;

  line-height:1.6;
}


/* -------------------------
   STOCK
------------------------- */

.product-stock{
  display:inline-flex;

  align-items:center;

  width:max-content;

  margin:4px 0 22px;

  padding:7px 13px;

  border-radius:9px;

  font-size:14px;

  font-weight:800;

  line-height:1.5;
}


.product-stock-available{
  color:#16803c;

  background:#edf8f1;
}


.product-stock-unavailable{
  color:#d62828;

  background:#fff0f0;
}


/* -------------------------
   COLORS
------------------------- */

.product-colors{
  margin:0 0 22px;
}

.product-colors-title{
  margin-bottom:10px;

  font-size:15px;

  font-weight:800;
}

.product-color-list{
  display:flex;

  flex-wrap:wrap;

  gap:8px;
}

.product-color{
  padding:8px 15px;

  border:1px solid #ddd;

  border-radius:9px;

  background:#fff;

  cursor:pointer;

  font-size:14px;

  transition:.2s;
}

.product-color:hover{
  border-color:#999;
}

.product-color.selected{
  border-color:#198754;

  box-shadow:
    0 0 0 2px rgba(25,135,84,.12);

  background:#f1fbf5;
}


/* -------------------------
   ADD TO CART
------------------------- */

.product-add-cart-main{
  display:flex;

  width:100%;

  min-height:50px;

  align-items:center;

  justify-content:center;

  border:0;

  border-radius:11px;

  background:#198754;

  color:#fff;

  font-size:16px;

  font-weight:800;

  cursor:pointer;

  margin-top:4px;

  transition:
    background .2s ease,
    transform .2s ease,
    opacity .2s ease;
}

.product-add-cart-main:hover{
  background:#157347;

  transform:translateY(-1px);
}

.product-add-cart-main:disabled{
  background:#aaa;

  cursor:not-allowed;

  transform:none;

  opacity:.8;
}


/* -------------------------
   CHECKOUT BUTTON
------------------------- */

.product-checkout-button{
  display:flex;

  width:100%;

  min-height:50px;

  align-items:center;

  justify-content:center;

  box-sizing:border-box;

  margin-top:11px;

  border-radius:11px;

  background:#fff;

  color:#198754 !important;

  border:2px solid #198754;

  text-decoration:none;

  font-size:15px;

  font-weight:800;

  transition:.2s;
}

.product-checkout-button:hover{
  background:#edf8f1;

  transform:translateY(-1px);
}


/* -------------------------
   DESCRIPTION
------------------------- */

.product-description{
  margin-top:34px;

  padding-top:26px;

  border-top:1px solid #eee;

  color:#444;

  line-height:2.2;

  font-size:15px;
}

.product-description-title{
  margin-bottom:14px;

  font-size:19px;

  font-weight:900;

  color:#222;
}

.product-short-description{
  margin-bottom:16px;

  font-weight:700;

  line-height:2;
}

.product-description-text{
  white-space:pre-line;

  line-height:2.25;
}


/* -------------------------
   MOBILE
------------------------- */

@media (max-width:700px){

  .product-page{
    padding:18px 14px 50px;
  }

  .product-back-wrap{
    margin-bottom:24px;
  }

  .product-back-button{
    padding:10px 16px;

    font-size:13px;
  }

  .product-main-image{
    padding:16px;

    border-radius:14px;

    margin-bottom:24px;
  }

  .product-main-image img{
    max-height:380px;
  }

  .product-main-title{
    font-size:21px;

    line-height:1.8;
  }

  .product-main-brand{
    margin-bottom:18px;
  }

  .product-old-price{
    font-size:14px;
  }

  .product-price{
    font-size:24px;
  }

  .product-stock{
    margin-bottom:20px;
  }

  .product-description{
    margin-top:28px;

    padding-top:22px;

    font-size:14px;
  }

}


/* -------------------------
   VERY SMALL MOBILE
------------------------- */

@media (max-width:400px){

  .product-main-image img{
    max-height:320px;
  }

  .product-main-title{
    font-size:19px;
  }

  .product-price{
    font-size:22px;
  }

}


/* دکمه‌های خرید در صفحه محصول */
.product-add-cart-main,
.product-checkout-button{
  width:100%;
  max-width:420px;
  min-height:48px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

/* افزودن به سبد خرید */
.product-add-cart-main{
  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:4px;
  margin-bottom:10px;

  border:0;
  border-radius:11px;

  background:#198754;
  color:#fff;

  font-size:15px;
  font-weight:800;

  cursor:pointer;

  transition:
    background .2s ease,
    transform .2s ease;
}

.product-add-cart-main:hover{
  background:#157347;
  transform:translateY(-1px);
}

/* ادامه سفارش و پرداخت */
.product-checkout-button{
  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:0;

  border:0;
  border-radius:11px;

  background:#198754;
  color:#fff !important;

  text-decoration:none;

  font-size:15px;
  font-weight:800;

  transition:
    background .2s ease,
    transform .2s ease;
}

.product-checkout-button:hover{
  background:#157347;
  transform:translateY(-1px);
}

/* روی موبایل هم دقیقاً هم‌اندازه */
@media (max-width:700px){

  .product-add-cart-main,
  .product-checkout-button{
    width:100%;
    max-width:360px;
    min-height:48px;
  }

}


/* =========================================
   FINAL PRODUCT PURCHASE BUTTONS
========================================= */

.product-purchase-buttons{
  width:100%;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  margin:20px 0 0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.product-purchase-buttons .product-add-cart-main,
.product-purchase-buttons .product-checkout-button{
  display:flex !important;

  width:100% !important;
  max-width:380px !important;

  height:48px !important;
  min-height:48px !important;

  margin:0 !important;
  padding:0 16px !important;

  box-sizing:border-box !important;

  align-items:center !important;
  justify-content:center !important;

  border-radius:10px !important;

  font-family:inherit !important;
  font-size:15px !important;
  font-weight:800 !important;

  text-align:center !important;
}

/* افزودن به سبد */
.product-purchase-buttons .product-add-cart-main{
  border:0 !important;

  background:#198754 !important;
  color:#fff !important;

  cursor:pointer !important;
}

/* ادامه سفارش */
.product-purchase-buttons .product-checkout-button{
  border:0 !important;

  background:#198754 !important;
  color:#fff !important;

  text-decoration:none !important;

  cursor:pointer !important;
}

/* hover */
.product-purchase-buttons .product-add-cart-main:hover,
.product-purchase-buttons .product-checkout-button:hover{
  background:#157347 !important;
  color:#fff !important;
}

/* ناموجود */
.product-purchase-buttons .product-add-cart-main:disabled{
  background:#aaa !important;
  color:#fff !important;
  cursor:not-allowed !important;
}

/* موبایل */
@media (max-width:700px){

  .product-purchase-buttons{
    width:100% !important;
    gap:10px !important;
  }

  .product-purchase-buttons .product-add-cart-main,
  .product-purchase-buttons .product-checkout-button{
    width:100% !important;
    max-width:360px !important;
    height:48px !important;
    min-height:48px !important;
  }

}


/* =========================================
   PRODUCT REVIEWS
========================================= */

.product-reviews{
  width:100%;
  margin-top:42px;
  padding-top:30px;
  border-top:1px solid #eee;
  box-sizing:border-box;
}

.product-reviews-title{
  margin-bottom:20px;

  font-size:20px;
  font-weight:900;
  color:#222;

  line-height:1.8;
}

.product-reviews-content{
  width:100%;
}

.product-reviews-loading{
  color:#888;
  font-size:14px;
  padding:15px 0;
}


/* فرم نظر */

.product-review-form{
  width:100%;
  margin-top:25px;
  padding:20px;

  background:#fafafa;
  border:1px solid #eee;
  border-radius:14px;

  box-sizing:border-box;
}

.product-review-form input,
.product-review-form textarea{
  width:100%;
  box-sizing:border-box;

  border:1px solid #ddd;
  border-radius:9px;

  padding:11px 13px;

  font-family:inherit;
  font-size:14px;

  background:#fff;
}

.product-review-form textarea{
  min-height:120px;
  resize:vertical;
}

.product-review-form input:focus,
.product-review-form textarea:focus{
  outline:none;
  border-color:#198754;
}


/* ستاره‌ها */

.product-review-stars{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-end;

  gap:5px;

  margin:12px 0 16px;
}

.product-review-stars button{
  border:0;
  background:transparent;

  padding:3px;

  font-size:28px;

  color:#ccc;

  cursor:pointer;
}

.product-review-stars button.selected,
.product-review-stars button:hover,
.product-review-stars button:hover ~ button{
  color:#f5b301;
}


/* دکمه ثبت نظر */

.product-review-submit{
  display:flex;

  width:100%;
  max-width:300px;

  min-height:46px;

  align-items:center;
  justify-content:center;

  margin-top:15px;

  border:0;
  border-radius:10px;

  background:#198754;
  color:#fff;

  font-family:inherit;
  font-size:15px;
  font-weight:800;

  cursor:pointer;
}

.product-review-submit:hover{
  background:#157347;
}


/* کارت نظرات */

.product-review-item{
  padding:18px 0;

  border-bottom:1px solid #eee;
}

.product-review-item:last-child{
  border-bottom:0;
}

.product-review-author{
  font-weight:800;
  color:#222;
}

.product-review-rating{
  color:#f5b301;
  letter-spacing:2px;
  margin-top:5px;
}

.product-review-text{
  margin-top:9px;

  color:#555;

  line-height:2;

  white-space:pre-line;
}

@media(max-width:700px){

  .product-reviews{
    margin-top:32px;
    padding-top:24px;
  }

  .product-reviews-title{
    font-size:18px;
  }

  .product-review-form{
    padding:15px;
  }

}