/**
 * HoopSupply – basketball / streetwear design system (ecommerce-hoopsupply)
 *
 * API theme colors (--primary-50..900, --secondary-*, --neutral-*) are injected on :root
 * by color-manager.ts from api/resources/themes/ecommerce/hoopsupply/colors.json.
 *
 * Design-only tokens below mirror source-themes/hoopsupply-ecommerce-template/style.css.
 */

:root {
  --font-body: 'DM Sans', sans-serif;
  --font-heading: 'Archivo Black', sans-serif;
  --hoop-soft: #f5f5f3;
  --hoop-line: #deded9;
  --hoop-blue: #325ee8;
  --hoop-green: #b7f439;
  --hoop-red: #e53935;
  --hoop-paper: #fff;

  --primary-main: var(--primary-500);
  --primary-hover: var(--primary-600);
  --secondary-main: var(--secondary-500);

  --background-primary: var(--hoop-paper);
  --background-secondary: var(--hoop-soft);
  --background-card: var(--hoop-paper);

  --text-primary: var(--primary-500);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--hoop-paper);

  --border-light: var(--hoop-line);
  --border-medium: var(--neutral-300);

  --button-primary-background: var(--secondary-500);
  --button-primary-background-hover: var(--secondary-600);
  --button-primary-text: var(--hoop-paper);

  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.theme-hoopsupply {
  max-width: 100%;
  overflow-x: clip;
}

.theme-hoopsupply,
.theme-hoopsupply * {
  font-family: var(--font-body);
}

.theme-hoopsupply h1,
.theme-hoopsupply h2,
.theme-hoopsupply h3,
.theme-hoopsupply h4,
.theme-hoopsupply h5,
.theme-hoopsupply h6,
.theme-hoopsupply .hoop-heading {
  font-family: var(--font-heading);
}

.hoop-wrap {
  width: min(1440px, calc(100% - 42px));
  margin-inline: auto;
}

/* Page head + breadcrumb — shared by Products, Product, Contact, Cart, Checkout */
.hoop-page-head {
  padding: 48px 0;
  border-bottom: 1px solid var(--hoop-line);
}

.hoop-page-head__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.055em;
  color: var(--text-primary);
}

.hoop-crumb {
  margin-top: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-500);
}

.hoop-crumb a {
  color: inherit;
  text-decoration: none;
}

.hoop-crumb a:hover {
  color: var(--secondary-500);
}

.theme-bg-page {
  background-color: var(--background-primary);
}

.theme-bg-soft {
  background-color: var(--background-secondary);
}

.theme-bg-card {
  background-color: var(--background-card);
}

.theme-text-heading {
  color: var(--text-primary);
}

.theme-text-body {
  color: var(--text-secondary);
}

.theme-border {
  border-color: var(--border-light);
}

.theme-product-price {
  color: var(--text-primary);
  font-weight: 800;
  font-family: var(--font-heading);
}

.theme-btn-primary,
.theme-add-to-cart {
  background-color: var(--button-primary-background);
  color: var(--button-primary-text);
  border-radius: 0;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.theme-btn-primary:hover:not(:disabled),
.theme-add-to-cart:hover:not(:disabled) {
  background-color: var(--button-primary-background-hover);
}

.hoop-accent-orange {
  color: var(--secondary-500);
}

.hoop-accent-blue {
  color: var(--hoop-blue);
}

.hoop-accent-green {
  color: var(--hoop-green);
}

.hoop-accent-red {
  color: var(--hoop-red);
}

.hoop-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: var(--button-primary-background);
  color: var(--button-primary-text);
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hoop-btn-primary:hover:not(:disabled) {
  background: var(--button-primary-background-hover);
}

.hoop-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--primary-600);
  border: 1px solid var(--hoop-line);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.hoop-btn-outline:hover {
  border-color: var(--primary-500);
  color: var(--primary-700);
}

.hoop-card {
  background: var(--background-card);
  border: 1px solid var(--border-light);
}