/* BarakaCart — Design system
 Dark premium aesthetic with gold accent. Halal = trust + care + quality.
 Fonts: Outfit (headings) + Plus Jakarta Sans (body) from Google Fonts.
 -----------------------------------------------------------------------*/
:root {
 --bg: #0a0a0f;
 --bg-card: #12121a;
 --bg-elevated: #1a1a26;
 --bg-input: #161622;
 --fg: #e8e6e1;
 --fg-muted: #9a9890;
 --fg-subtle: #5a5850;
 --accent: #c5a54e;
 --accent-glow: rgba(197, 165, 78, 0.15);
 --accent-light: #d4b85e;
 --accent-dim: rgba(197, 165, 78, 0.4);
 --green: #22c55e;
 --red: #ef4444;
 --border: rgba(255,255,255,0.07);
 --border-accent: rgba(197, 165, 78, 0.2);
 --radius: 16px;
 --radius-sm: 10px;
 --radius-xs: 6px;
 --shadow: 0 4px 24px rgba(0,0,0,0.4);
 --shadow-accent: 0 4px 24px rgba(197,165,78,0.15);
 --transition: 0.2s ease}
*, *::before, *::after { margin: 0;padding: 0;box-sizing: border-box}
html { scroll-behavior: smooth}
body {
 background: var(--bg);
 color: var(--fg);
 font-family: 'Plus Jakarta Sans', sans-serif;
 line-height: 1.6;
 -webkit-font-smoothing: antialiased;
 min-height: 100vh}
h1, h2, h3, h4, h5 {
 font-family: 'Outfit', sans-serif;
 line-height: 1.2;
 letter-spacing: -0.02em}
a { color: inherit;text-decoration: none}
img { max-width: 100%;display: block}
button, input, select, textarea { font: inherit}
.accent { color: var(--accent)}
.muted { color: var(--fg-muted)}
/* ── Container ── */
.container { max-width: 1200px;margin: 0 auto;padding: 0 20px}
/* ── Navbar ── */
.navbar {
 position: sticky;
 top: 0;
 z-index: 100;
 background: rgba(10,10,15,0.88);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--border);
 padding: 0}
.navbar-inner {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
 height: 64px;
 display: flex;
 align-items: center;
 gap: 24px}
.navbar-logo {
 display: flex;
 align-items: center;
 gap: 10px;
 font-family: 'Outfit', sans-serif;
 font-size: 1.3rem;
 font-weight: 800;
 letter-spacing: -0.03em;
 color: var(--fg);
 flex-shrink: 0}
.navbar-logo span { color: var(--accent)}
.navbar-logo .logo-icon {
 width: 32px;
 height: 32px;
 background: var(--accent);
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1rem}
.navbar-search {
 flex: 1;
 max-width: 480px;
 position: relative}
.navbar-search input {
 width: 100%;
 background: var(--bg-input);
 border: 1px solid var(--border);
 border-radius: 100px;
 padding: 9px 16px 9px 40px;
 color: var(--fg);
 font-size: 0.875rem;
 transition: border-color var(--transition);
 outline: none}
.navbar-search input:focus { border-color: var(--accent-dim)}
.navbar-search input::placeholder { color: var(--fg-subtle)}
.navbar-search .search-icon {
 position: absolute;
 left: 14px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--fg-subtle);
 pointer-events: none}
.navbar-nav {
 display: flex;
 align-items: center;
 gap: 4px;
 margin-left: auto}
.navbar-nav a {
 padding: 7px 14px;
 border-radius: var(--radius-xs);
 font-size: 0.875rem;
 font-weight: 500;
 color: var(--fg-muted);
 transition: color var(--transition), background var(--transition)}
.navbar-nav a:hover, .navbar-nav a.active { color: var(--fg);background: var(--bg-elevated)}
/* ── Hero ── */
.hero {
 position: relative;
 padding: 100px 20px 80px;
 text-align: center;
 overflow: hidden}
.hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background:
 radial-gradient(ellipse 80% 50% at 50% -10%, var(--accent-glow) 0%, transparent 60%),
 radial-gradient(ellipse 40% 40% at 80% 80%, rgba(197,165,78,0.05) 0%, transparent 50%);
 pointer-events: none}
.hero-badge {
 display: inline-block;
 padding: 5px 16px;
 background: var(--accent-glow);
 border: 1px solid rgba(197,165,78,0.25);
 border-radius: 100px;
 font-size: 0.75rem;
 font-weight: 600;
 color: var(--accent);
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin-bottom: 24px}
.hero h1 {
 font-size: clamp(2.2rem, 5vw, 4rem);
 font-weight: 800;
 margin-bottom: 20px;
 max-width: 700px;
 margin-left: auto;
 margin-right: auto}
.hero p {
 font-size: 1.1rem;
 color: var(--fg-muted);
 max-width: 520px;
 margin: 0 auto 40px}
.hero-search {
 display: flex;
 max-width: 560px;
 margin: 0 auto 40px;
 position: relative;
 z-index: 1}
.hero-search input {
 flex: 1;
 background: var(--bg-card);
 border: 1px solid var(--border-accent);
 border-right: none;
 border-radius: var(--radius-sm) 0 0 var(--radius-sm);
 padding: 14px 20px;
 color: var(--fg);
 font-size: 0.95rem;
 outline: none;
 transition: border-color var(--transition)}
.hero-search input:focus { border-color: var(--accent-dim)}
.hero-search input::placeholder { color: var(--fg-subtle)}
.hero-search button {
 background: var(--accent);
 border: none;
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 padding: 14px 24px;
 color: #000;
 font-weight: 700;
 cursor: pointer;
 transition: background var(--transition);
 font-size: 0.9rem}
.hero-search button:hover { background: var(--accent-light)}
.hero-stats {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0;
 flex-wrap: wrap}
.hero-stat {
 padding: 12px 28px;
 border-right: 1px solid var(--border);
 text-align: center}
.hero-stat:last-child { border-right: none}
.hero-stat-num {
 font-family: 'Outfit', sans-serif;
 font-size: 1.5rem;
 font-weight: 800;
 color: var(--accent);
 display: block}
.hero-stat-label { font-size: 0.78rem;color: var(--fg-muted)}
/* ── Section headers ── */
.section { padding: 60px 0}
.section-header {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 margin-bottom: 32px;
 flex-wrap: wrap;
 gap: 12px}
.section-title {
 font-size: 1.6rem;
 font-weight: 700}
.section-link {
 font-size: 0.875rem;
 color: var(--accent);
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 4px;
 transition: gap var(--transition)}
.section-link:hover { gap: 8px}
/* ── Category Grid ── */
.categories-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
 gap: 12px}
.category-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 24px 20px;
 text-align: center;
 cursor: pointer;
 transition: border-color var(--transition), background var(--transition), transform var(--transition);
 display: block}
.category-card:hover {
 border-color: var(--border-accent);
 background: var(--bg-elevated);
 transform: translateY(-2px)}
.category-icon { font-size: 2rem;margin-bottom: 12px;display: block}
.category-name { font-weight: 600;font-size: 0.9rem;margin-bottom: 4px}
.category-count { font-size: 0.78rem;color: var(--fg-muted)}
/* ── Product Grid ── */
.products-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 gap: 16px}
.product-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 overflow: hidden;
 transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
 display: flex;
 flex-direction: column}
.product-card:hover {
 border-color: var(--border-accent);
 transform: translateY(-3px);
 box-shadow: var(--shadow-accent)}
.product-img {
 position: relative;
 aspect-ratio: 1;
 overflow: hidden;
 background: var(--bg-elevated)}
.product-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.4s ease}
.product-card:hover .product-img img { transform: scale(1.05)}
.product-badges {
 position: absolute;
 top: 10px;
 left: 10px;
 display: flex;
 flex-direction: column;
 gap: 4px}
.badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 3px 8px;
 border-radius: 4px;
 font-size: 0.7rem;
 font-weight: 700;
 white-space: nowrap}
.badge-halal { background: rgba(34,197,94,0.15);color: #22c55e;border: 1px solid rgba(34,197,94,0.2)}
.badge-douteux { background: rgba(251,191,36,0.15);color: #fbbf24;border: 1px solid rgba(251,191,36,0.25)}
.badge-haram { background: rgba(239,68,68,0.15);color: #ef4444;border: 1px solid rgba(239,68,68,0.25)}
.badge-featured { background: rgba(197,165,78,0.15);color: var(--accent);border: 1px solid var(--border-accent)}
.product-body { padding: 16px;flex: 1;display: flex;flex-direction: column}
.product-category {
 font-size: 0.72rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--accent);
 margin-bottom: 6px}
.product-name {
 font-size: 0.9rem;
 font-weight: 600;
 line-height: 1.35;
 margin-bottom: 10px;
 flex: 1;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden}
.product-rating {
 display: flex;
 align-items: center;
 gap: 6px;
 margin-bottom: 10px}
.stars { color: var(--accent);font-size: 0.8rem;letter-spacing: 1px}
.rating-num { font-size: 0.8rem;font-weight: 600;color: var(--fg-muted)}
.product-footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-top: auto}
.product-price {
 font-family: 'Outfit', sans-serif;
 font-size: 1.05rem;
 font-weight: 700;
 color: var(--fg)}
.btn-affiliate {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 14px;
 background: var(--accent);
 color: #000;
 border-radius: var(--radius-xs);
 font-size: 0.8rem;
 font-weight: 700;
 border: none;
 cursor: pointer;
 transition: background var(--transition), transform var(--transition);
 white-space: nowrap}
.btn-affiliate:hover { background: var(--accent-light);transform: translateY(-1px)}
.btn-affiliate-lg {
 padding: 14px 28px;
 font-size: 1rem;
 border-radius: var(--radius-sm);
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: var(--accent);
 color: #000;
 font-weight: 700;
 border: none;
 cursor: pointer;
 transition: background var(--transition), transform var(--transition), box-shadow var(--transition)}
.btn-affiliate-lg:hover {
 background: var(--accent-light);
 transform: translateY(-2px);
 box-shadow: var(--shadow-accent)}
/* ── Filters bar ── */
.filters-bar {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 28px;
 flex-wrap: wrap}
.filter-label { font-size: 0.875rem;color: var(--fg-muted);margin-right: 4px}
.filter-btn {
 padding: 7px 16px;
 border: 1px solid var(--border);
 border-radius: 100px;
 background: transparent;
 color: var(--fg-muted);
 font-size: 0.82rem;
 font-weight: 500;
 cursor: pointer;
 transition: all var(--transition)}
.filter-btn:hover, .filter-btn.active {
 border-color: var(--accent);
 color: var(--accent);
 background: var(--accent-glow)}
/* ── Product detail ── */
.product-detail {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 48px;
 align-items: start;
 padding: 60px 0}
.product-detail-img {
 aspect-ratio: 1;
 border-radius: var(--radius);
 overflow: hidden;
 background: var(--bg-card);
 border: 1px solid var(--border)}
.product-detail-img img { width: 100%;height: 100%;object-fit: cover}
.product-detail-info { position: sticky;top: 80px}
.product-detail-category {
 font-size: 0.8rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--accent);
 margin-bottom: 12px}
.product-detail-name { font-size: 2rem;font-weight: 800;margin-bottom: 16px}
.product-detail-rating { display: flex;align-items: center;gap: 10px;margin-bottom: 20px}
.product-detail-price {
 font-family: 'Outfit', sans-serif;
 font-size: 2rem;
 font-weight: 800;
 color: var(--accent);
 margin-bottom: 20px}
.product-detail-desc { color: var(--fg-muted);line-height: 1.7;margin-bottom: 28px}
.halal-badge-detail {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 18px;
 background: rgba(34,197,94,0.08);
 border: 1px solid rgba(34,197,94,0.2);
 border-radius: var(--radius-sm);
 color: #22c55e;
 font-size: 0.875rem;
 font-weight: 600;
 margin-bottom: 16px}
.verdict-badge-detail {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 18px;
 border-radius: var(--radius-sm);
 font-size: 0.875rem;
 font-weight: 600;
 margin-bottom: 16px}
.verdict-douteux {
 background: rgba(251,191,36,0.08);
 border: 1px solid rgba(251,191,36,0.25);
 color: #fbbf24}
.verdict-haram {
 background: rgba(239,68,68,0.08);
 border: 1px solid rgba(239,68,68,0.25);
 color: #ef4444}
.verdict-info {
 background: var(--bg-elevated);
 border-radius: var(--radius-xs);
 padding: 12px 16px;
 margin-bottom: 12px;
 font-size: 0.875rem;
 line-height: 1.6}
.verdict-info h3 {
 font-size: 0.8rem;
 font-weight: 700;
 margin: 0 0 6px 0;
 text-transform: uppercase;
 letter-spacing: 0.04em}
.verdict-info p { color: var(--fg-muted);margin: 0}
.verdict-problems { border-left: 3px solid #fbbf24}
.verdict-problems h3 { color: #fbbf24}
.verdict-alternative { border-left: 3px solid #22c55e}
.verdict-alternative h3 { color: #22c55e}
.verdict-source { border-left: 3px solid var(--fg-subtle)}
.verdict-source h3 { color: var(--fg-muted)}
.certification-info {
 background: var(--bg-elevated);
 border: 1px solid var(--border-accent);
 border-radius: var(--radius-sm);
 padding: 16px 20px;
 margin-bottom: 20px}
.cert-details { display: flex;flex-direction: column;gap: 8px}
.cert-row { display: flex;gap: 12px;align-items: baseline}
.cert-row dt {
 font-size: 0.8rem;
 color: var(--fg-muted);
 min-width: 200px;
 flex-shrink: 0}
.cert-row dd {
 font-size: 0.875rem;
 font-weight: 600;
 color: var(--fg)}
.source-badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 5px 12px;
 background: var(--bg-elevated);
 border: 1px solid var(--border);
 border-radius: 100px;
 font-size: 0.78rem;
 color: var(--fg-muted);
 margin-bottom: 24px}
/* ── Blog ── */
.articles-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 gap: 20px}
.article-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 overflow: hidden;
 transition: border-color var(--transition), transform var(--transition);
 display: block}
.article-card:hover { border-color: var(--border-accent);transform: translateY(-2px)}
.article-cover { aspect-ratio: 16/9;overflow: hidden;background: var(--bg-elevated)}
.article-cover img { width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s ease}
.article-card:hover .article-cover img { transform: scale(1.04)}
.article-body { padding: 20px}
.article-cat {
 font-size: 0.72rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--accent);
 margin-bottom: 8px}
.article-title { font-size: 1.05rem;font-weight: 700;margin-bottom: 10px;line-height: 1.35}
.article-excerpt { font-size: 0.875rem;color: var(--fg-muted);line-height: 1.6;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden}
.article-date { font-size: 0.75rem;color: var(--fg-subtle);margin-top: 12px}
/* ── Article detail ── */
.article-detail { max-width: 760px;margin: 0 auto;padding: 60px 0}
.article-detail h1 { font-size: clamp(1.8rem, 4vw, 2.8rem);font-weight: 800;margin-bottom: 16px}
.article-content { line-height: 1.8;color: var(--fg-muted)}
.article-content h2 { font-size: 1.4rem;color: var(--fg);margin: 32px 0 12px}
.article-content p { margin-bottom: 16px}
/* ── Search ── */
.search-header { padding: 48px 0 32px}
.search-header h1 { font-size: 1.8rem;font-weight: 800}
.search-results-count { color: var(--fg-muted);font-size: 0.9rem;margin-top: 4px}
/* ── Page header ── */
.page-header {
 padding: 60px 0 40px;
 border-bottom: 1px solid var(--border);
 margin-bottom: 48px}
.page-header h1 { font-size: clamp(1.8rem, 4vw, 2.8rem);font-weight: 800;margin-bottom: 8px}
.page-header p { color: var(--fg-muted)}
.breadcrumb { display: flex;align-items: center;gap: 8px;font-size: 0.82rem;color: var(--fg-subtle);margin-bottom: 16px}
.breadcrumb a { color: var(--fg-muted);transition: color var(--transition)}
.breadcrumb a:hover { color: var(--accent)}
.breadcrumb span { color: var(--fg-subtle)}
/* ── Trust bar ── */
.trust-bar {
 background: var(--bg-card);
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 padding: 20px 0}
.trust-items {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 40px;
 flex-wrap: wrap}
.trust-item {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 0.82rem;
 color: var(--fg-muted);
 font-weight: 500}
.trust-icon { font-size: 1.1rem}
/* ── Footer ── */
.footer {
 background: var(--bg-card);
 border-top: 1px solid var(--border);
 padding: 60px 0 32px;
 margin-top: 80px}
.footer-grid {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1fr;
 gap: 48px;
 margin-bottom: 48px}
.footer-brand-name {
 font-family: 'Outfit', sans-serif;
 font-size: 1.2rem;
 font-weight: 800;
 margin-bottom: 12px}
.footer-brand-desc { font-size: 0.875rem;color: var(--fg-muted);line-height: 1.6}
.footer-col h4 { font-size: 0.8rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.1em;color: var(--fg-subtle);margin-bottom: 16px}
.footer-col ul { list-style: none;display: flex;flex-direction: column;gap: 10px}
.footer-col ul li a { font-size: 0.875rem;color: var(--fg-muted);transition: color var(--transition)}
.footer-col ul li a:hover { color: var(--accent)}
.footer-bottom {
 border-top: 1px solid var(--border);
 padding-top: 24px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 12px}
.footer-bottom p { font-size: 0.8rem;color: var(--fg-subtle)}
.footer-disclaimer { font-size: 0.75rem;color: var(--fg-subtle)}
/* ── Utility ── */
.text-center { text-align: center}
.mt-4 { margin-top: 16px}
.mb-4 { margin-bottom: 16px}
.empty-state { text-align: center;padding: 60px 20px;color: var(--fg-muted)}
.empty-state .empty-icon { font-size: 3rem;margin-bottom: 16px}
/* ── Admin panel ── */
.admin-layout { display: grid;grid-template-columns: 220px 1fr;min-height: 100vh}
.admin-sidebar {
 background: var(--bg-card);
 border-right: 1px solid var(--border);
 padding: 24px 0;
 position: sticky;
 top: 0;
 height: 100vh;
 overflow-y: auto}
.admin-sidebar .logo { padding: 0 20px 24px;font-family: 'Outfit', sans-serif;font-weight: 800;font-size: 1.1rem;border-bottom: 1px solid var(--border);margin-bottom: 16px}
.admin-nav a { display: flex;align-items: center;gap: 10px;padding: 10px 20px;font-size: 0.875rem;font-weight: 500;color: var(--fg-muted);transition: all var(--transition)}
.admin-nav a:hover, .admin-nav a.active { color: var(--fg);background: var(--bg-elevated)}
.admin-nav a.active { border-left: 2px solid var(--accent)}
.admin-main { padding: 40px;overflow-x: auto}
.admin-main h1 { font-size: 1.6rem;font-weight: 700;margin-bottom: 28px}
.admin-stats { display: grid;grid-template-columns: repeat(4, 1fr);gap: 16px;margin-bottom: 32px}
.admin-stat {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 padding: 20px}
.admin-stat-label { font-size: 0.78rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.08em;color: var(--fg-subtle);margin-bottom: 8px}
.admin-stat-val { font-family: 'Outfit', sans-serif;font-size: 2rem;font-weight: 800;color: var(--accent)}
.admin-table-wrap { background: var(--bg-card);border: 1px solid var(--border);border-radius: var(--radius-sm);overflow: hidden}
.admin-table { width: 100%;border-collapse: collapse;font-size: 0.875rem}
.admin-table th { padding: 12px 16px;text-align: left;font-size: 0.75rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.06em;color: var(--fg-subtle);background: var(--bg-elevated);border-bottom: 1px solid var(--border)}
.admin-table td { padding: 12px 16px;border-bottom: 1px solid var(--border);color: var(--fg-muted);vertical-align: middle}
.admin-table tr:last-child td { border-bottom: none}
.admin-table tr:hover td { background: var(--bg-elevated)}
.btn { display: inline-flex;align-items: center;gap: 6px;padding: 8px 16px;border-radius: var(--radius-xs);font-size: 0.82rem;font-weight: 600;border: 1px solid var(--border);background: transparent;color: var(--fg-muted);cursor: pointer;transition: all var(--transition);text-decoration: none}
.btn:hover { color: var(--fg);border-color: var(--fg-muted)}
.btn-primary { background: var(--accent);border-color: var(--accent);color: #000}
.btn-primary:hover { background: var(--accent-light);border-color: var(--accent-light)}
.btn-danger { border-color: var(--red);color: var(--red)}
.btn-danger:hover { background: rgba(239,68,68,0.1)}
.form-group { margin-bottom: 20px}
.form-label { display: block;font-size: 0.82rem;font-weight: 600;margin-bottom: 6px;color: var(--fg-muted)}
.form-control {
 width: 100%;
 background: var(--bg-input);
 border: 1px solid var(--border);
 border-radius: var(--radius-xs);
 padding: 10px 14px;
 color: var(--fg);
 font-size: 0.875rem;
 transition: border-color var(--transition);
 outline: none}
.form-control:focus { border-color: var(--accent-dim)}
.form-control::placeholder { color: var(--fg-subtle)}
textarea.form-control { resize: vertical;min-height: 100px}
.form-check { display: flex;align-items: center;gap: 8px;cursor: pointer}
.form-check input[type=checkbox] { width: 16px;height: 16px;accent-color: var(--accent);cursor: pointer}
.form-row { display: grid;grid-template-columns: 1fr 1fr;gap: 16px}
.admin-form { max-width: 760px;background: var(--bg-card);border: 1px solid var(--border);border-radius: var(--radius);padding: 32px}
.alert { padding: 12px 16px;border-radius: var(--radius-xs);font-size: 0.875rem;margin-bottom: 20px}
.alert-error { background: rgba(239,68,68,0.1);border: 1px solid rgba(239,68,68,0.2);color: #f87171}
.alert-success { background: rgba(34,197,94,0.1);border: 1px solid rgba(34,197,94,0.2);color: #4ade80}
.login-wrap { min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 20px}
.login-card { width: 100%;max-width: 400px;background: var(--bg-card);border: 1px solid var(--border);border-radius: var(--radius);padding: 40px}
.login-title { font-size: 1.5rem;font-weight: 800;margin-bottom: 8px;text-align: center}
.login-sub { text-align: center;color: var(--fg-muted);font-size: 0.875rem;margin-bottom: 28px}
/* ── Newsletter section (above footer) ── */
.newsletter-section {
 padding: 56px 0;
 background: var(--bg-card);
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border)}
.newsletter-box {
 display: flex;
 align-items: center;
 gap: 32px;
 background: var(--bg-elevated);
 border: 1px solid var(--border-accent);
 border-radius: var(--radius);
 padding: 40px 48px}
.newsletter-icon { font-size: 2.4rem;flex-shrink: 0}
.newsletter-copy { flex: 1}
.newsletter-title { font-size: 1.5rem;font-weight: 800;margin-bottom: 8px}
.newsletter-desc { color: var(--fg-muted);font-size: 0.95rem}
.newsletter-form { flex-shrink: 0;min-width: 300px}
.newsletter-fields { display: flex;gap: 0}
.newsletter-input {
 flex: 1;
 background: var(--bg-input);
 border: 1px solid var(--border-accent);
 border-right: none;
 border-radius: var(--radius-sm) 0 0 var(--radius-sm);
 padding: 12px 16px;
 color: var(--fg);
 font-size: 0.9rem;
 outline: none;
 transition: border-color var(--transition)}
.newsletter-input:focus { border-color: var(--accent)}
.newsletter-input::placeholder { color: var(--fg-subtle)}
.newsletter-btn {
 background: var(--accent);
 color: #0a0a0f;
 border: none;
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 padding: 12px 20px;
 font-weight: 700;
 font-size: 0.875rem;
 cursor: pointer;
 transition: background var(--transition), opacity var(--transition);
 white-space: nowrap}
.newsletter-btn:hover { background: var(--accent-light)}
.newsletter-btn:disabled { opacity: 0.6;cursor: default}
.newsletter-msg {
 font-size: 0.82rem;
 margin-top: 8px;
 min-height: 18px;
 display: block}
/* Mobile sticky bar */
.newsletter-mobile-bar {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 200;
 background: var(--bg-elevated);
 border-top: 1px solid var(--border-accent);
 padding: 12px 16px;
 transform: translateY(100%);
 transition: transform 0.35s ease;
 display: flex;
 align-items: center;
 gap: 8px}
.newsletter-mobile-bar--visible { transform: translateY(0)}
.newsletter-mobile-form { display: flex;flex: 1;gap: 0}
.newsletter-mobile-input {
 flex: 1;
 background: var(--bg-input);
 border: 1px solid var(--border-accent);
 border-right: none;
 border-radius: var(--radius-xs) 0 0 var(--radius-xs);
 padding: 10px 14px;
 color: var(--fg);
 font-size: 0.85rem;
 outline: none}
.newsletter-mobile-btn {
 background: var(--accent);
 color: #0a0a0f;
 border: none;
 border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
 padding: 10px 14px;
 font-weight: 700;
 font-size: 0.8rem;
 cursor: pointer;
 white-space: nowrap}
.newsletter-mobile-close {
 background: none;
 border: none;
 color: var(--fg-subtle);
 font-size: 1.3rem;
 cursor: pointer;
 padding: 4px 6px;
 line-height: 1;
 flex-shrink: 0}
.newsletter-mobile-msg { font-size: 0.78rem;flex-basis: 100%;margin-top: 4px}
/* Blog popup */
.nl-popup-overlay {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.6);
 z-index: 300;
 backdrop-filter: blur(4px)}
.nl-popup-overlay--visible { display: block}
.nl-popup {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 301;
 width: 90%;
 max-width: 440px;
 background: var(--bg-elevated);
 border: 1px solid var(--border-accent);
 border-radius: var(--radius);
 padding: 40px 36px 32px;
 text-align: center}
.nl-popup--visible { display: block}
.nl-popup-close {
 position: absolute;
 top: 14px;
 right: 16px;
 background: none;
 border: none;
 color: var(--fg-subtle);
 font-size: 1.4rem;
 cursor: pointer;
 line-height: 1}
.nl-popup-close:hover { color: var(--fg)}
.nl-popup-icon { font-size: 2.4rem;margin-bottom: 12px}
.nl-popup-title { font-size: 1.3rem;font-weight: 800;margin-bottom: 8px}
.nl-popup-desc { color: var(--fg-muted);font-size: 0.9rem;margin-bottom: 20px}
.nl-popup-form .newsletter-input {
 border-radius: var(--radius-sm);
 border-right: 1px solid var(--border-accent);
 margin-bottom: 10px;
 width: 100%}
.nl-popup-form .newsletter-input:focus { border-color: var(--accent)}
.nl-popup-form .newsletter-btn {
 border-radius: var(--radius-sm)}
/* ── Mobile ── */
@media (max-width: 768px) {
 .navbar-inner { gap: 12px}
 .navbar-search { max-width: 200px}
 .navbar-nav { display: none}
 .hero { padding: 60px 20px 48px}
 .hero-stats { gap: 0}
 .hero-stat { padding: 10px 16px}
 .products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));gap: 10px}
 .categories-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr))}
 .product-detail { grid-template-columns: 1fr;gap: 28px}
 .product-detail-info { position: static}
 .footer-grid { grid-template-columns: 1fr 1fr;gap: 32px}
 .admin-layout { grid-template-columns: 1fr}
 .admin-sidebar { display: none}
 .admin-stats { grid-template-columns: 1fr 1fr}
 .form-row { grid-template-columns: 1fr}
 .articles-grid { grid-template-columns: 1fr}
 .newsletter-box { flex-direction: column;align-items: flex-start;padding: 28px 24px;gap: 20px}
 .newsletter-form { width: 100%;min-width: unset}
 /* Mobile bar shown by JS — hide section form on small screens to avoid duplication */
 .newsletter-section .newsletter-form { display: none}
 .nl-popup { display: none !important} /* no popup on mobile — use sticky bar instead */}