/* petrades website - based on the pets.derbfactory.net layout (D22, D29), modernized gently in 0.4.0 (D40):
   black header band with the header image of the breed, accent color per breed (set on <body> by Page), cards,
   compact list. Width (D55, #94): fluid up to 1200 px (the list with the sidebar 1320 px, wider by the visitor's
   setting); header band and text pages stay 900 px wide; layout B puts the search into a sidebar. Settings (D58): saved searches, "Save search" and "Share" at the list, the settings page. */

:root {
  --accent: #e00000;
  --on-accent: #fff;
  --link: #006ac8;
  --text: #1f1f1f;
  --muted: #6b6b6b;
  --line: #e2e2e2;
  --bg: #f4f4f2;
  --card: #ffffff;
  --row-alt: #f8f8f7;
  --row-hover: #eef4fb;
  --auction: #fbeeee;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 6px rgba(0, 0, 0, .04);
  --page: 1200px;   /* widest content (D55, #94); every page sets its own (Page::width) */
  --head: 900px;    /* header image, menu and text pages */
  --gutter: 24px;
}

* { box-sizing: border-box; }
body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  margin: 0;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: 0; vertical-align: middle; }
.inner, .page { width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.page { padding-bottom: 8px; }

/* ---------------------------------------------------------------- header band */
.top { background: #000; border-bottom: 3px solid var(--accent); }
.top .inner { max-width: var(--head); padding-left: 0; padding-right: 0; }
.top .head img { display: block; width: 900px; max-width: 100%; height: auto; }
.menu { display: flex; }
.menu a {
  flex: 1;
  text-align: center;
  color: #d6d6d6;
  padding: 9px 4px 8px;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  letter-spacing: .02em;
  transition: color .15s, background .15s;
}
.menu a:hover { color: #fff; background: #1b1b1b; text-decoration: none; }
.menu a.active { color: #fff; font-weight: 600; border-bottom-color: var(--accent); background: #161616; }
.menu svg { vertical-align: -3px; } /* five equal tabs, each with its symbol (#111) */

/* ---------------------------------------------------------------- breed switch */
.breeds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0 4px; }
.breeds a {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: .9em;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.breeds a:hover { border-color: #bbb; text-decoration: none; }
.breeds a.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.emoji { font-style: normal; }

/* ---------------------------------------------------------------- cards, announcements, notices */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.news {
  background: var(--card);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 10px 0;
  padding: 8px 14px;
  font-size: .9em;
}
.news .msg { margin: 4px 0; }
.news .msg + .msg { border-top: 1px dashed var(--line); padding-top: 6px; }
.news p { margin: 4px 0; }
/* "Learn more": the first line is the summary, the rest folds out (migration 035) */
.news-more > summary { cursor: pointer; list-style: none; }
.news-more > summary::-webkit-details-marker { display: none; }
.news-toggle { color: var(--link); font-weight: 600; white-space: nowrap; }
.news-more > summary:hover .news-toggle { text-decoration: underline; }
.news-more[open] .news-toggle .closed, .news-more:not([open]) .news-toggle .opened { display: none; }
.news-body { margin-top: 6px; }
.news-body h3 { font-size: 1em; font-weight: 600; margin: 10px 0 2px; }
.news-body ul { margin: 2px 0 4px; padding-left: 20px; }
.news-body li { margin: 2px 0; }
.hot { color: #d00000; }
.notice { background: #fff4d6; border-radius: var(--radius); padding: 8px 12px; margin: 10px 0; }
.muted { color: var(--muted); }

/* ---------------------------------------------------------------- search form */
.search { text-align: center; margin: 10px 0 8px; padding: 10px 12px 6px; font-size: .88em; }
.search .row { margin: 5px 0; }
.search label { white-space: nowrap; margin: 0 4px; }
.search input[type=search], .search select {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #fff;
}
.search input[type=search] { width: 320px; max-width: 60%; }
.search input[type=search]:focus, .search select:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 2px rgba(0, 106, 200, .15); }
button, .button {
  display: inline-block;
  font: inherit;
  padding: 4px 12px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #f3f3f3;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}
button:hover, .button:hover { background: #e9e9e9; text-decoration: none; }
button.primary, .button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
button.primary:hover, .button.primary:hover { filter: brightness(.95); }
/* search bar (#101, D64): search row, filters as chips in one row, "More options", sorting and active filters above the list */
.search.sb { padding: 12px 14px 8px; text-align: left; }
.sb .row.main { display: flex; gap: 6px; margin: 0 0 8px; }
.sb .row.main input[type=search] { flex: 1 1 auto; width: auto; max-width: none; padding: 7px 12px; border-radius: 6px; }
.sb .row.main button { padding: 6px 20px; border-radius: 6px; }
.sb .sb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 2px 0 4px; }
.sb .sb-line { margin: 0 0 6px; } /* "Search in" right under the search field (#111) */
.sb-block { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.sb-label, .sb-sort { color: var(--muted); }
.sb label { margin: 0; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border: 1px solid #cfcfcf; border-radius: 999px; background: #fff; color: var(--text); white-space: nowrap; cursor: pointer; text-decoration: none; }
.chip:hover { border-color: #999; text-decoration: none; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@supports selector(:has(*)) {
  .sb label.chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .sb label.chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .sb label.chip:has(:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
}
.sb-more { margin: 6px 0 2px; }
.sb-more > summary { color: var(--link); font-size: .95em; cursor: pointer; }
.sb-more[open] > summary { margin-bottom: 4px; }
.results-row .sb-sort { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-left: auto; font-size: .82em; }
.results-row .sb-sort select { font: inherit; padding: 2px 6px; border: 1px solid #c8c8c8; border-radius: 4px; background: #fff; }
.sb-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 2px 8px; font-size: .82em; }
.sb-active .clear { margin-left: 4px; }
/* legend (#98): a short line, "＋" opens every symbol */
.legend { position: relative; margin: 2px 2px 8px; font-size: .85em; color: var(--muted); line-height: 1.8; }
.legend .item { white-space: nowrap; margin: 0 10px 0 0; }
.legend-all { display: inline-block; }
.legend-all > summary { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border: 1px solid #cfcfcf; border-radius: 999px; background: #fff; color: var(--text); font-weight: 700; line-height: 1; list-style: none; cursor: pointer; }
.legend-all > summary::-webkit-details-marker { display: none; }
.legend-all[open] > summary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.legend-panel { position: absolute; z-index: 40; left: 0; top: calc(100% + 4px); width: min(660px, 92vw); max-height: 70vh; overflow: auto; padding: 12px 16px 8px; border-radius: var(--radius); background: var(--card); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, .2), 0 0 0 1px var(--line); columns: 2 230px; column-gap: 20px; line-height: 1.5; }
.legend-panel section { break-inside: avoid; margin: 0 0 10px; }
.legend-panel h3 { margin: 0 0 4px; font-size: 1em; }
.legend-panel ul { margin: 0; padding: 0; list-style: none; }
.legend-panel li { margin: 2px 0; }
.legend-panel .sym { display: inline-block; min-width: 2.6em; }
.legend-close { position: absolute; top: 4px; right: 6px; padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 1.4em; line-height: 1; cursor: pointer; }
.search .legend { margin: 4px 0 2px; }

.results { font-size: .82em; color: var(--muted); margin: 6px 2px; }
.results-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 6px 2px; }
.results-row .results { margin: 0; }

/* saved searches (D58): chips under the search, "Save search" and "Copy link" / "Share" next to the number of listings */
.saved { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 8px 0; font-size: .86em; }
.saved a { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; white-space: nowrap; box-shadow: var(--shadow); }
.saved a:hover { border-color: #bbb; text-decoration: none; }
.saved a.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.saved a.edit { background: none; border-color: transparent; box-shadow: none; color: var(--link); }
.saved-note { display: none; }
/* after saving (#saved): a note at the bottom of the screen that fades out; fixed, so the page does not jump */
.saved-note:target {
  display: block;
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 24px;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: #1f1f1f;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transform: translateX(-50%);
  animation: note 6s forwards;
}
.saved-note a { color: #9cd0ff; }
@keyframes note { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.list-actions { position: relative; display: flex; align-items: center; gap: 6px; font-size: .82em; }
.list-actions .button { padding: 2px 10px; white-space: nowrap; }
.list-actions .is-saved { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.list-actions .layout-toggle { display: none; margin: 0; } /* sidebar switch (#96): only where layout B works */
@media (min-width: 1200px) { .list-actions .layout-toggle { display: inline-flex; } }
.save-search > summary { list-style: none; }
.save-search > summary::-webkit-details-marker { display: none; }
.save-search[open] > summary { background: #e6e6e6; }
.save-search .pop {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 6px);
  width: 320px;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 10px 12px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18), 0 0 0 1px var(--line);
  font-size: 1.1em;
  text-align: left;
}
.save-search .pop p { margin: 0; }
.save-search .pop label { display: block; margin-bottom: 8px; font-weight: 600; }
.save-search .pop input[type=text] { display: block; width: 100%; margin-top: 4px; font: inherit; font-weight: 400; padding: 5px 8px; border: 1px solid #c8c8c8; border-radius: 4px; }
.save-search .pop .hint { margin-top: 8px; color: var(--muted); font-size: .88em; }

/* top sellers above the list: a grid like a table - the label, then three equal places; medal, name and number line
   up in both rows, the whole place is the link (#135, D85) */
.tops { margin: 8px 0; padding: 2px 14px; font-size: .86em; }
.tops-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tops-grid th { width: 10.5em; padding: 6px 8px 6px 0; font-weight: 600; text-align: left; white-space: nowrap; }
.tops-grid td { padding: 0; border-left: 1px solid var(--line); }
.tops-grid tr + tr > * { border-top: 1px solid var(--line); }
.tops-grid td.none { padding: 6px 10px; }
.tops-grid a { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.tops-grid a:hover { background: var(--row-hover); text-decoration: none; }
.tops .medal { flex: none; }
.tops .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tops .n { flex: none; min-width: 2.6em; padding: 0 6px; border-radius: 999px; background: var(--row-alt); border: 1px solid var(--line); color: var(--muted); font-size: .9em; font-variant-numeric: tabular-nums; text-align: center; }

/* ---------------------------------------------------------------- listing table */
table.list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
table.list th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e9e9e7;
  color: #444;
  font-weight: 600;
  font-size: .833em; /* #111: a touch larger */
  padding: 6px;
  text-align: left;
  border-bottom: 1px solid #d6d6d4;
}
table.list th:first-child { border-top-left-radius: var(--radius); }
table.list th:last-child { border-top-right-radius: var(--radius); }
table.list td {
  padding: 5px 6px;
  font-size: .867em; /* 13 px (#111) */
  vertical-align: middle;
  border-bottom: 1px solid #efefed;
  overflow-wrap: anywhere;
}
table.list tbody tr:nth-child(even) td { background: var(--row-alt); }
table.list tbody tr:hover td { background: var(--row-hover); }
table.list tr.auction td { background: var(--auction); }
table.list tr.auction td:first-child { box-shadow: inset 3px 0 0 #d33; }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list td.title a { display: block; color: var(--link); }
table.list td.title a:hover { text-decoration: none; }
table.list td.title a:hover b, table.list td.title a:hover { color: #00498a; }
table.list td.title .sub { color: var(--muted); font-size: .95em; }
table.list td.title .auc-note { color: var(--text); font-size: .9em; font-weight: 400; } /* running web auction (#136) */
table.list td.title .auc-tag { color: #cc0000; }
/* widths in % for every width (#111); "More from" and the auctions have other columns, table-layout fixed shares the rest */
table.list .title { width: 40%; }
table.list .status { width: 11%; }
table.list td.status span { white-space: nowrap; }
table.list .price { width: 10%; text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.list td.price .none { color: var(--muted); font-weight: 400; }
table.list .owner { width: 16%; }
table.list .region { width: 17%; }
table.list td.owner, table.list td.region { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
table.list .tp { width: 6%; text-align: center; }
table.list.with-img .img { width: 18%; }
table.list.with-img .title { width: 30%; }
table.list.with-img .status { width: 10%; }
table.list.with-img .owner, table.list.with-img .region { width: 14%; }
table.list.with-img .tp { width: 4%; }
table.list td.img a { display: block; }
table.list td.img img { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; border-radius: 4px; } /* the SL picture: 320 × 240 */
@media (min-width: 641px) {
  /* the link covers its whole cell: title, owner, region and teleport (#111); not in the cards of the phone view */
  table.list td.title, table.list td.owner, table.list td.region, table.list td.tp, table.list td.status { position: relative; }
  table.list td.status .peek-open::after { content: ""; position: absolute; inset: 0; } /* the whole cell opens the quick facts */
  table.list td.title a::after, table.list td.owner a::after, table.list td.region a::after, table.list td.tp a::after { content: ""; position: absolute; inset: 0; }
  table.list td.owner a:hover, table.list td.region a:hover { color: #00498a; text-decoration: none; }
  /* grey line symbols in front of owner and region, drawn like the menu symbols */
  table.list td.owner a::before, table.list td.region a::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 4px;
    vertical-align: -2px;
    background: #9a9a9a;
  }
  table.list td.owner a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21c0-4.2 3.4-6.8 7.5-6.8s7.5 2.6 7.5 6.8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21c0-4.2 3.4-6.8 7.5-6.8s7.5 2.6 7.5 6.8'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  table.list td.region a::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s-7-6.3-7-11.8a7 7 0 0 1 14 0c0 5.5-7 11.8-7 11.8z'/%3E%3Ccircle cx='12' cy='9.7' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s-7-6.3-7-11.8a7 7 0 0 1 14 0c0 5.5-7 11.8-7 11.8z'/%3E%3Ccircle cx='12' cy='9.7' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
table.list td.empty { text-align: center; color: var(--muted); padding: 14px; }
/* quick facts (#135, D85): the symbols of the status cell are a button, the "i" shows it; the window comes from peek.js */
table.list td.status .peek-open { display: block; width: 100%; min-height: 1.45em; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.peek-open .peek-i { display: inline-block; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; background: #d4d4cf; color: #fff; font: 700 10px/15px Georgia, serif; text-align: center; vertical-align: 1px; opacity: 0; transition: opacity .12s; }
table.list tbody tr:hover .peek-i, .peek-open:focus-visible .peek-i { opacity: 1; }
.peek-open[aria-expanded="true"] .peek-i { opacity: 1; background: var(--accent); color: var(--on-accent); }
.peek-open:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.peek { position: absolute; z-index: 60; width: min(300px, calc(100vw - 24px)); padding: 10px 32px 11px 12px; border: 1px solid #d6d6d1; border-radius: 8px; background: var(--card); box-shadow: 0 10px 28px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08); color: var(--text); font-size: 13px; line-height: 1.45; }
.peek::before { content: ""; position: absolute; top: -7px; left: var(--ax, 20px); width: 12px; height: 12px; border-left: 1px solid #d6d6d1; border-top: 1px solid #d6d6d1; background: var(--card); transform: rotate(45deg); }
.peek.above::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.peek p { margin: 0; }
.peek .pk-name { font-weight: 700; overflow-wrap: anywhere; }
.peek .pk-meta { color: var(--muted); }
.peek .pk-vals { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.peek .pk-val { padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--row-alt); font-size: 12.5px; }
.peek .pk-auction { margin-top: 7px; padding: 4px 8px; border-radius: 5px; background: var(--auction); box-shadow: inset 3px 0 0 #d33; font-size: 12.5px; }
.peek .pk-x { position: absolute; top: 6px; right: 6px; padding: 2px 6px; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.peek .pk-x:hover { background: var(--row-alt); color: var(--text); }
@media (prefers-reduced-motion: no-preference) { .peek { animation: peek-in .12s ease-out; } }
@keyframes peek-in { from { opacity: 0; transform: translateY(-3px); } }
table.list .breed { font-size: 1.1em; }
.expired { color: #800000; }
.soon { color: #cc0000; }

.pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 14px 0 4px; font-size: .85em; }
.pages a, .pages span {
  min-width: 30px;
  padding: 3px 8px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--card);
}
.pages a:hover { border-color: #bbb; text-decoration: none; }
.pages .current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.pages .gap { border: 0; background: none; min-width: 0; color: var(--muted); }
.pages .off { color: #bbb; }

/* ---------------------------------------------------------------- detail page */
.crumbs { margin: 12px 2px 6px; font-size: .88em; }
.detail { padding: 14px 18px 16px; }
.detail .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.detail h1 { font-size: 1.6em; line-height: 1.25; margin: 0 0 4px; font-weight: 600; overflow-wrap: anywhere; }
.detail .copy { flex: none; font-size: .82em; margin-top: 4px; }
.detail .subtitle { margin: 0 0 8px; color: #444; }
.detail .facts { display: flex; gap: 22px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; }
.detail .picture img { display: block; border-radius: var(--radius); box-shadow: var(--shadow); background: #fafafa; }
.detail .data-col { flex: 1; min-width: 0; }
.detail table.data { font-size: .9em; border-spacing: 0 4px; }
.detail table.data th { text-align: left; font-weight: normal; color: var(--muted); padding-right: 16px; white-space: nowrap; vertical-align: top; }
.detail table.data td { overflow-wrap: anywhere; }
.detail .big { font-weight: 600; font-size: 1.1em; }
.detail .actions { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.detail .actions .button { padding: 6px 14px; }
.detail .actions .button img { height: 18px; margin: -2px 4px 0 -4px; }
.detail .texts { display: flex; gap: 14px; margin-top: 16px; }
.detail .texts section { flex: 1; background: #f6f6f4; border-radius: var(--radius); padding: 8px 12px; font-size: .88em; }
.detail .texts h2, .detail .auction h2, .more h2 { font-size: 1.02em; font-weight: 600; margin: 4px 0 6px; }
.detail .auction { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 6px; font-size: .9em; }
.detail table.bids { border-collapse: collapse; }
.detail table.bids th { text-align: left; font-weight: 600; background: #eee; padding: 3px 10px; }
.detail table.bids td { padding: 3px 10px; border-bottom: 1px solid var(--line); }
.more { margin-top: 18px; }
.more h2 { margin-left: 2px; }
.all-link { text-align: right; font-size: .88em; margin: 6px 2px; }

/* ---------------------------------------------------------------- text pages */
.content { padding: 6px 22px 14px; margin: 14px 0; line-height: 1.6; font-size: .93em; }
.content.card { max-width: var(--head); margin-left: auto; margin-right: auto; } /* text pages: reading width */
.content h2 { font-size: 1.12em; font-weight: 600; margin: 18px 0 4px; }
.content .intro { display: flex; gap: 22px; align-items: flex-start; }
.content .intro > div { flex: 1; }
.content .intro img { border-radius: var(--radius); flex: none; }
.content .support { display: flex; gap: 12px; align-items: center; }
.content details { border-bottom: 1px solid var(--line); padding: 7px 0; }
.content details summary { cursor: pointer; font-weight: 600; }
.content details summary:hover { color: var(--link); }
.content details p { margin: 6px 0 2px; }

/* ---------------------------------------------------------------- footer */
.foot { margin-top: 24px; background: #000; color: #aaa; font-size: .75em; }
.foot .inner { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.foot a { color: #ddd; }
.foot a.dev { color: #5a5a5a; } /* the way into the DEV area, kept quiet */
.foot a.dev:hover { color: #ddd; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 940px) {
  :root { --gutter: 10px; }
}
@media (max-width: 700px) {
  body { font-size: 14px; }
  .menu a { padding: 8px 2px 7px; font-size: .92em; }
  .breeds { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; }
  .search input[type=search] { max-width: 55%; }
  .detail .facts, .detail .texts, .content .intro { flex-direction: column; }
  .detail .picture img { width: 100%; max-width: 256px; height: auto; }
  table.list .owner, table.list .region { display: none; }
  table.list .title { width: 62%; }
  table.list .status { width: 16%; }
  table.list .price { width: 14%; }
  table.list .tp { width: 8%; }
}

/* imprint and privacy policy (D51) */
.legal h3 { font-size: 1em; font-weight: 600; margin: 16px 0 4px; }
.legal ul { margin: 4px 0 8px; padding-left: 22px; }
.legal .langs { text-align: right; margin: 0; font-size: .9em; }
.legal { scroll-margin-top: 12px; }
.foot .links a + a { margin-left: 14px; }

/* About page: tabs, customer changelog, feedback form (D52) */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; border-bottom: 2px solid var(--accent); }
.tabs a { padding: 7px 14px; color: var(--text); border-radius: var(--radius) var(--radius) 0 0; }
.tabs a:hover { background: var(--row-hover); text-decoration: none; }
.tabs a.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
/* the customer's account behind the kiosk link (#117, D69): tiles, tables, chart of 12 months, filter of the history */
.account h3 { margin: 22px 0 6px; font-size: 1em; }
.acct-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 10px 0 4px; }
.acct-tile { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--row-alt); }
.acct-tile h3 { margin: 0 0 4px; font-size: .8em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.acct-tile .big { margin: 0 0 4px; font-size: 1.5em; font-weight: 700; line-height: 1.25; }
.acct-tile p { margin: 0; }
.acct-tile.balance { border-left: 4px solid var(--accent); }
.acct-tile.warn { border-left: 4px solid #e08a00; background: #fff8ec; }
table.acct { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
table.acct th, table.acct td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.acct th { background: var(--row-alt); font-weight: 600; }
table.acct .r { text-align: right; white-space: nowrap; }
table.acct tr.total td { font-weight: 700; }
table.acct td.out { color: #b00020; }
table.acct td.in { color: #1b6b28; }
.acct-chart { display: block; width: 100%; max-width: 720px; height: auto; }
.acct-chart rect.spent { fill: #c62828; }
.acct-chart rect.added { fill: #2e7d32; }
.acct-chart text { font-size: 12px; fill: var(--muted); }
.acct-chart line { stroke: var(--line); }
.acct-legend { margin: 2px 0 0; font-size: .85em; color: var(--muted); }
.acct-legend .sw { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 10px; border-radius: 2px; vertical-align: -1px; }
.acct-legend .sw:first-child { margin-left: 0; }
.acct-legend .spent { background: #c62828; }
.acct-legend .added { background: #2e7d32; }
.acct-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 8px; font-size: .9em; }
.acct-filter .group { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.acct-filter .group a, .acct-filter .group .on { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; }
.acct-filter .group .on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.acct-filter .csv { margin-left: auto; }
/* About → Pricing (#99) */
.pricing-tab h3 { font-size: 1em; font-weight: 600; margin: 18px 0 6px; }
.pricing-tab .price-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0; }
.pricing-tab .price-card { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--row-alt); }
.pricing-tab .amount { font-size: 1.35em; font-weight: 700; }
.pricing-tab .rules { padding-left: 20px; }
.pricing-tab .rules li { margin: 4px 0; }
table.pricing { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
table.pricing th, table.pricing td { padding: 6px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
table.pricing th { background: var(--row-alt); font-weight: 600; }
table.pricing:not(.premium) td + td, table.pricing.premium td:last-child, table.pricing.premium td:first-child { white-space: nowrap; }
/* About → Vision (#80): mission band with the way from the website to the kiosk, value cards, next steps, the story as
   a timeline with the colors of the breeds, a quiet note on who runs Petrades */
.vision { --tint: color-mix(in srgb, var(--accent) 9%, #fff); }
.vision h2 { margin: 34px 0 14px; font-size: 1.3em; font-weight: 700; }
.vision h2::after { content: ''; display: block; width: 36px; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--accent); }
.vision h3 { margin: 24px 0 10px; font-size: .78em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vision ol, .vision ul { list-style: none; margin: 0; padding: 0; }
.vision b { display: block; font-weight: 700; }
.vision svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vision .v-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.vision .v-hero { margin: 6px 0 4px; padding: 26px 28px 28px; border-radius: 12px; color: #c8c8c8;
  background: radial-gradient(110% 150% at 100% 0%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%), linear-gradient(160deg, #222, #000 70%); }
.vision .v-hero h2 { margin: 0 0 10px; font-size: .78em; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 55%, #fff); }
.vision .v-hero h2::after, .vision .v-behind h2::after { display: none; }
.vision .v-lead { margin: 0 0 24px; max-width: 24em; font-size: 1.6em; line-height: 1.3; font-weight: 600; color: #fff; }
.vision .v-flow, .vision .v-road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vision .v-flow li, .vision .v-road li { position: relative; }
.vision .v-flow .v-icon, .vision .v-road .v-icon { margin-bottom: 10px; }
.vision .v-flow li:not(:last-child)::after { content: ''; position: absolute; top: 21px; left: 56px; right: -8px; border-top: 2px dotted rgba(255, 255, 255, .3); }
.vision .v-flow .v-icon { border: 1.5px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff; }
.vision .v-flow b { margin-bottom: 2px; color: #fff; }
.vision .v-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vision .v-values li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.vision .v-values .v-icon { grid-row: span 2; border-radius: 12px; background: var(--tint); color: var(--accent); }
.vision .v-values b { margin: 1px 0 2px; }
.vision .v-values li > span:last-child, .vision .v-road li > span:last-child { color: #4a4a4a; }
.vision .v-statement { margin: 0 0 10px; padding: 18px 22px; border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; background: linear-gradient(90deg, var(--tint), var(--row-alt)); font-size: 1.25em; line-height: 1.45; }
.vision .v-road li::after { content: ''; position: absolute; top: 21px; left: 56px; right: -8px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, #fff), transparent); }
.vision .v-road .v-icon { border: 2px solid var(--accent); background: var(--card); color: var(--accent); }
.vision .v-time li:not(:last-child)::before { content: ''; position: absolute; left: 31px; top: 12px; bottom: -12px; width: 2px; background: linear-gradient(var(--line), color-mix(in srgb, var(--accent) 45%, var(--line))); }
.vision .v-time li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 18px; padding-bottom: 22px; }
.vision .v-time li:last-child { padding-bottom: 0; }
.vision .v-year { position: relative; align-self: start; padding: 3px 0; border-radius: 999px; background: #000; color: #fff; font-size: .9em; font-weight: 700; text-align: center; }
.vision .v-time li:last-child .v-year { background: var(--accent); color: var(--on-accent); }
.vision .v-step b { margin: 2px 0; }
.vision .v-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vision .v-chips span { padding: 2px 10px; border-radius: 999px; font-size: .85em; font-weight: 600; }
.vision .v-behind { margin: 36px 0 8px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--row-alt); color: #4a4a4a; font-size: .95em; }
.vision .v-behind h2 { margin: 0 0 6px; font-size: 1em; }
.vision .v-behind p { margin: 0; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.feedback { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 18px; background: var(--row-alt); }
.feedback h3 { margin: 0 0 8px; font-size: 1em; }
.feedback label { display: block; margin: 10px 0 2px; font-weight: 600; }
.feedback .hint { font-weight: 400; color: var(--muted); font-size: .9em; }
.feedback select, .feedback input[type=text], .feedback textarea {
  width: 100%; max-width: 640px; box-sizing: border-box; font: inherit; padding: 6px 8px;
  border: 1px solid #c9c9c9; border-radius: var(--radius); background: #fff;
}
.feedback textarea { min-height: 70px; }
.feedback .roles label { display: inline-flex; align-items: center; gap: 6px; margin: 4px 16px 0 0; font-weight: 400; }
.feedback .error { color: #b00020; font-size: .9em; margin: 2px 0 0; }
.feedback .story { background: #fff; border-left: 4px solid var(--accent); padding: 8px 12px; margin: 12px 0; font-style: italic; max-width: 640px; }
.feedback .send { margin-top: 12px; }
.feedback .hp, .feedback .fb-default { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* language of the form (#115): a row of small buttons at the top, the chosen one in the accent color */
.feedback .fb-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 10px; padding: 0 0 8px; border-bottom: 1px solid var(--line); font-size: .9em; }
.feedback .fb-lang-label { margin-right: 4px; color: var(--muted); }
.feedback .fb-langs button, .feedback .fb-langs .on { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font: inherit; line-height: 1.5; cursor: pointer; }
.feedback .fb-langs button:hover { background: var(--row-hover); }
.feedback .fb-langs .on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; cursor: default; }
.thanks { background: #e8f5e9; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 18px; }
.changelog h1 { font-size: 1.2em; margin: 4px 0 6px; }
.changelog h2 { font-size: 1.05em; }
.changelog ul { padding-left: 22px; }
.changelog li { margin: 4px 0; }

/* ---------------------------------------------------------------- layout B: search in a sidebar (D55, ?layout=b) */
@media (min-width: 1200px) {
  .layout-b .listing { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 0 18px; align-items: start; margin-top: 10px; }
  .layout-b .side { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; padding: 0 2px 4px; }
  .layout-b .search { margin: 0 0 10px; padding: 12px 14px 10px; text-align: left; }
  .layout-b .search .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 0 0 10px; }
  .layout-b .search .row.main input[type=search] { flex: 1 1 100%; width: 100%; max-width: none; }
  .layout-b .search .row.main button, .layout-b .search .row.main .button { flex: 1; text-align: center; }
  .layout-b .search .row + .row { border-top: 1px solid var(--line); padding-top: 10px; }
  .layout-b .search label { margin: 0 8px 0 0; }
  .layout-b .search select { margin-left: 2px; }
  .layout-b .side .legend .item { white-space: normal; }
  .layout-b .side .sb-row { gap: 6px 8px; }
  .layout-b .main > .tops:first-child { margin-top: 0; } /* top sellers above the list, not in the sidebar (#97) */
  .layout-b .main .results-row { margin-top: 0; }
  .layout-b .saved { justify-content: flex-start; margin: 0 0 10px; }
}
/* ---------------------------------------------------------------- settings page (D58) */
.settings h1 { font-size: 1.3em; font-weight: 600; margin: 4px 0 8px; }
.settings .crumbs { margin: 10px 0 0; }
.flash { margin: 8px 0; padding: 8px 12px; border-radius: var(--radius); }
.flash.ok { background: #e8f5e9; }
.flash.error { background: #fdecea; color: #8a1c1c; }
.settings fieldset { margin: 14px 0 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); }
.settings legend { padding: 0 8px 0 0; font-size: 1.05em; font-weight: 600; }
.settings .hint { margin: 2px 0 6px; color: var(--muted); font-size: .92em; }
.settings .choices { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.settings .choices.wide { flex-direction: column; }
.settings .choices label { cursor: pointer; }
.settings .choices .hint { margin: 0 0 0 4px; }
.settings .saved-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0; }
.settings .saved-row input[type=text] { flex: 1 1 220px; max-width: 360px; font: inherit; padding: 5px 8px; border: 1px solid #c8c8c8; border-radius: 4px; }
.settings .del { white-space: nowrap; cursor: pointer; }
.settings .width-setting { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 12px 0 2px; } /* #94 */
.settings .width-setting label { font-weight: 600; }
.settings .width-setting input[type=range] { flex: 1 1 240px; max-width: 420px; accent-color: var(--accent); }
.settings .width-setting output { min-width: 6.5em; font-weight: 600; }
/* live miniatures of the layouts (#95): the real list in a small "screen", three times bigger under the mouse */
.settings .layouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; margin-top: 4px; }
.settings .layout-choice { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; cursor: pointer; }
.settings .layout-choice .hint { margin: 0 0 0 4px; }
.settings .mini {
  --sw: 1920; --sh: 1080; --mw: 240;
  position: relative; display: block; width: calc(var(--mw) * 1px); aspect-ratio: var(--sw) / var(--sh); overflow: hidden;
  border: 5px solid #1d1d1d; border-radius: 6px; background: #f4f4f4; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transform-origin: top left; transition: transform .25s ease, box-shadow .25s ease; z-index: 1;
}
.settings .layout-choice + .layout-choice .mini { transform-origin: top right; }
.settings .mini iframe {
  position: absolute; top: 0; left: 0; width: calc(var(--sw) * 1px); height: calc(var(--sh) * 1px); border: 0;
  transform: scale(calc(var(--mw) / var(--sw))); transform-origin: 0 0; pointer-events: none; background: #f4f4f4;
}
.settings .mini:hover, .settings .layout-choice:focus-within .mini, .settings .mini.zoom { transform: scale(2.8); z-index: 30; box-shadow: 0 10px 36px rgba(0, 0, 0, .35); }
.settings .mini .zoom-close { display: none; position: absolute; top: 1px; right: 3px; z-index: 2; font-size: 9px; line-height: 1; color: #fff; background: #1d1d1d; border-radius: 0 0 0 3px; padding: 1px 3px; }
.settings .mini.zoom .zoom-close { display: block; }
@media (max-width: 940px) { .settings .mini:hover, .settings .layout-choice:focus-within .mini, .settings .mini.zoom { transform: scale(2); } }
@media (prefers-reduced-motion: reduce) { .settings .mini { transition: none; } }
.settings .apply { display: flex; gap: 8px; margin: 18px 0 8px; }
.settings .apply .button, .settings .apply button { padding: 6px 18px; }
.settings .cookie-info { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); font-size: .92em; }
/* desktop view on a phone: the way back to the phone view, large because the page is zoomed out (touch screens only) */
.view-switch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .view-switch { display: block; padding: 20px; background: #1a1a1a; text-align: center; }
  .view-switch button { padding: 14px 44px; border: 0; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-size: 40px; font-weight: 600; }
}

/* ---------------------------------------------------------------- parts of the phone view (D56, mobile.css) */
.tabbar, .search .filters > summary, .search .apply, .detail .actions .share, .list-actions .share { display: none; }
.detail .texts summary { list-style: none; pointer-events: none; } /* Stats and Parents only fold in the phone view */
.detail .texts summary::-webkit-details-marker { display: none; }