* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; margin: 0; color: #0f172a; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; border-bottom: 1px solid #e2e8f0; }
.site-header .logo { font-weight: 700; font-size: 20px; color: #0f172a; text-decoration: none; }
.site-header nav a { margin-left: 16px; color: #475569; text-decoration: none; }
.site-header nav a:hover { color: #0f172a; }

main { max-width: 1000px; margin: 0 auto; padding: 32px; }

.ad-banner { display: flex; gap: 16px; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #f97316, #ea580c); color: white;
  padding: 24px 32px; border-radius: 16px; margin-bottom: 32px; }
.ad-banner__copy strong { font-size: 22px; display: block; margin-bottom: 4px; }
.ad-banner__copy p { margin: 0; opacity: 0.9; font-size: 13px; }
.ad-banner__cta { background: white; color: #ea580c; border: none; padding: 12px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; }

.hero { margin: 16px 0 40px; }
.hero h1 { font-size: 32px; margin: 0 0 8px; }
.hero p { color: #475569; max-width: 640px; }

.product-grid { list-style: none; padding: 0; margin: 16px 0 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.product-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; background: white; }
.product-card__image { font-size: 48px; margin-bottom: 8px; }
.product-card h3 { margin: 8px 0 4px; font-size: 16px; }
.product-card__price { margin: 0 0 12px; font-weight: 600; color: #0f172a; }
.product-card button { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #cbd5e1; cursor: pointer; margin-bottom: 6px; }
.product-card__add { background: #0f172a; color: white; border-color: #0f172a; }
.product-card__add:hover { background: #1e293b; }

.dev-actions { margin-top: 40px; padding: 16px 24px; background: #fef2f2; border-radius: 12px; }
.dev-actions h2 { margin: 0 0 4px; }
.dev-actions p { margin: 4px 0; color: #475569; font-size: 14px; }
.dev-actions__btn { background: #dc2626; color: white; border: none; padding: 8px 14px; border-radius: 8px; margin-right: 8px; cursor: pointer; }
.dev-actions__btn:hover { background: #b91c1c; }
#dev-actions-status { color: #16a34a; min-height: 20px; }

.identify, .search, .video, .external, .metric, .currency {
  margin-top: 32px; padding: 16px 20px; background: #eff6ff; border-radius: 12px;
}
.identify form, .search form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 8px 0; }
.identify label, .search label { display: flex; flex-direction: column; gap: 4px; }
.identify input, .identify select, .search input, .metric input {
  padding: 8px; border: 1px solid #cbd5e1; border-radius: 8px; min-width: 180px;
}
.identify button, .search button, .metric button, .currency__add {
  background: #2563eb; color: white; padding: 8px 14px; border: none; border-radius: 8px; cursor: pointer;
}
.identify__set { display: inline-block; margin-right: 6px; background: #6366f1 !important; }
.currency__hint { color: #475569; margin-left: 12px; font-size: 13px; }
.video video { background: #000; max-width: 320px; display: block; margin-top: 8px; }
.scroller { margin-top: 32px; padding: 16px; background: #f1f5f9; border-radius: 12px; }
.scroller__spacer { height: 2200px; }

.newsletter { margin-top: 40px; padding: 24px; background: #f8fafc; border-radius: 16px; }
.newsletter form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.newsletter label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; }
.newsletter input { padding: 8px; border: 1px solid #cbd5e1; border-radius: 8px; }
.newsletter button { background: #0f172a; color: white; padding: 10px 18px; border: none; border-radius: 8px; cursor: pointer; }
.newsletter #newsletter-status { margin-top: 8px; color: #16a34a; }

.cart-summary { margin-top: 32px; padding: 16px; background: #fef3c7; border-radius: 12px; }
.cart-summary[hidden] { display: none; }
.cart-summary ul { padding-left: 18px; }
.cart-summary__checkout { display: inline-block; margin-top: 8px; background: #0f172a; color: white; padding: 8px 16px; border-radius: 8px; text-decoration: none; }

.checkout { max-width: 600px; }
.checkout .cart-items { list-style: none; padding: 12px; background: #f8fafc; border-radius: 8px; }
.checkout form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.checkout label { display: flex; flex-direction: column; gap: 4px; }
.checkout input { padding: 8px; border: 1px solid #cbd5e1; border-radius: 8px; }
.checkout button { background: #0f172a; color: white; padding: 10px 18px; border: none; border-radius: 8px; cursor: pointer; }
#checkout-status { margin-top: 12px; color: #16a34a; }

.thank-you { text-align: center; padding: 40px 0; }
.thank-you h1 { color: #16a34a; }

.site-footer { text-align: center; padding: 24px; color: #94a3b8; border-top: 1px solid #e2e8f0; margin-top: 64px; }