/* The apex lot card (stream C, 2026-11-09, mock `#cards` .fc, Ivan 08.11: the card as on Faire).
   Linked by _chrome.php ONLY under ApexSiteFaire::on(); every rule is scoped to .wac, the class only
   _card_apex.php prints, so no other card or page can wear it. The legacy .wm-card rules
   (wholesale-market.css) still match the same element (its JS hooks stay), so this sheet first
   undoes the parts of them the mock does not draw: the bordered white box, the hover lift, the
   4:3 kraft photo, the white heart disc, the bag pill that hides until hover.

   Values are the mock's own, copied, not eyeballed (tests/standalone/ApexLotCardTest.php S*):
   photo 1:1 r6 on #f3f1ee · badge 500 12px/1 r4 · heart 30px white outline · «+» and Find similar
   32px white discs · price 600 17px/1.2 + 400 13px/1 grey · title 500 14.5px/1.35 clamp 2 · lines
   13.5px/1.4 · grid gap 20px 14px, phone two columns gap 18px 10px, price 16px, title 14px.
   Every control's tap area is at least 44px (::after), the drawn disc stays the mock's size. */

.wm-card.wac {
  --wac-f: "Golos Text", "Inter", ui-sans-serif, system-ui, sans-serif;
  display: grid;
  gap: 3px;
  align-content: start;
  min-width: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
  color: #1d1d1f;
  font-family: var(--wac-f);
}
.wm-card.wac:hover,
.wm-card.wac:focus-within,
.wm-card.wac:active { transform: none; box-shadow: none; }

/* ── the photo ─────────────────────────────────────────────────────────── */
.wac .wm-card-photo.wac-ph {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f1ee;
  margin-bottom: 8px;
}
.wac .wac-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s;
}
/* A finished card photo shows whole: the storefront's rule (wholesale-market.css .wm-card-photo
   img[src*="card-photo"], review P1-2 2026-11-11) restated, because the cover above outranks it. A 1280 x 960 file
   made before the square frame sits on its own backdrop with no seam; a square file fills the square. */
.wac .wac-ph img[src*="card-photo"] {
  object-fit: contain;
  background: linear-gradient(180deg, #F2EDE4 12.5%, #E9E1D4 87.5%);
}
/* A lot the card photo producer has not reached yet (CardPhotoCover kind 'print'): the storefront's look
   (wholesale-market.css .wm-card-photo.is-print), restated here because the square above outranks it. Same
   numbers: the whole photo in the middle 88% of the square, on the backdrop, no mat and no shadow (photo 1
   whole, Ivan 2026-11-11), centred with auto margins, so the hover zoom below still scales it. */
.wac .wm-card-photo.wac-ph.is-print { background: linear-gradient(180deg, #F2EDE4, #E9E1D4); }
.wac .wm-card-photo.wac-ph.is-print img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 88%;
  height: 88%;
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}
.wm-card.wac:hover .wac-ph img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .wac .wac-ph img { transition: none; }
  .wm-card.wac:hover .wac-ph img { transform: none; }
}

.wac .wac-bdg {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  background: #fff;
  border-radius: 4px;
  padding: 4px 7px;
  font: 500 12px/1 var(--wac-f);
  color: #1d1d1f;
  white-space: nowrap;
  pointer-events: none;
}

/* The three controls on the photo: above the stretched lot link (z 1), each a 44px tap area. */
.wac .wm-heart.wac-ht,
.wac .wm-bag-add.wac-ad,
.wac .wac-fs {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: #1d1d1f;
  text-decoration: none;
}
.wac .wm-heart.wac-ht {
  right: 8px;
  top: 8px;
  bottom: auto;
  width: 30px;
  height: 30px;
  background: none;
  box-shadow: none;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.wac .wm-heart.wac-ht:hover { color: #fff; }
.wac .wm-heart.wac-ht.is-on svg path { fill: #B3261E; stroke: #fff; }
.wac .wm-bag-add.wac-ad {
  right: 8px;
  bottom: 8px;
  top: auto;
  width: 32px;
  height: 32px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  opacity: 1;
  pointer-events: auto;
}
.wac .wm-bag-add.wac-ad:hover { color: #1d1d1f; box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 0 0 1px #1d1d1f; }
.wac .wm-bag-add.wac-ad.is-on { background: #1d1d1f; color: #fff; }
.wac .wac-fs {
  left: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.wac .wac-ht::after,
.wac .wac-ad::after,
.wac .wac-fs::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
}
.wac .wac-ht:focus-visible,
.wac .wac-ad:focus-visible,
.wac .wac-fs:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 2px; }
/* Find similar had no hover (Ivan 10.11, the apex home audit): it takes Add to bag's inset ink ring, one
   pattern for the two white discs on the photo. A pointer that hovers only; none under reduced motion. */
.wac .wac-fs { transition: box-shadow .15s ease; }
@media (hover: hover) {
  .wac .wac-fs:hover { box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 0 0 1px #1d1d1f; }
}
@media (prefers-reduced-motion: reduce) {
  .wac .wac-fs { transition: none; }
}

/* ── the text ──────────────────────────────────────────────────────────── */
.wac .wac-pr { font: 600 17px/1.2 var(--wac-f); color: #1d1d1f; }
.wac .wac-pr small { font: 400 13px/1 var(--wac-f); color: #6e6a66; margin-left: 6px; }
.wac .wac-pr small s { text-decoration-thickness: 1px; }
.wac a.wac-unlock {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
  color: #1d1d1f;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wac .wm-card-title.wac-t {
  margin: 0;
  font: 500 14.5px/1.35 var(--wac-f);
  color: #1d1d1f;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wac .wac-su { font-size: 13.5px; line-height: 1.4; margin-top: 2px; color: #1d1d1f; }
.wac .wac-su a {
  position: relative;
  z-index: 2;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.wac .wac-mt { font-size: 13.5px; color: #6e6a66; line-height: 1.4; }
.wac .wac-rt { display: flex; align-items: center; gap: 3px; color: #6e6a66; }
.wac .wac-rt span { color: #6e6a66; }
.wac .wac-near { display: flex; align-items: center; gap: 5px; }
.wac .wac-near svg { flex: none; }
.wac .wac-gd { font-size: 13.5px; color: #2f6b4a; display: flex; gap: 5px; align-items: center; line-height: 1.35; }
.wac .wac-gd svg { flex: none; }
.wac [hidden] { display: none; }

/* The delivery row once a ZIP is known (Ivan 11.11): «Delivery ~$8.43 · Near you», one grey row under the days
   line, never beside the price. Each phrase stays whole; a narrow column wraps between them. The «·» rides in front
   of Near you inside a strip the row pulls left and clips, so it shows only between the two on one line: Near you
   alone, or wrapped to a line of its own, starts clean. The strip is 0.75em, a « · » (10px in Golos 13.5px), so the
   English row is 169px and fits the 175px catalogue column of a 390 phone on one line. Both halves hidden: the row
   takes no room (no grid gap). */
.wac .wac-dl { display: flex; flex-wrap: wrap; align-items: baseline; margin-left: -0.75em; clip-path: inset(0 0 0 0.75em); }
.wac .wac-dl > * { white-space: nowrap; }
.wac .wac-dl > .wac-est { padding-left: 0.75em; }
.wac .wac-dl > .wac-nr::before { content: "\00b7"; content: "\00b7" / ""; display: inline-block; width: 0.75em; text-align: center; }
.wac .wac-dl:not(:has(> :not([hidden]))) { display: none; }
.wac .wac-sum { font: 400 13px/1.3 var(--wac-f); color: #6e6a66; }
/* The sum already holds the piece price's lot figure: the small grey beside it would read as a second total. */
.wm-card.wac:has(.wac-sum:not([hidden])) .wac-pr small { display: none; }
/* An international lot: the green line beside the price, on its own line where the column is narrow. */
.wac .wac-prw { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 3px; min-width: 0; }
/* Lot card v2 (Ivan 10.11): a supplier sale in the accent with its original struck, then «Resale ~$X» grey, as Faire's MSRP. */
.wac .wac-pr.wac-sale { color: #b42318; }
.wac .wac-was { font: 400 13px/1.2 var(--wac-f); color: #6e6a66; text-decoration-thickness: 1px; }
.wac .wac-rs { font: 400 13px/1.2 var(--wac-f); color: #6e6a66; white-space: nowrap; }
/* The Insider line carries .wm-tag-ship (the ZIP script's «already tagged» hook): a line here, not the storefront's pill. */
.wac .wac-gd.wm-tag-ship { background: none; }

/* A style group card (TZ lulu-variants §4, mock «Lulu variants» Main.dc.html): the chip on the photo, the colour
   swatches and the sizes line. Only a card the feed stamped with `style` carries these classes. */
.wac .wac-cnt {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  max-width: calc(100% - 64px);   /* clear of «+» (right 8, 32 wide) */
  background: #fff;
  border-radius: 4px;
  padding: 6px 8px;
  font: 500 12px/1 var(--wac-f);
  color: #1d1d1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.wac.wac--style .wm-bag-add.wac-ad { right: 10px; bottom: 10px; }   /* the mock's «+» on a group card (TZ 4.2) */
.wac .wac-sw { display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.wac .wac-sw button {
  position: relative;
  z-index: 2;   /* above the stretched lot link */
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #c9c4bd;
  padding: 0;
  cursor: pointer;
}
.wac .wac-sw button::after {   /* a 32px tap area (TZ §6) on a 22px swatch */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}
.wac .wac-sw button:hover,
.wac .wac-sw button:focus-visible,
.wac .wac-sw button.on { box-shadow: 0 0 0 2px #1d1d1f; outline: none; }
.wac .wac-swn { font-size: 12px; line-height: 1; color: #6e6a66; }

/* The sold card, the registry pill and local price line (one card everywhere, C-041). */
.wac .wm-sold-ribbon { left: 8px; right: auto; top: 8px; }
.wac .wac-cc { position: absolute; left: 8px; bottom: 48px; z-index: 2; }
.wac .wac-cclocal { font-size: 13.5px; color: #6e6a66; line-height: 1.4; }
.wac .wm-card-tags.wac-tg { margin: 4px 0 0; padding: 0; border: 0; gap: 6px; }
.wac .wm-card-tags.wac-tg:empty { display: none; }

/* A rail's card takes the rail's track width; a surface's own column rules still set the track. */
.wm-card.wac.wac--rail { width: 100%; scroll-snap-align: start; }

/* ── the grid ──────────────────────────────────────────────────────────── */
/* Column counts stay the grid owner's (wholesale-market.css, stream F); the mock's rhythm is the card's. */
.wm-grid:has(> .wac) { gap: 20px 14px; }

@media (max-width: 640px) {
  .wm-grid:has(> .wac) { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
  .wac .wac-pr { font-size: 16px; }
  .wac .wm-card-title.wac-t { font-size: 14px; }
}

/* The ZIP chip above a grid with no apex toolbar (C-037, _apex_zip_chip.php), the toolbar chip's values. */
.wac-zipbar { margin: 0 0 14px; }
.wac-zipbar .apx-zip { position: relative; display: inline-flex; }
.wac-zipbar .apx-zip[hidden], .wac-zipbar .zf[hidden] { display: none; }
.wac-zipbar .zc { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d9d6d2; border-radius: 999px; padding: 8px 14px 8px 11px; font: 500 13.5px/1 Inter, ui-sans-serif, system-ui, sans-serif; color: #1d1d1f; background: #fff; white-space: nowrap; cursor: pointer; }
.wac-zipbar .zc:hover { border-color: #17142b; }
.wac-zipbar .zc:focus-visible { outline: 2px solid #3f2a9c; outline-offset: 2px; }
.wac-zipbar .apx-zip.is-set .zc { background: #f4f1fb; border-color: #3f2a9c; color: #3f2a9c; }
.wac-zipbar .zf { position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; display: grid; grid-template-columns: 120px auto; gap: 8px; padding: 16px; background: #fff; border: 1px solid #e9e6f0; border-radius: 16px; box-shadow: 0 8px 28px rgba(23, 20, 43, .14); }
.wac-zipbar .zf label { grid-column: 1 / -1; font: 600 13.5px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; color: #17142b; }
.wac-zipbar .zf input { box-sizing: border-box; height: 44px; padding: 0 12px; border: 1px solid #d9d6d2; border-radius: 10px; font: 400 16px Inter, ui-sans-serif, system-ui, sans-serif; color: #17142b; }
.wac-zipbar .zf input[aria-invalid="true"] { border-color: #b42318; }
.wac-zipbar .zf button { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #17142b; color: #fff; font: 600 14px Inter, ui-sans-serif, system-ui, sans-serif; cursor: pointer; }