/* eCommerce CMS — components */
/* Product card */
.product-card { display: flex; flex-direction: column; }
.product-card .card-body { flex: 1; display: flex; flex-direction: column; }
.product-card .card-title a { color: var(--c-ink); }
.product-card .card-title a:hover { color: var(--c-primary); }
.product-card .card-actions { margin-top: auto; padding-top: var(--sp-3); display: flex; gap: var(--sp-2); }
.product-card .card-actions .btn { flex: 1; }

/* Category card */
.category-card { text-align: center; }
.category-card .card-img { aspect-ratio: 1; }
.category-card .card-body { padding: var(--sp-3); }
.category-card .card-title { font-size: .9375rem; }

/* Banner */
.banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--sp-6); }
.banner img { width: 100%; height: 320px; object-fit: cover; }
.banner-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-6); background: linear-gradient(90deg, rgba(14,17,22,.6), transparent); }
.banner-content h2 { color: #fff; font-size: 2rem; margin-bottom: var(--sp-2); }
.banner-content p { color: #e2e8f0; margin-bottom: var(--sp-4); }

/* Tabs */
.tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-4); }
.tab { padding: var(--sp-3) var(--sp-4); border: none; background: transparent; font-weight: 600; color: var(--c-muted); border-bottom: 2px solid transparent; }
.tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* Table */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--sp-3); border-bottom: 1px solid var(--c-border); text-align: left; }
.table th { font-size: .8125rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .02em; }
.table tr:hover td { background: var(--c-surface-soft); }

/* Filters */
.filters { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.filters .select { width: auto; min-width: 160px; }

/* Pagination */
.pagination { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-6); }
.pagination a, .pagination span { padding: 8px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); color: var(--c-ink); }
.pagination a:hover { background: var(--c-primary-50); }
.pagination .current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* Review */
.review { border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.review-head { display: flex; justify-content: space-between; margin-bottom: var(--sp-2); }
.stars { color: var(--c-accent); }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table td { padding: var(--sp-3); border: 1px solid var(--c-border); }
.spec-table tr:nth-child(even) td { background: var(--c-surface-soft); }
.spec-table td:first-child { font-weight: 600; width: 40%; }

/* Panel */
.panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); }
.panel h3 { margin-bottom: var(--sp-3); }