/* ============================================================
   CATALOG PAGE styles
   ============================================================ */

.ann {
  background: var(--espresso); border-bottom: 1px solid rgba(228,198,150,0.10); text-align: center;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #b7a78f;
  padding: 9px 0; font-weight: 400;
}
.ann b { color: var(--gold-soft); font-weight: 500; }

/* ---------- banner ---------- */
.cat-banner { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.cat-banner-bg { position: absolute; inset: 0;
  background:
    radial-gradient(90% 130% at 88% 10%, rgba(189,138,79,0.18), transparent 58%),
    linear-gradient(116deg, #1f1711 42%, #382719 100%); }
.cat-banner-tex { position:absolute; top:0; bottom:0; right:0; width:44%;
  background-image: repeating-linear-gradient(100deg, rgba(255,238,212,0.05) 0 2px, transparent 2px 22px), repeating-linear-gradient(82deg, rgba(0,0,0,0.16) 0 5px, transparent 5px 24px);
  -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); }
.cat-banner .wrap { position: relative; padding: 50px 40px 42px; }
.crumb { font-size: 12px; letter-spacing: 0.1em; color: #9f907b; margin-bottom: 20px; display: flex; gap: 9px; align-items: center; }
.crumb a:hover { color: #e3d2b8; }
.crumb .sep { opacity: .5; }
.crumb b { color: #e3d2b8; font-weight: 400; }
.cat-banner h1 { font-family: var(--serif); font-weight: 500; font-size: 54px; line-height: 1; color: #fff6e8; letter-spacing: -0.01em; }
.cat-banner p { font-size: 15px; color: #b7a78f; margin-top: 14px; max-width: 540px; line-height: 1.6; }

/* ---------- layout ---------- */
.cat-layout { display: grid; grid-template-columns: 256px 1fr; gap: 40px; align-items: start; padding: 38px 0 80px; }

/* ---------- sidebar ---------- */
.filters { position: sticky; top: 90px; }
.filters .grp { padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.filters .grp:first-child { padding-top: 0; }
.filters h4 { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.filters h4 .clr { font-size: 10px; letter-spacing: 0.06em; color: var(--gold-dim); cursor: pointer; text-transform: none; }
.filters h4 .clr:hover { color: var(--gold-soft); }

.opt { display: flex; align-items: center; gap: 11px; padding: 7px 0; cursor: pointer; user-select: none; }
.opt .box { width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: 3px; flex: none; display: grid; place-items: center; transition: all .16s; }
.opt .box svg { width: 11px; height: 11px; opacity: 0; color: #1a140c; transition: opacity .12s; }
.opt input { display: none; }
.opt input:checked + .box { background: var(--gold); border-color: var(--gold); }
.opt input:checked + .box svg { opacity: 1; }
.opt .lbl { font-size: 13.5px; color: var(--text-2); flex: 1; transition: color .16s; }
.opt:hover .lbl { color: var(--text); }
.opt .cnt { font-size: 12px; color: var(--text-faint); }

.swatch-opts { display: flex; flex-wrap: wrap; gap: 9px; }
.cswatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); cursor: pointer; position: relative; transition: transform .15s; }
.cswatch:hover { transform: scale(1.12); }
.cswatch.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--gold); }

.price-read { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); margin-top: 12px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--line-strong); border-radius: 3px; outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); cursor: pointer; box-shadow: 0 0 0 4px rgba(189,138,79,0.18); }
.range::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--gold); cursor: pointer; }

/* ---------- toolbar ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); margin-bottom: 22px; }
.tool-l { font-size: 13.5px; color: var(--text-dim); display: flex; align-items: center; gap: 18px; }
.tool-l b { color: var(--text); font-weight: 500; }
.cat-search { display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 9px 13px; width: 230px; transition: border-color .2s; }
.cat-search:focus-within { border-color: var(--line-strong); }
.cat-search svg { width: 15px; height: 15px; color: var(--text-dim); flex: none; }
.cat-search input { background: none; border: none; outline: none; color: var(--text); font-family: var(--sans); font-size: 13px; font-weight: 300; width: 100%; }
.cat-search input::placeholder { color: var(--text-faint); }
.showing { white-space: nowrap; }
.tool-r { display: flex; align-items: center; gap: 14px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; padding: 6px 11px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2); }
.chip b { color: var(--gold-soft); font-weight: 400; }
.chip .x { cursor: pointer; opacity: .6; font-size: 14px; line-height: 1; }
.chip .x:hover { opacity: 1; color: var(--gold-soft); }

.select { position: relative; }
.select select { -webkit-appearance: none; appearance: none; font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 10px 36px 10px 14px; cursor: pointer; outline: none; }
.select select:hover { border-color: var(--line-strong); }
.select select option { background: var(--panel-2); }
.select svg { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--text-dim); pointer-events: none; }

.viewtog { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.viewtog button { width: 38px; height: 38px; display: grid; place-items: center; background: var(--panel); color: var(--text-dim); border: none; transition: all .15s; }
.viewtog button + button { border-left: 1px solid var(--line); }
.viewtog button.on { background: var(--panel-3); color: var(--gold-soft); }
.viewtog button svg { width: 16px; height: 16px; }

/* ---------- grid ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .35s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.card .ph { position: relative; aspect-ratio: 4/5; }
.card .ph .swatch { position: absolute; inset: 0; }
.card .tag { position: absolute; top: 13px; left: 13px; z-index: 2; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; padding: 5px 10px; border-radius: 2px; background: rgba(19,18,16,0.78); backdrop-filter: blur(4px); color: var(--gold-soft); border: 1px solid var(--line); }
.card .tag.low { color: #d8a07a; }
.card .fav { position: absolute; top: 11px; right: 11px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(19,18,16,0.6); backdrop-filter: blur(4px); border: 1px solid var(--line); color: var(--text-2); transition: all .2s; }
.card .fav:hover { color: var(--gold-soft); border-color: var(--line-strong); }
.card .fav.on { color: var(--gold); border-color: var(--gold); }
.card .fav.on svg { fill: currentColor; }
.card .fav svg { width: 15px; height: 15px; }
.card .quick { position: absolute; left: 13px; right: 13px; bottom: 13px; z-index: 2; opacity: 0; transform: translateY(8px); transition: all .28s; }
.card:hover .quick { opacity: 1; transform: translateY(0); }
.card .quick .btn { width: 100%; padding: 12px; font-size: 11px; }
.card .body { padding: 17px 17px 19px; display: flex; flex-direction: column; flex: 1; }
.card .mill { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 7px; }
.card h4 { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--text); line-height: 1.15; margin-bottom: 8px; }
.card .attr { font-size: 12.5px; color: var(--text-dim); display: flex; gap: 7px; flex-wrap: wrap; }
.card .attr span::after { content: '·'; margin-left: 7px; color: var(--text-faint); }
.card .attr span:last-child::after { content: ''; }
.card .price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.card .price b { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--text); }
.card .price span { font-size: 12px; color: var(--text-dim); }
.card .moq { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }

/* list view */
.grid.list { grid-template-columns: 1fr; gap: 14px; }
.grid.list .card { flex-direction: row; }
.grid.list .card .ph { width: 200px; aspect-ratio: auto; flex: none; }
.grid.list .card .quick { display: none; }
.grid.list .card .body { padding: 22px 26px; }
.grid.list .card .price-row { display: none; }
.grid.list .card .desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin: 10px 0 16px; max-width: 560px; }
.grid.list .card .list-foot { margin-top: auto; display: flex; align-items: center; gap: 30px; }
.grid.list .card .specs { display: flex; gap: 26px; }
.grid.list .card .specs div i { font-style: normal; color: var(--text-faint); display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.grid.list .card .specs div b { font-size: 13.5px; color: var(--text-2); font-weight: 400; }
.grid.list .card .list-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.grid.list .card .list-actions .btn { padding: 12px 22px; }
.list-only { display: none; }
.grid.list .list-only { display: block; }
.grid.list .attr { display: none; }

.rate { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.rate svg { width: 13px; height: 13px; color: var(--gold); fill: var(--gold); }

/* pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 50px; }
.pager button { min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; color: var(--text-2); font-family: var(--sans); font-size: 13.5px; transition: all .15s; }
.pager button:hover:not(:disabled) { border-color: var(--line-strong); color: var(--text); }
.pager button.on { background: linear-gradient(178deg,#cf9b59,#bd8a4f); color: #1a140c; border-color: transparent; font-weight: 500; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .gap { color: var(--text-faint); padding: 0 4px; }
.pager svg { width: 15px; height: 15px; }

/* empty */
.empty { text-align: center; padding: 90px 20px; }
.empty svg { width: 44px; height: 44px; color: var(--text-faint); margin: 0 auto 20px; }
.empty h3 { font-family: var(--serif); font-size: 28px; color: var(--text-2); margin-bottom: 10px; }
.empty p { font-size: 14px; color: var(--text-dim); margin-bottom: 22px; }

@media (max-width: 1080px) {
  .cat-layout { grid-template-columns: 1fr; }
  .filters { position: static; display: grid; grid-template-columns: repeat(2,1fr); gap: 0 30px; margin-bottom: 20px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid.list .card { flex-direction: column; }
  .grid.list .card .ph { width: 100%; aspect-ratio: 16/9; }
}

@media (max-width: 560px) {
  .cat-banner .wrap { padding: 38px 18px 34px; }
  .cat-banner h1 { font-size: 42px; }
  .cat-layout { gap: 24px; padding-top: 28px; }
  .filters { grid-template-columns: 1fr; gap: 0; }
  .toolbar { display: grid; gap: 14px; align-items: stretch; }
  .tool-l, .tool-r { flex-wrap: wrap; gap: 10px; }
  .cat-search { width: 100%; }
  .select, .select select { width: 100%; }
  .viewtog { width: max-content; }
  .grid { grid-template-columns: 1fr; }
}