/* Canvas in steps: wrap-ready in three, exact size in two (templates/studio/partials/canvas-steps.php,
   which links this file). Used on pages with and without studio.css (the estimate
   page has neither its tokens nor its body class), so every token has a fallback.
   Three across where there is room; rows of picture + words in narrow spots such as
   the order form and a help answer. */
.wrap-steps { width:100%; max-width:100%; box-sizing:border-box; margin:0; container-type:inline-size; }
.wrap-steps .wrap-steps__list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.wrap-steps--two .wrap-steps__list { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:640px; margin:0 auto; }
.wrap-steps .wrap-steps__step { position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; margin:0; padding:0; text-align:center; }
.wrap-steps .wrap-steps__step img { display:block; width:100%; height:150px; object-fit:contain; object-position:center bottom; margin:0; border:0; border-radius:0; box-shadow:none; background:none; }
.wrap-steps .wrap-steps__step:not(:last-child)::after { content:"\2192"; position:absolute; top:60px; right:-26px; color:var(--action, #8B1E24); font-size:1.35rem; line-height:1; }
.wrap-steps .wrap-steps__text { display:flex; flex-direction:column; align-items:center; gap:4px; }
.wrap-steps .wrap-steps__num { display:inline-grid; place-items:center; width:30px; height:30px; margin-bottom:4px; border-radius:50%; background:var(--action, #8B1E24); color:#fff; font:600 .95rem/1 var(--display, 'Bitter', Georgia, serif); }
.wrap-steps .wrap-steps__text strong { font:600 .95rem/1.3 var(--display, 'Bitter', Georgia, serif); color:var(--action, #8B1E24); }
.wrap-steps .wrap-steps__text span:last-child { font-size:.85rem; line-height:1.45; color:var(--ink-soft, #3D3833); }
@container (max-width: 520px) {
  .wrap-steps .wrap-steps__list { grid-template-columns:1fr; gap:14px; }
  .wrap-steps .wrap-steps__step { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:16px; text-align:left; }
  .wrap-steps .wrap-steps__step img { height:72px; object-position:center; }
  .wrap-steps .wrap-steps__step:not(:last-child)::after { display:none; }
  .wrap-steps .wrap-steps__text { display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:10px; align-items:start; }
  .wrap-steps .wrap-steps__num { grid-row:span 2; margin:0; }
}
#print-borders .wrap-steps,
.support-answer__body .wrap-steps { margin:6px 0 20px; }
#estimate-wrap-steps .wrap-steps,
#estimate-exact-steps .wrap-steps { margin:32px 0 0; padding-top:28px; border-top:1px solid #e3e1d8; }
#print-exact-steps .wrap-steps { margin:6px 0 4px; }