*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}

body{
  background: linear-gradient(45deg, #1a001a, #001a33, #001a00, #331a00, #1a0033, #00331a, #33001a);
  background-size: 400% 400%;
  animation: gradientBG 12s ease infinite;
  color:#fff;
  text-align:center;
}

@keyframes gradientBG{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* بنر معرفی peykar.shop */
.peykar-banner{
  width:100%;
  padding:14px 16px 16px;
  text-align:center;
  background:linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,77,77,0.12));
  border-bottom:1px solid rgba(255,215,0,0.35);
  box-shadow:0 6px 24px rgba(0,0,0,0.35);
}
.peykar-banner__text{
  font-size:15px;
  line-height:1.9;
  color:#fff;
  margin-bottom:12px;
  font-weight:bold;
}
.peykar-banner__btn{
  display:inline-block;
  background:linear-gradient(135deg,#ffd700,#ffb300);
  color:#1a001a;
  padding:10px 22px;
  border-radius:999px;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(255,215,0,0.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.peykar-banner__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(255,215,0,0.45);
}

.container{max-width:1200px;margin:auto;padding:20px}
header{padding:28px 10px}
h1{font-size:30px;margin-bottom:10px}
.subtitle{opacity:0.92;line-height:2;margin-top:10px}

.categories{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}

.cat-btn{
  background:gold;color:#000;padding:7px 14px;border-radius:20px;cursor:pointer;font-size:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
.cat-btn:hover{transform:translateY(-1px)}

.products{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin-top:12px;
}
@media (max-width: 992px){ .products{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 576px){ .products{grid-template-columns:repeat(1,1fr)} }

.card{
  background:rgba(0,0,0,0.62);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  padding:14px;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

.main-img{
  width:100%;
  border-radius:12px;
  background:#fff;
}

.thumbs{display:flex;justify-content:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.thumbs img{
  width:56px;height:56px;object-fit:cover;border-radius:8px;cursor:pointer;opacity:0.75;
  border:1px solid rgba(255,255,255,0.12);
}
.thumbs img:hover{opacity:1}

.info{margin-top:10px;line-height:2;text-align:center}
.price{color:#ff4d4d;font-weight:bold}

.btn{
  margin-top:8px;background:gold;color:#000;padding:7px 12px;border-radius:10px;cursor:pointer;display:inline-block;
}

.desc{
  margin-top:10px;
  font-size:14px;
  line-height:1.9;
  display:none;
  white-space:pre-line;
  opacity:0.95;
}

section{
  margin-top:28px;
  background:rgba(0,0,0,0.62);
  padding:18px;
  border-radius:16px;
  line-height:2;
  border:1px solid rgba(255,255,255,0.10);
}

.seo-text h2{color:gold;margin-bottom:8px;font-size:18px}
.seo-text p{opacity:0.92;text-align:right}

.shipping-box{
  background:rgba(255,255,255,0.08);
  padding:15px;
  border-radius:12px;
  margin-top:10px;
  text-align:right;
  border:1px solid rgba(255,255,255,0.10);
}

.support{
  position:fixed;
  bottom:20px;
  right:20px;
  background:gold;
  color:#000;
  padding:12px 18px;
  border-radius:50px;
  cursor:pointer;
  font-weight:bold;
  animation:shake 1.5s infinite;
  box-shadow:0 0 18px rgba(0,0,0,0.35);
  user-select:none;
}


/* کادر ثابت برای عکس اصلی هر محصول */
.card .main-img{
  width: 100%;
  height: 260px;          /* این عدد رو با سلیقه‌ات کم/زیاد کن */
  object-fit: contain;    /* کل عکس دیده میشه (بدون برش) */
  background: #fff;       /* چون کارتت تیره‌ست، عکس‌ها تمیز دیده میشن */
  border-radius: 12px;
  display: block;
}

/* اگر میخوای عکس‌ها برش بخورن ولی همگی فول و شیک باشن */
.card .main-img.cover{
  object-fit: cover;      /* شیک‌تر ولی ممکنه لبه‌ها بریده بشه */
}

/* بندانگشتی‌ها هم یکدست */
.card .thumbs img{
  width: 52px;
  height: 52px;
  object-fit: cover;
  background: #fff;
  border-radius: 10px;
}








 .article-container{
      max-width: 1100px;
      margin: auto;
      background: #111;
      color: #fff;
      padding: 50px 30px;
      border-radius: 20px;
      line-height: 2.2;
      font-family: sans-serif;
    }

    .article-container h1,
    .article-container h2,
    .article-container h3{
      color: gold;
      text-align: center;
      margin-top: 40px;
    }

    .article-box{
      background: #000;
      border-radius: 16px;
      padding: 25px;
      margin: 25px 0;
      box-shadow: 0 0 20px rgba(255,215,0,0.1);
    }

    .article-highlight{
      color: gold;
      font-weight: bold;
    }














@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-2px)}
  50%{transform:translateX(2px)}
  75%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}

.support-links{
  position:fixed;
  bottom:80px;
  right:20px;
  display:none;
  flex-direction:column;
  gap:8px;
}
.support-links a{
  background:#fff;color:#000;padding:8px 12px;border-radius:12px;text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
}

footer{margin:26px 0 10px;opacity:0.85;font-size:13px}

/* Blog */
.blog-container{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.blog-card{background:rgba(0,0,0,0.62);border-radius:16px;padding:14px;border:1px solid rgba(255,255,255,0.10)}
.blog-img{width:100%;max-height:220px;object-fit:cover;border-radius:12px;background:#fff}
.blog-title{margin-top:10px;font-size:16px;font-weight:bold}
.blog-btn{margin-top:8px;background:gold;color:#000;padding:7px 12px;border-radius:10px;cursor:pointer;display:inline-block}
.blog-content{margin-top:10px;font-size:14px;line-height:2;white-space:pre-line;display:none;opacity:0.95}
.load-more{margin-top:14px;background:#fff;color:#000;padding:9px 18px;border-radius:22px;cursor:pointer;display:inline-block}

/* FAQ */
#faq h2{color:gold;margin-bottom:12px;font-size:18px}
.faq{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.faq-item{background:rgba(0,0,0,0.65);border:1px solid rgba(255,255,255,0.12);border-radius:14px;overflow:hidden}
.faq-q{
  width:100%;background:transparent;border:none;color:#fff;padding:14px 16px;cursor:pointer;font-size:14px;text-align:right;
  display:flex;align-items:center;justify-content:space-between;
}
.faq-q::after{content:"+";font-size:18px;color:gold;margin-right:10px}
.faq-item.active .faq-q::after{content:"−"}
.faq-a{display:none;padding:0 16px 14px;color:rgba(255,255,255,0.90);line-height:2;font-size:13.5px;text-align:right}
.faq-item.active .faq-a{display:block}

/* Site notice popup */
.site-notice{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  pointer-events:none;
}

.site-notice.is-visible{
  pointer-events:auto;
}

.site-notice__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity 0.55s ease;
}

.site-notice.is-visible .site-notice__backdrop{
  opacity:1;
}

.site-notice__card{
  position:relative;
  width:min(420px, 100%);
  background:linear-gradient(145deg, #1a0a1f 0%, #0d1528 45%, #1a1208 100%);
  border:1px solid rgba(255,215,0,0.45);
  border-radius:22px;
  padding:32px 26px 26px;
  text-align:center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 24px 60px rgba(0,0,0,0.55),
    0 0 80px rgba(255,215,0,0.15);
  transform:scale(0.88) translateY(24px);
  opacity:0;
  transition:transform 0.65s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.55s ease;
  overflow:hidden;
}

.site-notice.is-visible .site-notice__card{
  transform:scale(1) translateY(0);
  opacity:1;
}

.site-notice__glow{
  position:absolute;
  top:-40%;
  left:50%;
  width:280px;
  height:280px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,215,0,0.25) 0%, transparent 70%);
  pointer-events:none;
  animation:noticeGlow 3s ease-in-out infinite;
}

@keyframes noticeGlow{
  0%, 100%{ opacity:0.6; transform:translateX(-50%) scale(1); }
  50%{ opacity:1; transform:translateX(-50%) scale(1.08); }
}

.site-notice__close{
  position:absolute;
  top:12px;
  left:12px;
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  line-height:1;
  transition:background 0.2s ease, color 0.2s ease;
}

.site-notice__close:hover{
  background:rgba(255,215,0,0.25);
  color:gold;
}

.site-notice__icon{
  font-size:2.4rem;
  margin-bottom:8px;
  animation:noticeIcon 2s ease-in-out infinite;
}

@keyframes noticeIcon{
  0%, 100%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.08) rotate(6deg); }
}

.site-notice__title{
  font-size:1.25rem;
  color:gold;
  margin-bottom:12px;
  font-weight:700;
}

.site-notice__text{
  font-size:0.98rem;
  line-height:1.9;
  color:rgba(255,255,255,0.92);
  margin-bottom:22px;
}

.site-notice__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.site-notice__btn{
  display:block;
  width:100%;
  padding:13px 18px;
  border-radius:14px;
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  border:none;
  font-family:inherit;
  transition:transform 0.15s ease, box-shadow 0.2s ease;
}

.site-notice__btn--primary{
  background:linear-gradient(135deg, #ffe566 0%, #ffd700 50%, #e6b800 100%);
  color:#1a1000;
  box-shadow:0 8px 24px rgba(255,215,0,0.35);
}

.site-notice__btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(255,215,0,0.45);
}

.site-notice__btn--ghost{
  background:rgba(255,255,255,0.08);
  color:#fff;
  border:1px solid rgba(255,255,255,0.2);
}

.site-notice__btn--ghost:hover{
  border-color:rgba(255,215,0,0.5);
  color:gold;
}