/* ============================================================================================
   LA TIENDA - the storefront's own skin.

   Loaded only by `publico_tienda.html`, after `publico.css`, and it deliberately overrides the
   shell. The rest of hitlab.cards is a newspaper - cream paper, ink, a ledger's restraint -
   because its job is to report somebody else's market and look like it has no stake in it. The
   operator's dashboard was built the same way and for the same reason. A page that reports and
   a page that sells do not want the same room.

   The reference is the modern TCG marketplace: near-black navy, one gold that does all the
   shouting, ultra-heavy uppercase type, photographs on black so the card art is the only colour
   that isn't ours. The tokens below were measured off a live example rather than guessed - a
   #0b1628 card on a #07101d floor, gold #f5c542 buttons at weight 900, prices in white, and
   10px corners throughout.

   Nothing here is loaded by any other page. Global selectors are used on purpose, to pull the
   shared header, strip and footer into the same room as the window.
   ============================================================================================ */

/* Inter, self-hosted in three weights, sitting beside the newspaper's Archivo rather than
   replacing it. Archivo is a reporting face - narrow, quiet, built to stack in columns - and it
   ships no 900, which is the weight a marketplace headline needs. `--font-sans` is redeclared
   in this file's `:root`, and only this page loads this file, so no other page moves. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/inter-900.woff2') format('woff2');
}

:root {
  /* The room. Navy-black rather than neutral black: a pure grey-black next to card art reads as
     an unstyled page, and the blue in it keeps the gold warm. */
  --t-void: #060b14;        /* the page */
  --t-deck: #07101d;        /* a section's floor, one step up from the page */
  --t-card: #0b1628;        /* a product card */
  --t-card-2: #0e1d35;      /* the same card under a cursor */
  --t-shot: #000000;        /* behind a photograph: black, so the art is the only colour */
  --t-line: #1f344f;        /* the 1px edge that separates things */
  --t-line-2: #2f4a6d;      /* an edge that has to read: a chip, a focused control */

  --t-white: #ffffff;
  --t-soft: #9dafc6;        /* a set line, a label, anything read second */
  --t-mute: #6b7f99;        /* a caption, a count, the small print */

  --t-gold: #f5c542;        /* the money colour: buttons, the headline's second line */
  --t-gold-2: #ffd463;      /* the same, hovered */
  --t-gold-dim: rgba(245, 179, 1, 0.58);  /* gold as an outline only */
  --t-ink: #111827;         /* type ON gold - never white, which vibrates */

  --t-hot: #ff5547;         /* scarcity, and nothing else */
  --t-hot-bg: rgba(255, 85, 71, 0.09);
  --t-live: #20d391;        /* a live / in-hand state */
  --t-live-bg: rgba(32, 211, 145, 0.08);

  --t-r: 10px;
  --t-r-sm: 8px;
  --t-tap: 44px;
  --t-fast: 120ms;
  --t-base: 200ms;
}

/* ---------------------------------------------------------------------------- the room */

body {
  background: var(--t-void);
  color: var(--t-white);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The shelf. The logotype is drawn in ink for the cream site; the same file is knocked through
   to white here, which works because the mark is monochrome. */
.p-shelf {
  background: var(--t-deck);
  border-bottom: 1px solid var(--t-line);
}
.p-shelf .p-mark img { filter: brightness(0) invert(1); opacity: 0.96; }
.p-shelf .p-tagline,
.p-shelf .p-brand { color: var(--t-mute); }

.p-strip {
  background: var(--t-deck);
  border-bottom: 1px solid var(--t-line);
}
.p-strip nav a {
  color: var(--t-soft);
  font-weight: 700;
  font-size: 12.5px;
}
.p-strip nav a:hover { color: var(--t-white); }
.p-strip nav a.active {
  color: var(--t-gold);
  border-bottom-color: var(--t-gold);
}
.p-strip::after { background: linear-gradient(90deg, rgba(7, 16, 29, 0), var(--t-deck)); }

.p-main { max-width: 1280px; }

/* -------------------------------------------------------------------- the words at the top */

/* Two lines and out, the second one gold. A marketplace says what it is in four words at weight
   900; an opening paragraph belongs on a page that is explaining a reading. */
/* The base stylesheet sets headings to Archivo Narrow, and that rule is more specific than a
   `body` declaration, so the headline came out in the newspaper's condensed face. Named
   explicitly here rather than fought with `!important`. */
h1, h2, h3, .t-name, .t-value, .t-chip, .t-btn, .p-strip nav a {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* 38px under the nav strip put 62px of measured air over the stamp, which read as a gap rather
   than as a margin. The block sits higher and breathes inside itself instead. */
.t-head { padding: 22px 0 26px; }
.t-head h1 {
  margin: 0 0 10px;
  color: var(--t-white);
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.3rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.t-head h1 .t-gold { color: var(--t-gold); display: block; }
.t-head p {
  margin: 0;
  max-width: 62ch;
  color: var(--t-soft);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* A stamp over the headline, the way a marketplace labels its own floor.

   `display: flex` with `width: fit-content`, not `inline-flex`: an inline-level box sits in a
   line box, and a line box takes its height from line-height rather than from the box's own
   margins - so `margin-bottom` here was measured at 0 effect and the stamp sat welded to the
   "C" of CARTAS. Block-level with a shrink-to-fit width keeps the pill hugging its text and
   makes the margin real. */
.t-eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin: 0 0 22px;
  padding: 6px 13px;
  border: 1px solid rgba(32, 211, 145, 0.34);
  border-radius: 999px;
  background: var(--t-live-bg);
  color: var(--t-live);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.t-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t-live);
}

/* The hours, under the lead. Gold dot, quiet weight: a fact the buyer wants before tapping,
   not a second headline competing with the one above it. Seven days 9-to-9 is a selling point
   in this market, and it was previously stated only in a footer box two thirds down the page -
   past every WhatsApp button on the screen. */
.t-hours {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--t-dim);
}
.t-hours::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t-gold);
  flex: none;
}

/* The foot's own WhatsApp link. Deliberately NOT the gold card button: that one buys a
   specific lot, this one opens a conversation about anything. Same voice, lower volume, so the
   six asks above it stay the loudest thing on the page. */
.t-fine-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 9px 15px;
  border: 1px solid var(--t-gold);
  border-radius: 999px;
  color: var(--t-gold);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.t-fine-cta:hover { background: var(--t-gold); color: var(--t-void); }

/* ------------------------------------------------------------------------- the filters */

/* Sticky and tight. Someone walking a case should be able to change shelves without walking
   back to the top, and the last draft spent a whole phone screen on buttons before showing a
   single card. */
.t-filters {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 8px;
  padding: 12px 0 10px;
  background: var(--t-void);
  border-bottom: 1px solid var(--t-line);
}
.t-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.t-row::-webkit-scrollbar { display: none; }
.t-row > span {
  flex: 0 0 auto;
  min-width: 48px;
  color: var(--t-mute);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.t-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--t-line-2);
  border-radius: var(--t-r);
  background: rgba(10, 18, 38, 0.72);
  color: var(--t-soft);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.t-chip:hover {
  color: var(--t-white);
  border-color: var(--t-gold-dim);
}
.t-chip.active {
  background: var(--t-gold);
  border-color: var(--t-gold);
  color: var(--t-ink);
}

/* The game mark in front of the word. 15px is the size a collector needs to recognise a shape
   without reading - smaller and the Poké Ball's band closes up, larger and the chip stops being
   a chip. `flex: 0 0 auto` because a mark that squashes is worse than no mark. */
.g-ico {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-right: 7px;
  margin-left: -2px;
}

.t-count {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 16px 0 0;
  color: var(--t-mute);
  font-size: 12.5px;
  font-weight: 700;
}
.t-count a {
  color: var(--t-gold);
  font-weight: 800;
  text-decoration: none;
}
.t-count a:hover { color: var(--t-gold-2); }

/* ------------------------------------------------------------------------- the window */

.t-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
  gap: 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.t-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--t-card);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r);
  overflow: hidden;
  transition: transform var(--t-base) ease, border-color var(--t-base),
              background var(--t-base);
}
.t-card:hover {
  transform: translateY(-2px);
  background: var(--t-card-2);
  border-color: var(--t-line-2);
}

/* THE TILE. Black behind the photograph, so the only colour in the frame is the card's own art.

   `aspect-ratio` alone is not enough - it is a suggestion content can push past, and a tall slab
   did exactly that, giving tiles of 364px and 405px in the same row so the names and prices
   below them landed on different lines. A shelf is a shelf: the height is pinned, and
   `min-height: 0` stops a tall image from arguing with it. */
.t-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  min-height: 0;
  max-height: 340px;
  padding: 14px;
  overflow: hidden;
  background: var(--t-shot);
  border-bottom: 1px solid var(--t-line);
}
.t-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 2px;
}
.t-tile.is-empty {
  color: var(--t-mute);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* A slab's grade, top-left: gold outline on black. It is the only figure on this page a buyer
   can verify against somebody else's database, which is what earns it the loud colour. */
.t-grade {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border: 1px solid var(--t-gold-dim);
  border-radius: var(--t-r-sm);
  background: rgba(6, 11, 20, 0.82);
  color: var(--t-gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* The last one in the case, top-right. Red is reserved for scarcity and used nowhere else on
   this page, so it never has to compete with itself. */
.t-last {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 85, 71, 0.45);
  border-radius: var(--t-r-sm);
  background: var(--t-hot-bg);
  color: var(--t-hot);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- what the card says */

.t-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 3px;
  padding: 13px 14px 0;
}

.t-name {
  margin: 0;
  color: var(--t-white);
  font-size: 0.87rem;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.005em;
}
.t-set {
  margin: 1px 0 0;
  color: var(--t-mute);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
}

/* A raw condition, in our own voice: a plain outline, never gold. Gold is a third party's grade.
   The difference between "PSA said 10" and "we looked at it" is the whole point of the page. */
.t-cond {
  display: inline-flex;
  align-self: flex-start;
  margin: 7px 0 0;
  padding: 3px 8px;
  border: 1px solid var(--t-line-2);
  border-radius: 5px;
  color: var(--t-soft);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.t-note {
  margin: 8px 0 0;
  color: var(--t-soft);
  font-size: 11.5px;
  line-height: 1.5;
}

/* The price. White, heavy, tabular so a column of asks lines up down the grid. `margin-top:
   auto` drops it to the foot of the body, so a card with a note and one without still put their
   prices on the same line across a row. */
.t-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
  padding: 13px 0 2px;
}
.t-cur {
  color: var(--t-mute);
  font-size: 12px;
  font-weight: 800;
}
.t-value {
  color: var(--t-white);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.t-qty {
  margin-left: auto;
  color: var(--t-mute);
  font-size: 11px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------- the way in */

/* Gold, not green. The reference puts its one loud colour on the one action it wants, and a
   WhatsApp-green bar repeated down a grid turns the window into a wall of somebody else's
   brand. The icon says which app; the colour says this is the button. Dark ink on gold, never
   white - white on #f5c542 fails contrast and vibrates besides. */
.t-act { padding: 12px 14px 14px; }
.t-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: var(--t-tap);
  border: 0;
  border-radius: var(--t-r-sm);
  background: var(--t-gold);
  color: var(--t-ink);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast);
}
.t-btn:hover { background: var(--t-gold-2); }
.t-btn:active { transform: translateY(1px); }
.t-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* No number configured: an outline, obviously inert, not a link and not tabbable. A dead gold
   button would be a lie the next tap exposes. */
.t-btn.is-off {
  background: transparent;
  border: 1px solid var(--t-line-2);
  color: var(--t-mute);
  cursor: default;
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0;
}

/* ------------------------------------------------------- the line about our prices */

/* Rule one, for a column of figures: said once, under the window, the way a ledger states its
   method under the column rather than beside every row. Six identical disclaimers down a grid
   read as a shop apologising rather than a shop being straight. */
.t-standard {
  margin: 30px 0 0;
  padding: 16px 18px;
  background: var(--t-deck);
  border: 1px solid var(--t-line);
  border-left: 3px solid var(--t-gold);
  border-radius: var(--t-r-sm);
  color: var(--t-soft);
  font-size: 12.5px;
  line-height: 1.6;
}
.t-standard strong {
  display: block;
  margin-bottom: 5px;
  color: var(--t-white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.t-standard p { margin: 0 0 6px; }
.t-standard p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------------- the silences */

.t-empty {
  margin: 28px 0;
  padding: 50px 28px;
  background: var(--t-deck);
  border: 1px dashed var(--t-line-2);
  border-radius: var(--t-r);
  text-align: center;
}
.t-empty h2 {
  margin: 0 0 10px;
  color: var(--t-white);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.t-empty p {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--t-soft);
  font-size: 13.5px;
  line-height: 1.6;
}
.t-empty a {
  display: inline-block;
  margin-top: 18px;
  padding: 11px 20px;
  border-radius: var(--t-r-sm);
  background: var(--t-gold);
  color: var(--t-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
}
.t-empty a:hover { background: var(--t-gold-2); }

/* ---------------------------------------------------------------------------- the footer */

.p-foot {
  background: var(--t-deck);
  border-top: 1px solid var(--t-line);
  color: var(--t-mute);
}
.p-foot a { color: var(--t-soft); }
.p-foot a:hover { color: var(--t-gold); }
.p-foot .p-sign { color: var(--t-white); font-weight: 800; }
.p-foot .p-legal { color: var(--t-mute); }

/* Hours and terms, under the window rather than over it. A catalog that opens with its terms of
   business is a shop whose window is full of paperwork. */
.t-fine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  margin: 36px 0 0;
}
.t-fine section {
  padding: 18px 20px;
  background: var(--t-deck);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-sm);
}
.t-fine h2 {
  margin: 0 0 9px;
  color: var(--t-white);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.t-fine p {
  margin: 0 0 8px;
  color: var(--t-soft);
  font-size: 12.5px;
  line-height: 1.6;
}
.t-fine p:last-child { margin-bottom: 0; }
.t-fine a { color: var(--t-gold); text-decoration: none; font-weight: 700; }
.t-fine a:hover { color: var(--t-gold-2); }

/* -------------------------------------------------------------------------- small screens */

/* Phones are where this shop actually gets used: a buyer is on WhatsApp already, and the tap
   that opens a chat is the entire conversion. The desktop layout scaled down was costing 557px
   of preamble before the first card - two thirds of a screen of branding, headline and filters
   before anything was for sale - so the phone gets its own priorities, not shrunken ones.

   What changes below, and why, measured rather than guessed:

   * 557px of preamble -> the grid starts inside the first screen.
   * 11.5px button text -> 13px. Under 12px is a squint, and this is the one thing being tapped.
   * 34px chips -> 40px with a bigger hit area. 34 fails every touch-target guideline there is.
   * The headline drops from 33.6px to something that does not eat a third of the screen.
   * Link rows in the footer, all 15-16px tall, get real padding so a thumb can land on them.
*/

@media (max-width: 760px) {

  /* --- the top of the page: everything above the first card ------------------------------ */

  /* The masthead and section strip are the newspaper's, and on a phone they are a toll booth in
     front of the shop. Tight, but not gone: a buyer who lands here from a WhatsApp forward still
     has to be able to tell whose shop this is. */
  .p-shelf { padding: 8px 0; }
  .p-shelf .p-tagline { display: none; }   /* the tagline explains the newspaper, not the shop */
  .p-strip nav { gap: 14px; }
  .p-strip nav a { font-size: 12px; padding: 9px 0; }

  /* Two lines and nothing else. The desktop lead runs four lines on a phone explaining what the
     stamp above it and the prices below it already say - and those four lines were the last
     thing standing between a buyer and the first photograph. It stays in the markup for the
     desktop and for search engines; it just does not spend a phone's first screen. */
  .t-head { padding: 14px 0 10px; }
  .t-head h1 { font-size: 1.85rem; line-height: 1; margin: 0 0 4px; }
  /* `:not(.t-eyebrow)` matters: the stamp is also a `<p>` inside this block, and hiding every
     paragraph here took the stamp down with the lead. The stamp is the shop's claim - it stays. */
  .t-head p:not(.t-eyebrow) { display: none; }
  .t-eyebrow { margin: 0 0 9px; padding: 4px 10px; font-size: 9.5px; }

  /* --- the filters ----------------------------------------------------------------------- */

  /* Still sticky, because changing shelf without scrolling back is worth more on a phone than
     on a desktop. The label column goes: "JUEGO" in front of a row of game marks is a word
     doing a job the marks already do, and it was costing 48px of a 390px screen. */
  .t-filters { margin: 0 0 4px; padding: 8px 0 6px; }
  .t-row { gap: 7px; }
  .t-row > span { display: none; }

  /* 40px tall with the label optically centred. The chip itself is the tap target, so it is
     sized as one rather than relying on a parent's padding. */
  .t-chip {
    height: 40px;
    padding: 0 15px;
    font-size: 13px;
    border-radius: 12px;
  }
  .g-ico { width: 17px; height: 17px; margin-right: 8px; }

  .t-count { margin: 10px 0 0; font-size: 12px; }

  /* --- the window ------------------------------------------------------------------------ */

  /* Two across, tighter gutters. Two is deliberate: a single column turns six lots into six
     screens, and three at 390px makes every photograph a thumbnail. */
  .t-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 0; }
  .t-card { border-radius: 12px; }

  /* A shorter tile than the desktop's 3/4. The photograph still leads, but a 4/5 frame buys back
     roughly 40px per row, which over three rows is half a screen of scrolling. */
  .t-tile { aspect-ratio: 4 / 5; max-height: none; padding: 9px; }

  .t-body { padding: 10px 10px 0; gap: 2px; }
  .t-name { font-size: 13px; line-height: 1.28; }
  .t-set { font-size: 11px; }
  .t-cond { margin: 6px 0 0; padding: 2px 7px; font-size: 9.5px; }
  .t-note { display: none; }   /* the sentence survives in the WhatsApp message itself */
  .t-qty { display: none; }    /* five words under a price is more than a thumb needs */

  .t-price { padding: 10px 0 2px; gap: 5px; }
  .t-value { font-size: 1.3rem; }
  .t-cur { font-size: 11px; }

  /* --- the tap that matters -------------------------------------------------------------- */

  /* 46px, and 13px type. This is the only control on the page that earns money; it should be
     the easiest thing on the screen to hit. The label loses its tail - "Preguntar por WhatsApp"
     wraps to two lines in a 170px button and reads as broken - but the icon and the message it
     sends are unchanged. */
  .t-act { padding: 9px 10px 10px; }
  .t-btn {
    min-height: 46px;
    font-size: 13px;
    gap: 6px;
    letter-spacing: 0.01em;
  }
  .t-btn .t-btn-long { display: none; }
  .t-btn svg { width: 15px; height: 15px; }

  /* At 170px wide the two stamps collide across the top of the tile. The grade keeps the corner
     - it is the verifiable one - and the scarcity flag drops below it. */
  .t-grade, .t-last { top: 7px; padding: 3px 6px; font-size: 9.5px; letter-spacing: 0.02em; }
  .t-grade { left: 7px; }
  .t-last { right: 7px; }
  .t-tile:has(.t-grade) .t-last { top: 32px; }

  /* --- the foot -------------------------------------------------------------------------- */

  .t-standard { margin: 22px 0 0; padding: 14px 15px; font-size: 12px; }
  .t-fine { margin: 24px 0 0; gap: 12px; }
  .t-fine section { padding: 15px 16px; }

  /* Footer links measured 15-16px tall - unhittable. Every link in the fine print and the
     footer becomes a row with real vertical padding. 44px is the floor, so the padding is set
     against the line box rather than guessed: 13px type at 1.3 leaves ~27px to make up. */
  .t-fine a,
  .p-foot a {
    display: inline-block;
    min-height: 44px;
    padding: 12px 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .t-empty { padding: 38px 20px; }
  .t-empty a { padding: 13px 22px; font-size: 13px; }
}

/* Very small phones only - an SE-class screen, 320-340px. Two 150px cards there leave a
   photograph the size of a postage stamp, so one column is the lesser evil. Above this, two
   across stays: a 360px phone showing one card per screen turns six lots into six swipes, which
   is the behaviour a buyer abandons.

   The threshold is 345px rather than 380px because that is where two columns actually stop
   working - at 360px a card is still 168px wide and the photograph still reads. */
@media (max-width: 345px) {
  .t-grid { grid-template-columns: 1fr; gap: 12px; }
  .t-tile { aspect-ratio: 3 / 4; }
  .t-name { font-size: 14px; }
  .t-value { font-size: 1.45rem; }
  .t-note { display: block; }   /* one column has room for the flaw to be stated */
  .t-btn .t-btn-long { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .t-card, .t-btn { transition: none; }
  .t-card:hover { transform: none; }
}