/* Mobile-first enhancements */
:root {
  --mobile-padding: 12px;
  --mobile-radius: 10px;
  --tap-size: 44px;
}

html { font-size: 16px; }

@media (max-width: 576px) {
  html { font-size: 17px; }
}

body { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Top bar & navbar */
.top-bar { padding: 6px var(--mobile-padding); background:#232f3e; color:#fff; font-size: .9rem; }
.amazon-nav { background:#131921; color:#fff; }
.navbar-brand { font-weight:700; color:#fff !important; }
.navbar-icons .nav-link, .navbar .nav-link { color:#fff !important; }

/* Search bar spacing on mobile */
@media (max-width: 768px) {
  .search-bar input { border-radius: var(--mobile-radius); }
  .navbar .btn { min-height: var(--tap-size); }
  .navbar-toggler { border-color: rgba(255,255,255,.4); }
}

/* Buttons & inputs */
.btn { border-radius: var(--mobile-radius); }
.form-control, .form-select { border-radius: var(--mobile-radius); min-height: var(--tap-size); }

/* Cards spacing */
.card { border-radius: var(--mobile-radius); overflow: hidden; }
.card .card-body { padding: calc(var(--mobile-padding) * 1.2); }

/* Tables responsive improvements */
.table { font-size: .95rem; }
@media (max-width: 576px) {
  .table thead { display: none; }
  .table tr { display: block; margin-bottom: 10px; border: 1px solid #eee; border-radius: 8px; }
  .table td { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; }
  .table td::before { content: attr(data-label); color:#6c757d; }
}

/* Product cards grid */
.products-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
@media (max-width: 1200px){ .products-grid { grid-template-columns: repeat(3,1fr);} }
@media (max-width: 992px){ .products-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 576px){ .products-grid { grid-template-columns: 1fr; } }

/* Touch target sizes */
.btn, .list-group-item, .nav-link { min-height: var(--tap-size); display:flex; align-items:center; }

/* Sticky bottom action bar for mobile (e.g., add to cart) */
.sticky-action {
  position: sticky; bottom: 0; background:#fff; border-top:1px solid #eee; padding: 10px; z-index: 10;
}

/* Profile tabs → convert to stacked list on mobile */
@media (max-width: 768px){
  .list-group .list-group-item { border-radius: 8px; margin-bottom: 6px; }
}

/* Better spacing */
.container { padding-left: var(--mobile-padding); padding-right: var(--mobile-padding); }

/* Forms spacing */
.form-label { font-weight: 600; }

/* Images */
img { max-width: 100%; height: auto; }

/* Utility helpers */
.hide-mobile { display: none !important; }
.show-desktop { display: none; }
@media (min-width: 992px){ .show-desktop { display: block; } }