/* Shop page specific styles – extends base.css without duplicating it */

/* Hero */
.shop-hero {
  position: relative;
  background: radial-gradient(1200px 400px at 80% -10%, rgba(0,163,255,0.18), transparent 60%),
              radial-gradient(900px 300px at 10% 0%, rgba(255,0,168,0.16), transparent 60%),
              linear-gradient(180deg, rgba(20,26,34,0.8), rgba(20,26,34,0.8));
}
.btn-primary {margin-top: 0;}
.hero-wrap { display: grid; gap: var(--space-10); grid-template-columns: 1.1fr; align-items: center; }
.hero-copy p { color: var(--color-text-muted); }
.hero-ctas { display: flex; gap: var(--space-4); margin: 14px 0; }
.hero-aside { position: relative; height: 180px; }
.hero-aside .glow { position: absolute; inset: 0; border-radius: var(--radius-2xl); background: var(--gradient-primary); filter: blur(48px); opacity: 0.35; }
@media (min-width: 960px) { .hero-wrap { grid-template-columns: 1.2fr 0.8fr; } .hero-aside { height: 220px; } }

/* Filters */
.filters-bar { padding: var(--space-6); }
.filters-grid { padding: 14px; align-items: center; display: flex; gap: var(--space-6); grid-template-columns: 1fr; }
.field label { display: block; margin-bottom: var(--space-2); color: var(--gray-200); font-weight: 600; }
.checkbox-field { display: flex; align-items: center; gap: var(--space-3); }
.actions { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; }
.results { color: var(--color-text-muted); font-weight: 600; }
@media (min-width: 960px) {
  .filters-grid { grid-template-columns: 1.2fr 0.8fr 0.8fr auto auto; }
}
.offer,
.review,
.card-pay {
  max-width: 376px;
}
.card-kfaq {
  max-width: 574px; width: 100%;
}
/* Product grid & cards */
.product-grid { margin-top: var(--space-6); }
.product-card { padding: 0; overflow: hidden; }
.product-media { aspect-ratio: 16/11; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.product-body { padding: var(--space-6); }
.product-title { margin-bottom: var(--space-1); }
.product-desc { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.product-meta { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.rating { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-silver); font-weight: 700; }
.stars { letter-spacing: 2px; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.value { color: var(--gray-300); font-weight: 700; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); }
.price { display: flex; align-items: baseline; gap: var(--space-3); font-weight: 700; }
.price-current { font-size: var(--font-size-xl); color: var(--gray-100); }
.price-old { color: var(--gray-500); text-decoration: line-through; font-weight: 600; }
.ribbon { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--color-accent); color: #160312; font-weight: 800; padding: 6px 10px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

/* Offers */
.offers-grid { display: flex; justify-content: space-between; gap: var(--space-6); grid-template-columns: 1fr; }
.offer h3 { margin-bottom: var(--space-2); }
@media (max-width: 960px) { 
  .offers-grid { grid-template-columns: repeat(3, 1fr); } 

  .offer,
  .review,
  .card-pay {
    max-width: 100%;
  }
  .card-kfaq {
    max-width: 100%;
  }

  .offers-grid {
    display: flex;
    flex-direction: column;
  }

  .footer-grid {
    flex-direction: column;
  }
}


/* Nav */
.primary-nav { display: none; }
.nav-list { display: flex; gap: var(--space-6); align-items: center; }
.nav-list a { color: var(--gray-200); font-weight: 600; }
.nav-list a:hover { color: var(--color-accent); }

.nav-toggle {
  width: 42px; height: 42px; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.nav-toggle:focus-visible { box-shadow: var(--shadow-glow-primary); }
.nav-toggle-bar { width: 20px; height: 2px; background: var(--color-text); display: block; margin: 2px 0; border-radius: 1px; }

/* Фикс: чтобы меню было поверх всего */
.primary-nav.open {
  z-index: 999;
}

/* Фикс: чтобы меню мягко выезжало */
.primary-nav {
  transition: transform var(--duration-normal) var(--easing-standard),
              opacity var(--duration-normal) var(--easing-standard);
  transform: translateY(-20px);
  opacity: 0;
}

.primary-nav.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .primary-nav { display: block; opacity: 1;}
}

/* Mobile menu state */
.primary-nav.open {
  height: 200px;
  position: fixed;
  inset: 64px 0 0 0; /* below header */
  background: rgba(10,11,15,0.98);
  display: block;
  padding: var(--space-8) var(--space-6);
}
.primary-nav.open .nav-list { flex-direction: column; align-items: flex-start; gap: var(--space-4); }


/* Reviews */
.reviews-grid { display: flex; justify-content: space-between; gap: var(--space-6); grid-template-columns: 1fr; }
.review blockquote p { font-size: var(--font-size-lg); }
.review-meta { color: var(--color-text-muted); margin-top: var(--space-2); }
@media (min-width: 960px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

/* Info blocks */
.info-grid { display: flex; justify-content: space-between; gap: var(--space-6); grid-template-columns: 1fr; }
.info-grid .card h2 { margin-bottom: var(--space-3); }
.list-inline { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; }
@media (min-width: 960px) { .info-grid { grid-template-columns: repeat(3, 1fr); } }

/* Contact + FAQ */
.two-col { display: flex; justify-content: space-between; gap: var(--space-6); grid-template-columns: 1fr; }
.contact-faq details { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--color-surface); margin-bottom: var(--space-3); }
.contact-faq summary { cursor: pointer; font-weight: 700; }
@media (min-width: 960px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* Toast */
.toast { position: fixed; inset-inline: auto var(--space-6); bottom: var(--space-6); background: var(--color-elevated); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 12px 16px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--duration-200) var(--easing-smooth), transform var(--duration-200) var(--easing-snappy); z-index: 80; }
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) { .toast { left: var(--space-4); right: var(--space-4); } }