*{margin:0;padding:0;box-sizing:border-box;font-family:Tahoma,"Segoe UI",sans-serif}

body{
  background:linear-gradient(135deg, #f8f9fc 0%, #eef2f7 35%, #f5f0fa 70%, #faf8f5 100%);
  background-size:200% 200%;
  animation:gradientBG 18s ease infinite;
  color:#1a1a2e;
  text-align:center;
}

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

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

.categories{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.telegram-channel-banner{margin-top:16px;display:flex;justify-content:center}
.telegram-channel-banner a{
  text-decoration:none;
  background:linear-gradient(135deg,#e0f2fe,#eef2ff);
  color:#1e3a8a;
  border:1px solid rgba(37,99,235,0.25);
  box-shadow:0 8px 20px rgba(30,64,175,0.12);
  border-radius:999px;
  padding:10px 18px;
  font-size:14px;
  font-weight:bold;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.telegram-channel-banner a strong{
  color:#0f766e;
  background:#fff;
  border-radius:999px;
  padding:2px 10px;
}

.cat-btn{
  background:linear-gradient(135deg,#7c3aed,#5b21b6);
  color:#fff;
  padding:8px 16px;
  border-radius:20px;
  cursor:pointer;
  font-size:14px;
  box-shadow:0 6px 20px rgba(124,58,237,0.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cat-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(124,58,237,0.35)}

.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:1fr}}

.card{
  background:#fff;
  border:1px solid rgba(124,58,237,0.12);
  border-radius:16px;
  padding:14px;
  box-shadow:0 8px 28px rgba(45,27,78,0.08);
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{
  box-shadow:0 14px 36px rgba(124,58,237,0.14);
  transform:translateY(-2px);
}

.card .main-img{
  width:100%;
  height:260px;
  object-fit:contain;
  background:#f8f8fc;
  border-radius:12px;
  display:block;
  border:1px solid #eee;
}

.thumbs{display:flex;justify-content:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.thumbs img{
  width:52px;height:52px;object-fit:cover;border-radius:8px;cursor:pointer;opacity:0.8;
  border:1px solid #e0e0e8;background:#fff;
}
.thumbs img:hover{opacity:1;border-color:#7c3aed}

.info{margin-top:10px;line-height:2;text-align:center;color:#333}
.price{color:#c02626;font-weight:bold;font-size:1.05rem}

.btn{
  margin-top:8px;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  color:#fff;
  padding:8px 14px;
  border-radius:10px;
  cursor:pointer;
  display:inline-block;
  font-size:14px;
}

.desc{
  margin-top:10px;font-size:14px;line-height:1.9;display:none;white-space:pre-line;
  color:#555;text-align:right;
}

section{
  margin-top:28px;
  background:#fff;
  padding:22px;
  border-radius:16px;
  line-height:2;
  border:1px solid rgba(124,58,237,0.1);
  box-shadow:0 6px 24px rgba(45,27,78,0.06);
  text-align:right;
}

section h2{color:#5b21b6;margin-bottom:12px;font-size:1.2rem;text-align:center}

.seo-text h2{color:#5b21b6;margin-bottom:8px;font-size:18px;text-align:center}
.seo-text p{opacity:0.9;text-align:right;line-height:2.1;color:#444}

.shipping-box{
  background:#f8f5ff;
  padding:18px;
  border-radius:12px;
  margin-top:10px;
  text-align:right;
  border:1px solid rgba(124,58,237,0.15);
  color:#333;
  line-height:2.1;
}

.shipping-box strong{color:#5b21b6}

.order-steps{
  background:#fffbeb;
  border:1px solid #fcd34d;
  border-radius:12px;
  padding:16px;
  margin-top:14px;
  text-align:right;
}

.order-steps ol{padding-right:22px;margin-top:8px}
.order-steps li{margin-bottom:8px}

/* Contact dock */
.contact-dock{
  position:fixed;
  bottom:24px;
  right:20px;
  left:auto;
  z-index:9000;
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:center;
}

.contact-dock .dock-circle{
  width:52px;height:52px;
  border-radius:50%;
  border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(45,27,78,0.2);
  transition:transform .15s ease;
  font-size:22px;
  background:#fff;
}
.contact-dock .dock-circle:hover,
.contact-dock .dock-support:hover{transform:scale(1.08)}

.contact-dock .dock-phone{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.contact-dock .dock-phone svg{
  width:26px;
  height:26px;
  fill:#fff;
  display:block;
}
.contact-dock .dock-whatsapp{background:#25D366}
.contact-dock .dock-telegram{background:#2AABEE}
.contact-dock .dock-whatsapp svg,
.contact-dock .dock-telegram svg{
  width:28px;
  height:28px;
  fill:#fff;
  display:block;
}
.contact-dock .dock-bale{
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  padding:3px;
  overflow:hidden;
  width:52px;
  height:52px;
  min-width:52px;
  min-height:52px;
  flex-shrink:0;
  box-shadow:0 8px 24px rgba(45,27,78,0.2);
}
.contact-dock .dock-bale img{
  width:46px;
  height:46px;
  max-width:46px;
  max-height:46px;
  object-fit:cover;
  display:block;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid rgba(37,99,235,0.2);
}

.contact-dock .dock-support{
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0;
  text-decoration:none;
  box-shadow:none;
  position:relative;
}
.contact-dock .dock-support::before{
  content:"";
  position:absolute;
  width:94px;
  height:94px;
  top:-6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,0.32) 0%, rgba(124,58,237,0.1) 45%, rgba(124,58,237,0) 75%);
  z-index:-1;
  animation:supportPulse 1.8s ease-out infinite;
}
.contact-dock .dock-support img{
  width:82px;
  height:82px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 8px 24px rgba(45,27,78,0.25);
  animation:supportShake 2.8s ease-in-out infinite;
}
.contact-dock .dock-support span{
  background:linear-gradient(135deg,#7c3aed,#5b21b6);
  color:#fff;
  padding:4px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:bold;
  line-height:1.5;
  box-shadow:0 6px 18px rgba(91,33,182,0.32);
}
@keyframes supportShake{
  0%,100%{transform:rotate(0deg)}
  8%{transform:rotate(-3deg)}
  16%{transform:rotate(3deg)}
  24%{transform:rotate(-2deg)}
  32%{transform:rotate(2deg)}
  40%{transform:rotate(0deg)}
}
@keyframes supportPulse{
  0%{transform:scale(0.92);opacity:.8}
  70%{transform:scale(1.15);opacity:.15}
  100%{transform:scale(1.2);opacity:0}
}

.support-links{
  position:absolute;
  bottom:100%;
  right:50%;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  opacity:0;
  transform:translate(50%, 12px) scale(0.95);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.support-links.is-open{
  opacity:1;
  transform:translate(50%, -8px) scale(1);
  pointer-events:auto;
}
@media (max-width:576px){
  .telegram-channel-banner a{
    font-size:13px;
    padding:9px 12px;
    flex-wrap:wrap;
    justify-content:center;
  }
}

footer{margin:26px 0 10px;opacity:0.7;font-size:13px;color:#666}

.blog-container{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.blog-card{
  background:#fafafa;border-radius:16px;padding:14px;
  border:1px solid #eee;text-align:right;
}
.blog-img{width:100%;max-height:220px;object-fit:cover;border-radius:12px;background:#f0f0f5}
.blog-title{margin-top:10px;font-size:16px;font-weight:bold;color:#2d1b4e}
.blog-btn{
  margin-top:8px;background:#5b21b6;color:#fff;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;color:#555}
.load-more{
  margin-top:14px;background:#5b21b6;color:#fff;padding:9px 18px;border-radius:22px;
  cursor:pointer;display:inline-block;
}

#faq h2{color:#5b21b6}
.faq{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.faq-item{background:#fafafa;border:1px solid #e8e8f0;border-radius:14px;overflow:hidden}
.faq-q{
  width:100%;background:transparent;border:none;color:#1a1a2e;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:#7c3aed;margin-right:10px}
.faq-item.active .faq-q::after{content:"−"}
.faq-a{
  display:none;padding:0 16px 14px;color:#555;line-height:2;font-size:13.5px;text-align:right;
}
.faq-item.active .faq-a{display:block}

.brand-badge{
  display:inline-block;
  background:linear-gradient(135deg,#ede9fe,#ddd6fe);
  color:#5b21b6;
  padding:6px 14px;
  border-radius:20px;
  font-size:13px;
  margin-top:8px;
  font-weight:bold;
}