/* Content pages: a pair's own page (/sneakers/<brand>/<id>), /about, /how-it-works, /guide/sizes,
   and the list rows on the brand and model pages. Loaded after site.css by every page a Function
   renders (functions/_seo.js page()), never by the home page. Only site.css's tokens, so light
   and dark follow the rest of the site; product photos are never dimmed. Body text is 16px and
   every tap target at least 44px. A file of its own so the wall's stylesheet is not touched. */

/* ---------- list rows: the photo and name open the pair's page, "Make an offer" the wall ---------- */
/* .sl-cta is a link of its own now, so site.css's `.seo-list a` (color:inherit) reaches it: its red
   comes back here. */
.seo-list li{display:flex;align-items:center;gap:0 12px}
.seo-list .sl-go{flex:1 1 auto;min-width:0}
.seo-list .sl-cta{flex:none;min-height:44px;padding:0 2px;color:var(--accent-fg)}
.seo-list .sl-cta:hover{text-decoration:underline}
@media (max-width:520px){
  .seo-list li{flex-wrap:wrap}
  .seo-list .sl-go{flex:1 1 100%;padding-bottom:0}
  /* under the meta line, lined up with the name (the link's 2px, the 64px thumbnail and the row's
     14px gap), as it was inside the old one-link row; the 44px tap area runs on below the words */
  .seo-list .sl-cta{flex:0 0 100%;align-items:flex-start;padding:4px 0 10px 80px}
}

/* ---------- a pair's page ---------- */
.pp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 44px;align-items:start}
.pp-media{display:grid;gap:10px;min-width:0}
.pp-photo{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--wash);border-radius:12px}
.pp-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pp-main{min-width:0}
.pp-h1{font-size:clamp(28px,4.2vw,44px);margin-bottom:6px;overflow-wrap:anywhere}
.pp-cw{margin:0 0 12px;font-size:16px;line-height:1.4;color:var(--muted)}
.pp-price{margin:4px 0 16px;font:700 26px/1.2 var(--body);color:var(--ink)}
.pp-from,.pp-or{font-size:16px;font-weight:600;color:var(--muted)}
.pp-price.pp-ask{font-size:22px}
.pp-price.pp-gone{font-family:var(--disp);font-weight:400;font-size:30px;text-transform:uppercase;color:var(--accent-fg)}
.pp-acts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.pp-acts .btn-dark,.pp-acts .btn-outline{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 24px;font-size:15px;font-weight:700}
.pp-how{margin:0;max-width:540px;font-size:15px;line-height:1.5;color:var(--muted)}
.pp-how a,.pp-note a,.pp-facts dd a{color:var(--ink);text-decoration:underline}
.pp-sizes,.pp-facts{margin-top:28px}
.pp-sizes h2,.pp-facts h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:22px;margin:0 0 10px}
.pp-band{margin:14px 0 8px;font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pp-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.pp-tiles li{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:56px;padding:9px 12px;
  border:1px solid var(--line3);border-radius:10px;background:var(--paper)}
.pp-z b{font-size:16px;font-weight:700}
.pp-z small{font-size:13px;color:var(--muted)}
.pp-zp{font-size:15px;font-weight:700;color:var(--ink)}
.pp-zp.ask{font-weight:600;color:var(--muted)}
.pp-note{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.pp-facts dl{margin:0;border-top:1px solid var(--line)}
.pp-facts dl>div{display:grid;grid-template-columns:116px minmax(0,1fr);gap:4px 14px;padding:11px 0;border-bottom:1px solid var(--line)}
.pp-facts dt{padding-top:2px;font:700 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pp-facts dd{margin:0;font-size:16px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
@media (max-width:860px){
  .pp{grid-template-columns:minmax(0,1fr);gap:18px}
  /* the plate at 4:3 on a phone, as in the pair sheet, so the price and buttons are on the first screen */
  .pp-plate{aspect-ratio:4/3}
}
@media (max-width:520px){
  .pp-acts .btn-dark,.pp-acts .btn-outline{flex:1 1 140px}
  .pp-facts dl>div{grid-template-columns:minmax(0,1fr)}
}

/* A phone number never breaks across two lines. */
.seo a[href^="tel:"]{white-space:nowrap}

/* ---------- /about, /how-it-works, /guide/sizes ---------- */
.ct-fig{margin:4px 0 20px;max-width:720px}
.ct-fig img{display:block;width:100%;height:auto;border-radius:12px;background:var(--wash)}
.seo-more .seo-lede{margin-bottom:12px}
.seo-lede strong{color:var(--ink)}
.ct-list{margin:0 0 14px;padding-left:20px;max-width:680px;font-size:16px;line-height:1.55;color:var(--muted)}
.ct-list li{margin-bottom:8px}
.ct-list strong{color:var(--ink)}
.ct-list a,.ct-dl dd a{color:var(--ink);text-decoration:underline}
.ct-dl{margin:0;max-width:680px;border-top:1px solid var(--line)}
.ct-dl>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:4px 18px;padding:12px 0;border-bottom:1px solid var(--line)}
.ct-dl dt{font-size:16px;font-weight:700;line-height:1.5;color:var(--ink)}
.ct-dl dd{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
@media (max-width:520px){.ct-dl>div{grid-template-columns:minmax(0,1fr)}}

/* The size guide's live table: one small table per group, side by side where they fit. */
.sg-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px 32px;align-items:start;max-width:980px}
.sg-t{width:100%;border-collapse:collapse;font-size:16px}
.sg-t caption{padding:0 0 8px;text-align:left;font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sg-t th,.sg-t td{padding:0;border-bottom:1px solid var(--line);text-align:left}
.sg-t thead th{padding:6px 0;font-size:13px;font-weight:600;color:var(--muted)}
.sg-t thead th+th,.sg-t td{text-align:right}
.sg-t tbody th a{display:flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line3)}
.sg-t tbody th a:hover{color:var(--accent-fg);text-decoration-color:currentColor}
.sg-t td{color:var(--muted);font-variant-numeric:tabular-nums}