/* 3DprintHive — Main Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap');

@import 'variables.css';
@import 'reset.css';

/* Component imports */
@import 'components/navbar.css';
@import 'components/footer.css';
@import 'components/buttons.css';
@import 'components/forms.css';
@import 'components/cards.css';
@import 'components/modal.css';
@import 'components/alerts.css';
@import 'components/badge.css';
@import 'components/loader.css';
@import 'components/cookie-banner.css';
@import 'components/breadcrumb.css';
@import 'components/pagination.css';

/* Page imports */
@import 'pages/home.css';
@import 'pages/catalog.css';
@import 'pages/product.css';
@import 'pages/upload.css';
@import 'pages/cart.css';
@import 'pages/checkout.css';
@import 'pages/account.css';
@import 'pages/admin.css';
@import 'pages/auth.css';
@import 'pages/legal.css';

/* ── Global Layout ──────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container-sm {
  max-width: var(--container-sm);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* ── Section helpers ─────────────────────────────────────────── */
.section { padding-block: var(--space-20); }
.section-sm { padding-block: var(--space-12); }
.section-lg { padding-block: var(--space-24); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-gray-500);
  margin-bottom: var(--space-12);
}

/* ── Grid ────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ── Utilities ───────────────────────────────────────────────── */
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-primary  { color: var(--color-primary); }
.text-secondary{ color: var(--color-secondary); }
.text-muted    { color: var(--color-gray-500); }
.text-sm       { font-size: var(--text-sm); }
.text-lg       { font-size: var(--text-lg); }
.font-bold     { font-weight: var(--font-bold); }
.font-medium   { font-weight: var(--font-medium); }

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-8  { margin-bottom: var(--space-8); }

.w-full { width: 100%; }
.hidden { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Page title */
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-secondary);
  margin-bottom: var(--space-8);
}

/* Price display */
.price {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-secondary);
}
.price-vat {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}
.price-original {
  text-decoration: line-through;
  color: var(--color-gray-400);
  font-size: var(--text-base);
}
.price-highlight {
  color: var(--color-primary);
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--color-gray-200);
  margin-block: var(--space-6);
}