/* UsedPlasticMachinery.co.uk — one stylesheet for the public site and admin. Mobile first. No external fonts or CDNs. */
:root {
  --blue: #0303ff; --blue-700: #0606b0; --blue-50: #eef0ff; --blue-100: #dfe3ff;
  --navy: #0a0f2e; --navy-2: #121a46;
  --ink: #14182b; --muted: #5b6478; --line: #dde2ea; --steel: #f3f5f9; --white: #fff;
  --yellow: #ffc400; --green: #0f8a4b; --amber: #b86e00; --red: #c62828; --purple: #6b3fd6;
  --radius: 10px; --shadow: 0 1px 2px rgba(10, 15, 46, .06), 0 4px 16px rgba(10, 15, 46, .06);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 var(--font); color: var(--ink); background: var(--white); }
img { max-width: 100%; height: auto; }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--blue-700); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 800; }
h2 { font-size: 1.3rem; font-weight: 750; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
code { font-size: .88em; background: var(--steel); padding: .1em .35em; border-radius: 4px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 820px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.i { flex: none; vertical-align: -4px; }
.test-banner { background: repeating-linear-gradient(-45deg, #ffe27a 0 12px, #ffd447 12px 24px); color: #3d2e00; text-align: center; font: 600 13px/1.2 var(--font); padding: 6px 8px; }
.placeholder { display: inline-block; background: #fff4cc; border: 1px dashed #c79a00; color: #6b5200; padding: 1px 6px; border-radius: 4px; font-size: .92em; }

/* ---------- buttons + forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 2px solid var(--blue); border-radius: 8px;
  background: var(--blue); color: #fff; font: 700 15px/1.1 var(--font); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--blue); }
.btn-ghost:hover { background: var(--blue-50); color: var(--blue-700); }
.btn-accent { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.btn-accent:hover { background: #ffd23f; border-color: #ffd23f; color: var(--navy); }
.btn-light { background: #fff; border-color: #fff; color: var(--blue); }
.btn-light:hover { background: var(--blue-50); border-color: var(--blue-50); color: var(--blue-700); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn-danger { background: var(--red); border-color: var(--red); }
.btn-danger:hover { background: #a11d1d; border-color: #a11d1d; }
.btn-small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-wide { min-width: 220px; }
.linklike { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.icon-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.field { margin-bottom: 14px; }
.field label, fieldset legend { display: block; font-weight: 650; font-size: 14px; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=url], input[type=date], input:not([type]), select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #c4cbd8; border-radius: 8px; background: #fff; color: var(--ink); font: 16px/1.4 var(--font); }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: 3px solid var(--blue-100); outline-offset: 0; }
[aria-invalid=true] { border-color: var(--red) !important; background: #fff6f6; }
.field-error { color: var(--red); font-size: 14px; margin: 4px 0 0; font-weight: 600; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.check, .radio { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 500; cursor: pointer; }
.check input, .radio input { width: 20px; height: 20px; accent-color: var(--blue); flex: none; }
.hint { color: var(--muted); font-size: 14px; }
.hint.warn { color: var(--amber); }
.req { color: var(--red); }
.form-stack .field:last-of-type { margin-bottom: 16px; }

.alert { border-radius: 8px; padding: 12px 14px; margin: 14px 0; border: 1px solid; font-size: 15px; }
.alert-ok { background: #ecf8f1; border-color: #a8dcbf; color: #0b5a32; }
.alert-error { background: #fdeeee; border-color: #f0b3b3; color: #8a1616; }
.alert-warn { background: #fff7e6; border-color: #f2cf8a; color: #6b4300; }
.alert-info { background: var(--blue-50); border-color: var(--blue-100); color: #1a1f6b; }

.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font: 700 12px/1.2 var(--font); text-transform: uppercase; letter-spacing: .03em; background: var(--steel); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge-live { background: #e6f6ed; color: var(--green); border-color: #b6e2c8; }
.badge-reserved { background: #fff3dc; color: var(--amber); border-color: #f3d39a; }
.badge-sold { background: #fde8e8; color: var(--red); border-color: #f3b9b9; }
.badge-pending { background: #eef0ff; color: var(--blue); border-color: var(--blue-100); }
.badge-draft { background: #f1f2f5; color: #4a5163; }
.badge-withdrawn, .badge-rejected { background: #f1f2f5; color: #6b7280; }
.badge-rejected { color: var(--red); }
.badge-example { background: #f2edff; color: var(--purple); border: 1px dashed #b9a3f0; }

/* ---------- header */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.header-row { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.brand { flex: none; display: block; line-height: 0; }
.brand img { width: 98px; height: auto; }          /* native 170×90: always shown at or below native size (stays sharp) */
.header-search { display: none; flex: 1; max-width: 520px; position: relative; }
.header-search input { padding-right: 48px; border-radius: 999px; background: var(--steel); border-color: transparent; }
.header-search input:focus { background: #fff; }
.header-search button { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer; display: grid; place-items: center; }
.btn-post { margin-left: auto; min-height: 40px; padding: 8px 12px; }
.btn-post span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.site-nav { background: var(--navy); display: none; }
.site-nav.open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 6px 0 10px; }
.site-nav a { display: block; padding: 11px 4px; color: #e7eaff; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.07); }
.site-nav a:hover, .site-nav a[aria-current=page] { color: #fff; }
.site-nav a[aria-current=page] { box-shadow: inset 3px 0 0 var(--yellow); padding-left: 12px; }
.site-nav .nav-admin { color: var(--yellow); }
.nav-search form { display: flex; gap: 6px; padding: 12px 0 8px; }
.nav-search input { border: 0; }
.nav-search button { flex: none; width: 48px; border: 0; border-radius: 8px; background: var(--yellow); color: var(--navy); display: grid; place-items: center; cursor: pointer; }
@media (min-width: 720px) {
  .brand img { width: 136px; }
  .header-search { display: block; }
  .btn-post span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nav-search { display: none; }
  .btn-post { padding: 8px 16px; }
}
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
  .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 2px; padding: 0; }
  .site-nav a { border: 0; padding: 12px 12px; font-size: 14.5px; }
  .site-nav a[aria-current=page] { box-shadow: inset 0 -3px 0 var(--yellow); padding-left: 12px; }
  .site-nav .nav-sep { margin-left: auto; }
}

.crumbs { font-size: 14px; padding-top: 12px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li + li::before { content: "›"; color: #9aa3b5; margin-right: 4px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- home */
.hero { background: radial-gradient(1200px 400px at 85% -10%, rgba(3,3,255,.55), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px), linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff; padding: 34px 0 38px; }
.hero h1 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem); max-width: 18ch; margin-bottom: .35em; }
.hero h1 span { display: block; font-size: .45em; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); margin-top: .5em; }
.hero-lead { color: #cdd3ff; max-width: 60ch; font-size: 1.05rem; }
.hero-search { display: grid; gap: 8px; background: rgba(255,255,255,.08); padding: 8px; border-radius: 12px; max-width: 860px; margin: 22px 0 18px; border: 1px solid rgba(255,255,255,.14); }
.hero-search input, .hero-search select { border: 0; min-height: 50px; }
.hero-search .btn { min-height: 50px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 720px) { .hero { padding: 56px 0 60px; } .hero-search { grid-template-columns: 1fr 240px auto; } }

.section { padding: 34px 16px 10px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head h1, .section-head h2 { margin: 0; }
.section-head a { font-weight: 600; text-decoration: none; }
.tiles { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: var(--radius); padding: 16px 18px 12px; background: #fff; box-shadow: var(--shadow); }
.tile h3 { font-size: 1.15rem; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tile h3 a { color: var(--ink); text-decoration: none; }
.tile h3 a:hover { color: var(--blue); }
.tile .count, .subcats span, .tabs span { font: 700 12px/1 var(--font); background: var(--steel); color: var(--muted); border-radius: 999px; padding: 4px 8px; }
.tile p { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.tile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tile li a { display: inline-block; font-size: 14px; padding: 5px 10px; border-radius: 999px; background: var(--blue-50); color: var(--blue-700); text-decoration: none; }
.tile li a:hover { background: var(--blue); color: #fff; }
.band { background: var(--steel); margin-top: 40px; padding: 34px 0; border-top: 1px solid var(--line); }
.band-grid { display: grid; gap: 24px; }
@media (min-width: 800px) { .band-grid { grid-template-columns: 1fr 1fr; } }
.band p { color: var(--muted); max-width: 52ch; }
.empty { border: 2px dashed var(--line); border-radius: var(--radius); padding: 28px 20px; text-align: center; color: var(--muted); background: #fafbfd; }
.empty h2 { color: var(--ink); }

/* ---------- listing cards */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(10,15,46,.08), 0 10px 26px rgba(10,15,46,.1); }
.card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--steel); }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-badges { position: absolute; left: 8px; top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.card-badges .badge { box-shadow: 0 1px 3px rgba(0,0,0,.15); background-clip: padding-box; }
.card-count { position: absolute; right: 8px; bottom: 8px; background: rgba(10,15,46,.75); color: #fff; font: 600 12px/1 var(--font); padding: 4px 7px; border-radius: 6px; display: flex; align-items: center; gap: 4px; }
.card-count .i { width: 14px; height: 14px; vertical-align: 0; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.card-cat { font: 700 11.5px/1.2 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--blue); margin-bottom: 4px; }
.card-title { font-size: 1rem; margin: 0 0 4px; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--blue); }
.card-title a::after { content: ""; }
.card-mm { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
.card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.card-meta .i { width: 15px; height: 15px; vertical-align: 0; }
.card-price { margin: auto 0 0; font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.card-price small { font-size: .65em; font-weight: 600; color: var(--muted); }
.card-price.is-poa { color: var(--blue-700); font-size: 1.05rem; }

/* ---------- browse */
.page-head { padding-top: 14px; }
.page-head .lead { color: var(--muted); font-size: 1.05rem; max-width: 70ch; }
.subcats { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.subcats a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px; background: #fff; }
.subcats a:hover { border-color: var(--blue); color: var(--blue); }
.browse-layout { display: grid; gap: 18px; padding-top: 10px; padding-bottom: 40px; }
@media (min-width: 960px) { .browse-layout { grid-template-columns: 270px 1fr; align-items: start; } .filters { position: sticky; top: 12px; } }
.filters-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--steel); }
.filters-box summary { list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; min-height: 48px; }
.filters-box summary::-webkit-details-marker { display: none; }
.filters-box summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.filters-box[open] summary::after { content: "▴"; }
.pill { background: var(--blue); color: #fff; border-radius: 999px; font-size: 11px; padding: 2px 7px; }
.filter-form { padding: 0 14px 14px; }
.filter-form input, .filter-form select { background: #fff; }
.range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.range legend { grid-column: 1 / -1; }
.range span { color: var(--muted); font-size: 14px; }
.filter-actions { display: flex; gap: 8px; margin-top: 8px; }
.filter-actions .btn { flex: 1; }
.results-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.results-bar p { margin: 0; color: var(--muted); }
.results-bar strong { color: var(--ink); }
.sort-form { display: flex; align-items: center; gap: 8px; }
.sort-form label { font-weight: 600; font-size: 14px; }
.sort-form select { width: auto; min-height: 40px; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 26px 0 0; }
.pager a, .pager span { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; font-weight: 600; color: var(--ink); }
.pager a:hover { border-color: var(--blue); color: var(--blue); }
.pager .cur { background: var(--blue); border-color: var(--blue); color: #fff; }
.pager .gap { border: 0; }

/* ---------- listing detail */
.listing { padding-top: 12px; padding-bottom: 40px; }
.listing-head h1 { margin: 6px 0 4px; }
.listing-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.listing-mm { color: var(--muted); font-size: 1.05rem; }
.listing-grid { display: grid; gap: 22px; }
@media (min-width: 960px) {
  .listing-grid { grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr); grid-template-areas: "gallery side" "body side"; align-items: start; }
  .gallery { grid-area: gallery; } .listing-side { grid-area: side; position: sticky; top: 12px; } .listing-body { grid-area: body; }
}
.gallery-main { position: relative; display: block; background: var(--steel); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; background: #eef1f6; }
.gallery-main.no-photo { display: grid; place-items: center; color: var(--muted); }
.gallery-main.no-photo img { position: absolute; inset: 0; opacity: .6; }
.gallery-main.no-photo span { position: relative; font-weight: 700; }
.stamp { position: absolute; top: 18px; right: -42px; transform: rotate(35deg); width: 180px; text-align: center; padding: 6px 0; font: 800 15px/1 var(--font); letter-spacing: .15em; text-transform: uppercase; color: #fff; }
.stamp-sold { background: var(--red); } .stamp-reserved { background: var(--amber); }
.thumbs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.thumbs li { flex: none; scroll-snap-align: start; }
.thumbs a { display: block; border-radius: 8px; overflow: hidden; border: 2px solid transparent; line-height: 0; }
.thumbs a[aria-current=true] { border-color: var(--blue); }
.thumbs img { width: 96px; height: 72px; object-fit: cover; }
@media (min-width: 720px) { .thumbs img { width: 120px; height: 90px; } }
.price-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: #fff; box-shadow: var(--shadow); border-top: 4px solid var(--blue); }
.price { font-size: 2rem; font-weight: 850; margin: 0; letter-spacing: -.02em; }
.price small { font-size: .45em; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.price.is-poa { color: var(--blue-700); }
.price-sub { color: var(--muted); margin: 0 0 10px; font-size: 14px; }
.loc { display: flex; gap: 6px; align-items: center; font-weight: 600; margin-bottom: 6px; }
.ref { font-size: 13px; color: var(--muted); margin: 0; }
.enquiry-box { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--steel); }
.enquiry-box h2 { font-size: 1.1rem; display: flex; gap: 8px; align-items: center; }
.enquiry-box .note { font-size: 14px; margin: 10px 0 0; color: var(--ink); }
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 15px; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 38%; color: var(--muted); font-weight: 600; background: #fafbfd; }
.prose p { max-width: 75ch; }
.docs { list-style: none; padding: 0; margin: 0; }
.docs a { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-weight: 600; text-decoration: none; }
.docs small { color: var(--muted); font-weight: 400; }
.admin-inline { margin: 10px 0 0; font-size: 14px; }
.admin-inline a { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }

/* lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(5, 8, 25, .94); z-index: 200; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.lightbox img { max-width: 96vw; max-height: 86vh; object-fit: contain; }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 24px; cursor: pointer; display: grid; place-items: center; }
.lightbox .lb-close { top: 14px; right: 14px; }
.lightbox .lb-prev { left: 10px; top: 50%; } .lightbox .lb-next { right: 10px; top: 50%; }
.lightbox .lb-count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #cfd5ff; font-size: 14px; }

/* static pages */
.static-page { padding-top: 14px; padding-bottom: 40px; }
.contact-grid { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 760px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.contact-card h2 { font-size: 1rem; margin: 12px 0 4px; } .contact-card h2:first-child { margin-top: 0; }
.contact-card.muted { background: var(--steel); }
address { font-style: normal; }
.steps { padding-left: 1.3em; } .steps li { margin-bottom: 8px; }
.page-message { padding: 50px 16px; }

/* footer */
.site-footer { background: var(--navy); color: #c9cff5; margin-top: 30px; font-size: 15px; }
.footer-grid { display: grid; gap: 26px; padding-top: 36px; padding-bottom: 26px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-brand img { background: #fff; border-radius: 10px; padding: 8px 10px; width: 136px; box-sizing: content-box; }
.site-footer h2 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { color: #e6e9ff; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-base { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; padding-bottom: 20px; font-size: 13px; color: #98a0d6; }

/* ---------- admin */
body.admin { background: var(--steel); }
.admin-bar { background: var(--navy); color: #fff; }
.admin-bar-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.admin-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 800; letter-spacing: .04em; }
.admin-brand img { background: #fff; border-radius: 6px; padding: 3px 5px; box-sizing: content-box; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; margin-left: auto; }
.admin-nav a, .admin-nav .linklike { color: #dfe3ff; text-decoration: none; padding: 8px 10px; border-radius: 6px; font-weight: 600; font-size: 14.5px; }
.admin-nav a:hover, .admin-nav a[aria-current=page] { background: rgba(255,255,255,.1); color: #fff; }
.admin-nav .linklike { text-decoration: none; }
.inline { display: inline; }
.admin-main { padding-top: 18px; padding-bottom: 60px; }
.admin-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
@media (min-width: 720px) { .admin-card { padding: 20px 22px; } }
.admin-card h2 small { font-weight: 500; font-size: 14px; }
.muted-card { background: #fafbfd; color: var(--muted); }
.danger-zone { border-color: #f1c4c4; }
.danger-zone h2 { color: var(--red); }
.login-card { max-width: 400px; margin: 30px auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: var(--shadow); text-align: left; }
.login-card > img { display: block; margin: 0 auto 10px; }
.login-card h1 { text-align: center; font-size: 1.4rem; }
.stat-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; text-decoration: none; color: var(--muted); display: flex; flex-direction: column; font-size: 14px; }
.stat .n { font-size: 1.8rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
a.stat:hover { border-color: var(--blue); }
.admin-list { list-style: none; padding: 0; margin: 0; }
.admin-list li { padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tabs { display: flex; gap: 4px; overflow-x: auto; margin: 6px 0 12px; padding-bottom: 4px; }
.tabs a { white-space: nowrap; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; border: 1px solid transparent; display: inline-flex; gap: 6px; align-items: center; }
.tabs a[aria-current=page] { background: #fff; border-color: var(--line); color: var(--blue); }
.admin-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.admin-filter input, .admin-filter select { width: auto; flex: 1 1 200px; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.admin-table th { background: #fafbfd; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.admin-table .num { text-align: right; }
.td-photo img { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; display: block; }
.cat-table tr.depth-0 td { background: #f7f8ff; }
.cat-table tr.is-hidden td { opacity: .6; }
.tree-indent { display: inline-block; width: calc(var(--d) * 22px); }
.tree-indent::before { content: ""; }
.cat-table tr:not(.depth-0) .tree-indent { border-left: 0; text-align: right; color: #aab2c4; }
.cat-table tr:not(.depth-0) .tree-indent::after { content: "└ "; }
.tree-desc { display: inline-block; margin-left: calc(var(--d) * 22px); }
.form-grid { display: grid; gap: 0 16px; }
@media (min-width: 760px) { .form-grid { grid-template-columns: 1fr 1fr 1fr; } .form-grid .span-2 { grid-column: span 3; } }
.narrow-form { max-width: 640px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form input { width: 120px; }
.edit-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.edit-head h1 { margin-bottom: 4px; }
.edit-head p { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.edit-head a { font-weight: 600; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.edit-grid { display: grid; gap: 16px; }
@media (min-width: 1040px) { .edit-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .edit-side { position: sticky; top: 12px; } }
.field-row { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } .field-row.three { grid-template-columns: 1fr 1fr 1fr; } }
.check-field { display: flex; align-items: flex-end; }
.price-fields { border-top: 1px solid var(--line); padding-top: 12px; }
.spec-row { display: grid; grid-template-columns: 1fr 1.4fr 36px; gap: 8px; margin-bottom: 8px; align-items: center; }
.sticky-save { position: sticky; bottom: 0; background: rgba(255,255,255,.96); margin: 16px -16px -16px; padding: 12px 16px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); z-index: 5; }
@media (min-width: 720px) { .sticky-save { margin: 16px -22px -20px; padding: 12px 22px; } }
.sticky-save .btn { width: 100%; }
@media (min-width: 720px) { .sticky-save .btn { width: auto; } }
.status-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 8px; margin-bottom: 8px; }
.status-options .radio { min-height: 36px; }
.doc-list { list-style: none; padding: 0; margin: 0 0 12px; }
.doc-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.doc-list a { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; text-decoration: none; }
/* photo manager */
.photo-grid { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.photo-tile { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.photo-tile.is-main { border: 2px solid var(--blue); }
.photo-tile.dragging { opacity: .4; }
.photo-tile.drop-target { outline: 3px dashed var(--blue); }
.photo-tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.main-flag { position: absolute; top: 6px; left: 6px; background: var(--blue); color: #fff; font: 700 11.5px/1 var(--font); padding: 5px 7px; border-radius: 6px; display: inline-flex; gap: 4px; align-items: center; }
.main-flag .i { width: 13px; height: 13px; vertical-align: 0; }
.photo-actions { display: flex; justify-content: space-between; gap: 4px; padding: 6px; }
.photo-actions button { flex: 1; height: 38px; border: 1px solid var(--line); background: #fff; border-radius: 7px; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.photo-actions button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.photo-actions button:disabled { opacity: .3; cursor: default; }
.photo-actions .del:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.photo-meta { display: block; font-size: 11.5px; color: var(--muted); padding: 0 8px 7px; }
.upload-drop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; border: 2px dashed #b9c1d6; border-radius: 12px; padding: 20px 14px; cursor: pointer; background: #fafbff; color: var(--muted); font-size: 14px; }
.upload-drop strong { color: var(--blue); font-size: 16px; }
.upload-drop .i { width: 30px; height: 30px; color: var(--blue); }
.upload-drop:hover, .upload-drop.dragover { border-color: var(--blue); background: var(--blue-50); }
.upload-drop input { margin-top: 8px; max-width: 100%; }
.js .upload-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-progress { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; }
.upload-progress li { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; padding: 4px 0; }
.upload-progress progress { width: 100%; }
.upload-progress .err { color: var(--red); grid-column: 1 / -1; font-weight: 600; }
.upload-progress .done { color: var(--green); }
/* ---------- stage 2: accounts */
.header-row { position: relative; }
.acct-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.acct-links + .btn-post, .acct-menu + .btn-post { margin-left: 0; }
.acct-login, .acct-register { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-weight: 650; font-size: 15px; color: var(--ink); }
.acct-login:hover, .acct-register:hover { background: var(--steel); color: var(--blue); }
.acct-login span, .acct-register { display: none; }
.acct-login { width: 40px; justify-content: center; padding: 0; border: 1px solid var(--line); }
.acct-menu { margin-left: auto; position: static; }
.acct-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; font-weight: 650; font-size: 15px; background: #fff; }
.acct-menu summary::-webkit-details-marker { display: none; }
.acct-menu summary .i-down { width: 16px; height: 16px; color: var(--muted); }
.acct-menu[open] summary { border-color: var(--blue); color: var(--blue); }
.acct-name { display: none; }
.acct-pop { position: absolute; top: calc(100% - 4px); left: 12px; right: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 34px rgba(10,15,46,.18); padding: 8px; z-index: 40; }
.acct-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; margin: 0 0 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.acct-who span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.acct-who .badge { align-self: flex-start; margin-top: 6px; text-decoration: none; }
.acct-pop ul { list-style: none; margin: 0; padding: 0; }
.acct-pop a, .acct-pop button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font: 600 15px/1.2 var(--font); background: none; border: 0; cursor: pointer; text-align: left; }
.acct-pop a:hover, .acct-pop button:hover { background: var(--blue-50); color: var(--blue); }
.acct-pop li:last-child { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
@media (min-width: 720px) {
  .acct-login span, .acct-register { display: inline; }
  .acct-login { width: auto; padding: 8px 10px; border: 0; }
  .acct-register { display: inline-flex; border: 2px solid var(--blue); color: var(--blue); padding: 6px 12px; }
  .acct-name { display: inline; }
  .acct-menu { position: relative; }
  .acct-pop { left: auto; right: 0; top: calc(100% + 6px); width: 270px; }
}
/* heart / save */
.card { position: relative; }
.save-form { margin: 0; }
.card > .save-form, .card > .heart { position: absolute; top: 8px; right: 8px; z-index: 2; }
.heart { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); color: var(--ink); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.18); text-decoration: none; }
.heart:hover { color: var(--red); }
.heart.is-on { color: var(--red); }
.heart.is-on .i { fill: currentColor; }
.heart-big { width: auto; height: 44px; border-radius: 8px; padding: 0 16px; gap: 8px; display: inline-flex; align-items: center; box-shadow: none; border: 2px solid var(--line); font: 700 15px/1 var(--font); }
.heart-big.is-on { border-color: #f3b9b9; background: #fff5f5; }
.save-row { margin-top: 12px; }
.save-row .heart-big, .save-row .save-form { width: 100%; }
.save-row .heart-big { justify-content: center; }
/* auth pages */
.auth-wrap { padding-top: 18px; padding-bottom: 40px; }
.auth-card { max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px; box-shadow: var(--shadow); }
@media (min-width: 720px) { .auth-card { padding: 30px 34px; margin-top: 10px; } }
.auth-card h1 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.auth-card .lead { color: var(--muted); }
.auth-card.center { text-align: center; }
.auth-card.center .steps.left { text-align: left; }
.auth-alt { text-align: center; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; }
.opt { font-weight: 400; color: var(--muted); }
.small { font-size: 14px; }
.warn { color: var(--amber); }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field.check { margin-top: 4px; }
.field.check label { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 15px; line-height: 1.45; }
.field.check input { margin-top: 2px; }
.field.has-error input:not([type=checkbox]) { border-color: var(--red); }
.big-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--blue-50); color: var(--blue); margin-bottom: 8px; }
.big-icon .i { width: 30px; height: 30px; }
.steps.left { margin: 18px 0; }
.steps li.done { color: var(--muted); }
.steps li.done strong::after { content: " ✓"; color: var(--green); }
.steps li.now { font-weight: 600; }
.steps li.now::marker { color: var(--blue); }
.sell-cta { background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius); padding: 16px 18px; margin: 18px 0; }
.sell-cta p:last-child { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* account / my ads */
.page-title-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; margin-bottom: 8px; }
.page-title-row h1 { margin: 0; }
.page-title-row p { margin: 0; }
.title-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 14px; gap: 6px; }
.btn-sm .i { width: 16px; height: 16px; }
.btn-go { background: var(--green); border-color: var(--green); }
.btn-go:hover { background: #0b6e3b; border-color: #0b6e3b; }
.account-wrap { padding-bottom: 40px; }
.account-head { padding-top: 10px; }
.account-links { display: flex; gap: 8px; flex-wrap: wrap; }
.account-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .account-grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.my-ads { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.my-ad { display: grid; grid-template-columns: 92px 1fr; gap: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: #fff; box-shadow: var(--shadow); }
.my-ad-img img { width: 92px; height: 69px; object-fit: cover; border-radius: 8px; display: block; }
.my-ad h2 { font-size: 1.05rem; margin: 2px 0 4px; }
.my-ad h2 a { color: var(--ink); text-decoration: none; }
.my-ad h2 a:hover { color: var(--blue); }
.my-ad-top { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.my-ad-meta { margin: 0; font-size: 14px; color: var(--muted); }
.my-ad-meta strong { color: var(--ink); }
.my-ad-note { margin: 6px 0 0; font-size: 14px; color: var(--red); }
.my-ad-note.muted { color: var(--muted); }
.my-ad-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.my-ad-actions form { display: contents; }
@media (min-width: 820px) {
  .my-ad { grid-template-columns: 120px 1fr auto; align-items: center; }
  .my-ad-img img { width: 120px; height: 90px; }
  .my-ad-actions { grid-column: auto; justify-content: flex-end; max-width: 330px; }
}
.my-ad.status-withdrawn, .my-ad.status-sold { opacity: .85; }
.tabs .count { font: 700 12px/1 var(--font); background: var(--steel); color: var(--muted); border-radius: 999px; padding: 4px 8px; }
body:not(.admin) .tabs { border-bottom: 1px solid var(--line); }
body:not(.admin) .tabs a[aria-current=page] { background: var(--blue-50); border-color: transparent; }
.editor-wrap { padding-top: 6px; padding-bottom: 30px; }
.seller-editor { background: var(--steel); }
.seller-editor .site-header { background: #fff; }
.seller-actions { display: grid; gap: 8px; margin-bottom: 8px; }
/* admin stage 2 */
.admin-nav .count, .section-head .count { display: inline-block; min-width: 20px; padding: 2px 6px; border-radius: 999px; background: var(--yellow); color: var(--navy); font: 800 12px/16px var(--font); text-align: center; }
.badge-u-pending { background: #eef0ff; color: var(--blue); border-color: var(--blue-100); }
.badge-u-approved { background: #e6f6ed; color: var(--green); border-color: #b6e2c8; }
.badge-u-rejected, .badge-u-suspended { background: #fde8e8; color: var(--red); border-color: #f3b9b9; }
.badge-wanted { background: #fff3dc; color: var(--amber); border-color: #f3d39a; }
.mini-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 12px; font-size: 14.5px; }
.mini-dl dt { color: var(--muted); }
.mini-dl dd { margin: 0; overflow-wrap: anywhere; }
.approval { display: grid; gap: 14px; }
.approval h2 { margin-bottom: 2px; }
.approval-actions { display: grid; gap: 10px; align-content: start; }
.reject-form { display: grid; gap: 8px; }
@media (min-width: 900px) { .approval { grid-template-columns: 1fr 340px; } }
.mod-item { display: grid; gap: 16px; }
.mod-main { width: 100%; border-radius: 8px; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.mod-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.mod-thumbs img { width: 60px; height: 45px; object-fit: cover; border-radius: 4px; }
.mod-nophoto { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--steel); border-radius: 8px; color: var(--muted); font-weight: 700; }
.mod-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.mod-desc summary { cursor: pointer; color: var(--ink); }
.mod-desc .prose { margin-top: 8px; font-size: 15px; }
.mod-seller { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14.5px; }
.mod-links a { font-weight: 600; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.mod-actions { display: grid; gap: 10px; align-content: start; }
@media (min-width: 1000px) { .mod-item { grid-template-columns: 260px 1fr 260px; } }
.mail-body { white-space: pre-wrap; font: 14px/1.5 ui-monospace, Menlo, Consolas, monospace; background: #fafbfd; border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin: 0; overflow-wrap: anywhere; }
.mail-table tr.is-open td { background: var(--blue-50); }
.top-gap { margin-top: 12px; }
/* ---------- banners (exact slot sizes: leaderboard 728×90 / phone 320×100; sidebar 300×250 or 300×600; in-feed 300×250) */
.ad { margin: 0 auto; text-align: center; }
.ad-label { display: block; font: 600 10.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #8a93a6; margin: 0 0 4px; }
.ad a { display: inline-block; line-height: 0; text-decoration: none; }
.ad img { display: block; max-width: 100%; height: auto; }
.ad-top-wrap { background: var(--steel); border-bottom: 1px solid var(--line); padding: 8px 0 10px; }
.ad-top a, .ad-top img, .ad-top picture { width: 320px; max-width: 100%; }
.ad-top img { aspect-ratio: 320 / 100; object-fit: cover; }
.ad-top.ad-no-mobile img { aspect-ratio: 728 / 90; object-fit: contain; }
@media (min-width: 768px) { .ad-top a, .ad-top img, .ad-top picture { width: 728px; } .ad-top img { aspect-ratio: 728 / 90; } }
.ad-side a, .ad-side img { width: 300px; }
.ad-feed a, .ad-feed img { width: 300px; max-width: 100%; }
/* text banners (placeholders until artwork arrives): same box sizes as the images */
.ad-text { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 100%; max-width: var(--w); aspect-ratio: var(--w) / var(--h);
  background: linear-gradient(135deg, var(--navy) 0%, #13207a 100%); color: #fff; border-radius: 6px; padding: 8px 14px; line-height: 1.25; position: relative; overflow: hidden; text-align: center; }
.ad-text strong { font-size: 17px; font-weight: 800; color: #fff; }
.ad-text span { font-size: 14px; color: #dfe3ff; }
.ad-text em { font-style: normal; font-weight: 700; color: var(--yellow); font-size: 14px; }
.ad-text .ad-ph { position: absolute; right: 6px; bottom: 4px; font-size: 9.5px; color: #aab3ff; letter-spacing: .02em; }
.ad-top .ad-text { width: 320px; max-width: 100%; aspect-ratio: 320 / 100; }
.ad-top .ad-text strong { font-size: 15px; } .ad-top .ad-text span, .ad-top .ad-text em { font-size: 12.5px; }
@media (min-width: 768px) {
  .ad-top .ad-text { width: 728px; aspect-ratio: 728 / 90; flex-direction: row; gap: 14px; padding: 8px 18px 14px; }
  .ad-top .ad-text strong { font-size: 18px; } .ad-top .ad-text span, .ad-top .ad-text em { font-size: 14.5px; }
}
.ad-slot-side-sky.ad-side .ad-text { justify-content: center; gap: 18px; padding: 28px 20px; }
.ad-slot-side-sky.ad-side .ad-text strong { font-size: 26px; }
.ad-slot-side-sky.ad-side .ad-text span, .ad-slot-side-sky.ad-side .ad-text em { font-size: 17px; }
.ad-side .ad-text strong, .ad-feed .ad-text strong { font-size: 21px; }
.ad-side .ad-text span, .ad-feed .ad-text span, .ad-side .ad-text em, .ad-feed .ad-text em { font-size: 15px; }
/* sidebar on category / search pages: a third column on wide screens, in-feed below that */
.ad-rail { display: none; }
.feed-ad { display: flex; justify-content: center; align-items: center; grid-column: 1 / -1; padding: 6px 0; }
@media (min-width: 1200px) {
  .browse-layout.has-rail { grid-template-columns: 250px minmax(0, 1fr) 300px; }
  .ad-rail { display: block; position: sticky; top: 12px; }
  .browse-layout.has-rail .feed-ad { display: none; }
}
.listing-ad .only-wide { display: none; }
.listing-ad { display: flex; justify-content: center; }
@media (min-width: 960px) {
  .listing-grid { grid-template-areas: "gallery side" "body ad"; }
  .listing-ad { grid-area: ad; align-self: start; }
  .listing-ad .only-wide { display: block; } .listing-ad .only-narrow { display: none; }
}
/* admin */
.slot-sizes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 10px 0 16px; }
.slot-size { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.td-banner img { display: block; max-width: 220px; height: 40px; width: auto; object-fit: contain; }
.banner-preview { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); margin-bottom: 6px; }
.banner-admin-preview { overflow: hidden; margin-bottom: 10px; }
.banner-admin-preview .ad-top .ad-text { width: 100%; flex-direction: column; aspect-ratio: auto; padding: 10px; }
.admin-table.compact th, .admin-table.compact td { padding: 5px 8px; font-size: 13.5px; }

/* ---------------------------------------------------------------- stage 3: enquiries, emails, redirects, legal pages */
.enquiry-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.enquiry-form .field { margin-bottom: 10px; }
.enquiry-form textarea { min-height: 110px; }
.enquiry-form .btn { margin-top: 4px; }
.enquiry-form .consent { font-size: 13px; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }
.enquiry-form.is-closed { opacity: .5; }
.enquiry-form.is-closed .btn { cursor: not-allowed; }
.enquiry-closed { display: flex; gap: 8px; align-items: flex-start; background: #fde8e8; border: 1px solid #f3b9b9; color: #7a1717; border-radius: 8px; padding: 10px 12px; font-weight: 600; font-size: 15px; }
.enquiry-closed svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.enquiry-box .alert { margin: 0 0 10px; font-size: 15px; }
.listing-side .enquiry-box .field-row { grid-template-columns: 1fr; }
@media (min-width: 640px) and (max-width: 899px) { .listing-side .enquiry-box .field-row { grid-template-columns: 1fr 1fr; } }
.contact-page .contact-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-page .contact-grid { grid-template-columns: 3fr 2fr; } }
.contact-page .contact-card .enquiry-form h2 { margin-top: 0; }
.sent-page { text-align: center; }
.sent-tick { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: #e6f6ed; color: var(--green); align-items: center; justify-content: center; margin: 0 0 12px; }
.sent-tick svg { width: 34px; height: 34px; stroke-width: 3; }
.sent-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.count-badge { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--yellow); color: var(--navy); font: 800 12px/18px var(--font); text-align: center; margin-left: 4px; }
.admin-nav .count.count-bad { background: var(--red); color: #fff; }
.badge-new { background: var(--yellow); color: var(--navy); border-color: #e0ad00; }
.inline-filter { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.inline-filter select { max-width: 100%; }
.enq-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.enq { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: #fff; }
.enq.is-new { border-color: #e0ad00; box-shadow: 0 0 0 2px #fff4cc; }
.enq-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.enq-head p { margin: 0 0 6px; }
.enq-date { color: var(--muted); font-size: 14px; }
.enq-who { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 4px 0 8px; font-size: 15px; }
.enq-who div { display: flex; gap: 6px; } .enq-who dt { color: var(--muted); } .enq-who dd { margin: 0; overflow-wrap: anywhere; }
.enq-msg { margin: 0 0 10px; padding: 10px 14px; background: var(--steel); border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }
.enq-actions { margin: 0; }
.static-page.legal h2 { margin-top: 1.6em; }
.static-page .updated { color: var(--muted); font-size: 14px; }
.static-page .lead { font-size: 1.1rem; }
.draft-note { background: #fff4cc; border: 1px dashed #c79a00; color: #5b4500; border-radius: 8px; padding: 10px 14px; margin: 0 0 18px; }
.contact-block { background: var(--steel); border-radius: 8px; padding: 12px 14px; }
.cookie-table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 0 0 1em; }
.cookie-table th, .cookie-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.cookie-table th { background: var(--steel); }
.footer-base p { margin: 0 0 4px; }
.footer-legal { font-size: 13px; opacity: .85; }
/* admin */
.admin-cols { display: grid; gap: 16px; }
@media (min-width: 980px) { .admin-cols { grid-template-columns: 3fr 2fr; } }
.kv { border-collapse: collapse; width: 100%; margin-bottom: 12px; }
.kv th { text-align: left; color: var(--muted); font-weight: 600; padding: 5px 14px 5px 0; vertical-align: top; white-space: nowrap; width: 1%; }
.kv td { padding: 5px 0; overflow-wrap: anywhere; }
.mail-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.mail-step { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.mail-step p { margin: 0 0 4px; }
.mail-step.is-failed { border-color: #f3b9b9; background: #fff7f7; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-mail-sent { background: #e6f6ed; color: var(--green); border-color: #b6e2c8; }
.badge-mail-logged { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.badge-mail-failed { background: #fde8e8; color: var(--red); border-color: #f3b9b9; }
.badge-mail-pending, .badge-mail-new { background: #fff7e6; color: var(--amber); border-color: #f2cf8a; }
.badge-mail-cancelled { background: var(--steel); color: var(--muted); }
.admin-table tr.row-bad td { background: #fff7f7; }
.mail-preview { width: 100%; min-height: 640px; border: 1px solid var(--line); border-radius: 8px; background: #f3f5f9; margin-bottom: 18px; }
.redirect-table td.path { max-width: 420px; overflow-wrap: anywhere; }
.redirect-table code { background: none; padding: 0; }
.test-url label { font-weight: 600; }
.test-url input { flex: 1 1 320px; }
.narrow-form { max-width: 720px; }
.hint { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
@media (min-width: 1100px) { .admin-nav { gap: 2px; } .admin-nav a, .admin-nav .linklike { padding: 8px 7px; font-size: 14px; } }
/* phone number in the main nav (phone menu: a row; desktop: after Contact, icon-only on narrower screens) */
.nav-phone a { display: flex; align-items: center; gap: 8px; color: var(--yellow) !important; white-space: nowrap; }
.nav-phone svg { width: 17px; height: 17px; flex: none; }
.header-phone { display: none; }
@media (min-width: 1100px) {
  .nav-phone { display: none; }   /* desktop: the number sits in the header row instead */
  .header-phone { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-weight: 700; text-decoration: none; white-space: nowrap; font-size: 15px; }
  .header-phone svg { width: 18px; height: 18px; color: var(--blue); }
  .header-phone:hover { color: var(--blue); }
}
@media (min-width: 1100px) and (max-width: 1279px) { .site-nav a { padding: 12px 8px; font-size: 14px; } }

/* ---- paid ads (PayPal) */
.badge-awaiting_payment { background: #fff3dc; color: var(--amber); border-color: #f3d39a; }
.badge-paid { background: #e6f6ed; color: var(--green); border-color: #b6e2c8; }
.badge-refunded { background: #f1f2f5; color: #6b7280; }
.badge-free { background: #f1f2f5; color: #4a5163; }
.pay-wrap h1 { margin-bottom: .75rem; }
.pay-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .pay-grid { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.pay-ad { display: flex; gap: .9rem; align-items: center; }
.pay-ad img { border-radius: 6px; object-fit: cover; flex: none; }
.pay-ad h2 { font-size: 1.1rem; margin: .1rem 0; }
.pay-ad p { margin: 0; }
.pay-lines { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; margin: 1rem 0; padding-top: .8rem; border-top: 1px solid #e5e7eb; }
.pay-lines dd { margin: 0; text-align: right; }
.pay-lines .pay-total { font-weight: 700; font-size: 1.15rem; padding-top: .4rem; border-top: 1px solid #e5e7eb; }
.pay-points { padding-left: 1.1rem; margin: 0; }
.pay-points li { margin: .3rem 0; }
.pay-box h2 { margin-top: 0; }
#paypal-buttons { min-height: 120px; margin: .8rem 0; }
.pay-panel dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; margin: .5rem 0; font-size: .92rem; }
.pay-panel dd { margin: 0; word-break: break-all; }
.refund-note { background: #fff8e6; border: 1px solid #f3d39a; border-radius: 6px; padding: .6rem .75rem; font-size: .92rem; }
.fee-strip { background: #fff3dc; border-bottom: 1px solid #f3d39a; padding: .55rem 0; font-size: .95rem; }
.fee-strip a { margin-left: .4rem; }
.fee-note { background: #fff8e6; border: 1px solid #f3d39a; border-radius: 6px; padding: .45rem .7rem; display: inline-block; font-weight: 600; margin: 0 0 .8rem; }
.fee-box { background: #fff8e6; border: 1px solid #f3d39a; border-radius: 8px; padding: .8rem 1rem; margin: 1rem 0; }
.fee-box p { margin: .2rem 0; }
.fee-big { font-size: 1.2rem; font-weight: 700; }
.fee-hint { font-weight: 600; color: var(--amber); }
.footer-fee { font-weight: 600; }
/* ---- banner bookings */
.ad-here { display: block; text-align: right; font-size: .75rem; color: #6b7280; margin-top: .2rem; }
.ad-here:hover { color: var(--blue); }
.ad-slots { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1rem 0; }
@media (min-width: 760px) { .ad-slots { grid-template-columns: 1fr 1fr; } }
.ad-slot-card h2 { margin-top: 0; }
.ad-price { font-size: 1.1rem; }
.booking-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.booking-form legend { font-weight: 700; font-size: 1.1rem; margin-bottom: .4rem; }
.booking-form .radio, .booking-form .checkbox { display: block; margin: .3rem 0; }
#bk-total { font-weight: 700; font-size: 1.05rem; }
.badge-bk-paid { background: #fff3dc; color: var(--amber); border-color: #f3d39a; }
.badge-bk-approved { background: #e6f6ed; color: var(--green); border-color: #b6e2c8; }
.badge-bk-awaiting_payment { background: #eef0ff; color: var(--blue); }
.badge-bk-rejected, .badge-bk-cancelled, .badge-bk-expired { background: #f1f2f5; color: #6b7280; }
.bk-art { max-width: 100%; height: auto; border: 1px solid #e5e7eb; }