/* =====================================================
   Gold.com.bd — Premium Layer
   Loaded AFTER style.css. Refines tokens, typography,
   product cards and the product archive (filters/brands).
   "Where Luxury Becomes Legacy."
   ===================================================== */

:root {
  --gold:         #B8963E;
  --gold-light:   #D9BC6A;
  --gold-dark:    #8C7029;
  --gold-bg:      #FBF6E9;
  --dark:         #14120E;
  --dark-2:       #0C0B09;
  --ivory:        #FAF8F3;
  --line:         #E9E3D4;
  --ink:          #1B1A17;
  --primary:      #9C2B2B;          /* muted garnet for sale / urgent accents */
  --primary-dark: #7A1F1F;
  --border:       var(--line);
  --text:         var(--ink);
  --text-muted:   #7A7468;
  --radius:       4px;
  --radius-sm:    2px;
  --radius-lg:    8px;
  --shadow-sm:    0 1px 3px rgba(20,18,14,.06);
  --shadow:       0 6px 24px rgba(20,18,14,.07);
  --shadow-md:    0 14px 40px rgba(20,18,14,.12);
  --shadow-gold:  0 6px 24px rgba(184,150,62,.22);
  --font-display: 'Playfair Display', 'Noto Sans Bengali', Georgia, serif;
  --transition:   all .25s cubic-bezier(.2,.7,.2,1);
}

body { background: var(--ivory); color: var(--ink); letter-spacing: .005em; }
::selection { background: var(--gold); color: #fff; }

h1, h2, h3, .section-title { font-family: var(--font-display); letter-spacing: .01em; }
h1, h2 { font-weight: 600; }

/* ── Buttons ─────────────────────────────────────── */
.btn-dark, .btn-filter {
  background: var(--dark);
  color: #fff;
  border: 1px solid var(--dark);
  border-radius: var(--radius-sm);
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: var(--transition);
}
.btn-dark:hover, .btn-filter:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ── Section titles ──────────────────────────────── */
.section-title { font-weight: 600; color: var(--dark); }

/* ── Breadcrumb ──────────────────────────────────── */
.breadcrumb-bar { background: #fff; border-bottom: 1px solid var(--line); }
.breadcrumb-bar .breadcrumb { font-size: 12px; letter-spacing: .04em; color: var(--text-muted); }
.breadcrumb-bar .breadcrumb a:hover { color: var(--gold-dark); }
.breadcrumb-current { color: var(--dark); font-weight: 600; }

/* ── Product card ────────────────────────────────── */
.product-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.product-card:hover {
  border-color: var(--gold-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.product-card-img { background: #FCFBF8; }
.product-card-img img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-card-img img { transform: scale(1.05); }

.product-card-badges { top: 10px; left: 10px; gap: 5px; }
.badge-discount, .badge-tag, .badge-oos, .badge-preorder {
  border-radius: var(--radius-sm);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
}
.badge-discount { background: var(--primary); }
.badge-tag      { background: var(--dark); color: var(--gold-light); }
.badge-oos      { background: #55524B; }
.badge-preorder { background: var(--gold-dark); }

.product-card-body { padding: 14px 16px 12px; }
.product-brand {
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-dark);
}
.product-name { font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.product-name a:hover { color: var(--gold-dark); }
.product-price { color: var(--dark); font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; }
.product-old-price { color: #A8A296; font-weight: 400; }

/* Quick-view action: quiet, appears on hover */
.card-action-btn {
  background: #fff; border: 1px solid var(--line); color: var(--dark);
  border-radius: 50%; box-shadow: var(--shadow-sm);
}
.card-action-btn:hover { background: var(--dark); color: var(--gold-light); border-color: var(--dark); }

/* Card call-to-action */
.product-card-footer-dazzle { border-top: 1px solid var(--line); }
.btn-buynow-dazzle {
  background: #fff; color: var(--dark);
  padding: 13px 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.btn-buynow-dazzle i { color: var(--gold); }
.btn-buynow-dazzle:hover { background: var(--dark); color: #fff; }
.btn-buynow-dazzle:hover i { color: var(--gold-light); }
.btn-buynow-oos { background: #F3F1EC; color: #9A9486; }
.btn-buynow-oos:hover { background: #F3F1EC; color: #9A9486; }

/* ── Archive: brand pills ────────────────────────── */
#brandPillsRow, #moreBrandsGrid { gap: 8px !important; }
#brandPillsRow .brand-pill,
#moreBrandsGrid .brand-pill {
  height: auto; min-width: 0;
  padding: 9px 20px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  background: #fff !important;
  color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1;
  transition: var(--transition);
}
#brandPillsRow .brand-pill:hover,
#moreBrandsGrid .brand-pill:hover {
  border-color: var(--gold) !important; color: var(--gold-dark); transform: translateY(-1px);
}
#brandPillsRow .brand-pill.active,
#moreBrandsGrid .brand-pill.active {
  background: var(--dark) !important; color: var(--gold-light) !important;
  border-color: var(--dark) !important;
}
#moreBrandsToggle { border-radius: 999px !important; background: #fff !important; }
#moreBrandsPanel { border-radius: var(--radius) !important; box-shadow: var(--shadow); }

/* ── Archive: filter sidebar ─────────────────────── */
.filter-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: none; overflow: hidden;
}
.filter-header {
  background: var(--dark); color: #fff;
  padding: 14px 16px; letter-spacing: .12em; text-transform: uppercase;
}
.filter-header span span { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .14em !important; }
.filter-section { border-bottom: 1px solid var(--line); }
.filter-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dark);
}
.filter-check { font-size: 13px; padding: 5px 0; }
.filter-check:hover { color: var(--gold-dark); }
.filter-check input[type="checkbox"],
.filter-check input[type="radio"] { accent-color: var(--gold); }

.filter-range-pill {
  border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-size: 11.5px; letter-spacing: .02em; padding: 6px 12px;
}
.filter-range-pill:hover { border-color: var(--gold); background: var(--gold-bg); }
.filter-range-pill.active { background: var(--dark); border-color: var(--dark); color: var(--gold-light); font-weight: 600; }

.price-box-group { border-radius: var(--radius-sm); border-color: var(--line); }
.price-box-group:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,150,62,.14); }
.price-go-btn { background: var(--dark); color: var(--gold-light); }
.price-go-btn:hover { background: var(--gold); color: #fff; }

.filter-active-tag {
  background: var(--gold-bg); border: 1px solid var(--gold-light); color: var(--dark);
  border-radius: 999px; font-size: 11px; padding: 3px 10px; cursor: pointer;
}
.filter-active-tag:hover { background: var(--dark); color: var(--gold-light); border-color: var(--dark); }

/* ── Archive: toolbar + empty state ──────────────── */
#resultsCount { letter-spacing: .02em; }
.form-select-sm { border-radius: var(--radius-sm); border-color: var(--line); }

.archive-empty {
  text-align: center; padding: 72px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.archive-empty i { display: block; font-size: 2.6rem; color: var(--gold); margin-bottom: 14px; }
.archive-empty h5 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin-bottom: 6px; }
.archive-empty p { color: var(--text-muted); font-size: 13.5px; margin-bottom: 20px; }

/* ── Mobile bottom nav ───────────────────────────── */
#mobileBottomNav { background: #fff; border-top: 1px solid var(--line); }
.mbn-tab.active, .mbn-tab.active .mbn-icon-wrap i { color: var(--gold-dark); }

/* ── Focus + a11y ────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Phones ──────────────────────────────────────── */
@media (max-width: 767px) {
  .product-card-body { padding: 10px 11px 8px; }
  .btn-buynow-dazzle { padding: 11px 6px; font-size: 10.5px; letter-spacing: .12em; }
  #brandPillsRow { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  #brandPillsRow::-webkit-scrollbar { display: none; }
  #brandPillsRow .brand-pill { flex-shrink: 0; padding: 8px 16px !important; }
}