/* ── BUTTONS ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 32px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer; border: none;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
  position: relative; overflow: hidden;
  will-change: transform;
}
.btn:active { transform: scale(.97) !important; }

/* Primary: Gold fill */
.btn--primary {
  background: #f2ca50; color: #3c2f00;
  border: 1px solid #f2ca50;
}
.btn--primary:hover {
  background: #d4af37; border-color: #d4af37;
  box-shadow: 0 0 24px rgba(242,202,80,.2);
}

/* Outline: Gold border, dark bg */
.btn--outline {
  background: transparent; color: #f2ca50;
  border: 1px solid #f2ca50;
}
.btn--outline:hover {
  background: rgba(242,202,80,.08);
  box-shadow: 0 0 16px rgba(242,202,80,.12);
}

/* Ghost */
.btn--outline-white {
  background: transparent; color: #e5e2e1;
  border: 1px solid rgba(229,226,225,.3);
}
.btn--outline-white:hover {
  border-color: rgba(229,226,225,.6);
  background: rgba(255,255,255,.04);
}

/* Outline dark */
.btn--outline-dark {
  background: transparent; color: #e5e2e1;
  border: 1px solid rgba(77,70,53,.6);
}
.btn--outline-dark:hover { border-color: #f2ca50; color: #f2ca50; }

/* Accent = same as primary */
.btn--accent { background: #f2ca50; color: #3c2f00; border: 1px solid #f2ca50; }
.btn--accent:hover { background: #d4af37; }

.btn--sm { padding: 8px 20px; font-size: 0.68rem; }
.btn--lg { padding: 18px 48px; font-size: 0.78rem; }

/* Shimmer effect on hover */
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.btn:hover::after { transform: translateX(100%); }

/* ── PRODUCT CARDS ───────────────────────────────── */
.product-card {
  background: var(--surface-low, #1c1b1b);
  border: 1px solid rgba(77,70,53,.2);
  border-radius: 0;
  overflow: hidden;
  transition: border-color 500ms ease, box-shadow 500ms ease;
  position: relative;
  cursor: pointer;
}
.product-card:hover {
  border-color: rgba(242,202,80,.25);
  box-shadow: 0 0 0 1px rgba(242,202,80,.08), inset 0 0 40px rgba(242,202,80,.02);
}

.product-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.product-card__img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(15%);
  transition: transform 1s ease, filter 500ms ease;
  display: block;
}
.product-card:hover .product-card__img-wrap img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.product-card__body {
  padding: 16px 20px;
  border-left: 1px solid rgba(242,202,80,.2);
  margin-left: 16px;
}
.product-card__title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1rem; font-weight: 500;
  color: #e5e2e1; margin-bottom: 4px;
  line-height: 1.3;
}
.product-card__subtitle {
  font-size: 0.8rem;
  color: #d0c5af;
  font-style: italic;
  margin-bottom: 12px;
}
.product-card__price {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #f2ca50;
}
.product-card__edition {
  position: absolute; top: 16px; left: 16px;
  background: rgba(19,19,19,.8);
  backdrop-filter: blur(8px);
  padding: 4px 12px;
  border: 1px solid rgba(242,202,80,.2);
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #f2ca50;
}

/* Wishlist */
.product-card__wishlist {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  background: rgba(19,19,19,.6); backdrop-filter: blur(6px);
  border: 1px solid rgba(77,70,53,.4);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--outline); cursor: pointer;
  transition: all 200ms ease;
}
.product-card__wishlist:hover { color: #f2ca50; border-color: rgba(242,202,80,.4); }
.product-card__wishlist.active { color: #f87171; }

/* ── VENDOR CARDS ────────────────────────────────── */
.vendor-card {
  background: var(--surface-low);
  border: 1px solid rgba(77,70,53,.2);
  padding: 24px;
  transition: border-color 300ms ease;
}
.vendor-card:hover { border-color: rgba(242,202,80,.3); }
.vendor-card__name {
  font-family: 'Bodoni Moda', serif;
  font-size: 1.1rem; color: #e5e2e1; margin-bottom: 6px;
}
.vendor-card__meta { font-size: 0.8rem; color: #99907c; }

/* ── BADGES ──────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.badge-hot {
  background: var(--primary); color: var(--on-primary);
}

/* ── SECTION HEADERS ─────────────────────────────── */
.section-header { margin-bottom: 48px; }
.section-header__label {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: #f2ca50; margin-bottom: 16px;
}
.section-header h2 {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600; color: #e5e2e1;
  line-height: 1.15;
}
.section-header p {
  font-size: 1rem; color: #d0c5af;
  line-height: 1.75; margin-top: 12px;
}

/* ── FILTER TABS ─────────────────────────────────── */
.filter-tabs {
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 1px solid rgba(77,70,53,.4);
  margin-bottom: 32px;
}
.section__tab {
  padding: 10px 24px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #99907c; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 200ms ease;
}
.section__tab:hover { color: #e5e2e1; }
.section__tab--active { color: #f2ca50; border-bottom-color: #f2ca50; }

/* ── PRODUCTS GRID ───────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

/* ── INPUT FIELDS (atmospheric) ─────────────────── */
.form-input, .form-control, input[type=text], input[type=email],
input[type=password], input[type=number], textarea, select {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(153,144,124,.5);
  border-radius: 0;
  padding: 12px 0;
  color: #e5e2e1;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.9rem;
  outline: none;
  width: 100%;
  transition: border-color 200ms ease;
}
.form-input:focus, .form-control:focus,
input[type=text]:focus, input[type=email]:focus,
input[type=password]:focus { border-color: #f2ca50; }
.form-input::placeholder { color: rgba(153,144,124,.6); }

/* ── HORIZONTAL SCROLL ───────────────────────────── */
.horizontal-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.horizontal-scroll::-webkit-scrollbar { display: none; }

/* ── SHIMMER BORDER ──────────────────────────────── */
.shimmer-border { position: relative; overflow: hidden; }
.shimmer-border::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(242,202,80,.15), transparent);
  animation: shimmerPass 3s infinite linear;
}
@keyframes shimmerPass {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ── BACK TO TOP ─────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 80px; right: 24px;
  width: 44px; height: 44px;
  background: rgba(19,19,19,.8);
  border: 1px solid rgba(242,202,80,.3);
  color: #f2ca50;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 200;
  opacity: 0; visibility: hidden;
  transition: all 300ms ease;
  backdrop-filter: blur(8px);
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: rgba(242,202,80,.12); }