@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root {
  --primary: #B76E79;
  --primary-dark: #964F5B;
  --primary-light: #FDF4F5;
  --accent: #E5A9B4;
  --dark: #222222;
  --gray-bg: #F9F9FB;
  --gray-border: #EEEEF2;
  --text-muted: #777777;
  --white: #FFFFFF;
  --shadow: 0 4px 20px rgba(183, 110, 121, 0.12);
  --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Vazirmatn', sans-serif; direction: rtl; }
body { background-color: var(--gray-bg); color: var(--dark); line-height: 1.6; padding-bottom: 70px; }
a { text-decoration: none; color: inherit; }

.top-bar { background: var(--primary-light); color: var(--primary-dark); text-align: center; padding: 8px 14px; font-size: 0.85rem; font-weight: 500; }
header.site-header { background: var(--white); box-shadow: 0 2px 12px rgba(0,0,0,0.04); position: sticky; top: 0; z-index: 100; }
.header-container { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; }
.logo-text { font-size: 1.6rem; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 8px; }
.header-actions { display: flex; align-items: center; gap: 12px; }

.btn-icon { background: var(--gray-bg); border: 1px solid var(--gray-border); padding: 8px 14px; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; transition: all 0.2s ease; }
.btn-icon:hover { background: var(--primary-light); color: var(--primary); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: var(--white); padding: 10px 20px; border-radius: var(--radius); border: none; cursor: pointer; font-weight: bold; box-shadow: var(--shadow); transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary:hover { opacity: 0.95; transform: translateY(-1px); }

.category-filter-wrap { max-width: 1240px; margin: 20px auto 10px; padding: 0 20px; }
.category-bar { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
.category-bar::-webkit-scrollbar { display: none; }
.category-pill { background: var(--white); border: 1px solid var(--gray-border); padding: 10px 20px; border-radius: 30px; white-space: nowrap; font-size: 0.9rem; font-weight: 600; color: #555; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s ease; }
.category-pill:hover, .category-pill.active { background: var(--primary); color: var(--white); border-color: var(--primary); box-shadow: 0 3px 12px rgba(183, 110, 121, 0.25); }

.products-container { max-width: 1240px; margin: 20px auto 40px; padding: 0 20px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-title { font-size: 1.35rem; font-weight: 800; position: relative; padding-right: 12px; }
.section-title::before { content: ''; position: absolute; right: 0; top: 4px; bottom: 4px; width: 5px; background: var(--primary); border-radius: 4px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

.card-product { background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray-border); box-shadow: 0 2px 8px rgba(0,0,0,0.03); transition: all 0.3s; display: flex; flex-direction: column; }
.card-product:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.card-img-wrap { position: relative; background: #FDF9FA; height: 250px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.card-body { padding: 16px; display: flex; flex-direction: column; flex-grow: 1; }
.card-tag { font-size: 0.75rem; color: var(--primary); font-weight: bold; }
.card-title { font-size: 1rem; font-weight: 700; margin: 6px 0 10px; color: var(--dark); }
.card-pricing { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px dashed #eee; }
.price-main { font-size: 1.15rem; font-weight: 800; color: var(--primary); }
.price-old { font-size: 0.85rem; color: var(--text-muted); text-decoration: line-through; }

.product-detail-wrap { max-width: 1100px; margin: 30px auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 35px; }
.prod-gallery { background: var(--white); border-radius: var(--radius); padding: 30px; border: 1px solid var(--gray-border); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.prod-info-box { background: var(--white); border-radius: var(--radius); padding: 28px; border: 1px solid var(--gray-border); }
.swatch-group { margin: 18px 0; }
.swatch-title { font-size: 0.9rem; font-weight: bold; margin-bottom: 8px; display: flex; justify-content: space-between; }
.swatches-list { display: flex; gap: 10px; flex-wrap: wrap; }
.size-pill { border: 1.5px solid #ddd; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 0.88rem; font-weight: 600; transition: all 0.2s; }
.size-pill.active, .size-pill:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.color-bullet { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1.5px solid #ddd; border-radius: 30px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
.color-bullet.active, .color-bullet:hover { border-color: var(--primary); background: var(--primary-light); }
.color-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }

.mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: var(--white); box-shadow: 0 -2px 10px rgba(0,0,0,0.06); z-index: 999; justify-content: space-around; align-items: center; border-top: 1px solid var(--gray-border); }
.nav-item { display: flex; flex-direction: column; align-items: center; font-size: 0.75rem; color: #777; gap: 4px; flex: 1; }
.nav-item i { font-size: 1.25rem; }
.nav-item.active { color: var(--primary); font-weight: bold; }

.drawer-cart { position: fixed; top: 0; left: -420px; width: 380px; height: 100vh; background: var(--white); box-shadow: 5px 0 30px rgba(0,0,0,0.2); z-index: 1100; transition: left 0.3s ease; display: flex; flex-direction: column; }
.drawer-cart.open { left: 0; }
.drawer-header { padding: 18px; border-bottom: 1px solid var(--gray-border); display: flex; justify-content: space-between; align-items: center; }
.drawer-body { padding: 18px; flex-grow: 1; overflow-y: auto; }
.drawer-footer { padding: 18px; border-top: 1px solid var(--gray-border); background: var(--gray-bg); }
.overlay-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1050; display: none; }
.overlay-bg.show { display: block; }

@media (max-width: 900px) { .product-detail-wrap { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 768px) {
  body { padding-bottom: 75px; }
  .mobile-bottom-nav { display: flex; }
  .header-actions .btn-icon span, .header-actions .btn-primary { display: none; }
  .header-actions .btn-icon { padding: 8px 10px; }
  .drawer-cart { width: 100%; left: -100%; }
  .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-img-wrap { height: 180px; }
  .card-body { padding: 10px; }
  .card-title { font-size: 0.88rem; }
  .price-main { font-size: 0.95rem; }
}