@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #fafafa; --fg: #1a1d2e; --card: #ffffff; --primary: #3366cc; --primary-fg: #ffffff;
  --secondary: #eef0f4; --muted: #6b7280; --accent: #e8622a; --accent-fg: #ffffff;
  --border: #e5e7eb; --sale: #dc2626; --sale-fg: #fff; --success: #16a34a;
  --radius: 0.75rem; --font-display: 'Playfair Display', serif; --font-body: 'DM Sans', sans-serif;
  --banner-gradient: linear-gradient(135deg, #3366cc, #7c3aed, #e8622a);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font-body); background: var(--bg); color: var(--fg); }
h1,h2,h3,h4 { font-family: var(--font-display); }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 16px; }

/* Banner */
.top-banner { background: var(--banner-gradient); text-align:center; padding:10px 16px; }
.top-banner p { color: var(--primary-fg); font-size:14px; font-weight:600; }

/* Header */
.header { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; max-width:1200px; margin:0 auto; }
.logo { font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--primary); }
.logo span { color:var(--accent); }
.nav { display:flex; gap:4px; }
.nav a { padding:8px 14px; border-radius:6px; font-size:14px; font-weight:500; transition:all 0.2s; }
.nav a:hover, .nav a.active { background:var(--primary); color:var(--primary-fg); }
.cart-btn { position:relative; display:flex; align-items:center; gap:8px; background:var(--secondary); padding:8px 14px; border-radius:6px; border:none; cursor:pointer; font-size:14px; font-weight:500; }
.cart-badge { position:absolute; top:-8px; right:-8px; background:var(--accent); color:var(--accent-fg); width:20px; height:20px; border-radius:50%; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mobile-menu-btn { display:none; background:none; border:none; cursor:pointer; font-size:24px; }

/* Hero */
.hero { position:relative; overflow:hidden; min-height:400px; display:flex; align-items:center; }
.hero img.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to right, rgba(26,29,46,0.8), transparent); }
.hero-content { position:relative; z-index:2; padding:60px 16px; max-width:1200px; margin:0 auto; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.btn-accent { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--accent-fg); padding:12px 24px; border-radius:8px; font-weight:700; transition:opacity 0.2s; }
.btn-accent:hover { opacity:0.9; }
.btn-outline { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#fff; padding:12px 24px; border-radius:8px; font-weight:500; }

/* Trust bar */
.trust-bar { border-bottom:1px solid var(--border); background:var(--card); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:16px; }
.trust-item { display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; color:var(--muted); }
.trust-item strong { color:var(--fg); }

/* Section */
.section { padding:48px 0; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.section-title { font-size:28px; font-weight:700; }
.view-all { color:var(--primary); font-weight:600; font-size:14px; }
.view-all:hover { text-decoration:underline; }

/* Product grid */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform 0.3s, box-shadow 0.3s; position:relative; }
.product-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px -12px rgba(0,0,0,0.15); }
.sale-badge { position:absolute; left:12px; top:12px; z-index:2; background:var(--sale); color:var(--sale-fg); padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; }
.product-img { aspect-ratio:1; overflow:hidden; background:var(--secondary); }
.product-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.product-card:hover .product-img img { transform:scale(1.1); }
.product-info { padding:16px; }
.product-cat { font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:4px; }
.product-name { font-family:var(--font-display); font-size:15px; font-weight:600; margin-bottom:4px; line-height:1.3; }
.product-desc { font-size:13px; color:var(--muted); margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-bottom { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.product-price { font-size:18px; font-weight:700; color:var(--primary); }
.product-price-old { font-size:13px; color:var(--muted); text-decoration:line-through; margin-left:8px; }
.btn-add { display:flex; align-items:center; gap:6px; background:var(--primary); color:var(--primary-fg); border:none; padding:8px 14px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; transition:opacity 0.2s; }
.btn-add:hover { opacity:0.9; }
.btn-view { display:flex; width:100%; align-items:center; justify-content:center; gap:6px; border:1px solid var(--primary); color:var(--primary); background:none; padding:8px; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.2s; }
.btn-view:hover { background:var(--primary); color:var(--primary-fg); }

/* Categories */
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cat-card { border:1px solid var(--border); border-radius:12px; padding:24px; text-align:center; transition:transform 0.3s, box-shadow 0.3s; }
.cat-card:hover { transform:translateY(-4px); box-shadow:0 10px 30px -10px rgba(0,0,0,0.1); }
.cat-card.blue { background:#eff6ff; color:#2563eb; }
.cat-card.amber { background:#fffbeb; color:#d97706; }
.cat-card.green { background:#f0fdf4; color:#16a34a; }
.cat-card.purple { background:#faf5ff; color:#9333ea; }
.cat-icon { font-size:40px; margin-bottom:8px; }
.cat-name { font-family:var(--font-display); font-size:18px; font-weight:600; }
.cat-count { font-size:13px; opacity:0.7; }

/* Mid banner */
.mid-banner { background:var(--banner-gradient); padding:48px 16px; text-align:center; }
.mid-banner h2 { font-size:36px; font-weight:700; color:#fff; margin-bottom:12px; }
.mid-banner p { color:rgba(255,255,255,0.8); font-size:16px; margin-bottom:20px; }
.btn-white { display:inline-flex; align-items:center; gap:8px; background:var(--card); color:var(--fg); padding:12px 32px; border-radius:8px; font-weight:700; }

/* Newsletter */
.newsletter { background:var(--secondary); padding:48px 16px; text-align:center; }
.newsletter h2 { font-size:28px; font-weight:700; margin-bottom:8px; }
.newsletter p { color:var(--muted); margin-bottom:20px; }
.newsletter-form { max-width:400px; margin:0 auto; display:flex; gap:8px; }
.newsletter-form input { flex:1; padding:12px 16px; border:1px solid var(--border); border-radius:8px; background:var(--card); font-size:14px; }
.newsletter-form button { background:var(--primary); color:var(--primary-fg); border:none; padding:12px 24px; border-radius:8px; font-weight:600; cursor:pointer; }

/* Footer */
.footer { border-top:1px solid var(--border); background:var(--card); }
.footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding:48px 16px; max-width:1200px; margin:0 auto; }
.footer h3 { font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--primary); margin-bottom:12px; }
.footer h3 span { color:var(--accent); }
.footer h4 { font-family:var(--font-display); font-weight:600; margin-bottom:12px; }
.footer p, .footer a { font-size:14px; color:var(--muted); display:block; margin-bottom:8px; }
.footer a:hover { color:var(--primary); }
.footer-bottom { border-top:1px solid var(--border); text-align:center; padding:20px; font-size:13px; color:var(--muted); }

/* Cart Drawer */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:100; display:none; }
.cart-overlay.open { display:block; }
.cart-drawer { position:fixed; top:0; right:-400px; width:380px; max-width:90vw; height:100vh; background:var(--card); z-index:101; transition:right 0.3s; box-shadow:-4px 0 20px rgba(0,0,0,0.1); display:flex; flex-direction:column; }
.cart-drawer.open { right:0; }
.cart-header { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border); }
.cart-header h3 { font-family:var(--font-display); font-size:18px; font-weight:700; }
.cart-close { background:none; border:none; font-size:24px; cursor:pointer; }
.cart-items { flex:1; overflow-y:auto; padding:16px; }
.cart-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.cart-item img { width:60px; height:60px; object-fit:cover; border-radius:8px; }
.cart-item-info { flex:1; }
.cart-item-name { font-size:14px; font-weight:600; }
.cart-item-price { font-size:14px; color:var(--primary); font-weight:700; }
.cart-qty { display:flex; align-items:center; gap:8px; margin-top:4px; }
.cart-qty button { width:24px; height:24px; border:1px solid var(--border); background:var(--secondary); border-radius:4px; cursor:pointer; font-weight:700; }
.cart-qty span { font-size:14px; font-weight:600; }
.cart-remove { background:none; border:none; color:var(--sale); font-size:12px; cursor:pointer; margin-top:4px; }
.cart-footer { padding:16px; border-top:1px solid var(--border); }
.cart-total { display:flex; justify-content:space-between; font-size:16px; font-weight:700; margin-bottom:12px; }
.btn-checkout { width:100%; background:var(--primary); color:var(--primary-fg); border:none; padding:12px; border-radius:8px; font-weight:700; font-size:15px; cursor:pointer; }
.cart-empty { text-align:center; padding:40px 16px; color:var(--muted); }

/* Page title */
.page-title { text-align:center; padding:48px 16px 32px; }
.page-title h1 { font-size:36px; font-weight:700; }
.page-title p { color:var(--muted); font-size:16px; margin-top:8px; }

/* Product detail */
.product-detail { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:48px 16px; max-width:1200px; margin:0 auto; }
.product-detail-img { border-radius:var(--radius); overflow:hidden; }
.product-detail-img img { width:100%; }
.product-detail-info h1 { font-size:28px; margin-bottom:8px; }
.product-detail-info .cat { font-size:13px; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:12px; }
.product-detail-info .desc { font-size:15px; color:var(--muted); margin-bottom:20px; line-height:1.6; }
.product-detail-info .price { font-size:28px; font-weight:700; color:var(--primary); margin-bottom:20px; }
.btn-add-lg { display:inline-flex; align-items:center; gap:8px; background:var(--primary); color:var(--primary-fg); border:none; padding:14px 32px; border-radius:8px; font-size:16px; font-weight:700; cursor:pointer; }

/* Toast */
.toast { position:fixed; bottom:20px; right:20px; background:var(--fg); color:#fff; padding:12px 20px; border-radius:8px; font-size:14px; z-index:200; display:none; animation:slideUp 0.3s; }
.toast.show { display:block; }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* Responsive */
@media(max-width:1024px) {
  .product-grid, .cat-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:768px) {
  .product-grid, .cat-grid { grid-template-columns:repeat(2,1fr); }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .nav { display:none; }
  .mobile-menu-btn { display:block; }
  .mobile-nav { display:none; border-top:1px solid var(--border); background:var(--card); padding:12px 16px; }
  .mobile-nav.open { display:block; }
  .mobile-nav a { display:block; padding:10px 14px; border-radius:6px; font-size:14px; font-weight:500; }
  .mobile-nav a:hover, .mobile-nav a.active { background:var(--primary); color:var(--primary-fg); }
  .hero-content { padding:40px 16px; }
  .mid-banner h2 { font-size:24px; }
  .product-detail { grid-template-columns:1fr; }
  .section-title { font-size:22px; }
}
@media(max-width:480px) {
  .product-grid { grid-template-columns:1fr; }
  .hero-btns { flex-direction:column; }
}

/* Buy Now Button */
.product-buttons { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* Checkout Modal */

/* Steps Bar */

/* Checkout Content */

/* Total Bar */

/* Checkout Button */

/* Timer */

/* Articles Section */
.articles-section { padding:48px 0 64px; }
.articles-card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.article-card-link { text-decoration:none; color:inherit; }
.article-card-box { background:#f0f4f8; border-radius:12px; overflow:hidden; transition:transform 0.3s, box-shadow 0.3s; height:100%; display:flex; flex-direction:column; }
.article-card-box:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,0.1); }
.article-card-img { aspect-ratio:16/10; overflow:hidden; }
.article-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.article-card-box:hover .article-card-img img { transform:scale(1.05); }
.article-card-info { padding:20px 20px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.article-card-tag { color:var(--primary); font-size:13px; font-weight:600; }
.article-card-title { font-family:var(--font-display); font-size:17px; font-weight:700; color:#1a1a2e; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.article-card-meta { font-size:12px; color:#888; margin-top:auto; }
.article-card-source { color:var(--primary); font-weight:600; }
@media (max-width:992px) { .articles-card-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px) { .articles-card-grid { grid-template-columns:1fr; } }

/* AdSense */
.adsense-wrap {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 16px;
  text-align: center;
  clear: both;
}

.adsense-wrap--top {
  margin: 12px auto 24px;
}

.adsense-wrap--middle {
  margin: 28px auto;
}

.adsense-wrap--footer {
  margin: 32px auto 24px;
}

.adsense-slot {
  display: block;
  overflow: hidden;
}

@media (max-width: 768px) {
  .adsense-wrap--top,
  .adsense-wrap--middle,
  .adsense-wrap--footer {
    margin: 16px auto;
  }
}