/* أساسي: خطوط / ألوان الهوية */
@font-face {
  font-family: 'Afeesh';
  src: url('../fonts/Afeesh.woff2') format('woff2');
}
@font-face {
  font-family: 'Massira';
  src: url('../fonts/Massira.woff2') format('woff2');
}

:root{
  --main-color: #3A1C28;       /* بنفس هوية اللوغو */
  --secondary-color: #512737;
  --light-color: #F8F1DF;
  --accent: #ff3860;
}

/* عام */
body{
  font-family: 'Massira', Tahoma, sans-serif;
  background: #fff;
  color: #222;
}

/* الشعار */
.brand-font{
  font-family: 'Afeesh', serif;
  color: var(--main-color);
}

/* Navbar */
.navbar { padding: 0.65rem 0; }

/* Hero */
.hero-section {
  background: linear-gradient(0deg, rgba(58,28,40,0.03), rgba(58,28,40,0.03)), var(--light-color);
  padding: 60px 0;
}
.hero-btn{ background: var(--main-color); color:#fff; border-radius:8px; padding:10px 22px; }
.hero-btn:hover{ background: var(--secondary-color); }

/* بطاقات المجموعات */
.collection-card{ border-radius:12px; overflow:hidden; position:relative; }
.collection-overlay{
  position:absolute; inset:auto 0 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
  color:#fff; padding:18px; text-align:right;
}

/* منتجات */
.product-card{
  background:#fff; border-radius:12px; padding:12px; border:1px solid #f0f0f0; box-shadow:0 6px 20px rgba(37,14,27,0.03);
}
.product-img{ width:100%; height:260px; object-fit:cover; border-radius:8px; background: var(--light-color); display:block; }

/* الأزرار */
.btn-main{ background:var(--main-color); color:#fff; border:none; border-radius:8px; }
.btn-main:hover{ background:var(--secondary-color); }

/* Badges */
.badge { font-size: 12px; }

/* Responsive tweaks */
@media (max-width: 767px){
  .hero-section{ padding: 30px 0; }
  .product-img{ height:200px; }
  .brand-font{ font-size:20px; }
}
.collection-card {
    border-radius: 12px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.collection-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.collection-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.0));
    text-align: center;
    color: #fff;
    transition: .3s ease;
}