/* ============================================================
   browse.css — Diamond & Settings Browse Pages
   ============================================================ */

/* ── Context banner ─────────────────────────────────────────── */
.context-banner {
  background: var(--charcoal);
  color: rgba(255,255,255,.85);
  padding: 12px 24px;
  font-size: .88rem;
}
.context-banner__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.context-banner__icon { color: var(--gold); }
.context-banner__inner strong { color: var(--white); }
.context-banner__note { color: rgba(255,255,255,.5); font-size: .8rem; margin-left: auto; }
.context-banner__back { color: var(--gold-light); font-size: .82rem; white-space: nowrap; }
.context-banner__back:hover { color: var(--white); }

/* ── Browse layout ──────────────────────────────────────────── */
.browse-page { max-width: var(--max-width); margin: 0 auto; padding: 0 24px 80px; }
.browse-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
  padding-top: 32px;
}

/* ── Filter sidebar ─────────────────────────────────────────── */
.filter-sidebar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: sticky; top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow-y: auto;
  padding-bottom: 16px;
}
/* Subtle scrollbar */
.filter-sidebar::-webkit-scrollbar { width: 4px; }
.filter-sidebar::-webkit-scrollbar-track { background: transparent; }
.filter-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.filter-sidebar__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--white); z-index: 1;
}
.filter-sidebar__title { font-size: 1rem; font-family: var(--font-display); font-weight: 400; }
.filter-clear { font-size: .78rem; color: var(--mid); text-decoration: underline; cursor: pointer; }
.filter-clear:hover { color: var(--charcoal); }

.filter-group {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.filter-group:last-child { border-bottom: none; }
.filter-group__label {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mid); margin-bottom: 12px;
  font-family: var(--font-body); font-weight: 500;
}

/* Shape grid */
.shape-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.shape-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--light); cursor: pointer; transition: all .15s;
  font-size: .65rem; color: var(--mid);
}
.shape-btn svg { width: 24px; height: 24px; color: var(--mid); }
.shape-btn:hover { border-color: var(--charcoal); color: var(--charcoal); }
.shape-btn--active { border-color: var(--gold); background: var(--gold-pale); color: var(--gold); }
.shape-btn--active svg { color: var(--gold); }

/* Grade pills (colour, clarity, cut, cert) */
.grade-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.grade-pill {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 20px;
  font-size: .78rem; color: var(--mid); cursor: pointer; transition: all .15s;
  background: var(--light);
}
.grade-pill:hover { border-color: var(--charcoal); color: var(--charcoal); }
.grade-pill--active { border-color: var(--gold); background: var(--gold-pale); color: var(--charcoal); font-weight: 500; }
.filter-note { font-size: .72rem; color: var(--mid); margin-top: 8px; font-style: italic; }

/* Price range slider */
.range-filter { display: flex; flex-direction: column; gap: 12px; }
.range-filter__inputs { display: flex; align-items: center; gap: 8px; }
.range-filter__input-wrap {
  position: relative; flex: 1; display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white);
}
.range-filter__prefix, .range-filter__suffix {
  padding: 0 8px; font-size: .82rem; color: var(--mid); flex: none;
}
.range-filter__input {
  flex: 1; border: none; background: transparent; padding: 7px 4px;
  font-size: .85rem; font-family: var(--font-body); color: var(--charcoal);
  outline: none; width: 100%; min-width: 0;
}
.range-filter__sep { color: var(--mid); font-size: .85rem; flex: none; }

/* Dual range slider */
.range-slider { position: relative; height: 24px; margin-top: 4px; }
.range-slider__track,
.range-slider__fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 3px; border-radius: 2px; left: 0; right: 0;
}
.range-slider__track { background: var(--border); }
.range-slider__fill  { background: var(--gold); }
.range-slider__thumb {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 100%; height: 100%; appearance: none; background: transparent;
  pointer-events: none;
}
.range-slider__thumb::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--gold);
  cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* Quick preset buttons */
.quick-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.quick-btn {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 20px;
  font-size: .75rem; color: var(--mid); cursor: pointer; transition: all .15s;
  background: var(--light);
}
.quick-btn:hover { border-color: var(--gold); color: var(--charcoal); }

/* Style list (settings) */
.style-list { display: flex; flex-direction: column; gap: 4px; }
.style-btn {
  width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--radius);
  font-size: .88rem; color: var(--mid); cursor: pointer; transition: all .15s;
  border: 1px solid transparent;
}
.style-btn:hover { background: var(--light); color: var(--charcoal); }
.style-btn--active { background: var(--gold-pale); color: var(--charcoal); border-color: var(--gold); font-weight: 500; }

/* Metal grid */
.metal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metal-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: all .15s; background: var(--white);
}
.metal-btn:hover { border-color: var(--charcoal); }
.metal-btn--active { border-color: var(--gold); background: var(--gold-pale); }
.metal-btn__swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.1); }
.metal-btn__label { font-size: .8rem; color: var(--charcoal); }

/* ── Browse toolbar ─────────────────────────────────────────── */
.browse-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border); margin-bottom: 24px;
}
.browse-toolbar__count { font-size: .88rem; color: var(--mid); }
.browse-toolbar__count span { font-weight: 500; color: var(--charcoal); }
.browse-toolbar__right { display: flex; align-items: center; gap: 12px; }
.browse-sort {
  padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .85rem; font-family: var(--font-body); color: var(--charcoal);
  background: var(--white); cursor: pointer; outline: none;
}
.mobile-filter-toggle {
  display: none; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .85rem; cursor: pointer; background: var(--white);
}

/* ── Product Grid ────────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* ── Product Card ────────────────────────────────────────────── */
.product-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.product-card__img-wrap {
  display: block; position: relative;
  background: var(--light); padding: 24px;
  display: flex; align-items: center; justify-content: center;
  min-height: 180px;
  text-decoration: none;
  overflow: hidden;
}
.product-card__img-wrap img {
  max-height: 140px; object-fit: contain;
  transition: transform .3s;
}
.product-card:hover .product-card__img-wrap img { transform: scale(1.04); }

.product-card__gem-placeholder { width: 100px; height: 80px; color: var(--gold); opacity: .6; }
.product-card__gem-placeholder svg { width: 100%; height: 100%; }
.product-card__gem-placeholder--ring { width: 80px; height: 80px; }

.product-card__badges {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.badge {
  display: inline-block; padding: 3px 8px; border-radius: 2px;
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 500;
}
.badge--shape  { background: var(--charcoal); color: var(--white); }
.badge--lab    { background: var(--gold); color: var(--white); }
.badge--style  { background: var(--charcoal); color: var(--white); }
.badge--metal  { color: var(--white); }

.product-card__video-hint {
  position: absolute; bottom: 8px; right: 8px;
  font-size: .7rem; color: var(--mid); background: rgba(255,255,255,.9);
  padding: 2px 8px; border-radius: var(--radius);
}

.product-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.product-card__title { font-size: 1rem; line-height: 1.3; }
.product-card__title a { color: var(--charcoal); text-decoration: none; }
.product-card__title a:hover { color: var(--gold); }

.product-card__specs { display: flex; flex-wrap: wrap; gap: 6px; }
.card-spec { font-size: .78rem; color: var(--mid); display: flex; gap: 3px; align-items: center; }
.card-spec__label { color: var(--mid); font-size: .7rem; opacity: .7; }
.card-spec:not(:last-child)::after { content: '·'; margin-left: 6px; opacity: .4; }

.product-card__compat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-top: 2px;
}
.compat-label { font-size: .7rem; color: var(--mid); margin-right: 2px; }
.compat-shape {
  font-size: .7rem; padding: 2px 7px; border-radius: 10px;
  background: var(--light); border: 1px solid var(--border); color: var(--mid);
}
.compat-more { font-size: .7rem; color: var(--mid); }

.product-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
}
.product-card__price { font-family: var(--font-display); font-size: 1.25rem; color: var(--charcoal); }
.product-card__currency { font-size: .75rem; font-family: var(--font-body); color: var(--mid); }

/* ── Loading shimmer ─────────────────────────────────────────── */
.loading-shimmer { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.shimmer-card {
  height: 320px; border-radius: var(--radius-lg);
  background: linear-gradient(90deg, #f0ece6 25%, #e8e2da 50%, #f0ece6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  grid-column: 1 / -1; text-align: center; padding: 80px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.empty-state__icon { font-size: 2.5rem; color: var(--border); }
.empty-state h3 { font-family: var(--font-display); font-size: 1.4rem; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.pagination__btn {
  padding: 8px 20px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .88rem; color: var(--charcoal); text-decoration: none; background: var(--white);
  transition: all .15s;
}
.pagination__btn:hover { border-color: var(--charcoal); background: var(--charcoal); color: var(--white); }
.pagination__info { font-size: .85rem; color: var(--mid); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .browse-layout { grid-template-columns: 1fr; }
  .filter-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    width: 300px; max-height: 100vh; border-radius: 0;
    transform: translateX(-100%); transition: transform .3s;
  }
  .filter-sidebar.is-open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.2); }
  .mobile-filter-toggle { display: flex; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .shape-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr 1fr; }
}