/* Toys page styles - ShopGamePL */

.section { padding: var(--space-16) 0; }
.section-header { margin-bottom: var(--space-8); }
.section-header p { color: var(--color-text-light); }

/* Hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light)); }
.hero-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: var(--space-8); padding-top: var(--space-16); padding-bottom: var(--space-16); }
.hero-copy p { max-width: 60ch; }
.hero-cta { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.hero-visual { width: 100%; height: 260px; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); background: radial-gradient(80% 80% at 60% 40%, var(--color-accent-yellow), transparent 60%), radial-gradient(60% 60% at 30% 70%, var(--color-accent-mint), transparent 60%), var(--color-background); }
@media (max-width: 768px) { .hero-inner { grid-template-columns: 1fr; } .hero-visual { height: 180px; } }

/* Filters */
.filters { margin-bottom: var(--space-8); }
.filter-grid { align-items: end; }

/* Product cards */
.product-grid { align-items: stretch; }
.product-card { display: flex; flex-direction: column; gap: var(--space-4); }
.product-media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-neutral-100); }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-content { display: flex; flex-direction: column; gap: var(--space-3); }
.product-title { font-size: var(--font-size-lg); }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.price { font-weight: var(--font-weight-bold); color: var(--color-text); }
.product-actions { margin-top: auto; }

/* Rating */
.rating { color: var(--color-accent-yellow); display: inline-flex; gap: 2px; }
.rating .fa-regular { color: var(--color-neutral-300); }
.rating .fa-star-half-stroke { color: var(--color-accent-yellow); }

/* Reviews */
.review .review-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.review .review-author { font-size: var(--font-size-md); margin-bottom: var(--space-1); }

/* Video */
.video-responsive { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-neutral-100); }
.video-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Category chips */
.category-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 2px solid var(--color-primary-light); background: var(--color-white); color: var(--color-text); box-shadow: var(--shadow-sm); transition: all var(--transition-fast); }
.chip:hover { background: var(--color-primary-light); }
.chip.active, .chip[aria-pressed="true"] { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* Category grid */
.category-grid .category-item { text-align: left; background: var(--color-background-alt); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.category-grid .category-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.category-title { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.category-desc { color: var(--color-text-light); }

/* Lists */
.list { display: grid; gap: var(--space-2); padding-left: var(--space-4); }
.list li, .list p { position: relative; }

/* Accessibility: ensure focus visibility for chips */
.chip:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 2px; }

/* Utilities */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }

@media (max-width: 1024px) {
  .filters .filter-grid { grid-template-columns: 1fr; }
}