/* base.css – reset, typography, layout */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-dark);
  font-family: var(--font-main);
  line-height: 1.5;
}

main {
  flex: 1 0 auto;
  padding-bottom: var(--s-48);
}

footer {
  flex-shrink: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

svg {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  flex-shrink: 0;
}
svg use {
  pointer-events: none;
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

.amount,
.price,
.product-price,
.item-price,
.total,
.grand-total,
.slash-price {
  font-family: var(--font-price);
  font-weight: 500;
}

.slash-price {
  text-decoration: line-through;
  color: var(--color-muted);
  font-size: 0.8rem;
  margin-left: 6px;
}

/* Skeletons */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.skeleton-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-text {
  height: 12px;
  margin: var(--s-8) var(--s-12);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-text.short {
  width: 50%;
}
.skeleton-pill {
  width: 90px;
  height: 32px;
  border-radius: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  display: inline-block;
}

.empty-state {
  font-size: 0.9rem;
  color: var(--color-muted);
  padding: var(--s-16) 0;
  grid-column: 1 / -1;
}