:root {
  /* Light, and only light. The site used to follow the operating system,
     which meant most phones served a dark theme nobody had designed for:
     flat panels, no elevation, and a palette tuned for a background it was
     no longer on. One theme, designed once, beats two half-designed. */
  color-scheme: light;

  /* Not pure white. A faint warm ground lets white cards lift off it,
     which is what carries the hierarchy now that borders do less work. */
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --line: #e4e8ef;
  --line-strong: #d3d9e3;

  --ink: #0d1117;
  --ink-2: #4a5568;
  /* Darkened from #7b8797, which measured 3.43:1 on the page background
     and failed AA everywhere it was used -- and it is used for the peso
     price on every card, the result count, the pagination and the tab bar
     labels. This is 4.87:1 on the background and 5.17:1 on a card, still
     clearly the quiet grey it was meant to be. */
  --ink-3: #646e7b;

  /* A deeper green than the old one. The bright shade read as a default
     rather than a decision, and it failed contrast on white at small
     sizes: this passes AA as body text and still looks like money. */
  --accent: #067647;
  --accent-hover: #05603a;
  --accent-ink: #ffffff;
  --accent-soft: #e7f5ee;
  --accent-line: #b7e0cb;

  --warn: #9a4b06;
  --warn-soft: #fdf3e7;
  --danger: #b42318;
  --danger-soft: #fef3f2;

  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Two levels only. More than that and nothing reads as important. */
  --shadow: 0 1px 2px rgba(16, 24, 40, .05),
            0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lift: 0 4px 12px rgba(16, 24, 40, .08),
                 0 2px 4px rgba(16, 24, 40, .04);

  --header-h: 60px;
  /* The bottom navigation's height. A variable because the sticky action
     bar has to sit exactly above it, and two hand-tuned numbers drift. */
  --tabbar-h: 58px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Room for the sticky action bar so the last card is never trapped
     underneath it on a phone. */
  padding-bottom: env(safe-area-inset-bottom);

  /* A column, so a short page can push its footer to the bottom instead of
     leaving it stranded halfway down with blank space underneath. The
     inbox with one conversation in it looked like the page had failed to
     finish loading. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
main.wrap { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  /* The blur is what keeps the header legible over a scrolling grid
     without painting a hard band across the page. */
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  height: var(--header-h);
  display: flex; align-items: center;
}
.site-header .wrap {
  display: flex; align-items: center; gap: 12px;
}
.brand {
  font-weight: 800; font-size: 19px; letter-spacing: -.03em;
  white-space: nowrap; color: var(--ink);
}
.brand span { color: var(--accent); }
.header-spacer { flex: 1; }

.icon-btn {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); color: var(--ink-2);
  font-size: 20px;
}
.icon-btn:hover { background: var(--surface); text-decoration: none; }

/* Search collapses to an icon on a phone and expands inline from tablet up:
   a full search field in a 56px header leaves no room for anything else. */
.header-search { display: none; flex: 1; }
@media (min-width: 720px) {
  .header-search { display: block; }
  .header-search input { width: 100%; }
}

/* -------------------------------------------------------------- forms */

input, select, textarea, button {
  font: inherit; color: inherit;
}
input[type="text"], input[type="email"], input[type="search"],
input[type="number"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* 16px minimum, because iOS Safari zooms the whole page on focus for
     anything smaller and never zooms back out. */
  font-size: 16px;
}
/* The native chevron is drawn inside the box, over the text. Without room
   reserved for it a long option reads as "Anywhere in the co" with the
   arrow sitting on the last letters. */
select { padding-right: 34px; }

textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: transparent;
}

/* One focus ring for everything you can reach with a keyboard.
   Only the form fields had a designed one; buttons and links fell back to
   whatever the browser draws, so tabbing across a page changed indicator
   halfway through -- and on this site the primary action is almost always
   a button.

   :focus-visible rather than :focus, so it appears for somebody tabbing and
   not around every button somebody taps. Declared with the fields above
   rather than replacing them: a field also loses its border colour on
   focus, which the ring alone would not convey. */
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
label { display: block; font-size: 14px; color: var(--ink-2);
        margin: 14px 0 6px; font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 46px; padding: 12px 20px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 16px;
  text-decoration: none; letter-spacing: -.01em;
  transition: background .15s ease;
}
.btn:hover { text-decoration: none; background: var(--accent-hover); }
.btn:disabled { opacity: .5; }
.btn-block { width: 100%; }
.btn-ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { min-height: 38px; padding: 8px 14px; font-size: 14px; }

/* -------------------------------------------------------------- cards */

.grid {
  display: grid;
  /* Two columns on the narrowest phone. One would waste half the screen on
     a marketplace whose unit is a photo. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
@media (min-width: 620px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr);
                                    gap: 16px; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover {
  text-decoration: none;
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
  border-color: var(--line-strong);
}
/* Somebody who set "reduce motion" asked not to be moved. */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}
.card-photo {
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 28px;
  overflow: hidden;
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 10px 12px 12px; display: flex;
             flex-direction: column; gap: 2px; flex: 1; }
.card-price { font-weight: 700; font-size: 17px; letter-spacing: -.02em;
              color: var(--ink); }
.card-ars { font-size: 12px; color: var(--ink-3); }
.card-title {
  font-size: 14px; color: var(--ink-2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta { font-size: 12px; color: var(--ink-3); margin-top: auto;
             padding-top: 6px; }

/* ------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 650; line-height: 1.5;
  background: var(--surface-2); color: var(--ink-2);
}
.badge-new { background: var(--accent-soft); color: var(--accent); }
.badge-rating { background: var(--surface-2); color: var(--ink); }
.badge-paused { background: var(--surface-2); color: var(--warn); }
.badge-sold { background: var(--surface-2); color: var(--ink-3); }

/* ------------------------------------------------------ listing page */

.gallery {
  display: flex; gap: 8px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Bleed to the screen edges on a phone: a photo inset by 16px on a 390px
     screen loses a tenth of the only thing the buyer came to look at. */
  margin: 0 -16px; padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery img, .gallery .empty {
  scroll-snap-align: center;
  /* Square, not 4:3. The frame was landscape and phone photos are not: a
     3:4 shot of a bicycle standing up lost 44% of its height to the crop,
     which is usually the top and bottom of the actual item. Square costs a
     landscape photo 25% of its width instead, which is the cheaper loss,
     and it uses more of the fold on the one page where the photo IS the
     product. */
  width: min(88vw, 520px); aspect-ratio: 1 / 1;
  /* height:auto is load-bearing. The <img> carries width/height attributes
     so the browser can reserve the right space before the bytes arrive, but
     those attributes also act as a presentational hint that sets a literal
     pixel height. With no height declared here that hint wins over
     aspect-ratio, and a 1600x1200 photo renders 1200px tall inside a frame
     meant to be 4:3. */
  height: auto;
  /* contain, not cover, and only here. On the detail page the buyer has to
     see the whole thing before paying for it, so a letterboxed photo beats
     a cropped one; the grid cards keep cover, where a ragged edge would
     make the whole page look broken. */
  object-fit: contain; border-radius: var(--radius-lg);
  background: var(--surface-2); flex: 0 0 auto;
}
.gallery .empty { display: flex; align-items: center; justify-content: center;
                  color: var(--ink-3); font-size: 40px; }

/* The strip is the gallery on every screen: photos are meant to be
   flicked through, and a grid of six is a contact sheet, not a carousel.
   What a desktop lacks is not the layout but the CONTROLS -- a mouse
   wheel does not scroll horizontally and the scrollbar was hidden, so a
   listing with six photos showed two and the rest were unreachable.
   Measured in a real browser: 2112px of content past the right edge and
   a wheel event that moved the page instead of the strip.
   
   So: give a pointer something to grab. Arrows, a real scrollbar, arrow
   keys and the wheel. The touch behaviour below is untouched. */
/* Hidden by default and shown only for a fine pointer below: on a phone
   they would cover the photo they scroll, and a thumb already works. */
.gallery-nav {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%);
  align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
  transition: opacity .15s ease;
}
.gallery-nav:hover { background: #fff; }
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
/* At an end the button stays in the layout but stops soliciting clicks,
   so the row does not jump as the reader reaches the last photo. */
.gallery-nav[disabled] { opacity: 0; pointer-events: none; }
.gallery-wrap:focus-within .gallery-nav { opacity: 1; }
.gallery-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  /* A scrollbar IS the affordance, and hiding it was most of the bug.
     Slim and only under the strip, so it reads as part of the gallery. */
  /* Deliberately NO scroll-behavior: smooth. A mandatory snap container
     cancels smooth scrolling, and it does so no matter who asks: the
     arrows went dead both when the script requested it (scrollTo,
     scrollBy, scrollIntoView) and again when the CSS did. Measured in a
     browser each time -- scrollLeft simply stayed where it was. An
     instant jump between photos is the working version. */
  .gallery { scrollbar-width: thin; padding-bottom: 10px; }
  .gallery::-webkit-scrollbar { display: block; height: 8px; }
  .gallery::-webkit-scrollbar-thumb {
    background: var(--ink-3); border-radius: 999px;
  }
  .gallery::-webkit-scrollbar-track { background: transparent; }
  .gallery-nav { display: flex; }
}

/* Wider screens have room for a bigger photo, so the slide grows with the
   column instead of staying at a phone's 88vw. */
@media (min-width: 720px) {
  .gallery img, .gallery .empty { width: min(72%, 620px); }
}

/* The seller's photo manager. Two columns on a phone so "Hacer portada"
   fits on one line, three once there is room for it. */
.photo-manager {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 560px) {
  .photo-manager { grid-template-columns: repeat(3, 1fr); }
}
/* The cover marker sits on the photo rather than in the body, so every
   card has the same controls underneath and the row lines up. */
.photo-manager .card-photo { position: relative; }
.photo-cover-badge {
  position: absolute; left: 6px; top: 6px;
  background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
/* Delete sits on the bottom edge of every card, so it lines up across the
   row even though the cover card has no "make cover" button above it. */
.photo-manager .card { display: flex; flex-direction: column; }
.photo-manager .card-body { flex: 1; display: flex; flex-direction: column; }
.photo-manager .card-body form:last-child { margin-top: auto; }

/* The moderation queue asks somebody to take a listing down. The link to
   the listing itself has to look like one. */
.mod-open { text-decoration: underline; text-underline-offset: 2px; }
.mod-open::after { content: " \2197"; }

.price-block { margin: 16px 0 4px; }
.price-usd { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.price-ars { font-size: 15px; color: var(--ink-2); margin-top: 2px; }
.price-note { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

h1 { font-size: 23px; line-height: 1.25; margin: 8px 0;
     letter-spacing: -.03em; font-weight: 700; }
h2 { font-size: 18px; margin: 28px 0 10px; letter-spacing: -.02em;
     font-weight: 650; }
@media (min-width: 720px) { h1 { font-size: 28px; } h2 { font-size: 20px; } }

.meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
            color: var(--ink-3); font-size: 13px; margin: 8px 0; }

.seller-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; margin: 16px 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; flex: 0 0 auto;
}

/* The buy bar is fixed to the bottom on phones, where it is always in the
   thumb's reach, and becomes a normal block from tablet up. */
/* The primary action on a page: Publicar, Comprar, Enviar, Guardar.
 *
 * It sticks ABOVE the bottom navigation, not at the viewport edge. Stuck at
 * bottom:0 it sat underneath the tab bar, which has a higher z-index: the
 * button was 52px tall with 11px visible, and a tap at its centre landed on
 * a tab icon and navigated away instead of submitting. Every page with a
 * primary action was affected, on the one screen size the site is designed
 * for, and no server-side test could see it.
 */
/* The seller's status control shares the sticky bar with Edit, and on a
   phone there is not room for both: the select was squeezed to a single
   character, so "Pausada" rendered as "P" beside a chevron. It asks for
   240px and the bar wraps when it cannot have it, which puts it on its
   own line on a phone and leaves it beside Edit on a desktop. */
.status-form { display: flex; gap: 8px; flex: 1 1 240px; }
.status-form select { flex: 1; min-width: 0; }

.action-bar {
  position: sticky;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 14px 16px;
  margin: 24px -16px 0;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* From tablet up the tab bar is gone, so the bar returns to the edge. */
@media (min-width: 720px) {
  .action-bar {
    bottom: 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    border-bottom: none;
  }
}
.action-bar .btn { flex: 1; }

/* --------------------------------------------------------- messages */

.msg-list { display: flex; flex-direction: column; gap: 10px;
            margin: 16px 0; }
.msg {
  max-width: 82%; padding: 10px 13px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 15px; line-height: 1.45;
}
.msg.mine { align-self: flex-end; background: var(--accent-soft);
            border-color: transparent; }
.msg-time { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

.thread-row {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.thread-row:hover { text-decoration: none; }
.thread-thumb { width: 52px; height: 52px; border-radius: var(--radius);
                object-fit: cover; background: var(--surface-2);
                flex: 0 0 auto; }

/* ---------------------------------------------------------- reviews */

.review { padding: 14px 0; border-bottom: 1px solid var(--line); }
.review:last-child { border-bottom: none; }
.stars { color: var(--accent); letter-spacing: 2px; font-size: 14px; }
.review-by { font-size: 13px; color: var(--ink-3); }

.rating-input { display: flex; gap: 8px; margin: 8px 0; }
.rating-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-input label {
  margin: 0; min-width: 48px; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: 20px;
}
.rating-input input:checked + label {
  border-color: var(--accent); background: var(--accent-soft);
}

/* ------------------------------------------------------------ chips */

/* A swipeable row on a phone: it bleeds to both edges so the cut-off chip
   on the right reads as "there is more this way", and the scrollbar is
   hidden because a touch surface does not need one. */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0;
         margin: 0 -16px; padding-left: 16px; padding-right: 16px;
         scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

/* On a desktop that same row was simply stuck. A mouse wheel does not
   scroll horizontally, the scrollbar was hidden, and the categories past
   the right edge were unreachable -- not hard to reach, unreachable.
   There is width to spare here, so they wrap and all of them are visible
   without scrolling anything. */
@media (min-width: 720px) {
  .chips {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    row-gap: 8px;
  }
}
.chip {
  flex: 0 0 auto; padding: 9px 15px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; white-space: nowrap; min-height: 40px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow); color: var(--ink-2);
}
.chip:hover { text-decoration: none; background: var(--surface-2); }
.chip.on { background: var(--accent); color: var(--accent-ink);
           border-color: transparent; font-weight: 600; }

/* ------------------------------------------------------------ misc */

.notice {
  padding: 13px 15px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; margin: 14px 0; color: var(--ink-2);
  line-height: 1.5;
}
/* Tinted, not just outlined. A coloured border on white reads as
   decoration; a tinted panel reads as a message. */
.notice-error { border-color: #f3b9b4; background: var(--danger-soft);
                color: var(--danger); }
.notice-ok { border-color: var(--accent-line); background: var(--accent-soft);
             color: var(--accent); }
.notice-warn { border-color: #efd0a8; background: var(--warn-soft);
               color: var(--warn); }

.muted { color: var(--ink-3); font-size: 14px; }
.empty-state { text-align: center; padding: 48px 16px; color: var(--ink-3); }
.empty-state .big { font-size: 44px; margin-bottom: 12px; }

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px; margin: 18px 0;
  box-shadow: var(--shadow);
}

#map { height: 62vh; min-height: 340px; border-radius: var(--radius-lg);
       border: 1px solid var(--line); overflow: hidden;
       /* Leaflet stacks its own panes from 200 to 800 and its controls
          above that. Without a stacking context here those numbers land in
          the ROOT one, where they beat the tab bar's 60 and the map paints
          straight over the bottom navigation -- on the map page, which is
          one of the five tabs. `isolation` rather than a z-index so the
          map keeps its place in the normal flow. */
       position: relative; isolation: isolate; z-index: 0; }

.site-footer {
  margin-top: 40px; padding: 24px 0 32px;
  border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 13px;
}
.site-footer a { text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }

/* Bottom navigation: the primary way around the site on a phone, hidden
   from tablet up where the header has room for the same links. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; min-height: 54px; padding: 6px 0 4px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  font-size: 11px; color: var(--ink-3);
}
.tabbar a.on { color: var(--accent); }
.tabbar a:hover { text-decoration: none; }
.tabbar .ico { font-size: 20px; line-height: 1; }
body.has-tabbar {
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 720px) {
  .tabbar { display: none; }
  body.has-tabbar { padding-bottom: 0; }
}

/* --------------------------------------------------------- pagination */

.pager {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0 8px;
}
.pager .btn { flex: 1; }
.pager .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.pager-count {
  flex: 0 0 auto; font-size: 13px; color: var(--ink-3);
  text-align: center; min-width: 110px;
}

/* A page title that is a real h1 for screen readers and search engines but
   does not shout on a phone, where the listings are the point and a big
   heading would just push them below the fold. */
.page-title {
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  margin: 16px 0 4px; letter-spacing: 0;
}
@media (min-width: 720px) { .page-title { font-size: 17px; } }

/* For a heading that must exist in the document but has nothing to add
   visually. Not display:none, which removes it from the accessibility tree
   along with everything else. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------ gallery count */

.gallery-wrap { position: relative; }
.gallery-count {
  position: absolute; right: 8px; bottom: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 12px; font-weight: 600;
  pointer-events: none;
}

/* The report control: reachable, never inviting. A marketplace that puts a
   big red button under every listing gets used as a weapon between rivals. */
.report { margin: 28px 0 8px; }
.report summary {
  font-size: 13px; padding: 8px 0;
  list-style: none;
}
.report summary::-webkit-details-marker { display: none; }
.report summary::before { content: "⚑ "; opacity: .6; }

/* --------------------------------------------------------------- hero */

/* The home page used to open on a grid of prices with no statement of what
   the site is, so a visitor from a search result had to infer the whole
   proposition from a sofa. */
.hero {
  padding: 32px 0 8px;
}
.hero h1 {
  font-size: 30px; line-height: 1.15; letter-spacing: -.035em;
  margin: 0 0 14px; font-weight: 750;
}
.hero-lead {
  font-size: 17px; line-height: 1.55; color: var(--ink-2);
  margin: 0 0 22px; max-width: 34em;
}
.hero-lead b { color: var(--ink); font-weight: 650; }

.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-actions .btn { flex: 1 1 auto; min-width: 150px; }

.hero-points {
  list-style: none; padding: 0; margin: 28px 0 8px;
  display: grid; gap: 12px;
}
.hero-points li {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero-icon { grid-row: 1 / span 2; font-size: 20px; line-height: 1.3; }
.hero-points b { font-size: 15px; letter-spacing: -.01em; }
.hero-points span:last-child {
  font-size: 14px; color: var(--ink-3); line-height: 1.5;
}

/* From tablet up the three points sit side by side and the copy gets the
   width it wants; on a phone they stack, because a 375px column split
   three ways is three unreadable slivers. */
@media (min-width: 760px) {
  .hero { padding: 52px 0 12px; }
  .hero h1 { font-size: 44px; }
  .hero-lead { font-size: 19px; margin-bottom: 26px; }
  .hero-actions .btn { flex: 0 0 auto; }
  .hero-points { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

.closing { margin-top: 32px; }

/* ------------------------------------------------------------- radius */

/* Category and province.
   Side by side these get 119px of text each on a 375px phone, and the
   Argentine names do not fit: "Todas las categorías" needs 148px and
   "Deportes y tiempo libre" needs 194px, so the default option was cut off
   before anybody touched it. One per row below 560px; the pair only shares
   a line where there is room for both. */
.filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 560px) {
  .filter-row { grid-template-columns: 1fr 1fr; }
}

.radius-row {
  display: flex; gap: 10px; margin-top: 10px; align-items: stretch;
}
.radius-row select { flex: 1; }
.radius-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* The map's own radius control sits over the map on a phone, where screen
   height is the scarce thing and a control bar above it would push the map
   itself out of view. */
.map-controls {
  display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap;
}
.map-controls select, .map-controls .btn { flex: 1 1 auto; min-width: 140px; }

/* The address of an unlisted listing, for its seller to copy. Breaks
   anywhere rather than pushing the page sideways on a phone. */
.unlisted-link {
  margin-top: 8px; padding: 8px 10px;
  background: var(--surface-2); border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; word-break: break-all; user-select: all;
}

/* ------------------------------------------------ desktop line lengths
   The site was built and checked on a phone, where the column is its own
   cap. On a desktop the same markup gives 1080px of text: measured at
   142-150 characters per line on the terms, privacy and how-it-works
   pages, and 171 in the footer, against a comfortable 45-90. A reader
   loses their place on the way back to the start of each line.

   The design already knew the answer -- .hero-lead caps at 34em -- it was
   just never applied anywhere else. Direct children only, so text inside
   a card or a form keeps the width its layout gives it. Below 720px the
   cap is wider than the screen and does nothing. */
main.wrap > p,
main.wrap > ul,
main.wrap > ol,
footer .wrap p { max-width: 34em; }

/* A single short field does not need the whole column either. Each of
   these holds one short value -- a payment id, a city, a distance -- and
   was measured spanning 930-1050px beside its own full-width button. */
@media (min-width: 720px) {
  #pago, #nombre, #ciudad, #near-km { max-width: 420px; }
  #near-me, #map-show { width: auto; }
  /* The buy button was 968px wide for a three-character label, a thumb
     target transplanted from a phone. It keeps the emphasis and loses the
     absurdity. */
  .action-bar .btn { max-width: 320px; }
  /* One "Next" link does not need 459px of a flex row. */
  .pager .btn { flex: 0 0 auto; }
}

/* The photo picker, which had no styling at all and rendered at the
   browser's own 26px. It is the most laborious control on the site --
   picking photos from a phone is most of the work of listing something --
   and it was the smallest thing on the page, well under the 44px a thumb
   needs.

   Only the native button opens the picker; clicking the rest of the input
   does nothing. So the button is what has to be big, not the input. */
input[type="file"] {
  width: 100%;
  font-size: 15px;
  color: var(--ink-2);
}
input[type="file"]::file-selector-button {
  min-height: 44px;
  padding: 0 18px;
  margin-right: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--surface); }