/* SellShnell
   Palette: ink navy, cool paper, cobalt for actions, signal yellow for prices + selling.
   The yellow price sticker is the one loud element; everything else stays quiet. */

:root {
  --ink: #15193A;
  --ink-2: #2B3160;
  --paper: #EEF1F7;
  --card: #FFFFFF;
  --line: #D5DBE7;
  --muted: #565E7D;
  --cobalt: #2440F0;
  --cobalt-dark: #1A30C4;
  --sticker: #FFD84A;
  --sticker-dark: #F2C200;
  --danger: #C8102E;
  --ok: #0F7A4A;
  --warn-bg: #FFF5CC;
  --warn-text: #6B5200;
  --bar: var(--ink);            /* top bar background */
  --on-bar: #FFFFFF;            /* text on the top bar */
  --on-bar-muted: #C9CEEA;
  --on-primary: #FFFFFF;        /* text on primary buttons */
  --on-sticker: var(--ink);     /* text on yellow price tags / sell button */
  --field: #FFFFFF;             /* input background */
  --scrim: rgba(21, 25, 58, .75);
  --tint-primary: #E3E7FF;
  --tint-danger: #FCE8EB;
  --tint-ok: #DDF3E8;
  --hard-shadow: var(--ink);
  --bar-2: var(--ink-2);        /* highlight inside the top bar */

  --display: 'Bricolage Grotesque', 'Arial Narrow', Arial, sans-serif;
  --body: 'Atkinson Hyperlegible', 'Segoe UI', Arial, sans-serif;

  --r-sm: 4px;
  --r-md: 8px;
  --gap: 1rem;
  --wrap: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 1rem/1.5 var(--body);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 .75rem; }
a { color: var(--cobalt); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.optional { font-weight: 400; color: var(--muted); font-size: .875rem; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--sticker); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* ── buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: 700 .95rem/1 var(--body);
  padding: .75rem 1.1rem;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--card); color: var(--ink);
}
.btn:disabled { opacity: .6; cursor: progress; }
.btn-primary { background: var(--cobalt); color: var(--on-primary); }
.btn-primary:hover { background: var(--cobalt-dark); }
.btn-dark { background: var(--bar); color: var(--on-bar); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-light { background: transparent; color: var(--on-bar); border-color: color-mix(in srgb, var(--on-bar) 35%, transparent); }
.btn-ghost-light:hover { border-color: var(--on-bar); }
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.btn-danger-ghost:hover { border-color: var(--danger); }
.btn-sell {
  background: var(--sticker); color: var(--on-sticker);
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  box-shadow: 3px 3px 0 var(--hard-shadow);
}
.btn-sell:hover { background: var(--sticker-dark); }
.btn-sell:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hard-shadow); }
.btn.big { width: 100%; padding: 1rem; font-size: 1.1rem; }
.small-btn { padding: .5rem .8rem; font-size: .875rem; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--cobalt); text-decoration: underline; cursor: pointer; }
.icon-btn { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--muted); padding: .2rem .5rem; border-radius: var(--r-sm); }
.icon-btn:hover { color: var(--ink); background: var(--paper); }

/* ── forms */
label { display: block; font-weight: 700; font-size: .925rem; margin-bottom: .9rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: .35rem;
  font: 400 1rem/1.4 var(--body); color: var(--ink);
  padding: .65rem .75rem;
  background: var(--field); border: 2px solid var(--line); border-radius: var(--r-sm);
}
input:focus, select:focus, textarea:focus { border-color: var(--cobalt); outline: none; }
textarea { resize: vertical; }
select[size] { padding: .25rem; }
select[size] option { padding: .3rem .4rem; border-radius: 3px; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
legend { font-weight: 700; font-size: .925rem; margin-bottom: .4rem; padding: 0; }
.radio, .check { display: flex; align-items: center; gap: .55rem; font-weight: 400; margin-bottom: .4rem; cursor: pointer; }
.radio input, .check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--cobalt); }
.form-error { color: var(--danger); font-weight: 700; min-height: 0; }
.form-error:empty { display: none; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.actions.spread { justify-content: space-between; }
.actions.spread > div { display: flex; gap: .6rem; flex-wrap: wrap; }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }

/* ── top bar */
.topbar {
  background: var(--bar); color: var(--on-bar);
  display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap;
  padding: .85rem clamp(1rem, 3vw, 2rem);
}
.logo {
  font: 800 1.6rem/1 var(--display);
  color: var(--on-bar); text-decoration: none; letter-spacing: -0.03em;
  position: relative; padding-bottom: .2rem;
}
.logo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 5px;
  background: var(--sticker); transform: skewX(-24deg);
}
.portal-name { font: 500 1rem var(--display); color: var(--on-bar-muted); }
.search { flex: 1 1 320px; display: flex; gap: .5rem; max-width: 640px; }
.search input { margin: 0; border-color: transparent; }
.search .btn-dark { background: var(--bar-2); }
.topbar .btn-sell { margin-left: auto; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.who { font-size: .875rem; color: var(--on-bar-muted); }

/* ── ad banner */
.ad-slot {
  position: relative; max-width: var(--wrap); margin: 1rem auto 0; width: calc(100% - 2 * clamp(1rem, 3vw, 2rem));
  aspect-ratio: 6 / 1; max-height: 180px;
  background: var(--card); border-radius: var(--r-md); overflow: hidden;
}
.ad-frame { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.ad-frame.on { opacity: 1; pointer-events: auto; }
.ad-frame a, .ad-frame img { width: 100%; height: 100%; }
.ad-frame img { object-fit: cover; }
.ad-tag { position: absolute; top: .4rem; right: .5rem; z-index: 2; font-size: .7rem; background: var(--scrim); color: #fff; padding: .1rem .4rem; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .ad-frame { transition: none; } }

/* Homepage category shortcuts, immediately beneath the ads */
.shop-categories { max-width: var(--wrap); width: calc(100% - 2 * clamp(1rem, 3vw, 2rem)); margin: 1.5rem auto 0; }
.shop-categories h2 { margin: 0 0 .8rem; color: #15193A; font-size: 1.35rem; }
.shop-categories-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; }
.shop-categories-grid button { min-height: 3.25rem; padding: .5rem .6rem; border: 2px solid #15193A; border-radius: 8px; background: #15193A; color: white; font: 700 .88rem/1.2 var(--body); cursor: pointer; }
.shop-categories-grid button:hover, .shop-categories-grid button:focus-visible, .shop-categories-grid button[aria-pressed="true"] { background: #FFD84A; color: #15193A; outline-color: #15193A; }
@media (max-width: 820px) { .shop-categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .shop-categories-grid button { font-size: .78rem; } }

/* ── buyer marketplace */
.market {
  max-width: var(--wrap); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 250px 1fr; gap: 2rem;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem;
}
.filters form { position: sticky; top: 1rem; }
.filters-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .75rem; }
.filters-head h2 { margin: 0; }
.price-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.price-range legend { grid-column: 1 / -1; }
.price-range input { margin: 0; }
.only-mobile { display: none; }

.results-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.count { margin: 0; font-weight: 700; }
.results-tools { display: flex; gap: .6rem; align-items: center; }
.sort { display: flex; align-items: center; gap: .5rem; margin: 0; }
.sort select { margin: 0; width: auto; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.25rem 1rem; }
.grid[aria-busy=true] { opacity: .55; }
.item-card { position: relative; display: flex; }
.item-open {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; width: 100%;
  background: var(--card); border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line);
}
.item-open:hover { border-color: var(--ink); }
.item-open:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.item-photo { position: relative; display: block; aspect-ratio: 1; background: var(--paper); flex: none; min-height: 0; }
/* Every card's photo box is the same square, whatever the photo's own shape: the photo fills it, cropped to fit */
.item-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item-open { overflow: visible; }
.item-photo { border-radius: var(--r-md) var(--r-md) 0 0; }
.item-photo img { border-radius: inherit; }

.price-tag {
  display: inline-block;
  background: var(--sticker); color: var(--on-sticker);
  font: 800 1.15rem/1 var(--display); letter-spacing: -0.01em;
  padding: .45rem .6rem .4rem;
  border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 var(--hard-shadow);
}
.item-photo .price-tag { position: absolute; left: .6rem; bottom: -.7rem; }
.price-tag.free { background: #1f9d55; color: #fff; letter-spacing: .04em; }
.item-photo .new-badge {
  position: absolute; top: .5rem; left: .5rem;
  background: var(--cobalt); color: #fff;
  font: 700 .75rem/1 var(--display); letter-spacing: .02em;
  padding: .3rem .45rem; border-radius: 3px;
}
.free-toggle { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin: .25rem 0 .5rem; cursor: pointer; }
.free-toggle input { width: 1.25rem; height: 1.25rem; accent-color: #1f9d55; }
label.price-off { opacity: .45; }
label.price-off input { background: #eee; }
.price-tag.big { font-size: 1.8rem; padding: .55rem .8rem .5rem; margin: .4rem 0 1.25rem; transform: rotate(-2deg); }

.item-info { flex: 1; display: flex; flex-direction: column; gap: .2rem; padding: 1.15rem .85rem .8rem; }
.item-title { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.item-meta { color: var(--muted); font-size: .875rem; }
.item-foot { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--muted); margin-top: auto; }
.item-no { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.more-wrap { text-align: center; margin-top: 2rem; }

.empty { background: var(--card); border: 2px dashed var(--line); border-radius: var(--r-md); padding: 2.5rem 1.5rem; text-align: center; grid-column: 1 / -1; }
.empty p { color: var(--muted); }

/* ── dialogs */
.dialog { border: 0; border-radius: var(--r-md); padding: 0; width: min(560px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); color: var(--ink); background: var(--card); }
.dialog::backdrop { background: var(--scrim); }
.dialog-body { padding: 1.25rem 1.5rem 1.5rem; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.dialog-head h2 { margin: 0; }
.item-dialog { width: min(1000px, calc(100% - 2rem)); }
.edit-dialog { width: min(760px, calc(100% - 2rem)); }
.item-detail { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.75rem; }
.gallery-main { aspect-ratio: 1; background: var(--paper); border-radius: var(--r-sm); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin-top: .5rem; }
.thumb { padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; cursor: pointer; aspect-ratio: 1; background: var(--paper); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.on { border-color: var(--cobalt); }
/* Photo slider: swipe, ‹ › arrows and a 2 / 4 counter on the main photo */
.gallery[data-swipe] .gallery-main { position: relative; touch-action: pan-y; user-select: none; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: rgba(21, 25, 58, .55); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 .2rem; }
.gallery-nav:hover { background: rgba(21, 25, 58, .8); }
.gallery-nav.prev { left: .5rem; }
.gallery-nav.next { right: .5rem; }
.gallery-count { position: absolute; right: .6rem; bottom: .6rem; padding: .15rem .55rem; border-radius: 999px; background: rgba(21, 25, 58, .65); color: #fff; font-size: .8rem; font-weight: 700; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; margin: 0 0 1rem; }
.facts dt { font-size: .8rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; }
.description { white-space: pre-wrap; max-width: 65ch; }
.detail-text h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; }
.contact-box { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.contact-info p { display: flex; gap: .75rem; align-items: baseline; margin-bottom: .4rem; }
.contact-info p > span { width: 3.5rem; color: var(--muted); font-size: .875rem; }
.contact-info a { font-weight: 700; font-size: 1.1rem; word-break: break-all; }
.contact-name { font-weight: 700; }

/* ── panels */
.narrow { max-width: 480px; margin: 2.5rem auto; }
.card-panel { background: var(--card); border-radius: var(--r-md); padding: 1.75rem; border: 1px solid var(--line); }
.narrow.card-panel { margin-left: 1rem; margin-right: 1rem; }
@media (min-width: 520px) { .narrow.card-panel { margin-left: auto; margin-right: auto; } }
.code-input { font: 700 1.8rem/1 var(--display); letter-spacing: .4em; text-align: center; }
.login-step .btn { width: 100%; margin-bottom: .75rem; }
.note { background: var(--card); border-left: 4px solid var(--sticker); padding: .75rem 1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ── seller */
.seller-main, .admin-main { max-width: var(--wrap); margin: 0 auto; width: 100%; padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dash-head h1 { margin: 0; }
.dash-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.my-listings, .admin-list { display: flex; flex-direction: column; gap: .75rem; }
.my-row {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 1rem; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem;
}
.my-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); background: var(--paper); }
.my-title-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.my-title-line h3 { margin: 0; }
.my-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 270px; gap: 0 .6rem; align-items: end; }
.my-edit label { margin-bottom: .5rem; font-size: .8rem; }
.my-edit input { padding: .45rem .6rem; }
.my-buttons { grid-column: 1 / -1; display: flex; gap: .5rem; }
.my-buttons .btn { flex: 1; }
.row-notice { border-radius: var(--r-sm); padding: .6rem .8rem; margin-top: .5rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.row-notice p { margin: 0; flex: 1 1 240px; }
.row-notice.warn { background: var(--warn-bg); }
.row-notice.error { background: var(--tint-danger); }

.status { font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: 99px; white-space: nowrap; }
.st-live { background: var(--tint-ok); color: var(--ok); }
.st-pending { background: var(--warn-bg); color: var(--warn-text); }
.st-rejected { background: var(--tint-danger); color: var(--danger); }
.st-ended { background: var(--paper); color: var(--muted); }
.st-edited { background: var(--tint-primary); color: var(--cobalt-dark); }

.new-form { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; }
.form-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem; }
#catSelect { margin-top: .5rem; height: 12rem; }
.cond { display: flex; flex-wrap: wrap; gap: .5rem; }
.cond legend { width: 100%; }
.pill { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-weight: 700; padding: .55rem .9rem; border: 2px solid var(--line); border-radius: 99px; cursor: pointer; }
.pill input { width: auto; margin: 0; accent-color: var(--cobalt); }
.pill:has(input:checked) { border-color: var(--cobalt); background: var(--tint-primary); }
.pill:has(input:focus-visible) { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.photos-head { display: flex; justify-content: space-between; align-items: baseline; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.25rem; }
.photo-tile { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--paper); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-size: .68rem; padding: .2rem .35rem; background: var(--scrim); color: #fff; }
.photo-x { position: absolute; top: .3rem; right: .3rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 0; background: var(--scrim); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.cover { position: absolute; top: .35rem; left: .35rem; background: var(--sticker); font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: 3px; }
.photo-add { aspect-ratio: 1; border: 2px dashed var(--line); border-radius: var(--r-sm); background: var(--paper); font: 700 .9rem var(--body); color: var(--cobalt); cursor: pointer; }
.photo-add:hover { border-color: var(--cobalt); }
.renewal-notice { background: var(--warn-bg); border-radius: var(--r-sm); padding: 1rem 1.1rem .4rem; margin-bottom: 1rem; }
.renewal-notice h2 { font-size: 1.05rem; }
.renewal-notice p { font-size: .925rem; }

/* ── admin */
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.tabs a { color: var(--on-bar-muted); text-decoration: none; font-weight: 700; padding: .5rem .8rem; border-radius: var(--r-sm); }
.tabs a:hover { color: var(--on-bar); }
.tabs a[aria-current=page] { background: var(--bar-2); color: var(--on-bar); box-shadow: inset 0 -3px 0 var(--sticker); }
.admin .topbar #logoutBtn { margin-left: auto; }
.badge { display: inline-block; min-width: 1.3rem; text-align: center; background: var(--sticker); color: var(--on-sticker); border-radius: 99px; font-size: .75rem; padding: .05rem .35rem; font-weight: 700; }
.admin-card { display: grid; grid-template-columns: 280px 1fr; gap: 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem; }
.admin-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; align-content: start; }
.admin-photos a:first-child { grid-column: span 4; }
.admin-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: var(--paper); }
.admin-photos a:first-child img { aspect-ratio: 4 / 3; }
.admin-facts { margin-bottom: .2rem; }
.admin-desc { white-space: pre-wrap; max-height: 9rem; overflow: auto; background: var(--paper); padding: .6rem .75rem; border-radius: var(--r-sm); font-size: .925rem; }
.admin-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.inline-filter { display: flex; gap: .5rem; flex-wrap: wrap; }
.inline-filter input, .inline-filter select { margin: 0; width: auto; }
.inline-filter input { min-width: 260px; }
.edit-photos { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; margin: .5rem 0 1rem; }
.edit-photos img { aspect-ratio: 1; object-fit: cover; border-radius: 3px; }

.ads-layout { display: grid; grid-template-columns: 360px 1fr; gap: 1.5rem; align-items: start; }
.ad-preview { margin: -.25rem 0 1rem; border-radius: var(--r-sm); max-height: 140px; object-fit: contain; background: var(--paper); }
.ads-list { display: flex; flex-direction: column; gap: .75rem; }
.ad-row { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem; }
.ad-row img { width: 100%; border-radius: var(--r-sm); background: var(--paper); object-fit: contain; max-height: 140px; }
.ad-row label { font-size: .8rem; margin-bottom: .5rem; }
.ad-row input, .ad-row select { padding: .45rem .6rem; }

.inbox { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; min-height: 60vh; }
.threads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; max-height: 75vh; overflow: auto; }
.thread { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; width: 100%; padding: .75rem .85rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
.thread:hover { border-color: var(--ink); }
.thread:focus-visible { outline: 3px solid var(--cobalt); }
.thread.on { border-color: var(--cobalt); box-shadow: inset 4px 0 0 var(--cobalt); }
.thread.unread .thread-who { font-weight: 800; }
.thread-who { font-weight: 700; }
.thread-last { font-size: .875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.25rem; display: flex; flex-direction: column; }
.conv-head h2 { word-break: break-all; }
.bubbles { flex: 1; overflow: auto; max-height: 50vh; display: flex; flex-direction: column; gap: .75rem; padding: .5rem 0 1rem; }
.bubble { max-width: 80%; padding: .65rem .85rem; border-radius: var(--r-md); }
.bubble.in { background: var(--paper); align-self: flex-start; }
.bubble.out { background: var(--tint-primary); align-self: flex-end; }
.bubble-meta { font-size: .75rem; color: var(--muted); margin-bottom: .2rem; }
.bubble-body { white-space: pre-wrap; }
.reply-form { border-top: 1px solid var(--line); padding-top: 1rem; }

/* ── place picker (city or ZIP) */
.place-wrap { position: relative; margin-bottom: .9rem; }
.place-wrap > input { margin-top: .35rem; }
.place-list {
  position: absolute; z-index: 30; left: 0; right: 0; margin-top: 2px !important;
  list-style: none; margin: 0; padding: .3rem; max-height: 16rem; overflow: auto;
  background: var(--card); border: 2px solid var(--cobalt); border-radius: var(--r-sm);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}
.place-list li { padding: .55rem .65rem; border-radius: calc(var(--r-sm) - 2px); cursor: pointer; font-weight: 400; }
.place-list li.on, .place-list li:hover { background: var(--tint-primary); }
.place-status { margin: .3rem 0 0; color: var(--muted); min-height: 1.2em; }
.place-status:empty { min-height: 0; margin: 0; }
.place-wrap.invalid > input { border-color: var(--danger); }
.place-wrap.invalid .place-status { color: var(--danger); font-weight: 700; }
.dist { color: var(--cobalt); font-weight: 700; white-space: nowrap; }

/* ── "update right away" reminder for sellers */
.update-now { background: var(--card); border: 2px solid var(--cobalt); border-radius: var(--r-md); padding: 1rem 1.25rem .4rem; margin-bottom: 1rem; }
.update-now h2 { font-size: 1.1rem; }

/* ── demo mode */
.demo-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .5rem clamp(1rem, 3vw, 2rem);
  background: var(--sticker); color: var(--on-sticker); font-size: .85rem;
  border-bottom: 2px solid var(--hard-shadow);
}
.demo-bar p { margin: 0; flex: 1 1 380px; }
.demo-actions { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; }
.demo-actions a { color: var(--on-sticker); font-weight: 700; }
.demo-btn { font: 700 .8rem/1 var(--body); padding: .4rem .6rem; background: transparent; color: var(--on-sticker); border: 2px solid var(--on-sticker); border-radius: var(--r-sm); cursor: pointer; }
.demo-btn:hover { background: var(--on-sticker); color: var(--sticker); }
.demo-code { background: var(--warn-bg); border-left: 4px solid var(--sticker-dark); padding: .6rem .8rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.outbox-dialog { width: min(640px, calc(100% - 2rem)); }
.outbox-mail { border-top: 1px solid var(--line); padding: .8rem 0; }
.outbox-mail h3 { margin: .1rem 0 .3rem; }
.outbox-text { white-space: pre-wrap; margin: 0; font-size: .925rem; }

/* ── footer credit */
.credit { flex-basis: 100%; text-align: center; margin: .25rem 0 0; font-size: .75rem; color: var(--muted); }
.credit a { color: inherit; }
.footer-admin { padding: 1rem; }

/* ── admins list */
.admin-people { display: flex; flex-direction: column; gap: .6rem; }
.person { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem 1.1rem; }
.person-main { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; min-width: 0; }
.person-main strong { word-break: break-all; }
.person-main p { width: 100%; margin: 0; }
.person-actions { display: flex; align-items: center; gap: 1rem; }
.person-actions .check { margin: 0; font-size: .875rem; }

/* ── footer + toast */
.footer { display: flex; gap: .6rem 1.5rem; flex-wrap: wrap; align-items: center; justify-content: center; padding: 1.5rem 1.5rem 1rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); background: var(--card); }
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem); z-index: 1000;
  background: var(--bar); color: var(--on-bar); padding: .85rem 1.2rem; border-radius: var(--r-sm);
  font-weight: 700; max-width: calc(100% - 2rem); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; box-shadow: 4px 4px 0 var(--sticker);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { box-shadow: 4px 4px 0 var(--danger); }
.toast.warn { box-shadow: 4px 4px 0 var(--sticker-dark); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ── responsive */
@media (max-width: 960px) {
  .new-form, .ads-layout, .inbox { grid-template-columns: 1fr; }
  .admin-card { grid-template-columns: 1fr; }
  .admin-photos { grid-template-columns: repeat(5, 1fr); }
  .admin-photos a:first-child { grid-column: auto; }
  .admin-photos a:first-child img { aspect-ratio: 1; }
}
@media (max-width: 820px) {
  .market { grid-template-columns: 1fr; }
  .only-mobile { display: inline-flex; }
  .filters { display: none; }
  .filters.open { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem; }
  .filters form { position: static; }
  .filters .only-mobile { width: 100%; }
  .item-detail { grid-template-columns: 1fr; }
  .my-row { grid-template-columns: 72px 1fr; }
  .my-thumb { width: 72px; height: 72px; }
  .my-edit { grid-column: 1 / -1; width: auto; }
  .ad-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .topbar .btn-sell { margin-left: 0; }
  .search { order: 3; flex-basis: 100%; }
  .topbar:has(.search) .btn-sell { margin-left: auto; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .item-info { padding: 1.05rem .65rem .65rem; }
  .price-tag { font-size: 1rem; }
  .row-3 { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .dialog-body { padding: 1rem; }
  .sort span { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PHONES & SMALL TABLETS
   Bigger tap targets, compact bars, full-screen filters and item pages,
   bottom-sheet dialogs, one-column admin screens.
   ═══════════════════════════════════════════════════════════════════════ */
button, a, input, select, label { touch-action: manipulation; }
html.sheet-open, html.sheet-open body { overflow: hidden; }
.demo-toggle, .conv-back { display: none; }
.toast { bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

@media (max-width: 960px) {
  /* Messages: list first, then the conversation with a back button */
  .inbox { min-height: 0; }
  .inbox:not(.reading) .conversation { display: none; }
  .inbox.reading .threads { display: none; }
  .conv-back { display: inline-flex; margin-bottom: .75rem; }
  .bubbles { max-height: none; }
  .bubble { max-width: 92%; }
}

@media (max-width: 820px) {
  /* iOS zooms into inputs under 16px */
  input, select, textarea { font-size: max(16px, 1rem); }

  /* Tap targets */
  .btn { min-height: 44px; }
  .small-btn { min-height: 42px; padding: .55rem .85rem; }
  .icon-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .link-btn { padding: .55rem .15rem; }
  .radio, .check { min-height: 42px; margin-bottom: 0; }
  .radio input, .check input { width: 1.35rem; height: 1.35rem; flex: none; }
  .pill { min-height: 44px; }
  .place-list li { padding: .8rem .75rem; }
  .footer { gap: .1rem 1rem; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .footer > a, .footer > .link-btn { display: inline-block; padding: .65rem .4rem; }
  .credit a { display: inline-block; padding: .35rem 0; }

  /* Demo bar: one short line; tools open on tap */
  .demo-bar { flex-wrap: wrap; padding: .35rem 1rem; gap: .35rem .75rem; }
  .demo-bar p { flex: 1 1 0; min-width: 0; }
  .demo-long { display: none; }
  .demo-toggle { display: inline-flex; align-items: center; min-height: 36px; }
  .demo-actions { display: none; flex-basis: 100%; padding-bottom: .35rem; }
  .demo-bar.open .demo-actions { display: flex; }
  .demo-bar.open .demo-long { display: inline; }
  .demo-bar.open p { flex-basis: calc(100% - 9rem); }
  .demo-btn { min-height: 36px; }
  .demo-actions a { display: inline-block; padding: .5rem .2rem; }

  /* Top bars: one row */
  .topbar { padding: .6rem 1rem; gap: .55rem .6rem; padding-top: calc(.6rem + env(safe-area-inset-top)); }
  .logo { font-size: 1.4rem; }
  .portal-name { font-size: .9rem; }
  .topbar .btn { min-height: 42px; padding: .5rem .8rem; }
  .top-actions { flex-wrap: nowrap; gap: .4rem; }
  .who, .hide-mobile { display: none !important; }
  .ad-slot { margin-top: .75rem; }

  /* Admin tabs: one swipeable strip under the logo */
  .admin .topbar { flex-wrap: wrap; padding-bottom: 0; }
  .admin .topbar #logoutBtn { margin-left: auto; }
  .tabs {
    order: 3; flex: 0 0 calc(100% + 2rem); margin: 0 -1rem; padding: 0 .6rem .4rem;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: 0 0 auto; white-space: nowrap; padding: .7rem .8rem; scroll-snap-align: start; }

  /* Buyer filters: full-screen panel with a button that stays at the bottom */
  .filters.open {
    position: fixed; inset: 0; z-index: 60; display: block; overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper); border: 0; border-radius: 0; padding: 0;
  }
  .filters.open form { display: flex; flex-direction: column; min-height: 100%; padding: 0 1rem; background: transparent; border-radius: 0; }
  .filters-head {
    position: sticky; top: 0; z-index: 3; justify-content: flex-start; align-items: center; gap: .5rem;
    margin: 0 -1rem .5rem; padding: calc(.4rem + env(safe-area-inset-top)) .5rem .4rem 1rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .filters-head h2 { margin: 0 auto 0 0; font-size: 1.2rem; }
  .sheet-foot.only-mobile {
    display: block; position: sticky; bottom: 0; z-index: 3; margin: auto -1rem 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--line);
  }
  .sheet-foot .btn { width: 100%; }
  .filters .place-list { position: static; margin-top: .3rem !important; box-shadow: none; }

  /* Dialogs slide up from the bottom */
  .dialog {
    width: 100%; max-width: 100%; margin: auto 0 0; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
  }
  .dialog-body { padding: 0 1rem calc(1.25rem + env(safe-area-inset-bottom)); }
  .dialog-head {
    position: sticky; top: 0; z-index: 4; margin: 0 -1rem .75rem; padding: .4rem .4rem .4rem 1rem;
    background: var(--card); border-bottom: 1px solid var(--line);
  }
  .dialog-head h2 { font-size: 1.1rem; }
  .dialog .actions .btn, .dialog .actions.spread > div { flex: 1 1 auto; }

  /* Item page: full screen; the contact button is always at the bottom */
  .item-dialog { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .item-dialog .dialog-body { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
  .item-dialog:has(.contact-info) .dialog-body { padding-bottom: calc(13rem + env(safe-area-inset-bottom)); }
  .item-dialog .contact-box {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
  }
  .item-dialog .contact-box > .btn { width: 100%; }
  .item-detail { gap: 1rem; }
  .gallery-main { aspect-ratio: 4 / 3; }

  /* Seller dashboard */
  .dash-head { align-items: stretch; }
  .dash-actions { width: 100%; }
  .dash-actions .btn { flex: 1 1 0; }
  .my-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .my-buttons .btn-primary { grid-column: 1 / -1; }
  .my-buttons .btn { white-space: normal; }
  .row-notice .btn { width: 100%; }
  .update-now { padding: .9rem 1rem .3rem; }

  /* Admin */
  .admin-actions .btn { flex: 1 1 auto; }
  .person-actions { width: 100%; justify-content: space-between; }
  .inline-filter { width: 100%; }
  .inline-filter input { flex: 1 1 100%; min-width: 0; width: 100%; }
  .inline-filter select { flex: 1 1 auto; }
  .card-panel { padding: 1.25rem; }

  .toast { width: calc(100% - 2rem); text-align: center; }
}

@media (max-width: 560px) {
  .seller-main, .admin-main { padding-top: 1rem; }
  .item-foot { flex-wrap: wrap; gap: .1rem .6rem; }
  .ad-row .row-2, #adDates { grid-template-columns: 1fr; }
  .narrow.card-panel { margin-top: 1.25rem; }
  .form-col { padding: 1.1rem; }
  .new-form { gap: 1rem; }
  .facts { gap: .5rem .75rem; }
}

@media (max-width: 360px) {
  .portal-name { display: none; }
  .grid { gap: .6rem; }
  .item-photo .price-tag { font-size: .9rem; }
}
@media (max-width: 820px) {
  .sheet-foot.only-mobile { width: calc(100% + 2rem); margin: auto 0 0 -1rem; }
  .filters-head .link-btn { white-space: nowrap; }
}
@media (max-width: 820px) {
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 1.5rem; }
}
@media (max-width: 820px) {
  .filters #closeFilters { width: auto; margin-left: 0; }
}

/* ═══ Terms agreement, first-buyer email, admin notes, legal pages ═══ */
.check-block { align-items: flex-start; font-weight: 400; line-height: 1.45; }
.check-block input { margin-top: .15rem; }
.check-block a { font-weight: 700; }
.terms-agree { border: 2px solid var(--ink); border-radius: var(--r-sm); padding: .9rem 1rem .3rem; margin: 0 0 1rem; background: var(--card); }
.terms-agree h2 { font-size: 1.05rem; margin-bottom: .5rem; }
.small-check { font-size: .875rem; font-weight: 400; margin: .5rem 0 0; }
.first-view { margin: .5rem 0 0; color: var(--ok); font-weight: 700; }

.admin-note { margin: .6rem 0 .2rem; }
.admin-note-label { margin: 0 0 .2rem; font-size: .8rem; font-weight: 700; }
.admin-note-label span { font-weight: 400; color: var(--muted); }
.admin-note-text { white-space: pre-wrap; margin: 0 0 .2rem; padding: .55rem .75rem; background: var(--warn-bg); border-left: 4px solid var(--sticker-dark); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.admin-note .small { margin: 0 0 .1rem; }
.note-form label { margin-bottom: .4rem; }
.added-filter { margin-bottom: 1rem; }
#addDialog .photo-grid { grid-template-columns: repeat(5, 1fr); }
#addDialog .photos-head h3 { margin: .2rem 0 .4rem; font-size: 1rem; }

.legal-page main { flex: none; }
.legal-wrap { max-width: 1100px; width: 100%; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 2rem) 3rem; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 3rem; align-items: start; flex: 1; }
.legal-toc { position: sticky; top: 1.5rem; font-size: .9rem; }
.legal-toc-head { font-weight: 700; margin-bottom: .4rem; }
.legal-toc ol { margin: 0 0 1rem; padding-left: 1.4rem; display: grid; gap: .3rem; }
.legal-toc a { color: var(--muted); text-decoration: none; }
.legal-toc a:hover { color: var(--cobalt); text-decoration: underline; }
.legal { max-width: 68ch; line-height: 1.65; }
.legal h1 { margin-bottom: .2rem; }
.legal-date { color: var(--muted); margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.2rem; margin: 2.2rem 0 .6rem; scroll-margin-top: 1rem; }
.legal h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.legal ul { padding-left: 1.3rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .35rem; }
.legal-summary { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--sticker); border-radius: var(--r-sm); padding: 1rem 1.25rem .4rem; }
.legal-summary h2 { margin-top: 0; font-size: 1.05rem; }
@media (max-width: 820px) {
  .legal-wrap { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.25rem; }
  .legal-toc { position: static; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.1rem .2rem; }
  .legal-toc a { display: inline-block; padding: .2rem 0; }
  #addDialog .photo-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-note .link-btn { padding: .6rem 0; }
}
.legal-toc summary { cursor: pointer; list-style: none; }
.legal-toc summary::-webkit-details-marker { display: none; }
@media (max-width: 820px) {
  .legal-toc summary { list-style: revert; padding: .5rem 0; }
  .legal-toc summary::-webkit-details-marker { display: revert; }
  .legal-toc { padding-bottom: .4rem; }
}
.legal-page .topbar .btn-sell { margin-left: auto; }

/* Seller listing buttons: Save on its own row, Sold one + Remove side by side (all screen sizes) */
.my-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.my-buttons .btn-primary { grid-column: 1 / -1; }
.my-buttons .btn { white-space: nowrap; min-width: 0; }

/* ═══ Seller category picker ═══ */
.cat-picker { border: 0; padding: 0; margin: 0 0 1.1rem; }
.cat-picker label { font-weight: 700; font-size: .925rem; margin-bottom: .35rem; }
.cat-picker select:not([size]) {
  margin: 0; height: auto; min-height: 3.1rem; padding: .75rem 2.6rem .75rem .85rem;
  font-weight: 700; font-size: max(16px, 1.05rem); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23162040' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .95rem center;
}
.cat-picker select:invalid { color: var(--muted); font-weight: 400; }
.cat-picker select option { color: var(--ink); font-weight: 400; }
.cat-picker.invalid #sellCat { border-color: var(--danger); }
.cat-picker.invalid #catLegend::after { content: ' (choose one)'; color: var(--danger); }
#cpSearch { margin: 0 0 .6rem; }
.cp-panel { border: 2px solid var(--line); border-radius: var(--r-md); padding: .75rem; background: var(--paper); max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; }
.cp-hint { margin: 0 0 .6rem; font-size: .875rem; color: var(--muted); }
.cp-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.cp-group, .cp-sub, .cp-result {
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: .6rem .7rem; min-height: 44px;
}
.cp-group { display: flex; flex-direction: column; gap: .1rem; font-weight: 700; line-height: 1.25; }
.cp-group small { font-weight: 400; color: var(--muted); font-size: .78rem; }
.cp-group:hover, .cp-sub:hover, .cp-result:hover { border-color: var(--cobalt); }
.cp-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cp-head h3 { margin: 0; }
.cp-subs { display: flex; flex-wrap: wrap; gap: .45rem; }
.cp-sub { border-radius: 99px; padding: .5rem .9rem; }
.cp-sub[aria-pressed="true"] { border-color: var(--cobalt); background: var(--tint-primary); }
.cp-results { display: grid; gap: .4rem; }
.cp-result { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.cp-result .cp-s { font-weight: 700; }
.cp-result .cp-g { font-size: .8rem; color: var(--muted); text-align: right; }
.cp-chosen { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .8rem; border: 2px solid var(--cobalt); border-radius: var(--r-md); background: var(--tint-primary); }
.cp-path { display: flex; flex-direction: column; line-height: 1.3; }
.cp-path .cp-g { font-size: .8rem; color: var(--muted); }
.cp-path .cp-s { font-weight: 700; font-size: 1.05rem; }

/* ═══ Admin: categories tab ═══ */
.cat-search { max-width: 420px; }
.cat-tree { display: flex; flex-direction: column; gap: .5rem; }
.cat-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
.cat-group > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem 1rem; cursor: pointer; font-weight: 700; list-style: none; }
.cat-group > summary::-webkit-details-marker { display: none; }
.cat-group > summary::before { content: '▸'; color: var(--muted); margin-right: .2rem; }
.cat-group[open] > summary::before { content: '▾'; }
.cat-group > summary .cat-name { flex: 1; }
.cat-meta { font-weight: 400; font-size: .85rem; color: var(--muted); }
.cat-body { padding: 0 1rem 1rem; border-top: 1px solid var(--line); }
.cat-row { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.cat-group-actions { border-bottom: 2px solid var(--line); }
.cat-label { font-size: .8rem; font-weight: 700; color: var(--muted); }
.cat-subs { list-style: none; margin: 0; padding: 0; }
.cat-row .cat-name { flex: 1 1 200px; }
.cat-count { font-size: .8rem; color: var(--muted); min-width: 5.5rem; }
.cat-actions { display: flex; gap: .3rem; flex-wrap: wrap; margin-left: auto; }
.cat-actions .icon-btn { font-size: 1.1rem; padding: .2rem .5rem; }
.cat-actions .icon-btn:disabled { opacity: .3; cursor: default; }
.cat-rename { display: flex; gap: .4rem; flex: 1 1 260px; align-items: center; }
.cat-rename input { margin: 0; }
.cat-move { flex-basis: 100%; background: var(--warn-bg); border-radius: var(--r-sm); padding: .7rem .8rem; }
.cat-move p { margin: 0 0 .4rem; font-weight: 700; }
.cat-move select { margin: 0 0 .5rem; }
.cat-add { display: flex; gap: .5rem; margin-top: .7rem; }
.cat-add input { margin: 0; }
@media (max-width: 820px) {
  .cp-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-panel { max-height: none; }
  .cat-actions { width: 100%; margin-left: 0; }
  .cat-add, .cat-rename { flex-wrap: wrap; }
  .cat-add .btn, .cat-rename .btn { flex: 1 1 auto; }
}

/* "I am human" check (Cloudflare Turnstile): usually invisible */
.human-check { margin: .25rem 0 .75rem; min-height: 0; }
.human-check:empty { margin: 0; }

/* "I am human" check status */
.human-status { display: flex; align-items: center; gap: .5rem; margin: .1rem 0 .75rem; font-size: .9rem; line-height: 1.4; color: var(--muted); }
.human-status.action { color: var(--ink); font-weight: 700; }
.human-status.error { color: var(--danger); font-weight: 700; }
.spinner { flex: none; width: 1rem; height: 1rem; border: 2px solid var(--line); border-top-color: var(--cobalt); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }


/* ═══════════════════════════════════════════════════════════════════════
   ITEM PAGE (/item/12-name) — the same look as the item window
   ═══════════════════════════════════════════════════════════════════════ */
.item-page-main { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 2.5rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .25rem 0 1rem; font-size: .95rem; color: var(--muted); }
.crumbs a { color: var(--ink); font-weight: 700; }
.page-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem; }
.page-item h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 800; margin: .3rem 0 .4rem; }
.page-item .facts dd a { color: inherit; }
.deal-note { margin-top: 1rem; }
.more-link { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.gone { text-align: center; margin-top: 2rem; }
.gone .actions { justify-content: center; flex-wrap: wrap; }
a.item-open { color: inherit; text-decoration: none; }
@media (max-width: 820px) {
  .page-item { padding: 1rem; }
  .item-page .contact-box > .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN ANALYTICS
   ═══════════════════════════════════════════════════════════════════════ */
.an-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: 1rem; }
.an-head h1 { margin: 0; }
.an-head p { margin: 0; }
.tab .card-panel + .card-panel, .an-grid, .an-tools, .an-tiles { margin-top: 1rem; }
.an-live { border-width: 2px; border-color: var(--ink); }
.an-live-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.an-live-head h2 { margin: 0; font-size: 1.15rem; }
.an-now { font-family: var(--display); font-size: 2.2rem; line-height: 1; }
.live-dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(15, 122, 74, .5); animation: an-pulse 2s infinite; }
@keyframes an-pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 122, 74, .45); } 70% { box-shadow: 0 0 0 .55rem rgba(15, 122, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 122, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.an-now-list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .6rem; }
.an-now-list > li { border-top: 1px solid var(--line); padding-top: .6rem; }
.an-now-place { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-weight: 700; }
.an-count { background: var(--sticker); color: var(--ink); border-radius: 99px; padding: .05rem .55rem; font-size: .85rem; }
.an-now-people { list-style: none; margin: .3rem 0 0; padding: 0 0 0 1.6rem; display: grid; gap: .15rem; font-size: .93rem; }
.an-now-people li { display: flex; flex-wrap: wrap; gap: .1rem .5rem; }
.an-place { display: inline-flex; align-items: center; gap: .35rem; }
.an-flag { font-size: 1.05em; }
.an-page { color: var(--cobalt); overflow-wrap: anywhere; }

.an-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.an-range { display: flex; flex-wrap: wrap; gap: .35rem; }
.an-range button { font: inherit; font-weight: 700; padding: .45rem .85rem; border: 2px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); cursor: pointer; }
.an-range button[aria-pressed=true] { border-color: var(--ink); background: var(--ink); color: #fff; }
.an-range button:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

.an-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.an-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.1rem; display: grid; gap: .15rem; }
.an-tile-k { font-weight: 700; color: var(--muted); }
.an-tile strong { font-family: var(--display); font-size: 2rem; line-height: 1.1; }

.an-chart-card h2, .an-grid h2 { font-size: 1.1rem; margin-top: 0; }
.an-chart { position: relative; }
.an-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.an-grid-line { stroke: var(--line); stroke-width: 1; }
.an-base { stroke: var(--muted); stroke-width: 1; }
.an-axis { fill: var(--muted); font-size: 12px; font-family: var(--body); }
.an-bar-mark { fill: var(--cobalt); }
.an-col.hover .an-bar-mark { fill: var(--ink); }
.an-col rect { cursor: default; }
.an-tip {
  position: absolute; top: 0; transform: translate(-50%, -105%); pointer-events: none; z-index: 2;
  background: var(--ink); color: #fff; border-radius: var(--r-sm); padding: .45rem .65rem; font-size: .85rem;
  display: grid; gap: .05rem; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.an-tip[hidden] { display: none; }

.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.an-grid > .card-panel { margin-top: 0; min-width: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.an-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.an-table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: .35rem .5rem; border-bottom: 2px solid var(--line); white-space: nowrap; }
.an-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.an-table tr:last-child td { border-bottom: 0; }
.an-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#anPlaces { min-width: 26rem; }
#anRecent { min-width: 44rem; }
#anRecent td:first-child, .an-ad-clicks td:first-child { white-space: nowrap; }
.an-sub { font-size: 1rem; margin: 1.25rem 0 .5rem; }
.an-devices { display: grid; gap: .45rem; }
.an-dev { display: grid; grid-template-columns: 6rem 1fr auto; gap: .6rem; align-items: center; font-size: .93rem; }
.an-bar { height: .6rem; background: var(--paper); border-radius: 99px; overflow: hidden; }
.an-bar > span { display: block; height: 100%; background: var(--cobalt); border-radius: 99px; }
.an-dev .num { font-variant-numeric: tabular-nums; }

.an-ads { display: grid; gap: .75rem; }
.an-ad { border-bottom: 1px solid var(--line); padding-bottom: .75rem; }
.an-ad:last-child { border-bottom: 0; padding-bottom: 0; }
.an-ad-row { display: flex; align-items: center; gap: .75rem; }
.an-ad-img { width: 6.5rem; height: 2.6rem; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); flex: none; }
.an-ad-gone { display: grid; place-items: center; font-size: .8rem; color: var(--muted); background: var(--paper); }
.an-ad-text { display: grid; min-width: 0; flex: 1; }
.an-ad-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-ad-n { font-family: var(--display); font-size: 1.5rem; white-space: nowrap; }
.an-ad .link-btn { margin-top: .35rem; }
.an-ad-clicks { margin-top: .4rem; max-height: 22rem; overflow: auto; }

@media (max-width: 960px) { .an-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .an-tiles { grid-template-columns: 1fr 1fr; }
  .an-tile strong { font-size: 1.6rem; }
  .an-range { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .an-range button { flex: none; min-height: 42px; }
  .an-now-people { padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SEARCH-FRIENDLY PARTS: page heading, intro, category links, related items
   ═══════════════════════════════════════════════════════════════════════ */
.results-intro { margin: 0 0 .75rem; }
.results-intro h1 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; margin: 0; }
.intro-text { margin: .3rem 0 0; color: var(--muted); max-width: 60rem; }
.browse-cats { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.browse-cats h2 { font-size: 1.15rem; margin: 0 0 .9rem; }
.browse-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem 1.5rem; }
.browse-group { font-weight: 800; color: var(--ink); }
.browse-groups ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .15rem; font-size: .95rem; }
.browse-groups a { color: var(--ink); }
.browse-groups a[aria-current=page] { font-weight: 700; color: var(--cobalt); }
.browse-groups .muted { font-size: .85rem; }
.related { margin-top: 2rem; }
.related h2 { font-size: 1.25rem; margin: 0 0 .9rem; }
@media (max-width: 820px) {
  .browse-groups a, .browse-group { display: inline-block; padding: .3rem 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EMAIL UPDATES: subscribe button and form, settings pages, admin tab
   ═══════════════════════════════════════════════════════════════════════ */
.results-intro { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center; }
.results-intro h1, .results-intro .intro-text { grid-column: 1; }
.intro-btns { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.sub-btn { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.sub-btn svg { flex: none; }
.sub-freq { border: 0; padding: 0; margin: .25rem 0 .75rem; display: grid; gap: .1rem; }
.sub-freq legend { font-weight: 700; margin-bottom: .3rem; padding: 0; }
.sub-day[hidden], .sub-mday[hidden] { display: none; }
.sub-mday .small { display: block; font-weight: 400; margin-top: .25rem; }
.sub-panel { margin-top: 2rem; margin-bottom: 2rem; max-width: 34rem; }
.sub-panel h1 { margin-top: 0; }
.sub-panel .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.sub-saved { background: var(--tint-ok); color: var(--ok); font-weight: 700; padding: .6rem .8rem; border-radius: var(--r-sm); }
.sub-unsub { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.sub-unsub .link-btn { color: var(--danger); }
/* admin */
.sub-warn { background: #FFF4D6; border: 2px solid var(--sticker); border-radius: var(--r-md); padding: .75rem 1rem; margin-bottom: 1rem; font-weight: 700; }
.sub-warn p { margin: 0; }
.sub-warn p + p { margin-top: .35rem; }
.sub-tiles { grid-template-columns: repeat(3, 1fr); }
.an-grid > div > .card-panel + .card-panel { margin-top: 1rem; }
.sub-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.sub-list-head h2 { margin: 0; }
.sub-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0; }
.sub-filter input { flex: 1 1 14rem; margin: 0; }
.sub-filter select { width: auto; margin: 0; }
.sub-email { font-weight: 700; overflow-wrap: anywhere; }
.sub-err { color: var(--danger); }
.sub-sched-actions { white-space: nowrap; text-align: right; }
#subList { min-width: 40rem; }
#subSends { min-width: 34rem; }
.sub-edit-dialog { width: min(560px, calc(100% - 2rem)); }
.sub-dlg-email { font-weight: 800; font-size: 1.1rem; margin: 0; overflow-wrap: anywhere; }
.sub-dlg-more { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
@media (max-width: 640px) {
  .results-intro { grid-template-columns: 1fr; }
  .intro-btns { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: .6rem; gap: .4rem; }
  .intro-btns .btn { padding-left: .75rem; padding-right: .75rem; gap: .35rem; }
  .sub-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .sub-tiles .an-tile { min-width: 0; padding: .75rem; }
  .sub-tiles .an-tile-k { font-size: .85rem; line-height: 1.25; overflow-wrap: anywhere; }
  .sub-tiles .an-tile .small { display: none; }
  .sub-dlg-more { justify-content: stretch; }
  .sub-dlg-more .btn { flex: 1 1 auto; }
}
/* Admin menu: tighter on mid-size screens so it stays on one line with Log out */
@media (min-width: 821px) and (max-width: 1440px) {
  .admin .topbar { gap: .5rem .75rem; }
  .tabs { gap: .1rem; }
  .tabs a { padding: .45rem .5rem; font-size: .95rem; }
}
@media (min-width: 821px) and (max-width: 1180px) {
  .admin .portal-name { display: none; }
  .tabs a { padding: .4rem .4rem; font-size: .9rem; }
}
#tab-subscribers .an-grid { align-items: start; }
@media (max-width: 820px) {
  .an-table a, .sub-sched-actions .link-btn { display: inline-block; padding: .4rem 0; }
}

/* Phones: subscriber tables become stacked cards, count boxes a compact list */
@media (max-width: 640px) {
  .sub-tiles { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
  .sub-tiles .an-tile { display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 0; padding: .65rem 1rem; }
  .sub-tiles .an-tile + .an-tile { border-top: 1px solid var(--line); }
  .sub-tiles .an-tile-k { font-size: 1rem; overflow-wrap: normal; }
  .sub-tiles .an-tile strong { font-size: 1.4rem; }
  #subSchedules, #subList, #subSends { min-width: 0; }
  #subSchedules thead, #subList thead, #subSends thead { display: none; }
  #subSchedules tr, #subList tr, #subSends tr { display: block; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  #subSchedules tr:last-child, #subList tr:last-child, #subSends tr:last-child { border-bottom: 0; }
  #subSchedules td, #subList td, #subSends td { display: flex; gap: .75rem; justify-content: space-between; padding: .15rem 0; border: 0; text-align: left; }
  #subSchedules td[data-label]::before, #subList td[data-label]::before, #subSends td[data-label]::before {
    content: attr(data-label); color: var(--muted); font-size: .85rem; flex: none;
  }
  #subSchedules td.num, #subSends td.num { text-align: right; }
  #subList td.sub-cell-email { display: block; padding-bottom: .3rem; }
  #subList td.sub-cell-act, #subSchedules td.sub-sched-actions { justify-content: flex-start; padding-top: .4rem; }
  #subList td.sub-cell-act .btn { width: 100%; }
  #subSchedules td.sub-sched-actions .link-btn { margin-right: 1rem; }
}

/* ── Subscribe pop-up: a centered card (also on phones, not a bottom sheet) */
.dialog.subscribe-dialog {
  width: min(420px, calc(100% - 2rem)); max-width: 420px; margin: auto; max-height: calc(100dvh - 2rem); overflow-y: auto;
  border-radius: 16px; background: #fff; color: #15193A;
  box-shadow: 0 24px 60px rgba(21, 25, 58, .35), 0 4px 14px rgba(21, 25, 58, .18);
}
.dialog.subscribe-dialog[open] { animation: sub-pop .22s ease-out; }
.subscribe-dialog::backdrop { background: rgba(21, 25, 58, .6); backdrop-filter: blur(2px); }
@keyframes sub-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dialog.subscribe-dialog[open] { animation: none; } }
.sub-card { position: relative; padding: 2.25rem 1.6rem 1.6rem; text-align: center; }
.sub-x {
  position: absolute; top: .7rem; right: .7rem; width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: #EEF1F7; color: #565E7D; cursor: pointer; padding: 0;
}
.sub-x:hover, .sub-x:focus-visible { background: #D5DBE7; color: #15193A; outline: none; }
.sub-icon, .sub-check { width: 68px; height: 68px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; }
.sub-icon { background: #FFD84A; color: #15193A; box-shadow: 0 0 0 8px #FFF5CC; }
.sub-check { background: #0F7A4A; color: #fff; box-shadow: 0 0 0 8px #DDF3E8; width: 76px; height: 76px; }
.sub-title { font-family: var(--display); font-weight: 800; font-size: 1.65rem; line-height: 1.15; margin: 0 0 .5rem; color: #15193A; }
.sub-lead { margin: 0 auto 1.3rem; max-width: 22rem; font-size: 1.02rem; line-height: 1.45; color: #2B3160; }
.sub-card .sub-input {
  margin: 0 0 .8rem; padding: .95rem 1.1rem; font-size: 1.05rem; text-align: left;
  border: 2px solid #D5DBE7; border-radius: 12px; background: #F7F8FC;
}
.sub-card .sub-input:focus { border-color: #15193A; background: #fff; }
.sub-card .human-check:not(:empty) { display: flex; justify-content: center; }
.sub-card .form-error { margin: 0 0 .7rem; text-align: left; }
.sub-go {
  display: block; width: 100%; padding: 1rem; border: 0; border-radius: 12px; cursor: pointer;
  background: #FFD84A; color: #15193A; font: 800 1.15rem/1 var(--display); letter-spacing: .01em;
  box-shadow: 0 3px 0 #F2C200;
}
.sub-go:hover, .sub-go:focus-visible { background: #F2C200; outline: none; }
.sub-go:active { transform: translateY(2px); box-shadow: 0 1px 0 #F2C200; }
.sub-go:disabled { opacity: .7; cursor: progress; }
.sub-fine { margin: .9rem 0 0; font-size: .8rem; line-height: 1.4; color: #8A90AA; overflow-wrap: anywhere; }
.sub-fine strong { color: #565E7D; font-weight: 700; }
.sub-done .sub-lead { margin-bottom: .2rem; }
.sub-done .sub-go { margin-top: 1.3rem; }
@media (max-width: 560px) {
  .dialog.subscribe-dialog { width: calc(100% - 2rem); margin: auto; border-radius: 16px; }
  .sub-card { padding: 2rem 1.25rem 1.4rem; }
  .sub-title { font-size: 1.5rem; }
}


/* ── Sell page redesign: phone-first white cards (navy + yellow, 16px corners, soft shadows) */
body.seller { background: #EEF1F7; }
body.seller .seller-main { padding-bottom: 2.5rem; }
.seller #vNew { max-width: 640px; margin: 0 auto; }
.sf-top { padding: 1.4rem .25rem 1rem; }
.sf-top h1 { font: 800 1.9rem/1.1 var(--display); margin: .5rem 0 .3rem; color: var(--ink); }
.sf-sub { margin: 0; color: var(--muted); font-size: 1.02rem; }
.sf-back {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
  min-height: 40px; padding: 0 .9rem; border-radius: 99px; background: #fff; color: var(--ink);
  font: 700 .95rem var(--body); box-shadow: 0 1px 3px rgba(21,25,58,.12);
}
.sf-back:hover { background: #F7F8FC; }
.sf-back:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

.seller .sell-form { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
.seller .sell-form > .sf-card { width: 100%; box-sizing: border-box; }
.sf-card {
  background: #fff; border-radius: 16px; padding: 1.3rem 1.2rem 1.35rem;
  box-shadow: 0 1px 2px rgba(21,25,58,.06), 0 6px 20px rgba(21,25,58,.07);
}
.sf-head { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.sf-head h2 { margin: 0; font: 800 1.3rem/1.2 var(--display); color: var(--ink); flex: 1; }
.sf-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sticker); color: var(--ink); font: 800 .95rem/1 var(--display);
}
.sf-count { flex: none; font-weight: 700; font-size: .85rem; color: var(--ink-2); background: #EEF1F7; padding: .3rem .7rem; border-radius: 99px; }
.sf-hint { margin: .5rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.sf-card > .sf-hint:first-of-type { margin: -.4rem 0 .9rem; }

/* labels + fields: big, 16px+ so iPhone doesn't zoom */
.sell-form label, .seller .sell-form legend { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 1.1rem; }
.sell-form label > input, .sell-form label > textarea, .sell-form .sf-money { margin-top: .45rem; }
.sell-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .sell-form select, .sell-form textarea {
  width: 100%; font: 400 1.0625rem/1.4 var(--body); color: var(--ink);
  padding: .85rem 1rem; min-height: 54px; border: 2px solid #D5DBE7; border-radius: 12px; background: #F7F8FC;
  transition: border-color .15s, background .15s;
}
.sell-form input:focus, .sell-form select:focus, .sell-form textarea:focus { border-color: var(--ink); background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(255,216,74,.45); }
.sell-form textarea { min-height: 130px; }
.sell-form select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.8rem; font-weight: 700;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2315193A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center;
}
.sell-form .cat-picker { margin-bottom: 1.1rem; }
.sell-form .cat-picker label { margin-bottom: .45rem; }
.sell-form ::placeholder { color: #9AA0B8; }

/* condition: tap-able pill buttons */
.seller .sell-form .cond { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.seller .sell-form .cond legend { grid-column: 1 / -1; padding: 0; margin-bottom: .5rem; }
.seller .sell-form .pill {
  position: relative; justify-content: center; text-align: center; margin: 0; min-height: 52px; padding: .5rem .4rem;
  border: 2px solid #D5DBE7; border-radius: 12px; background: #F7F8FC; font-weight: 700; font-size: 1rem; color: var(--ink);
  transition: background .15s, border-color .15s, color .15s;
}
.seller .sell-form .pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seller .sell-form .pill:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.seller .sell-form .pill:has(input:focus-visible) { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* price with $ inside, FREE as a switch */
.sell-form .row-2 { display: block; }
.sell-form #priceLabel { margin-bottom: .9rem; }
.sf-money { display: block; position: relative; }
.sf-money::before { content: "$"; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font: 800 1.2rem var(--display); color: var(--ink); pointer-events: none; }
.sell-form .sf-money input { padding-left: 2.1rem !important; font: 800 1.35rem/1.2 var(--display) !important; }
.sell-form label.price-off { opacity: .5; }
.sell-form label.price-off input { background: #E6E9F1 !important; }
.sell-form .free-toggle {
  display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; gap: .8rem;
  margin: 0; padding: .8rem 1rem; border-radius: 12px; background: #F0FAF4; font-weight: 400; cursor: pointer;
}
.sell-form .free-toggle strong { color: #1f9d55; }
.sell-form .free-toggle input {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0;
  border-radius: 99px; background: #C9CEDC; cursor: pointer; transition: background .15s;
}
.sell-form .free-toggle input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s;
}
.sell-form .free-toggle input:checked { background: #1f9d55; }
.sell-form .free-toggle input:checked::after { transform: translateX(22px); }
.sell-form .free-toggle input:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* photos: one big dashed tap box, then square thumbnails */
.seller .sell-form .photo-grid { grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 0; }
.seller .sell-form .photo-tile { border-radius: 12px; }
.seller .sell-form .photo-x { width: 2rem; height: 2rem; }
.seller .sell-form .photo-add + .photo-add { display: none; }
.seller .sell-form .photo-add {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  border: 2.5px dashed #AEB6CC; border-radius: 12px; background: #F7F8FC; color: var(--ink); font: 700 .95rem var(--body);
}
.seller .sell-form .photo-add::before {
  content: ""; width: 44px; height: 44px; border-radius: 50%; background: var(--sticker) no-repeat center / 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315193A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}
.seller .sell-form .photo-grid > .photo-add:first-child { grid-column: 1 / -1; aspect-ratio: auto; min-height: 170px; font-size: 1.1rem; }
.seller .sell-form .photo-add:hover { border-color: var(--ink); background: #FFFBEA; }

/* last card: notices, checkboxes, big yellow button */
.seller .sell-form .renewal-notice { background: #FFF8DB; border-radius: 12px; padding: .95rem 1rem .3rem; margin: 0 0 1rem; }
.seller .sell-form .renewal-notice h3 { margin: 0 0 .4rem; font: 800 1.02rem/1.25 var(--display); color: var(--ink); }
.seller .sell-form .renewal-notice p { font-size: .92rem; line-height: 1.45; margin: 0 0 .5rem; color: #3A3F5E; }
.seller .sell-form .check {
  display: flex; align-items: flex-start; gap: .7rem; font-weight: 400; font-size: 1rem; line-height: 1.4; margin: 0 0 .8rem; cursor: pointer;
}
.seller .sell-form .renewal-notice .check { font-weight: 700; padding: .25rem 0 .55rem; margin: 0; }
.seller .sell-form .check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--ink); }
.seller .sell-form .terms-agree { margin: .2rem 0 .4rem; padding: .9rem 1rem .2rem; border: 2px solid #E3E7F0; border-radius: 12px; }
.seller .sell-form .terms-agree .check { font-size: .92rem; color: #3A3F5E; }
.seller .sell-form .sf-opt { padding: 0 .1rem; }
.seller .sell-form .sf-submit {
  display: block; width: 100%; margin-top: .9rem; padding: 1.1rem 1rem; border: 0; border-radius: 14px;
  background: var(--sticker); color: var(--ink); font: 800 1.25rem/1 var(--display); box-shadow: 0 4px 0 #E0B400; transform: none;
}
.seller .sell-form .sf-submit:hover { background: var(--sticker-dark); }
.seller .sell-form .sf-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 #E0B400; }
.sf-fine { margin: .8rem 0 0; text-align: center; color: var(--muted); font-size: .88rem; }

/* login + contact-details steps: centered card to match */
.seller #vLogin.card-panel, .seller #vProfile.card-panel {
  max-width: 440px; margin: 2rem auto; border: 0; border-radius: 16px; padding: 2rem 1.4rem 1.6rem;
  box-shadow: 0 1px 2px rgba(21,25,58,.06), 0 10px 30px rgba(21,25,58,.10);
}
@media (max-width: 519px) { .seller #vLogin.card-panel, .seller #vProfile.card-panel { margin: 1.25rem 1rem; } }
.seller #vLogin { text-align: center; }
.seller #vLogin .login-step::before {
  content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--sticker) no-repeat center / 28px; box-shadow: 0 0 0 8px #FFF5CC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315193A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 7l-10 6L2 7'/%3E%3C/svg%3E");
}
.seller #vLogin h1, .seller #vProfile h1 { font: 800 1.6rem/1.15 var(--display); margin: 0 0 .5rem; color: var(--ink); }
.seller #vLogin .muted { font-size: 1.02rem; line-height: 1.45; margin: 0 auto 1.3rem; max-width: 22rem; }
.seller #vLogin label, .seller #vProfile label { text-align: left; font-size: 1rem; color: var(--ink); margin-bottom: 1rem; }
.seller #vLogin input, .seller #vProfile input {
  margin-top: .45rem; width: 100%; font-size: 1.0625rem; padding: .9rem 1rem; min-height: 54px;
  border: 2px solid #D5DBE7; border-radius: 12px; background: #F7F8FC;
}
.seller #vLogin input:focus, .seller #vProfile input:focus { border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(255,216,74,.45); outline: none; }
.seller #vLogin .code-input { text-align: center; letter-spacing: .4em; font: 800 1.5rem var(--display); }
.seller #vLogin .btn-primary, .seller #vProfile .btn-primary {
  display: block; width: 100%; padding: 1rem; border: 0; border-radius: 12px; min-height: 54px;
  background: var(--sticker); color: var(--ink); font: 800 1.15rem/1 var(--display); box-shadow: 0 3px 0 #E0B400;
}
.seller #vLogin .btn-primary:hover, .seller #vProfile .btn-primary:hover { background: var(--sticker-dark); }
.seller #vLogin .form-error { text-align: left; }
.seller #vLogin .small { margin-top: 1rem; }
.seller #vProfile .actions { display: flex; flex-direction: column; gap: .6rem; }
.seller #vProfile .actions .btn { width: 100%; }

@media (min-width: 700px) {
  .sf-card { padding: 1.6rem 1.7rem 1.7rem; }
  .sf-top h1 { font-size: 2.2rem; }
  .seller .sell-form .photo-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Homepage filter: "Free items only" */
.filters .free-only { font-weight: 600; margin: -.25rem 0 1rem; }
.filters .free-only input { accent-color: #1f9d55; }
.price-range.is-off { opacity: .45; }

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN: change a listing's photos in the editor
   A row of thumbnails (select one), then a toolbar for the selected photo.
   ═══════════════════════════════════════════════════════════════════════ */
.edit-photos-box { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); padding: .75rem; margin: .5rem 0 1rem; transition: box-shadow .15s; }
.edit-photos-box.drop { box-shadow: 0 0 0 3px var(--cobalt); background: var(--tint-primary); }
.edit-photos-box.busy { opacity: .7; pointer-events: none; }
.ep-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.ep-title { font-weight: 800; }
.ep-count { font-weight: 400; color: var(--muted); font-size: .9rem; margin-left: .25rem; }
.ep-addbtn { display: inline-flex; align-items: center; gap: .35rem; background: var(--card); }
.ep-addbtn:disabled { opacity: .45; cursor: not-allowed; }
.ep-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.ep-thumb, .ep-slot {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; margin: 0; overflow: hidden;
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--card); cursor: pointer;
}
.ep-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; pointer-events: none; }
.ep-thumb:hover { border-color: var(--muted); }
.ep-thumb.sel { border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--tint-primary); }
.ep-thumb:focus-visible, .ep-slot:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.ep-thumb.dragging { opacity: .4; }
.ep-thumb.drop-before { box-shadow: inset 4px 0 0 var(--cobalt); }
.ep-thumb.drop-after { box-shadow: inset -4px 0 0 var(--cobalt); }
.ep-num {
  position: absolute; left: .3rem; top: .3rem; min-width: 1.4rem; padding: .05rem .4rem; border-radius: 99px;
  background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .75rem; font-weight: 800; text-align: center;
}
.ep-thumb:first-child .ep-num { background: var(--sticker); }
.ep-new { position: absolute; right: .3rem; bottom: .3rem; padding: .05rem .4rem; border-radius: 99px; background: var(--cobalt); color: #fff; font-size: .7rem; font-weight: 800; }
.ep-slot { border-style: dashed; color: var(--muted); display: grid; place-items: center; background: transparent; }
.ep-slot span { font-size: 2rem; line-height: 1; }
.ep-slot:hover { border-color: var(--ink); color: var(--ink); background: var(--card); }
.ep-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .65rem; padding: .55rem .65rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
.ep-bar[hidden] { display: none; }
.ep-bar-title { font-weight: 700; font-size: .9rem; margin-right: auto; }
.ep-bar-btns { display: flex; flex-wrap: wrap; gap: .35rem; }
.ep-act {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: .35rem .7rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.ep-act:hover:not(:disabled) { border-color: var(--ink); }
.ep-act:disabled { opacity: .4; cursor: default; background: var(--card); }
.ep-act, .ep-thumb, .ep-slot { -webkit-tap-highlight-color: transparent; }
.ep-act:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 1px; }
.ep-act.ep-danger { color: var(--danger); }
.ep-act.ep-danger:hover { border-color: var(--danger); }
#editPhotoNote { margin: .5rem 0 0; }
@media (max-width: 640px) {
  .ep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ep-bar-title { flex-basis: 100%; }
  .ep-bar-btns { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ep-act { justify-content: center; min-height: 44px; }
  .ep-act[data-ep="main"] { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT PAGE (/contact): "Advertise / Contact us" button on the home page
   ═══════════════════════════════════════════════════════════════════════ */
.legal-page main.contact-page { flex: 1 0 auto; }
.contact-page { width: 100%; max-width: 40rem; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 2rem) 3rem; }
.contact-card h1 { margin-top: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; }
.contact-lead { font-size: 1.15rem; font-weight: 700; margin: 0 0 1rem; }
.contact-go { display: inline-flex; font-size: 1.05rem; }
.contact-email { font-size: 1.15rem; font-weight: 700; margin: 0 0 .75rem; overflow-wrap: anywhere; }
.contact-email a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.contact-or { margin: 0 0 .6rem; }
.contact-why { padding-left: 1.2rem; line-height: 1.55; margin: 1.25rem 0; }
.contact-why li + li { margin-top: .4rem; }

/* Contact us popup: thank-you after sending */
.contact-thanks { text-align: center; padding: 18px 0 4px; }
.contact-thanks-big { font-size: 1.15rem; font-weight: 700; margin: 0 0 14px; }
.contact-thanks .actions { justify-content: center; }