:root {
  --bg: #0b0b0b;
  --panel: #111111;
  --panel-2: #171717;
  --border: rgba(255, 255, 255, 0.09);

  --text: #f4f4f4;
  --muted: #a7a7a7;

  --gold: #c8a35d;
  --gold-soft: #e0c58f;
  --gold-dark: #8d6d35;

  --danger: #d35d5d;

  --radius: 14px;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);

  --container: 1320px;
}


/* -----------------------------
   GLOBAL
----------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top right, rgba(200, 163, 93, 0.08), transparent 32%),
    var(--bg);
  color: var(--text);

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

a {
  color: inherit;
}

.hidden {
  display: none !important;
}

.container {
  width: min(
    calc(100% - 40px),
    var(--container)
  );

  margin: 0 auto;
}


/* -----------------------------
   HEADER
----------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;

  background: rgba(8, 8, 8, 0.94);
  border-bottom: 1px solid var(--border);

  backdrop-filter: blur(16px);
}

.header-inner {
  width: min(
    calc(100% - 40px),
    var(--container)
  );

  min-height: 76px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}

.brand-name {
  color: var(--gold);

  font-size: 1.25rem;
  font-weight: 800;

  letter-spacing: 0.12em;
}

.brand-subtitle {
  margin-top: 2px;

  color: var(--muted);

  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.header-actions {
  display: flex;
  align-items: center;
}

.selection-button {
  border: 1px solid rgba(200, 163, 93, 0.48);
  border-radius: 999px;

  background: rgba(200, 163, 93, 0.08);

  color: var(--text);

  padding: 10px 15px;

  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.selection-button:hover {
  background: rgba(200, 163, 93, 0.16);
}

.selection-count {
  min-width: 24px;
  height: 24px;

  padding: 0 7px;

  border-radius: 999px;

  background: var(--gold);
  color: #111;

  font-size: 0.78rem;
  font-weight: 800;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* -----------------------------
   HERO
----------------------------- */

.hero-section {
  padding: 80px 0 44px;
}

.eyebrow,
.panel-eyebrow {
  margin: 0 0 10px;

  color: var(--gold);

  font-size: 0.76rem;
  font-weight: 800;

  letter-spacing: 0.18em;
}

.hero-section h1 {
  margin: 0;

  max-width: 760px;

  font-size: clamp(
    2.2rem,
    5vw,
    4.8rem
  );

  line-height: 0.98;

  letter-spacing: -0.045em;
}

.hero-text {
  max-width: 720px;

  margin: 24px 0 0;

  color: var(--muted);

  font-size: 1.04rem;
}


/* -----------------------------
   CATALOG
----------------------------- */

.catalog-section {
  padding: 0 0 80px;
}

.catalog-toolbar {
  padding: 22px;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: rgba(17, 17, 17, 0.78);

  box-shadow: var(--shadow);
}

.search-wrapper label,
.filter-group label {
  display: block;

  margin-bottom: 7px;

  color: var(--muted);

  font-size: 0.78rem;
  font-weight: 700;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.search-wrapper input,
.filter-group select {
  width: 100%;
  height: 46px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: #0d0d0d;

  color: var(--text);

  padding: 0 13px;

  outline: none;
}

.search-wrapper input:focus,
.filter-group select:focus {
  border-color: rgba(200, 163, 93, 0.68);

  box-shadow:
    0 0 0 3px
    rgba(200, 163, 93, 0.09);
}

.filter-grid {
  margin-top: 16px;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
}

.filter-action {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


/* -----------------------------
   BUTTONS
----------------------------- */

.primary-button,
.secondary-button {
  min-height: 44px;

  border-radius: 10px;

  font-weight: 750;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.primary-button {
  border: 1px solid var(--gold);

  background:
    linear-gradient(
      135deg,
      var(--gold-soft),
      var(--gold-dark)
    );

  color: #111;

  padding: 12px 18px;
}

.secondary-button {
  border: 1px solid var(--border);

  background: #121212;

  color: var(--text);

  padding: 10px 16px;
}

.primary-button:hover:not(:disabled),
.secondary-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.secondary-button:hover:not(:disabled) {
  border-color: rgba(200, 163, 93, 0.45);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* -----------------------------
   STATUS AREA
----------------------------- */

.catalog-status-row {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.results-summary,
.loading-indicator {
  color: var(--muted);

  font-size: 0.88rem;
}

.loading-indicator {
  color: var(--gold);
}

.error-message {
  margin: 0 0 20px;

  padding: 14px 16px;

  border: 1px solid rgba(211, 93, 93, 0.35);
  border-radius: 10px;

  background: rgba(211, 93, 93, 0.08);

  color: #efb0b0;
}


/* -----------------------------
   PRODUCT GRID
----------------------------- */

.product-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;
}


/* -----------------------------
   PRODUCT CARD
----------------------------- */

.product-card {
  min-width: 0;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0)
    ),
    var(--panel);

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.product-card:hover {
  transform: translateY(-3px);

  border-color: rgba(200, 163, 93, 0.42);

  box-shadow:
    0 18px 36px
    rgba(0, 0, 0, 0.28);
}

.product-image-wrap {
  aspect-ratio: 4 / 3;

  background: #f7f7f7;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;
}

.product-image {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.product-card-body {
  padding: 17px;
}

.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 9px;
}

.product-brand {
  color: var(--gold);

  font-size: 0.75rem;
  font-weight: 800;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-status {
  color: var(--muted);

  font-size: 0.72rem;
}

.product-model {
  margin: 0;

  font-size: 1.05rem;
  line-height: 1.2;
}

.product-name {
  margin: 5px 0 0;

  color: #d6d6d6;

  font-size: 0.9rem;
}

.product-description {
  margin: 12px 0 0;

  color: var(--muted);

  font-size: 0.84rem;
}

.product-price {
  margin-top: 14px;

  color: var(--text);

  font-size: 1.05rem;
  font-weight: 800;
}

.product-price span {
  color: var(--gold);
}

.product-actions {
  margin-top: 16px;

  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 10px;
}

.product-link {
  min-height: 42px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: #0d0d0d;

  color: var(--text);

  padding: 0 12px;

  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 0.82rem;
}

.product-link:hover {
  border-color: rgba(200, 163, 93, 0.45);
}

.product-select-area {
  margin-top: 14px;

  padding-top: 14px;

  border-top: 1px solid var(--border);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
}

.product-select-label {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 0.82rem;
}

.product-select-label input {
  width: 17px;
  height: 17px;

  accent-color: var(--gold);
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 7px;
}

.quantity-control label {
  color: var(--muted);

  font-size: 0.76rem;
}

.quantity-input {
  width: 64px;
  height: 36px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: #0c0c0c;

  color: var(--text);

  text-align: center;
}


/* -----------------------------
   EMPTY STATE
----------------------------- */

.empty-state {
  padding: 70px 20px;

  border: 1px dashed var(--border);
  border-radius: var(--radius);

  text-align: center;
}

.empty-state h2 {
  margin: 0;
}

.empty-state p {
  margin: 8px 0 0;

  color: var(--muted);
}


/* -----------------------------
   PAGINATION
----------------------------- */

.pagination {
  margin-top: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 18px;
}

#pageIndicator {
  color: var(--muted);

  font-size: 0.86rem;
}


/* -----------------------------
   SELECTION PANEL
----------------------------- */

.selection-panel {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;

  z-index: 220;

  width: min(
    460px,
    100%
  );

  background: #0d0d0d;

  border-left: 1px solid var(--border);

  box-shadow:
    -18px 0 50px
    rgba(0, 0, 0, 0.5);

  transform: translateX(102%);

  transition:
    transform 0.28s ease;

  display: flex;
  flex-direction: column;
}

.selection-panel.open {
  transform: translateX(0);
}

.selection-panel-header {
  min-height: 92px;

  padding: 20px;

  border-bottom: 1px solid var(--border);

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}

.selection-panel-header h2 {
  margin: 0;

  font-size: 1.35rem;
}

.panel-close-button {
  width: 38px;
  height: 38px;

  border: 1px solid var(--border);
  border-radius: 50%;

  background: transparent;
  color: var(--text);

  font-size: 1.35rem;
}

.selected-items-container {
  flex: 1;

  overflow-y: auto;

  padding: 18px;
}

.selection-empty {
  color: var(--muted);

  text-align: center;

  padding: 44px 10px;
}

.selected-item {
  padding: 14px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--panel);

  margin-bottom: 10px;
}

.selected-item-top {
  display: flex;
  justify-content: space-between;

  gap: 12px;
}

.selected-item-model {
  font-weight: 800;
}

.selected-item-name {
  margin-top: 3px;

  color: var(--muted);

  font-size: 0.8rem;
}

.selected-item-bottom {
  margin-top: 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.selected-item-price {
  color: var(--gold);

  font-size: 0.84rem;
}

.remove-item-button {
  border: 0;

  background: transparent;
  color: #d78b8b;

  padding: 0;

  font-size: 0.78rem;
}

.selection-panel-footer {
  padding: 18px;

  border-top: 1px solid var(--border);

  background: #0a0a0a;
}

.selection-summary {
  margin-bottom: 7px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  color: var(--muted);

  font-size: 0.84rem;
}

.selection-summary strong {
  color: var(--text);
}

.selection-panel-footer .primary-button {
  width: 100%;

  margin-top: 14px;
}


/* -----------------------------
   OVERLAY
----------------------------- */

.panel-overlay {
  position: fixed;

  inset: 0;

  z-index: 210;

  background: rgba(0, 0, 0, 0.68);

  backdrop-filter: blur(2px);
}


/* -----------------------------
   FOOTER
----------------------------- */

.site-footer {
  border-top: 1px solid var(--border);

  padding: 30px 0 40px;

  color: var(--muted);

  font-size: 0.8rem;
}

.site-footer p {
  margin: 0;
}

.footer-note {
  margin-top: 7px !important;
}


/* -----------------------------
   TABLET
----------------------------- */

@media (max-width: 1050px) {

  .product-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .filter-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* -----------------------------
   SMALL TABLET
----------------------------- */

@media (max-width: 780px) {

  .hero-section {
    padding-top: 58px;
  }

  .product-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .header-inner {
    min-height: 68px;
  }

  .brand-subtitle {
    display: none;
  }

}


/* -----------------------------
   MOBILE
----------------------------- */

@media (max-width: 560px) {

  .container,
  .header-inner {
    width: min(
      calc(100% - 24px),
      var(--container)
    );
  }

  .hero-section {
    padding:
      42px 0
      28px;
  }

  .hero-section h1 {
    font-size: 2.35rem;
  }

  .hero-text {
    font-size: 0.94rem;
  }

  .catalog-toolbar {
    padding: 15px;
  }

  .filter-grid {
    grid-template-columns: 1fr;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .catalog-status-row {
    align-items: flex-start;
    flex-direction: column;

    padding: 14px 0;
  }

  .pagination {
    gap: 9px;
  }

  .selection-button {
    padding: 9px 11px;

    font-size: 0.8rem;
  }

  .brand-name {
    font-size: 1.05rem;
  }

}