/* ============================================================
   tee.css — matching-tee visuals, shared by product + journey.
   Until a tee's mockup exists, .tee-ph draws the shirt outline
   (tee-placeholder.svg used as a mask) filled with the energy's
   own gradient (--a → --b, set by the page). No raw colors here.
   ============================================================ */

.tee-ph {
  position: relative; display: block; aspect-ratio: 300 / 320;
  background: linear-gradient(160deg, var(--a), var(--b));
  -webkit-mask: url("../img/tee-placeholder.svg") center / contain no-repeat;
          mask: url("../img/tee-placeholder.svg") center / contain no-repeat;
}
/* soft collar/fold highlight so it reads as fabric, not a flat icon */
.tee-ph::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 50% 30%, color-mix(in srgb, var(--c-white) 28%, transparent), transparent 70%);
}
.tee-img { display: block; width: 100%; height: auto; }