/* MARKETPLACE CARD — the one product card, shared by shop.html and the homepage marketplace band.
   Markup comes from marketplace-card.js. Inter for words, JetBrains Mono for figures, the same split
   the registry uses. Every text size is 12px or more (the site's type floor is 11.5px) and every
   button is 44px tall on a touch screen. */
.pc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
/* EVERY CONTAINER OF CARDS SPACES THEM THE SAME (2026-09-21). Measured on production: the same
   card sat in three containers with three different gaps — the homepage band (.sc-row.mk-row) at
   8px, the Marketplace page (.pc-row) at 18px, and "Browse everything" (.grid, 24 cards) at
   `normal`, which computes to ZERO. So the page had margins at the top and none further down,
   which is exactly what it looked like. My earlier gap change only touched .pc-row and never
   reached the other two, because I styled a class instead of asking what actually holds a card.
   :has(> .pc) asks that question, so a fourth container inherits the spacing instead of
   introducing a fourth value. */
.grid:has(> .pc), .sc-row:has(> .pc), .mk-row:has(> .pc) { gap: 16px; }
@media (max-width:900px){ .grid:has(> .pc), .sc-row:has(> .pc), .mk-row:has(> .pc) { gap: 16px; } }
@media (max-width:620px){ .grid:has(> .pc), .sc-row:has(> .pc), .mk-row:has(> .pc) { gap: 16px; } }
@media (max-width:900px){ .pc-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} }
@media (max-width:620px){
  .pc-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 0 8px}
  .pc-row .pc{flex:0 0 66%;scroll-snap-align:start}
}

/* A CARD, NOT A TABLE CELL (2026-09-21). The row drew a shared 1px lattice — border-top on the
   row, border-right/bottom on each card — so a product read as a spreadsheet row. Depth and space
   carry the separation now: no hairlines, a 14px radius, and a shadow that lifts on hover. The
   information and the wording are unchanged. */
.pc{display:flex;flex-direction:column;min-width:0;background:#fff;color:#111;text-align:left;
  border-radius:var(--g-r-card);overflow:hidden;
  box-shadow:0 1px 2px rgba(17,17,17,.04),0 8px 24px rgba(17,17,17,.06);
  transition:transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo);
  font-family:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif}
.pc:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(17,17,17,.06),0 16px 40px rgba(17,17,17,.10)}
/* THE FRAME IS SQUARE, AND THE CATALOGUE CHOSE IT — not taste. This was 4/3, a landscape frame
   over a library that is mostly not landscape. 772 registry records carry a photograph; 117
   sampled and measured from their own image headers:

       square-ish 50%  ·  PORTRAIT 40%  ·  landscape 9%
       aspect ratio  min 0.56   p25 0.77   median 1.00   p75 1.00   max 1.88

   Against that distribution, object-fit:cover in a 4/3 frame discards a WEIGHTED AVERAGE of
   32.7% of every photograph, up to 58% on a 750x1333 plant shot — the middle 42% of the plant,
   top and bottom gone — and it renders exactly ZERO of the catalogue uncropped. 1/1 halves it to
   15.4% average, and 50% of the library now renders with NO CROP AT ALL because the frame finally
   matches the modal shape. Landscape pays (5% -> 29%), and it is 9% of the set paying so that the
   other 91% stops paying.

   Checked before changing: this frame also holds .is-mark (object-fit:contain) and the .pc-ph
   placeholder, and neither is cropped by it — a square is if anything a kinder frame for a
   breeder's mark than a letterbox. So only the photograph case changes behaviour. */
.pc a.pc-media{position:relative;display:block;aspect-ratio:1/1;background:#f2f2ef;overflow:hidden;border:0;text-decoration:none;color:inherit}
.pc-media img{display:block;width:100%;height:100%;transition:transform var(--dur) var(--ease-out-expo)}
.pc-media img.is-photo{object-fit:cover}
.pc-media img.is-mark{object-fit:contain;padding:10% 16%;background:#fff}
.pc:hover .pc-media img.is-photo{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){ .pc-media img{transition:none} .pc:hover .pc-media img.is-photo{transform:none} }

.pc-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px}
.pc-ph b{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#fff;border:1px solid #cbcbc3;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500;font-size: var(--t-h3);letter-spacing:1px;color:#4f4f49}
.pc-ph i{font-style:normal;font-size: var(--t-label);letter-spacing:1px;text-transform:uppercase;color:#66665f;max-width:90%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pc-badge{position:absolute;top:11px;left:11px;z-index:2;font-size: var(--t-label);font-weight:550;letter-spacing:.02em;
  line-height:1.3;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.93);color:#111;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 3px rgba(0,0,0,.10)}
.pc-badge.o{background:rgba(17,17,17,.88);color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.pc-body{display:flex;flex-direction:column;gap:2px;flex:1;padding:16px 16px 16px}
.pc-breeder{font-size: var(--t-label);font-weight:550;letter-spacing:.09em;text-transform:uppercase;color:#6b6b66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* STILL UPPERCASE, and that is a DATA fact rather than a style choice: 43% of live product names
   are stored ALL CAPS (BANJO BELTS) and 56% title case (Grape Drank #2). The transform is what
   makes the grid look consistent; removing it for a "modern" title case would expose the mix.
   Title case needs the source normalised first. */
.pc-name{margin:2px 0 0;font-size: var(--t-body);line-height:1.3;font-weight:640;letter-spacing:.01em;text-transform:uppercase;color:#111;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* our pack's name opens its strain record; it reads as the name, not as a coloured link (the homepage colours bare links) */
.pc .pc-name a{color:inherit;text-decoration:none}
.pc .pc-name a:hover{text-decoration:underline;text-underline-offset:3px}
.pc .pc-name a:focus-visible{outline:2px solid #111;outline-offset:2px}
.pc-sub{min-height:19px;font-size: var(--t-data);line-height:1.45;color:#6b6b66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-foot{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:12px}
.pc-price{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size: var(--t-body);font-weight:500;color:#111;
  font-variant-numeric:tabular-nums}
.pc-price{white-space:nowrap}
.pc-from{font-family:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;font-size: var(--t-label);font-weight:400;letter-spacing:1px;text-transform:uppercase;color:#6f6f6f;margin-right:4px}
.pc-price.none{font-family:inherit;font-size: var(--t-label);font-weight:400;letter-spacing:1px;text-transform:uppercase;color:#6f6f6f}
.pc-pack{font-size: var(--t-data);color:#6b6b66;white-space:nowrap}

/* `.pc a.` on purpose: the homepage colours its links, and a bare class lost to that rule, so the
   band's button came out green while the Marketplace page's was black. One card, one look. */
/* The wording and the destination are untouched — this restyles the control, it does not turn a
   navigation into a transaction. A hairline box reads as a table affordance; a filled control
   reads as pressable, which is what it is. */
.pc a.pc-cta{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;border:0;border-radius:var(--g-r-ctl);
  padding:0 12px;text-align:center;text-decoration:none;color:#fff;background:#111;
  font-size: var(--t-data);font-weight:550;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background var(--dur) var(--ease-out-expo)}
.pc a.pc-cta:hover{background:#000;color:#fff}
.pc a.pc-cta:focus-visible{outline:2px solid #111;outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .pc{transition:none} .pc:hover{transform:none} }

/* THE POSTER (2026-10-02) — marketplace-card.js poster(), the retail card. Picture above, caption below on
   the card's white: one family for photographs and breeder logo plates, and no caption ever lies across a
   photograph's own lettering. Hover or focus eases the picture in, raises a frosted strip with the
   breeder's own words over its foot (only when there are any), and shows the way in. Caption rows hold
   fixed heights so every card in a row lines up to the pixel. Canon steps and radii only. */
.pp-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);
  padding:12px var(--gutter) 36px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pp-track::-webkit-scrollbar{display:none}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:32px 24px;padding:16px var(--gutter) 24px}
.pp{--pp-w:248px;position:relative;display:flex;flex-direction:column;flex:0 0 var(--pp-w);scroll-snap-align:start;min-width:0;
  border-radius:var(--g-r-panel);overflow:hidden;background:#fff;color:#111;text-decoration:none;isolation:isolate;
  font-family:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  box-shadow:0 0 0 1px rgba(17,17,17,.06),var(--shadow-sm);transition:transform 480ms var(--ease-out-expo),box-shadow 480ms var(--ease-out-expo)}
.pp-grid .pp{--pp-w:auto}
.pp-pic{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#f3f2ee}
.pp-pic img{display:block;width:100%;height:100%;box-sizing:border-box;transition:transform 1100ms var(--ease-out-expo)}
.pp-pic img.is-photo{object-fit:cover}
.pp-pic img.is-mark{object-fit:contain;padding:22%;background:#f5f4f0}
.pp.is-markcard .pp-pic{background:#f5f4f0}
.pp-badge{position:absolute;top:12px;left:12px;z-index:4;font-size:var(--t-label);font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 12px;border-radius:999px;color:#fff;background:rgba(20,20,19,.5);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
/* the frosted strip — rises on intent, carries the breeder's words */
.pp-glass{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;gap:8px;padding:16px 16px 16px;
  color:#fff;background:rgba(15,20,15,.62);border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  opacity:0;transform:translateY(12px);transition:opacity 420ms var(--ease-out-expo),transform 480ms var(--ease-out-expo)}
.pp-taste{display:block;font-size:var(--t-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;color:#d8eec9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-blurb{display:block;font-size:var(--t-data);line-height:1.5;color:rgba(255,255,255,.94)}
/* the caption — fixed row heights, so siblings align */
.pp-cap{display:flex;flex-direction:column;gap:4px;padding:16px 16px 16px}
.pp-who{display:block;font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:#77766f;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-who b{font-weight:inherit}
.pp-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em;font-size:var(--t-h3);font-weight:600;line-height:1.2;
  letter-spacing:-.02em;color:#111;text-wrap:balance}
.pp-cross{display:block;min-height:1.5em;margin-top:2px;font-size:var(--t-label);line-height:1.5;color:#77766f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-specs{display:block;min-height:1.5em;font-size:var(--t-label);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;color:#55544e;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-specs i{font-style:normal;margin:0 4px;color:#b3b2ab}
.pp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(17,17,17,.07)}
.pp-cost{white-space:nowrap;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--t-data);font-weight:500;color:#111;font-variant-numeric:tabular-nums}
.pp-cost small{font-family:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;font-size:var(--t-label);font-weight:400;color:#77766f}
.pp-go{display:inline-flex;align-items:center;gap:8px;color:#111;font-size:var(--t-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap;
  opacity:0;transform:translateX(-6px);transition:opacity 420ms var(--ease-out-expo),transform 480ms var(--ease-out-expo)}
.pp:focus-visible{outline:3px solid #111;outline-offset:3px}
.pp:focus-visible .pp-glass,.pp:focus-visible .pp-go{opacity:1;transform:none}
@media (hover:hover){
  .pp:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(17,17,17,.06),var(--shadow-lg)}
  .pp:hover .pp-pic img.is-photo{transform:scale(1.05)}
  .pp:hover .pp-pic img.is-mark{transform:scale(1.03)}
  .pp:hover .pp-glass,.pp:hover .pp-go{opacity:1;transform:none}
}
@media (hover:none){ .pp-go{opacity:1;transform:none} }
@media (max-width:640px){ .pp{--pp-w:min(64vw,236px)} .pp-name{font-size:var(--t-body)} .pp-cap{padding:16px}
  .pp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px} }
@media (prefers-reduced-motion:reduce){ .pp,.pp-pic img,.pp-glass,.pp-go{transition:none} .pp:hover,.pp:hover .pp-pic img{transform:none} }