/* Module «brand-jewelry.ru»: only what is specific to it; shared components live in styles.css. Prefix bj-. */

/* ---------------------------------------------------------------- list page */
.bj-page .page-head .row { margin-left: auto; }
.bj-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s3); background: var(--card); border: 1px solid var(--border); }
.bj-tools .tb .input.search { width: min(380px, 100%); }
.bj-tools .sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 var(--s1); }
.bj-tools select.input { width: auto; min-width: 170px; max-width: 100%; }
.bj-tools .chip .n { font-weight: 700; font-variant-numeric: tabular-nums; opacity: .65; }
.bj-tools .chip[aria-pressed=true] .n { opacity: .85; }
.bj-tools .chip.warn:not([aria-pressed=true]) .n { color: var(--bad); opacity: 1; }
.bj-tools .reset { margin-left: auto; }
.bj-pillset, .bj-more { display: contents; }
.bj-morebtn { display: none; }

.bj-tbl { table-layout: fixed; }
.bj-tbl th.c-th, .bj-tbl td.c-th { width: 52px; padding: 0 0 0 var(--s2); }
.bj-tbl th.c-id { width: 62px; }
.bj-tbl th.c-brand { width: 168px; }
.bj-tbl th.c-cat { width: 108px; }
.bj-tbl th.c-price { width: 128px; }
.bj-tbl th.c-site { width: 132px; }
.bj-tbl th.c-ph { width: 78px; }
.bj-tbl td.c-id { color: var(--muted); }
.bj-tbl td.c-name { padding-right: var(--s2); }
.bj-tbl .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bj-tbl .sub-sm { display: none; }
.bj-lnk { display: block; width: 100%; max-width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.bj-lnk:hover .nm { text-decoration: underline; text-underline-offset: 3px; }
.bj-tbl .thumbbtn { display: block; width: 32px; height: 32px; padding: 0; border: 0; background: var(--soft); cursor: pointer; }
.bj-tbl .thumbbtn img { display: block; width: 32px; height: 32px; object-fit: cover; }
.bj-tbl tr.hid td { color: var(--muted); background: #fafafa; }
.bj-tbl tr.hid .nm { font-weight: 500; }
.bj-tbl tr.hid .thumbbtn img { filter: grayscale(1); opacity: .5; }
.bj-tbl td.c-price { font-weight: 700; }
.bj-tbl td.c-price .nop { color: var(--bad); font-weight: 700; }
.bj-tbl td.c-price.empty { background: var(--bad-bg); }
.bj-tbl td.c-price.editing { padding: 0; }
.bj-tbl td.c-price.editing input { width: 100%; height: 100%; min-height: 32px; border: 0; outline: none; padding: 0 var(--s3); background: transparent; font: inherit; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.bj-tbl td.c-price.bad { box-shadow: inset 0 0 0 2px var(--bad); }
.bj-tbl td.dry, .bj-ro.dry { outline: 1px dashed var(--primary); outline-offset: -3px; background: var(--primary-bg); }
.bj-tbl .sw { gap: 8px; font-size: var(--fs-sm); display: flex; align-items: center; height: 100%; margin: 0; }
.bj-tbl .sw .st { color: var(--muted); font-weight: 600; line-height: 1; }
.bj-tbl .sw input:checked ~ .st { color: var(--ok); }
.bj-tbl .sw.pend { opacity: .55; pointer-events: none; }
.bj-tbl td.c-site { overflow: visible; }
.bj-tbl tbody tr.busy td { opacity: .55; }
.bj-wrap.busy { opacity: .6; transition: opacity .15s; }
.bj-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }
.bj-foot kbd { font: 600 11px ui-monospace, Menlo, monospace; padding: 0 5px; border: 1px solid var(--border); background: var(--card); color: var(--fg); }
.bj-foot .pg { display: flex; align-items: center; gap: var(--s2); }
.bj-skel td { height: 34px; }

.bj-peek { position: fixed; z-index: 60; width: 340px; height: 340px; background: var(--card); border: 1px solid #cfd3d8; box-shadow: 0 16px 40px -14px rgba(0,0,0,.45); pointer-events: none; }
.bj-peek img { display: block; width: 100%; height: 100%; object-fit: contain; }

.bj-snack { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 450; display: flex; align-items: center; gap: var(--s3); max-width: min(680px, calc(100vw - 24px)); padding: 10px 10px 10px 16px; background: var(--fg); color: var(--bg); font-size: var(--fs-sm); font-weight: 600; box-shadow: 0 14px 36px -12px rgba(0,0,0,.5); }
.bj-snack .tx { display: grid; gap: 3px; min-width: 0; }
.bj-snack .dry { color: #ffb27a; font-weight: 800; }
.bj-snack code { font: 11px/1.35 ui-monospace, Menlo, monospace; font-weight: 400; opacity: .8; overflow-wrap: anywhere; }
.bj-snack .btn { min-height: 28px; padding: 0 var(--s3); background: transparent; color: #fff; border-color: rgba(255,255,255,.55); flex: none; }
.bj-snack .btn:hover { background: rgba(255,255,255,.12); }
.bj-snack .btn.x { padding: 0; width: 28px; border-color: transparent; }

/* ---------------------------------------------------------------- card (right drawer) */
.drawer.bj-drawer { width: min(660px, 100%); }
.bj-drawer .drawer-h .btn { flex: none; }
.bj-drawer .drawer-h .sub { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.bj-sec { align-content: start; }
.bj-sec > h3 { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.bj-dry-banner { padding: var(--s2) var(--s3); border: 1px dashed var(--primary); background: var(--primary-bg); color: #8a4a12; font-size: var(--fs-sm); font-weight: 600; }
.bj-price-box { display: flex; align-items: center; width: min(280px, 100%); height: 46px; border: 1px solid var(--border); background: var(--card); }
.bj-price-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
.bj-price-box.flash { animation: bjflash 1.2s ease-out 1; }
@keyframes bjflash { 0% { box-shadow: 0 0 0 0 rgba(239,122,56,.55); } 100% { box-shadow: 0 0 0 12px rgba(239,122,56,0); } }
.bj-price-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; padding: 0 var(--s3); background: transparent; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bj-price-box .cur { padding: 0 var(--s3) 0 0; font-size: 18px; font-weight: 700; color: var(--muted); }
.bj-price-box.bad { border-color: var(--bad); background: var(--bad-bg); }
.bj-price-hint { min-height: 18px; font-size: var(--fs-sm); color: var(--muted); }
.bj-price-hint .w { color: var(--warn); font-weight: 700; }
.bj-price-hint .b { color: var(--bad); font-weight: 700; }
.bj-sell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: start; }
.bj-vis { display: grid; gap: 4px; justify-items: start; }
.bj-vis .sw { font-size: var(--fs-md); }
.bj-vis .sw .st { font-weight: 700; }
.bj-vis .sw input:not(:checked) ~ .st { color: var(--bad); }
.bj-vis .sw input:checked ~ .st { color: var(--ok); }
.bj-site { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s3); border-top: 1px solid var(--grid-line); }
.bj-site .url { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-xs); }
.bj-card textarea.input { min-height: 150px; line-height: 1.45; }
.bj-count { font-weight: 500; }
.bj-ro { padding: 0 var(--s2); }

.bj-photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.bj-ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s2); }
.bj-ph { position: relative; aspect-ratio: 1; background: var(--soft); border: 1px solid var(--border); cursor: grab; overflow: hidden; }
.bj-ph.is-main { border: 2px solid var(--primary); }
.bj-ph.dragging { opacity: .35; }
.bj-ph.over { outline: 2px dashed var(--primary); outline-offset: -3px; }
.bj-ph > img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.bj-ph .no { position: absolute; left: 0; top: 0; padding: 1px 7px; background: rgba(29,32,36,.78); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.bj-ph.is-main .no { background: var(--primary); }
.bj-ph .ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 3px; gap: 2px; background: linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0)); opacity: 0; transition: opacity .12s; }
.bj-ph:hover .ctl, .bj-ph:focus-within .ctl { opacity: 1; }
@media (hover: none) { .bj-ph .ctl { opacity: 1; } }
.bj-ph .ctl button { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: 0; background: rgba(255,255,255,.92); color: var(--fg); }
.bj-ph .ctl button:hover { background: #fff; color: var(--primary); }
.bj-ph .ctl button.rm:hover { color: var(--bad); }
.bj-ph .ctl button[disabled] { opacity: .3; pointer-events: none; }
.bj-ph .ctl svg { width: 14px; height: 14px; }
.bj-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
.bj-removed { display: grid; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--soft); border: 1px dashed var(--border); }
.bj-removed .lg { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.bj-rm-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bj-rm { display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; font-size: 11px; font-weight: 700; color: var(--muted); }
.bj-rm img { width: 48px; height: 48px; object-fit: cover; opacity: .6; border: 1px solid var(--border); }
.bj-rm:hover { color: var(--primary); }
.bj-rm:hover img { opacity: 1; }

.bj-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--s4); font-size: var(--fs-sm); margin-top: var(--s3); }
.bj-meta dt { color: var(--muted); font-weight: 600; }
.bj-meta dd { margin: 0; overflow-wrap: anywhere; }
details.bj-sec > summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); list-style: none; }
details.bj-sec > summary::before { content: '▸ '; }
details.bj-sec[open] > summary::before { content: '▾ '; }
.modal:has(.bj-bigimg) { max-width: min(920px, 100%); }
.bj-bigimg { display: block; width: 100%; max-height: 74vh; object-fit: contain; background: var(--soft); }

/* ---------------------------------------------------------------- phone */
@media (max-width: 700px) {
  .bj-page .page-head .row, .bj-page .page-head .sub { display: none; }
  .bj-page h1 { font-size: 18px; }
  .bj-tools { padding: var(--s2); gap: 6px; }
  .bj-tools .tb { flex-wrap: nowrap; }
  .bj-tools .tb .input.search { width: auto; flex: 1 1 0; min-width: 0; }
  .bj-tools .tb .count { flex: none; }
  .bj-tools .tb.bj-filters { flex-wrap: wrap; }
  .bj-pills { flex-wrap: nowrap; overflow-x: auto; flex: 1 1 0; min-width: 0; scrollbar-width: none; }
  .bj-pills::-webkit-scrollbar { display: none; }
  .bj-pills .chip { flex: none; }
  .bj-morebtn { display: inline-flex; flex: none; }
  .bj-more { display: none; }
  .bj-tools.open .bj-more { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  .bj-tools .sep { display: none; }
  .bj-tools select.input { flex: 1 1 100%; width: 100%; }
  .bj-tbl th.c-id, .bj-tbl td.c-id, .bj-tbl th.c-brand, .bj-tbl td.c-brand, .bj-tbl th.c-cat, .bj-tbl td.c-cat, .bj-tbl th.c-ph, .bj-tbl td.c-ph { display: none; }
  .bj-tbl th.c-th, .bj-tbl td.c-th { width: 48px; }
  .bj-tbl th.c-price { width: 98px; }
  .bj-tbl th.c-site { width: 56px; }
  .bj-tbl .sw .st { display: none; }
  .bj-tbl td { height: 58px; max-width: none; }
  .bj-tbl td.c-name { white-space: normal; }
  .bj-tbl .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  .bj-tbl .sub-sm { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bj-tbl .thumbbtn, .bj-tbl .thumbbtn img { width: 38px; height: 38px; }
  .bj-foot .hide-sm, .bj-tbl th .hide-sm { display: none; }
  .bj-sell { grid-template-columns: minmax(0, 1fr); }
  .bj-ph-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bj-ph .ctl button { width: 30px; height: 30px; }
  .bj-snack { left: 8px; right: 8px; bottom: 74px; transform: none; max-width: none; }
}