/* ═══════════════════════════════════════════════════════════════════ */
/* catalog.css — catalog.html, collection.html specific styles         */
/* Filter sidebar, product grid, sort controls                         */
/* ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) { body { padding-top: 64px; } }

/* ─── PAGE HEADER ─────────────────────────────────────────────── */
.catalog-header {
  padding: 32px 40px 0;
}
@media (max-width: 767px) { .catalog-header { padding: 20px 16px 0; } }

.catalog-eyebrow {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 8px;
}
.catalog-title {
  font-family: var(--font-serif); font-size: clamp(32px, 5vw, 52px);
  font-weight: 300; color: var(--espresso); margin-bottom: 6px;
}
.catalog-desc { font-size: 14px; color: var(--mocha); line-height: 1.6; }

/* ─── TOOLBAR (sort + filter toggle) ────────────────────────── */
.catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px; border-bottom: 1px solid var(--beige);
}
@media (max-width: 767px) { .catalog-toolbar { padding: 14px 16px; } }

.toolbar-left { display: flex; align-items: center; gap: 12px; }
.filter-toggle-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--beige); font-size: 13px;
  color: var(--espresso); transition: all 0.2s;
  font-family: var(--font-sans);
}
.filter-toggle-btn:hover { border-color: var(--espresso); }
.filter-toggle-btn svg { width: 15px; height: 15px; }
.result-count { font-size: 13px; color: var(--mocha); }

.sort-select {
  appearance: none; -webkit-appearance: none;
  padding: 8px 32px 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--beige); background: var(--cream);
  font-size: 13px; color: var(--espresso);
  font-family: var(--font-sans);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A8A9E' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  cursor: pointer; outline: none;
  transition: border-color 0.2s;
}
.sort-select:focus { border-color: var(--espresso); }

/* ─── LAYOUT WITH SIDEBAR ────────────────────────────────────── */
.catalog-body {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .catalog-body.sidebar-open {
    grid-template-columns: 240px 1fr;
  }
}

/* ─── FILTER SIDEBAR ─────────────────────────────────────────── */
.filter-sidebar {
  display: none;
  padding: 24px 24px;
  border-right: 1px solid var(--beige);
}
.filter-sidebar.open { display: block; }

@media (max-width: 1023px) {
  /* sidebar becomes a bottom sheet / drawer on mobile */
  .filter-sidebar {
    position: fixed; inset: 0; z-index: 300;
    background: var(--cream); overflow-y: auto;
    padding: 20px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .filter-sidebar.open { transform: translateX(0); }
}

.filter-group { margin-bottom: 28px; }
.filter-group-title {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 14px; font-weight: 500;
}
.filter-option {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; cursor: pointer;
  font-size: 14px; color: var(--espresso);
}
.filter-option input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--espresso);
  cursor: pointer;
}
.filter-option:hover { color: var(--mocha); }

.filter-color-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid transparent; outline: 2px solid transparent;
  outline-offset: 2px; cursor: pointer; transition: outline-color 0.2s;
}
.filter-swatch.active { outline-color: var(--espresso); }
.filter-swatch:hover { outline-color: var(--mocha); }

.filter-clear-btn {
  font-size: 12px; color: var(--mocha); text-decoration: underline;
  text-underline-offset: 2px; transition: color 0.2s;
  background: none; border: none; cursor: pointer;
  margin-top: 8px; font-family: var(--font-sans);
}
.filter-clear-btn:hover { color: var(--espresso); }

/* ─── PRODUCT GRID ───────────────────────────────────────────── */
.catalog-grid-wrap { padding: 24px 40px; }
@media (max-width: 767px) { .catalog-grid-wrap { padding: 16px; } }


/* ─── LOAD MORE ──────────────────────────────────────────────── */
.load-more-wrap { text-align: center; padding: 40px 0 0; }
.load-more-btn {
  padding: 13px 40px; border-radius: 999px;
  border: 1.5px solid var(--espresso); color: var(--espresso);
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; font-family: var(--font-sans);
  transition: all 0.2s; cursor: pointer; background: transparent;
}
.load-more-btn:hover { background: var(--espresso); color: var(--cream); }
.load-more-btn:disabled { opacity: 0.4; cursor: default; }

/* ─── EMPTY STATE ────────────────────────────────────────────── */
.catalog-empty { padding: 80px 24px; text-align: center; }
.catalog-empty-title {
  font-family: var(--font-serif); font-size: 26px; color: var(--espresso);
  font-weight: 300; margin-bottom: 8px;
}
.catalog-empty-text { font-size: 14px; color: var(--mocha); line-height: 1.7; }