/* Minimal critical CSS: layout, header, nav, typography */
:root {
  --amazon-blue: #146eb4;
  --amazon-orange: #febd69;
  --amazon-dark-blue: #0f5a93;
}
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.container { width: 100%; padding-right: .75rem; padding-left: .75rem; margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.navbar { background-color: var(--amazon-blue); color: #fff; }
.navbar .navbar-brand { color: #fff; font-weight: 600; text-decoration: none; }
.navbar .nav-link { color: #e6eef7; }
.navbar .nav-link:hover { color: #fff; }

/* Header logo sizing */
.navbar .navbar-brand img { height: 40px; width: auto; display: inline-block; vertical-align: middle; }

/* Basic card styles to avoid layout shift above the fold */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; }
.card .card-img-top { display: block; width: 100%; height: auto; }

/* Search bar minimal */
#search-form .form-control { height: 40px; }
#search-form .btn { height: 40px; background-color: var(--amazon-orange); border-color: var(--amazon-orange); color: #333; }