/* ============================================================
   components-pack.css — merged small-components bundle (Phase 15)
   Source files (alphabetical order):
     1. alert.css
     2. badge.css
     3. breadcrumbs.css
     4. pagination.css
     5. price.css
     6. ribbon.css
     7. specs.css
   ============================================================ */

/* ------------------------------------------------------------
   1. alert.css
   ------------------------------------------------------------ */
.alert {
  padding: var(--space-md) var(--space-lg);
  border: var(--border-width) solid;
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.alert--success {
  background-color: rgba(0, 160, 70, 0.08);
  border-color: var(--color-status-available);
  color: var(--color-status-available);
}

.alert--warning {
  background-color: rgba(255, 152, 0, 0.08);
  border-color: var(--color-status-reserved);
  color: var(--color-status-reserved);
}

.alert--danger {
  background-color: rgba(230, 42, 64, 0.08);
  border-color: var(--color-price);
  color: var(--color-price);
}

.alert--info {
  background-color: rgba(33, 150, 243, 0.08);
  border-color: var(--color-status-featured);
  color: var(--color-status-featured);
}

/* ------------------------------------------------------------
   2. badge.css
   ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
}

.badge--success {
  background-color: var(--color-status-available);
  color: #fff;
  border-color: var(--color-status-available);
}

.badge--warning {
  background-color: var(--color-status-reserved);
  color: #fff;
  border-color: var(--color-status-reserved);
}

.badge--danger {
  background-color: var(--color-status-sold);
  color: #fff;
  border-color: var(--color-status-sold);
}

.badge--info {
  background-color: var(--color-status-featured);
  color: #fff;
  border-color: var(--color-status-featured);
}

.badge--neutral {
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}


.badge-stack {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
    pointer-events: none;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 3px;
    line-height: 1.2;
    color: #fff;
    background: var(--color-secondary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    pointer-events: auto;
}

.badge--featured {
    background: var(--color-primary);
}

.badge--status.badge--reserved {
    background: #FF9800;
    color: #fff;
}

.badge--status.badge--sold {
    background: var(--color-price);
    color: #fff;
}

.badge--status.badge--available {
    background: var(--color-primary);
    color: #fff;
}

.inv-card {
    position: relative;
}

.inv-detail__media {
    position: relative;
}

.inv-detail__media .badge-stack {
    top: 16px;
    left: 16px;
}

.badge-stack--inline {
    position: static;
    flex-direction: row;
}

/* ------------------------------------------------------------
   3. breadcrumbs.css
   ------------------------------------------------------------ */
.pawn-breadcrumbs {
    margin: 16px 0 24px;
    font-size: 14px;
}
.pawn-breadcrumbs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    color: var(--color-text-muted);
}
.pawn-breadcrumbs-item {
    display: inline-flex;
    align-items: center;
}
.pawn-breadcrumbs-item a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color .15s;
}
.pawn-breadcrumbs-item a:hover {
    color: var(--color-primary);
}
.pawn-breadcrumbs-item span[aria-current] {
    color: var(--color-secondary);
    font-weight: 500;
}
.pawn-breadcrumbs-sep {
    margin: 0 8px;
    color: var(--color-border);
}

/* ------------------------------------------------------------
   4. pagination.css
   ------------------------------------------------------------ */
.pawn-pagination {
    margin-top: 32px;
}
.pawn-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    margin: 0 2px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, border-color .15s, color .15s;
}
.pawn-pagination .page-numbers:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.pawn-pagination .page-numbers.current {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.pawn-pagination .page-numbers.dots {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
}
.pawn-pagination ul.page-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.pawn-pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ------------------------------------------------------------
   5. price.css
   ------------------------------------------------------------ */
.price {
  font-weight: 700;
  color: var(--color-price);
  font-size: var(--fs-lg);
  line-height: 1.2;
}

.price--current {
  color: var(--color-price);
}

.price--old {
  color: var(--color-price-old);
  text-decoration: line-through;
  font-size: 0.85em;
  font-weight: 400;
  margin-left: var(--space-xs);
}

.price--small {
  font-size: var(--fs-md);
}

.price--large {
  font-size: var(--fs-2xl);
}

.price__currency {
  font-size: 0.7em;
  vertical-align: super;
  margin-right: 2px;
}

/* ------------------------------------------------------------
   6. ribbon.css
   ------------------------------------------------------------ */
.ribbon {
  position: absolute;
  top: 14px;
  left: -36px;
  width: 140px;
  padding: 6px 0;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  transform: rotate(-45deg);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.ribbon--sold {
  background-color: var(--color-status-sold);
}

.ribbon--reserved {
  background-color: var(--color-status-reserved);
}

.ribbon--featured {
  background-color: var(--color-status-featured);
}

.product-card__badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
}

.product-card__badge--featured {
  top: var(--space-sm);
  left: var(--space-sm);
  right: auto;
}

.product-card--status-sold .product-card__media {
  filter: grayscale(0.4);
  opacity: 0.85;
}

.product-card__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.product-card__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
}

.product-card__price {
  margin: 0;
  font-size: var(--fs-lg);
}

.product-card__meta {
  margin: 0;
}

/* ------------------------------------------------------------
   7. specs.css
   ------------------------------------------------------------ */
.specs__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-md);
}

.specs__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: var(--border-width) solid var(--color-border);
}

.specs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-width) solid var(--color-border);
  border-right: var(--border-width) solid var(--color-border);
  margin: 0;
}

.specs__row:nth-last-child(-n+2) {
  border-bottom-color: var(--color-border);
}

.specs__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.specs__value {
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-weight: 500;
  margin: 0;
  text-align: right;
}

@media (max-width: 640px) {
  .specs__row {
    border-right: 0;
  }
}