/* Component library. Names follow .tmz-* convention for theme isolation. */

/* === Buttons === */
.tmz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--radius-24);
  font-weight: 700;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.tmz-btn--primary { background: var(--charcoal); color: var(--bone); }
.tmz-btn--primary:hover { background: #2A2A30; color: var(--bone); }
.tmz-btn--secondary { background: transparent; color: var(--charcoal); border: 1px solid var(--charcoal); }
.tmz-btn--secondary:hover { background: rgba(26,26,31,0.05); color: var(--charcoal); }
.tmz-btn--amber { background: var(--amber); color: var(--charcoal); }
.tmz-btn--amber:hover { background: var(--amber-soft); color: var(--charcoal); }
.tmz-btn--ghost-bone { background: transparent; color: var(--bone); border: 1px solid var(--bone); }
.tmz-btn--ghost-bone:hover { background: var(--bone); color: var(--charcoal); }
.tmz-btn--block { width: 100%; }
.tmz-btn--sm { padding: 10px 18px; font-size: 14px; }

.tmz-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-bottom: 2px solid var(--amber);
  padding-bottom: 2px;
  font-weight: 700;
  align-self: flex-start;
}

/* === Cards === */
.tmz-card {
  background: var(--bone-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-32);
  padding: 32px;
  transition: border-color var(--t-base) var(--ease);
}
.tmz-card:hover { border-color: rgba(200, 132, 43, 0.4); }
.tmz-card--product {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  cursor: pointer;
  border-color: transparent;
}
.tmz-card--product .tmz-card__image {
  aspect-ratio: 1 / 1;
  background: var(--bone);
  border-radius: var(--radius-24);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tmz-card--product img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform var(--t-slow) var(--ease); }
.tmz-card--product:hover img { transform: scale(1.05); }
.tmz-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.tmz-card__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); }
.tmz-card__price { color: var(--text-muted); margin-top: 4px; }

/* === Badges === */
.tmz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.tmz-badge--amber   { background: var(--amber);   color: var(--bone); }
.tmz-badge--violet  { background: var(--violet);  color: var(--bone); }
.tmz-badge--magenta { background: var(--magenta); color: var(--bone); }
.tmz-badge--ghost   { background: var(--bone); border: 1px solid var(--hairline); color: var(--charcoal); }
.tmz-badge--charcoal{ background: var(--charcoal); color: var(--bone); }

/* === Form === */
.tmz-input {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--bone-soft);
  color: var(--charcoal);
  font-size: var(--fs-body);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.tmz-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(200, 132, 43, 0.2); }
.tmz-input::placeholder { color: rgba(26,26,31,0.4); }

.tmz-radio-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-24);
  cursor: pointer;
  background: var(--bone-soft);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.tmz-radio-card:hover { border-color: var(--amber); }
.tmz-radio-card.is-active { border-color: var(--amber); background: var(--bone); }
.tmz-radio-card input[type="radio"] { accent-color: var(--amber); width: 18px; height: 18px; }

/* === Star rating === */
.tmz-stars { color: var(--amber); font-weight: 700; letter-spacing: 0.05em; }

/* === Ticker === */
.tmz-ticker {
  background: var(--charcoal);
  color: var(--bone);
  height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--charcoal);
  border-bottom: 1px solid var(--charcoal);
}
.tmz-ticker__track {
  display: flex;
  white-space: nowrap;
  animation: tmz-marquee 30s linear infinite;
}
.tmz-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 32px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.tmz-ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
@keyframes tmz-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === Numbered list === */
.tmz-numbered { display: flex; gap: 24px; align-items: flex-start; }
.tmz-numbered__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 72px;
  line-height: 1;
  color: var(--amber);
  letter-spacing: var(--tracking-x);
}
.tmz-numbered__body { padding-top: 12px; }

/* === Filter chip === */
.tmz-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--bone);
  border: 1px solid var(--hairline);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.tmz-chip:hover, .tmz-chip.is-active {
  border-color: var(--charcoal);
  background: var(--charcoal);
  color: var(--bone);
}

/* === Quantity stepper === */
.tmz-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.tmz-qty button {
  width: 44px;
  height: 44px;
  font-size: 18px;
  font-weight: 700;
  background: var(--bone-soft);
  transition: background var(--t-fast) var(--ease);
}
.tmz-qty button:hover { background: var(--bone); }
.tmz-qty input { width: 56px; height: 44px; text-align: center; border: 0; background: transparent; }