/* ═══════════════════════════════════════════════════════════════════════
   V3 — Product Grid Section ("Classified Asset Vault")
   Theme-aware: all colors from --z-* tokens
   Overrides existing .product-grid-section styles for enhanced visuals
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ SECTION BACKGROUND OVERRIDE ═══ */
.product-grid-section {
  background: linear-gradient(170deg, var(--z-bg-deep, #0a101e) 0%, var(--z-bg, #0f172a) 50%, var(--z-bg-deep, #0a101e) 100%);
}

/* Blueprint tactical grid */
.v2-pg-blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background:
    linear-gradient(color-mix(in srgb, var(--z-accent, #f59e0b) 25%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--z-accent, #f59e0b) 25%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Islamic interlocking squares */
.v2-islamic-squares {
  opacity: 0.03;
}

/* Corner classification stamps */
.v2-pg-stamp-tl,
.v2-pg-stamp-br {
  position: absolute;
  font-family: var(--v2-hud-font, 'JetBrains Mono', monospace);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--z-text-muted, #64748b);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

.v2-pg-stamp-tl { top: 24px; left: 24px; transform: rotate(-45deg); }
.v2-pg-stamp-br { bottom: 24px; right: 24px; transform: rotate(-45deg); }

/* ═══ AMBIENT GLOW OVERRIDE ═══ */
.product-grid-section .product-background::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 20%, color-mix(in srgb, var(--z-accent, #f59e0b) 8%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, color-mix(in srgb, var(--z-accent, #f59e0b) 6%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--z-purple, #7c3aed) 4%, transparent) 0%, transparent 60%);
}

/* ═══ SECTION HEADER — Clean & Sharp ═══ */

.product-grid-section .section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

/* Title */
.product-grid-section .section-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
  line-height: 1.15;
}

.product-grid-section .title-main {
  color: var(--z-text, #f1f5f9);
  margin-right: 0.4rem;
}

.product-grid-section .title-accent {
  position: relative;
  background: linear-gradient(135deg, var(--z-accent, #f59e0b), var(--z-accent-light, #fbbf24)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

/* Accent underline — clean gradient */
.product-grid-section .title-accent::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--z-accent, #f59e0b), transparent);
  opacity: 0.4;
  border-radius: 2px;
}

/* Description */
.product-grid-section .section-description {
  color: var(--z-text-muted, #64748b);
  font-size: 0.9rem;
  max-width: 480px;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}

/* ═══ FILTER PILLS — Tactical Toggle ═══ */
.product-grid-section .filter-pills {
  gap: 0.375rem;
  background: color-mix(in srgb, var(--z-surface-1, #1e293b) 50%, transparent);
  border: 1px solid var(--z-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 4px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}

.product-grid-section .pill-filter {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--z-text-sec, #94a3b8);
  cursor: pointer;
  transition: all 0.25s ease;
  gap: 0.4rem;
  display: inline-flex;
  align-items: center;
}

.product-grid-section .pill-filter:hover {
  background: color-mix(in srgb, var(--z-accent, #f59e0b) 5%, transparent);
  color: var(--z-text, #f1f5f9);
}

.product-grid-section .pill-filter.active {
  background: color-mix(in srgb, var(--z-accent, #f59e0b) 12%, transparent);
  border-color: color-mix(in srgb, var(--z-accent, #f59e0b) 30%, transparent);
  color: var(--z-accent, #f59e0b);
  box-shadow: 0 0 12px color-mix(in srgb, var(--z-accent, #f59e0b) 8%, transparent);
}

.product-grid-section .pill-filter i {
  font-size: 0.625rem;
}

/* ═══ CARD GRID STAGGER ANIMATION ═══ */
.v2-pg-stagger .products-grid > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.v2-pg-stagger.v2-in-view .products-grid > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.05s; }
.v2-pg-stagger.v2-in-view .products-grid > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.1s; }
.v2-pg-stagger.v2-in-view .products-grid > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.15s; }
.v2-pg-stagger.v2-in-view .products-grid > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.2s; }
.v2-pg-stagger.v2-in-view .products-grid > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.25s; }
.v2-pg-stagger.v2-in-view .products-grid > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 0.3s; }
.v2-pg-stagger.v2-in-view .products-grid > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 0.35s; }
.v2-pg-stagger.v2-in-view .products-grid > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 0.4s; }
.v2-pg-stagger.v2-in-view .products-grid > *:nth-child(n+9){ opacity: 1; transform: none; transition-delay: 0.45s; }

/* ═══ SECTION FOOTER — "View All" CTA ═══ */
.product-grid-section .btn-view-all {
  font-family: var(--v2-hud-font, 'JetBrains Mono', monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  background: color-mix(in srgb, var(--z-accent, #f59e0b) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--z-accent, #f59e0b) 22%, transparent);
  border-radius: 8px;
  color: var(--z-accent, #f59e0b);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
}

.product-grid-section .btn-view-all::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--z-accent, #f59e0b) 10%, transparent), transparent);
  animation: v3-pg-sweep 4s linear infinite;
}

@keyframes v3-pg-sweep {
  0%   { left: -100%; }
  100% { left: 100%; }
}

.product-grid-section .btn-view-all:hover {
  border-color: color-mix(in srgb, var(--z-accent, #f59e0b) 50%, transparent);
  background: color-mix(in srgb, var(--z-accent, #f59e0b) 10%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--z-accent, #f59e0b) 10%, transparent);
  transform: translateY(-2px);
  color: var(--z-accent, #f59e0b);
}

.product-grid-section .btn-view-all i {
  transition: transform 0.3s ease;
}

.product-grid-section .btn-view-all:hover i {
  transform: translateX(4px);
}

.product-grid-section .btn-view-all .btn-hover-effect { display: none; }

/* ═══ PAGINATION — Tactical Style ═══ */
.product-grid-section .pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.product-grid-section .pagination-number {
  font-family: var(--v2-hud-font, 'JetBrains Mono', monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--z-border, rgba(255, 255, 255, 0.08));
  background: transparent;
  color: var(--z-text-sec, #94a3b8);
  text-decoration: none;
  transition: all 0.25s ease;
}

.product-grid-section .pagination-number:hover {
  border-color: color-mix(in srgb, var(--z-accent, #f59e0b) 30%, transparent);
  color: var(--z-text, #f1f5f9);
}

.product-grid-section .pagination-number.active {
  background: color-mix(in srgb, var(--z-accent, #f59e0b) 15%, transparent);
  border-color: var(--z-accent, #f59e0b);
  color: var(--z-accent, #f59e0b);
  box-shadow: 0 0 10px color-mix(in srgb, var(--z-accent, #f59e0b) 10%, transparent);
}

.product-grid-section .pagination-arrow {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--z-border, rgba(255, 255, 255, 0.08));
  color: var(--z-text-sec, #94a3b8);
  text-decoration: none;
  font-size: 0.625rem;
  transition: all 0.25s ease;
}

.product-grid-section .pagination-arrow:hover {
  border-color: color-mix(in srgb, var(--z-accent, #f59e0b) 30%, transparent);
  color: var(--z-accent, #f59e0b);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .v2-pg-stamp-tl, .v2-pg-stamp-br { display: none; }
  .v2-pg-blueprint { opacity: 0.02; }

  .product-grid-section .filter-pills {
    padding: 3px;
    gap: 0.25rem;
  }

  .product-grid-section .pill-filter {
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
  }
}

@media (max-width: 480px) {
  .product-grid-section .pill-filter {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-pg-stagger .products-grid > * {
    opacity: 1; transform: none; transition: none;
  }
  .product-grid-section .btn-view-all::before { animation: none; }
}