@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');
@import url('tokens/glass.css');
@import url('tokens/base.css');

::selection {
  background: var(--color-accent-orange);
  color: var(--purple-900);
}

/* background-attachment: fixed is unreliable on mobile Safari/Chrome —
   it can render blurry, fail to scroll with the page, or just look
   glitchy since mobile browsers handle the fixed viewport differently
   during scroll/URL-bar-hide transitions. Desktop keeps the parallax
   feel; mobile falls back to a normal scrolling background. */
.fixed-bg-section { background-attachment: fixed; }
@media (max-width: 768px) {
  .fixed-bg-section { background-attachment: scroll; }
}

/* Shared product card component — used by both the homepage and the
   Shop page, rendered by products-render.js from the single PRODUCTS
   array (products.js). Defined once here (styles.css loads on every
   page) so appearance and behavior stay identical everywhere without
   needing to keep two copies of this CSS in sync by hand. */
.product-card {
  background: var(--color-bg-surface); border-radius: 20px; overflow: hidden;
  cursor: pointer; transition: transform .2s ease;
}
.product-card:hover { transform: translateY(-4px); }
.product-card-img { aspect-ratio: 1; overflow: hidden; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card-body { padding: 24px; }
.product-card-title {
  font-family: 'Chillax', var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--color-text-primary); margin-bottom: 8px;
}
.product-card-origin { font-family: var(--font-sans); font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.product-card-meta { font-family: var(--font-sans); font-size: 11px; color: var(--color-text-muted); margin-bottom: 12px; }
.product-card-tags { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.product-tag {
  font-family: var(--font-sans); font-size: 12px; padding: 4px 10px;
  border: 1px solid var(--color-border-subtle); border-radius: 12px; color: var(--color-text-secondary);
}
.product-card-foot { display: flex; justify-content: space-between; align-items: center; }
.product-card-price { font-family: var(--font-sans); font-size: 18px; font-weight: 700; color: var(--color-accent-lime); }
.product-add-btn {
  padding: 8px 16px; border-radius: var(--radius-pill); background: transparent;
  border: 1px solid var(--color-text-primary); color: var(--color-text-primary);
  font-family: 'Chillax', var(--font-sans); font-weight: 600; font-size: 12px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.product-add-btn:hover { background: var(--color-accent-orange); border-color: var(--color-accent-orange); color: var(--purple-900); }

/* Live qty stepper — replaces the Add button once a product is in the
   cart, same pill footprint so nothing shifts layout when it swaps. */
.product-qty-stepper {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-text-primary); background: transparent;
}
.product-qty-stepper button {
  all: unset; cursor: pointer; font-family: var(--font-sans); font-size: 14px;
  color: var(--color-text-primary); line-height: 1; text-align: center;
  min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center;
}
.product-qty-stepper button:hover { color: var(--color-accent-orange); }
.product-qty-stepper span {
  font-family: 'Chillax', var(--font-sans); font-weight: 600; font-size: 13px;
  color: var(--color-text-primary); min-width: 12px; text-align: center;
}