:root {
  --brand-orange: #ee4d2d;
  --brand-orange-600: #d93c1f;
  --brand-orange-100: #fff1ec;
  --soft-bg: linear-gradient(135deg, #fff7f4 0%, #fff 50%, #fff7f4 100%);
  --cta-height: 68px;
}

html, body { height: 100%; }
body { background-color: #fafafa; }

.shopee-header { background-color: var(--brand-orange); }
.shopee-header .navbar-brand { color: #fff; }
.shopee-header .navbar-brand:hover { color: #fff; opacity: .9; }

.category-pill {
  --bs-btn-padding-y: .35rem;
  --bs-btn-padding-x: .75rem;
  --bs-btn-border-radius: 50rem;
}
.category-pill.active { background-color: var(--brand-orange); color: #fff; border-color: var(--brand-orange); }

.product-card { transition: transform .15s ease, box-shadow .15s ease; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,.08) !important; }

.product-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.price { font-weight: 700; }
.old-price { text-decoration: line-through; color: #99a1b3; }

.rating { color: #ffb400; font-size: 0.9rem; }

.img-fit { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #ffffff; }
.img-contain { width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 992px) {
  #categoryPills { scrollbar-width: thin; }
}

/* Override Bootstrap primary to orange tone */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-bg: var(--brand-orange-600);
  --bs-btn-hover-border-color: var(--brand-orange-600);
  --bs-btn-active-bg: var(--brand-orange-600);
  --bs-btn-active-border-color: var(--brand-orange-600);
}

.text-bg-danger { background-color: var(--brand-orange) !important; }

.badge.text-bg-danger { border: 1px solid rgba(0,0,0,.03); }

/* Compact card spacing */
.card .card-body { padding: .75rem .75rem 1rem; }
.product-title { font-size: .9rem; }

/* Sticky bottom actions on mobile */
.sticky-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #ececec;
  padding: .5rem .75rem;
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
  z-index: 1050; /* above navbar/footer */
  box-shadow: 0 -6px 12px rgba(0,0,0,.04);
  min-height: var(--cta-height);
}
@media (min-width: 992px) {
  .sticky-actions { display: none; }
}
.detail-inline-actions { display: none; }
@media (min-width: 992px) {
  .detail-inline-actions { display: flex !important; }
}

.with-sticky-actions { padding-bottom: calc(var(--cta-height) + 16px); }
.sticky-actions .btn { height: 48px; }
.sticky-actions .btn-back { width: 56px; }
.sticky-actions .action-tiles { min-width: 40%; }
.action-tile {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: .25rem;
}
.action-tile .bi { font-size: 1.25rem; color: var(--brand-orange); }
.buy-cta { min-width: 45%; }

/* Skeleton loading for images */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  100% { transform: translateX(100%); }
}
.skeleton img { opacity: 0; transition: opacity .2s ease; }
.skeleton.loaded::after { display: none; }
.skeleton.loaded img { opacity: 1; }

/* Helpers */
.object-fit-cover { object-fit: cover; height: 100%; }
.back-btn-overlay {
  position: fixed;
  top: .75rem;
  left: .75rem;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  color: #fff;
  z-index: 1060;
}
.back-btn-overlay .bi { font-size: 1.1rem; }