/* Samlingen – fælles design for hele sitet */
:root {
  --sx-ink: #222;
  --sx-muted: #6b6b6b;
  --sx-line: #e3e3e3;
  --sx-bg: #f6f5f2;
  --sx-accent: #222;
  --sx-radius: 14px;
}
body.sx { font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--sx-ink); background: #fff; margin: 0; padding: 0; }
body.sx a { color: var(--sx-ink); }
.sx-wrap { max-width: 1400px; margin: 0 auto; padding: 0 22px 60px; }

/* Topbjælke */
.sx-top { position: relative; z-index: 4; margin-bottom: 30px; background: linear-gradient(180deg, #c4a073 0%, #8a6740 100%); border-bottom: 3px solid #5e4529; }
.sx-top-in { max-width: none; margin: 0; padding: 10px 18px 8px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sx-brand { font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--sx-ink); text-decoration: none; }
.sx-brand:hover { text-decoration: none; color: var(--sx-ink); }
.sx-nav { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
.sx-bm { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 5px; border: 1px solid var(--sx-line); border-radius: 99px; font-weight: 600; font-size: 14px; color: var(--sx-ink); text-decoration: none; background: #fff; }
.sx-bm:hover { background: var(--sx-bg); text-decoration: none; color: var(--sx-ink); }
.sx-bm img { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; border: 1px solid var(--sx-line); background: #fff; margin-right: -2px; }
.sx-bm img + img { margin-right: 2px; }
.sx-mini { display: flex; gap: 6px; }
.sx-mini input { height: 40px; width: 220px; max-width: 100%; border: 1px solid var(--sx-line); border-radius: 10px; padding: 0 12px; font-size: 14px; background: #fff; }
.sx-mini input:focus { outline: 2px solid var(--sx-accent); border-color: transparent; }
.sx-mini button { height: 40px; border: 0; border-radius: 10px; background: var(--sx-accent); color: #fff; font-weight: 700; padding: 0 14px; cursor: pointer; }
.sx-admin { display: flex; gap: 12px; font-size: 13px; }
.sx-admin a { color: var(--sx-muted); }

/* Brødkrumme */
.sx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 10px; font-size: 14px; color: var(--sx-muted); }
.sx-crumbs a { color: var(--sx-muted); text-decoration: none; }
.sx-crumbs a:hover { color: var(--sx-ink); text-decoration: underline; }
.sx-crumbs i { font-style: normal; color: #b5b5b5; }
.sx-crumbs span { color: var(--sx-ink); font-weight: 600; }

/* Overskrifter */
.sx-title { font-size: 32px; font-weight: 800; letter-spacing: -.5px; margin: 6px 0 6px; }
.sx-lead { color: var(--sx-muted); max-width: 820px; margin: 0 0 18px; }
.sx-h2 { font-size: 22px; font-weight: 800; margin: 30px 0 4px; }
.sx-h2 a { text-decoration: none; }
.sx-h2 a:hover { text-decoration: underline; }
.sx-sub { color: var(--sx-muted); margin: 0 0 12px; }
.sx-credit { color: var(--sx-muted); font-size: 13px; margin: 0 0 14px; }

/* Fliser / kort */
.sx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 8px; }
.sx-grid.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sx-tile { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); overflow: hidden; color: var(--sx-ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.sx-tile:hover { box-shadow: 0 8px 22px rgba(0,0,0,.13); transform: translateY(-3px); text-decoration: none; color: var(--sx-ink); }
.sx-tile .pic { aspect-ratio: 4 / 3; background: var(--sx-bg); display: flex; align-items: center; justify-content: center; }
.sx-tile .pic img { width: 100%; height: 100%; object-fit: cover; }
.sx-tile .pic.pair img { width: 50%; object-fit: contain; }
.sx-tile .name { padding: 11px 14px 13px; font-weight: 600; font-size: 15px; line-height: 1.25; }
.sx-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.sx-tools a, .sx-tools span { background: rgba(255,255,255,.95); border: 1px solid var(--sx-line); border-radius: 8px; padding: 2px 9px; font-size: 12px; color: var(--sx-ink); text-decoration: none; cursor: pointer; }
.sx-tools a:hover, .sx-tools span:hover { text-decoration: underline; }

/* Tomtilstand */
.sx-empty { background: var(--sx-bg); border-radius: var(--sx-radius); padding: 40px 24px; text-align: center; color: var(--sx-muted); }
.sx-empty strong { display: block; color: var(--sx-ink); font-size: 18px; margin-bottom: 6px; }

/* Knapper */
.sx-btn { display: inline-block; border: 1px solid var(--sx-line); background: #fff; border-radius: 10px; padding: 8px 16px; font-weight: 600; font-size: 14px; color: var(--sx-ink); text-decoration: none; cursor: pointer; }
.sx-btn:hover { background: var(--sx-bg); text-decoration: none; color: var(--sx-ink); }
.sx-btn.dark { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-btn.dark:hover { background: #000; color: #fff; }
.sx-btn.disabled { opacity: .4; pointer-events: none; }

/* Detaljeside */
.sx-detail { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; align-items: start; margin-top: 8px; }
.sx-photo { background: var(--sx-bg); border-radius: var(--sx-radius); padding: 14px; text-align: center; }
.sx-photo img { max-width: 100%; height: auto; border-radius: 10px; cursor: zoom-in; background: #fff; }
.sx-photo.pair { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sx-photo.pair img { max-width: calc(50% - 6px); }
.sx-desc { font-size: 16px; line-height: 1.6; white-space: pre-line; }
.sx-desc img { max-width: 100%; height: auto; }
.sx-facts { width: 100%; border-collapse: collapse; margin-top: 18px; }
.sx-facts th { width: 32%; padding: 9px 10px 9px 0; color: var(--sx-muted); font-weight: 600; vertical-align: top; border-top: 1px solid var(--sx-line); }
.sx-facts td { padding: 9px 0; border-top: 1px solid var(--sx-line); }
.sx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sx-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 10px; }
.sx-pager small { color: var(--sx-muted); }

/* Lightbox til billeder */
.sx-lb { position: fixed; inset: 0; background: rgba(10,10,10,.9); display: none; align-items: center; justify-content: center; z-index: 2000; cursor: zoom-out; }
.sx-lb.on { display: flex; }
.sx-lb img { max-width: 94vw; max-height: 92vh; border-radius: 8px; background: #fff; }

/* Bund */
.sx-foot { background: var(--sx-bg); border-top: 1px solid var(--sx-line); margin-top: 40px; }
.sx-foot-in { max-width: 1400px; margin: 0 auto; padding: 28px 22px 34px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; font-size: 14px; color: var(--sx-muted); }
.sx-foot strong { color: var(--sx-ink); display: block; margin-bottom: 4px; }
.sx-foot a { color: var(--sx-ink); }
.sx-foot p { margin: 0 0 6px; }

@media (max-width: 800px) {
  .sx-wrap { padding: 0 14px 50px; }
  .sx-top-in { padding: 10px 14px; gap: 10px; }
  .sx-nav { justify-content: flex-start; width: 100%; }
  .sx-mini { width: 100%; }
  .sx-mini input { flex: 1; width: auto; }
  .sx-title { font-size: 26px; }
  .sx-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sx-grid.wide { grid-template-columns: 1fr; }
  .sx-tile .name { font-size: 14px; padding: 9px 11px 11px; }
  .sx-detail { grid-template-columns: 1fr; gap: 18px; }
  .sx-foot-in { grid-template-columns: 1fr; gap: 16px; padding: 22px 14px 28px; }
}

/* Række med brødkrumme + søgning */
.sx-toprow { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.sx-toprow .sx-crumbs { margin: 10px 0; }
@media (max-width: 800px) { .sx-toprow .sx-mini { width: 100%; } }
/* Adminlinje i bunden (kun for indloggede) */
.sx-adminbar { background: #222; color: #fff; font-size: 13px; }
.sx-adminbar-in { max-width: 1400px; margin: 0 auto; padding: 10px 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.sx-adminbar a { color: #fff; text-decoration: underline; }

/* BM-nøglen i lightbox */
.sx-bmlb { position: fixed; inset: 0; background: rgba(10,10,10,.82); z-index: 3000; display: none; align-items: center; justify-content: center; padding: 2.5vh 2vw; }
.sx-bmlb.on { display: flex; }
.sx-bmlb-box { position: relative; width: min(1560px, 100%); height: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.sx-bmlb-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.sx-bmlb-x { position: absolute; top: 10px; right: 14px; z-index: 2; border: 1px solid var(--sx-line); background: rgba(255,255,255,.96); border-radius: 99px; padding: 6px 16px; font-weight: 700; font-size: 14px; cursor: pointer; }
.sx-bmlb-x:hover { background: var(--sx-bg); }
html.sx-bmlb-open { overflow: hidden; }
@media (max-width: 800px) { .sx-bmlb { padding: 0; } .sx-bmlb-box { border-radius: 0; } }

/* Moentikoner i headerens chips: hvid baggrund faar irgroen farve */
.sx-coin { display: inline-block; width: 30px; height: 30px; line-height: 0; border-radius: 50%; background: #4a8f78; isolation: isolate; flex: 0 0 auto; margin-right: -2px; }
.sx-bm .sx-coin img { width: 30px; height: 30px; margin: 0; border: 0; background: transparent; border-radius: 50%; mix-blend-mode: multiply; }
.sx-coin.sx-silver { background: #d3d6da; }

/* Chips og soegefelt i headeren: pergament/creme i stedet for hvid, god kontrast mod jordbrun */
.sx-top .sx-bm { background: #f4ead6; border-color: #5e4529; color: #3a2a18; }
.sx-top .sx-bm:hover { background: #fff8e8; color: #3a2a18; }
.sx-top .sx-mini input { background: #f4ead6; border-color: #5e4529; color: #3a2a18; }
.sx-top .sx-mini input::placeholder { color: #7a6548; }
.sx-top .sx-mini input:focus { outline: 2px solid #3a2a18; background: #fff8e8; }
.sx-top .sx-mini button { background: #3a2a18; color: #f4ead6; }
.sx-top .sx-mini button:hover { background: #2a1d10; }