/* Shirt Builder + Engraving Builder (8 Oct 2026). Linked from /shirt-builder and /engrave-builder only.
   Both pages use the Hat Builder's layout from site.css: .builder (photo stage beside the steps), the sticky dark .stage,
   the numbered .panel steps, .summary, and the phone .builder-bar that design-core.js adds. This file sizes their photo
   stage, the print areas over it, and their pickers. Nothing here animates except the one-time stage reveal and the
   loading shimmer, and both are off under reduced motion. */

/* ---------- The stage: Kelsey's mockup photo (4:5) as a card on the espresso stage ----------
   design-core.js photoCanvas() wraps the page's photo in .dc-canvas and lays .dc-layer exactly over the drawn image
   (it measures the image, so the layer holds however this file sizes it); the print-area boxes and the engraving live
   in that layer. The photo carries width/height, so its box is reserved before it loads. */
.dbuilder .dpreview { position: relative; display: grid; justify-items: center; }
.dbuilder .dc-canvas { width: 100%; }
.dbuilder .dpreview img:not(.dc-layer img) {
  display: block; margin-inline: auto; width: auto; height: auto; max-width: 100%;
  max-height: min(calc(100vh - var(--nav-h) - 150px), 760px);   /* desktop: the whole shirt on screen beside the steps */
  aspect-ratio: 4 / 5; object-fit: contain; border-radius: 10px; background: #f3efe9;
  box-shadow: 0 1px 2px rgb(6 4 2 / .5), 0 14px 28px -12px rgb(6 4 2 / .7);
}
.dbuilder .dpreview .stage-meta { width: 100%; }
/* Phones: the stage stays a sticky strip at the top, as the Hat Builder's does, a little taller for a portrait photo. */
@media (max-width: 959px) {
  .dbuilder .dpreview img:not(.dc-layer img) { max-height: 30vh; border-radius: 8px; }
  html:has(.dbuilder) { scroll-padding-top: calc(var(--nav-h) + 30vh + 96px); }
}
@media (max-width: 959px) and (max-height: 640px) { .dbuilder .dpreview img:not(.dc-layer img) { max-height: 26vh; } }

/* A new color's photo loading: the old one dims and a leather shimmer passes over it (the Hat Builder's skeleton). */
.dbuilder .dpreview[data-loading] .dc-canvas > img { opacity: .72; transition: opacity .15s; }
.dbuilder .dpreview[data-loading] .dc-layer::after { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(100deg, rgb(210 165 120 / 0) 20%, rgb(240 200 150 / .35) 45%, rgb(255 225 185 / .5) 50%, rgb(240 200 150 / .35) 55%, rgb(210 165 120 / 0) 80%) 0 0 / 240% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .dbuilder .dpreview[data-loading] .dc-layer::after { animation: dstage-shimmer .9s linear infinite; }
  .dbuilder .dpreview { animation: dstage-reveal .9s cubic-bezier(.2, .7, .2, 1) both; }   /* once, as the page opens */
}
@keyframes dstage-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes dstage-reveal { from { opacity: 0; filter: blur(6px) sepia(.6); transform: scale(.985); } }

/* Print areas: design-core.js sets each box's place and size. Artwork sits on the fabric with no frame or shadow (a DTF
   print is pressed flat into the shirt); an empty spot shows a dashed outline drawn by the script. */
.dbuilder .dc-spot img { display: block; image-rendering: auto; }

/* Notes on the stage (the long sleeve's stand-in photo): a TBD badge under the photo, on the dark leather. */
.stage .stage-note { margin: 8px 0 0; text-align: center; }

/* ---------- Pickers ---------- */
/* The shirt or tumbler: a card per product with its price range under the name. */
.dpick { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.dpick .pill span { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 58px; }
.dpick .pill span b { font-size: .98rem; }
.dpick .pill span small { font: 500 .74rem/1.3 var(--mono); opacity: .82; }
/* Print spots: "+$5" and "included" read as a quiet second word. */
[data-sb-spots] .pill small { font: 500 .74rem var(--mono); opacity: .8; }
/* Lettering: each choice is set in its own face, so the pill IS the sample. The script face is small for its size. */
.font-pick .pill span { font-size: 1.12rem; min-width: 96px; justify-content: center; }
.font-pick .pill span[style*="Great Vibes"] { font-size: 1.5rem; line-height: 1; }
/* Tumbler colors: a dot in the leatherette's own tone beside the name. */
.dbuilder .dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); }
/* One artwork dropzone per print spot (drawn by shirt-builder.js under the spots). */
[data-sb-spots] .dc-art { padding-top: 6px; }
[data-sb-spots] .dc-art + .dc-art { border-top: 1px dashed var(--line); padding-top: 14px; }

/* ---------- Below the builder ---------- */
.svc-aside-photo { margin: 6px 0 0; display: grid; gap: 6px; max-width: 300px; }   /* the aside is sticky: kept shorter than a screen */
.svc-aside-photo img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.svc-aside-photo figcaption { font: 500 .72rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

@media print {
  .dbuilder .dpreview img:not(.dc-layer img) { max-height: none; box-shadow: none; }
  .dbuilder .stage { position: static; background: #fff; box-shadow: none; }
}