/**
 * butik-destination.css — Tab[7] 💰 Butik player-facing shop view.
 *
 * Plan: docs/plans/2026-05-25-player-portal-fase2-pickup.md §"Feature 3".
 * Module: public/js/butik-destination.js (window.ButikDestination).
 *
 * BEM: .hd-butik__* (destination root + header + gold + item grid).
 *
 * Token-only — no hardcoded colors, font-sizes, or motion values.
 * Light-theme handled automatically via design-tokens.css [data-theme=light].
 *
 * @layer components — placed after base + tokens, before utilities + overrides.
 */

@layer components {

  .hd-butik {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    padding: var(--hd-space-4);
    /* No own background: let the parent .hd-player-content-mount parchment show
     * through, like the other tabs (karakterark/dasham). A solid surface-base
     * here previously overrode the parchment and made Butik look different. */
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    height: 100%;
    min-height: 0;
    overflow-y: auto;
  }

  .hd-butik__header {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
  }

  .hd-butik__shop-name {
    margin: 0;
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h2);
    color: var(--hd-text-primary);
  }

  /* ===== Gold balance ===== */

  .hd-butik__gold {
    display: flex;
    align-items: baseline;
    gap: var(--hd-space-2);
    padding: var(--hd-space-2) var(--hd-space-3);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
  }

  .hd-butik__gold-label {
    font-size: var(--hd-text-ui);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hd-text-secondary);
  }

  .hd-butik__gold-value {
    font-size: var(--hd-text-body-large);
    color: var(--hd-accent-warning);
  }

  /* ===== Inventory grid ===== */

  .hd-butik__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--hd-space-2);
  }

  .hd-butik__item {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
    padding: var(--hd-space-3);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
    min-height: 44px; /* WCAG 2.5.5 touch target */
  }

  .hd-butik__item--sold {
    opacity: 0.55;
    text-decoration: line-through;
  }

  .hd-butik__item-name {
    font-size: var(--hd-text-body);
    color: var(--hd-text-primary);
  }

  .hd-butik__item-price {
    font-size: var(--hd-text-ui);
    color: var(--hd-accent-warning);
  }

  .hd-butik__item-qty {
    font-size: var(--hd-text-caption);
    color: var(--hd-text-secondary);
  }

  .hd-butik__item-rarity {
    align-self: flex-start;
    padding: 0 var(--hd-space-1);
    font-size: var(--hd-text-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hd-text-tertiary);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
  }

  /* ===== Empty / error states ===== */

  .hd-butik__empty,
  .hd-butik__empty-inv,
  .hd-butik__error {
    padding: var(--hd-space-4);
    text-align: center;
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-body);
  }
}