/* A catalogue photo, drawn as the uploaded file (see Cutout/index.tsx). Callers
   position the outer box. */
/* Centred, not top-aligned.
   Top alignment suited a grid of garments cut from their own photographs: every
   shirt hung from the same line. It does not suit a mixed catalogue — a shoe is
   half as tall as a tee, so cropped and pinned to the top it left an obvious
   hole beneath it.
   It also has to match where this is heading. A processed image is centred in
   its own canvas, so an unprocessed one pinned to the top sits differently from
   a processed one in the same row, and the catalogue is converted product by
   product. Centring both makes the transition invisible. */
.cc_pfQKlERh3P_ZklZT4T7lv .ka-cut, .cc_pfQKlERh3P_APfMi3FPHZ .ka-cut { container-type: size; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.cc_pfQKlERh3P_ZklZT4T7lv .ka-cut-in, .cc_pfQKlERh3P_APfMi3FPHZ .ka-cut-in { flex: none; width: 100%; height: 100%; max-height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; }
.cc_pfQKlERh3P_ZklZT4T7lv .ka-cut-in, .cc_pfQKlERh3P_APfMi3FPHZ .ka-cut-in { transition: opacity .2s ease-out; }
.cc_pfQKlERh3P_ZklZT4T7lv .ka-cut-in.is-pending, .cc_pfQKlERh3P_APfMi3FPHZ .ka-cut-in.is-pending { opacity: 0; }
/* A shot with no light ground, drawn whole. It used to `cover` its box, which
   cut the sides off any photo not the tile's shape (a 3:2 beanie lost a third). */
.cc_pfQKlERh3P_ZklZT4T7lv .ka-cut.is-bleed .ka-cut-in, .cc_pfQKlERh3P_APfMi3FPHZ .ka-cut.is-bleed .ka-cut-in { background-size: contain; background-position: center; mix-blend-mode: normal; }

/* The skeleton is garment-shaped rather than frame-filling: a full-box block
   read as a grey card, which is exactly what the cutout exists to avoid. */
.cc_pfQKlERh3P_ZklZT4T7lv .ka-cut-skel, .cc_pfQKlERh3P_APfMi3FPHZ .ka-cut-skel { position: absolute; left: 18%; right: 18%; top: 12%; bottom: 12%; border-radius: 18px; }
/* Only while the photo is pending: it then fades in at its final size and the
   shimmer is gone in the same frame. display:none also stops the sweep. */
.cc_pfQKlERh3P_ZklZT4T7lv .ka-cut-in:not(.is-pending) + .ka-cut-skel, .cc_pfQKlERh3P_APfMi3FPHZ .ka-cut-in:not(.is-pending) + .ka-cut-skel { display: none; }

/* ─── Drawn as-is ─────────────────────────────────────────────
 * The photo arrives already cut and composed to a fixed share of its canvas, so
 * it is shown whole and centred: contain, not cover, or the normalised margin
 * would be cropped straight back off.
 *
 * Nothing here blends with the page (11 Oct 2026): a packshot multiplies with
 * colour layers inside its own element, set inline by Cutout, because a
 * mix-blend-mode across elements showed white boxes in Chrome and Safari.
 *
 * Last in the file so it beats the base .ka-cut-in rule at equal specificity.
 */
.cc_pfQKlERh3P_ZklZT4T7lv .ka-cut-in.is-plain, .cc_pfQKlERh3P_APfMi3FPHZ .ka-cut-in.is-plain {
  height: 100%;
  background-size: contain;
  background-position: center;
  mix-blend-mode: normal;
  opacity: 1;
}
/* An unmeasured cut stays hidden until placed, then fades in (see UNMEASURED). */
.cc_pfQKlERh3P_ZklZT4T7lv .ka-cut-in.is-plain.is-pending, .cc_pfQKlERh3P_APfMi3FPHZ .ka-cut-in.is-plain.is-pending { opacity: 0; }