/* Design Your Own Barrel panel — matches the store's product page (light ground, black buttons, condensed labels). */
.tobd { --tobd-ink: #17130f; --tobd-muted: #6b6258; --tobd-rule: #d9d2c6; --tobd-card: #fbfaf7; --tobd-ok: #2f6b3a; --tobd-warn: #9a5b12;
  color: var(--tobd-ink); font-size: 15px; line-height: 1.45; margin: 0 0 22px; display: grid; gap: 18px; grid-column: 1 / -1; min-width: 0; }
.tobd * { box-sizing: border-box; }
.tobd [hidden], .tobd-hidden-opt { display: none !important; }
.tobd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; align-items: start; }
.tobd-left { display: grid; gap: 10px; position: sticky; top: 12px; }
.tobd-preview { width: 100%; height: auto; max-width: 480px; aspect-ratio: 1; justify-self: center; display: block; }
.tobd-check { display: flex; gap: 10px; align-items: flex-start; background: var(--tobd-card); border: 1px solid var(--tobd-rule); padding: 9px 11px; font-size: 13px; }
.tobd-check b { display: block; font-size: 14px; }
.tobd-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--tobd-ok); }
.tobd-warn .tobd-dot { background: var(--tobd-warn); }
.tobd-note, .tobd-small { font-size: 13px; color: var(--tobd-muted); margin: 0; }
.tobd-steps { display: grid; gap: 18px; min-width: 0; }
.tobd-step { min-width: 0; }   /* 10-23: a grid item won't shrink below its widest row otherwise — the 8-tile "about you" row pushed step 5 ~120 px past the column */
.tobd-step h3 { font: 700 13px/1 inherit; font-family: inherit; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 9px; display: flex; gap: 9px; align-items: center; }
.tobd-step h3 span { width: 24px; height: 24px; display: grid; place-items: center; background: var(--tobd-ink); color: #f1eee8; letter-spacing: 0; }
.tobd-tabs { display: flex; margin-bottom: 9px; }
.tobd-tabs button { flex: 1; border: 1px solid var(--tobd-ink); background: transparent; color: var(--tobd-ink); padding: 9px; font: 700 12px/1 inherit; font-family: inherit; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.tobd-tabs button[aria-pressed="true"] { background: var(--tobd-ink); color: #f1eee8; }
/* Art style buttons: the example head above the name (10-26) */
.tobd-tabs .tobd-stylebtn { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 6px 9px; }
.tobd-tabs .tobd-stylebtn img { display: block; width: 100%; max-width: 120px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.tobd-tabs .tobd-stylebtn[aria-pressed="true"] img { box-shadow: 0 0 0 3px #f1eee8; }
@media (max-width: 640px) { .tobd-tabs:has(.tobd-stylebtn) { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tobd-tabs .tobd-stylebtn { flex: none; } }
.tobd textarea, .tobd input[type="text"] { width: 100%; max-width: none; border: 1px solid var(--tobd-rule); background: #fff; padding: 10px 11px; font: inherit; color: var(--tobd-ink); }
.tobd textarea { resize: vertical; min-height: 60px; }
.tobd-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tobd-ideas span { font-size: 12px; color: var(--tobd-muted); align-self: center; }
.tobd-chip { border: 1px solid var(--tobd-rule); background: var(--tobd-card); padding: 5px 10px; border-radius: 999px; font: 13px inherit; font-family: inherit; color: var(--tobd-ink); cursor: pointer; }
.tobd-chip:hover { border-color: var(--tobd-ink); background: #fff; }
.tobd-drop { display: grid; gap: 4px; border: 1px dashed #a89d8c; background: var(--tobd-card); padding: 14px; cursor: pointer; }
.tobd-drop b { text-decoration: underline; }
#tobd-photo { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tobd-rights { display: flex; gap: 8px; align-items: flex-start; margin-top: 9px; }
.tobd-fields { display: grid; gap: 9px; }
.tobd-fields label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tobd-two { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 9px; }
.tobd-layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tobd-layouts button, .tobd-draft { border: 1px solid var(--tobd-rule); background: var(--tobd-card); padding: 7px; cursor: pointer; display: grid; gap: 5px; font: 700 11px/1.2 inherit; font-family: inherit; letter-spacing: .08em; text-transform: uppercase; color: var(--tobd-ink); text-align: center; }
.tobd-layouts button[aria-pressed="true"], .tobd-draft[aria-pressed="true"] { border-color: var(--tobd-ink); box-shadow: inset 0 0 0 1px var(--tobd-ink); background: #fff; }
.tobd-layouts img, .tobd-draft img { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.tobd-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tobd-btn { background: var(--tobd-ink); color: #f1eee8; border: 0; padding: 13px 22px; font: 700 13px/1 inherit; font-family: inherit; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.tobd-btn:disabled { opacity: .55; cursor: wait; }
.tobd-ghost { background: transparent; color: var(--tobd-ink); border: 1px solid var(--tobd-ink); padding: 11px 15px; }
.tobd-msg { margin: 0; font-size: 14px; min-height: 1px; }
.tobd-bad { color: #9b2a1a; font-weight: 700; }
.tobd-drafts { display: grid; gap: 12px; border-top: 1px solid var(--tobd-rule); padding-top: 16px; }
.tobd-drafts h3 { margin: 0; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }
.tobd-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tobd-draft span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tobd-muted); font-size: 12px; }
.tobd-slot { aspect-ratio: 1; border: 1px dashed var(--tobd-rule); display: grid; place-items: center; background: var(--tobd-card); }
.tobd-code { border: 1px solid var(--tobd-ink); background: var(--tobd-card); padding: 14px 16px; display: grid; gap: 6px; }
.tobd-code small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tobd-code strong { font-size: 26px; letter-spacing: .08em; }
.tobd-code p { margin: 0; font-size: 13px; color: var(--tobd-muted); }
.tobd-wait { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; align-items: center; background: #fff; color: var(--tobd-ink); border: 1px solid var(--tobd-ink); padding: 8px 12px; font-size: 13px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.tobd-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: tobd-s .8s linear infinite; }
@keyframes tobd-s { to { transform: rotate(360deg); } }
.tobd-locked { opacity: .55; }
.tobd textarea:focus, .tobd input:focus, .tobd button:focus-visible { outline: 2px solid #2a1708; outline-offset: 1px; }
@media (max-width: 900px) { .tobd-top { grid-template-columns: minmax(0, 1fr); } .tobd-left { position: static; } .tobd-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .tobd-spin { animation: none; } }
.tobd-enhrow { margin-top: 8px; gap: 8px; }
.tobd-enh { padding: 8px 13px; font-size: 11px; }
.tobd-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; text-decoration: underline; color: var(--tobd-ink); cursor: pointer; }
/* layout library (10-20): lines editor + layout and lettering-style pickers */
.tobd-lines { display: grid; gap: 8px; margin: 6px 0 8px; }
.tobd-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 6px; align-items: center; }
.tobd-where { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tobd-muted); }
.tobd-ic { width: 34px; height: 38px; border: 1px solid var(--tobd-rule); background: var(--tobd-card); color: var(--tobd-ink); font: 16px/1 inherit; font-family: inherit; cursor: pointer; }
.tobd-ic:hover { border-color: var(--tobd-ink); background: #fff; }
.tobd-layouts:not(.tobd-styles) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .tobd-layouts:not(.tobd-styles) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tobd-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tobd-cards small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tobd-muted); font-size: 11px; }
@media (max-width: 560px) { .tobd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* photos (10-21): thumbnail of the chosen photo; QR code to send one from the phone */
.tobd-thumb { width: 100%; max-height: 220px; object-fit: contain; background: #fff; }
.tobd-hand { margin-top: 9px; }
.tobd-qr { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--tobd-rule); background: #fff; padding: 10px; }
.tobd-qr b { font-size: 14px; }
.tobd-qr p { margin: 4px 0 0; }
.tobd-qrcode svg { width: 148px; height: 148px; display: block; }
/* guided flow (10-21): size → words → look → lock → picture */
.tobd-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.tobd-sizes button { min-width: 64px; border: 1px solid var(--tobd-ink); background: transparent; color: var(--tobd-ink); padding: 10px 12px; font: 700 14px/1 inherit; font-family: inherit; cursor: pointer; }
.tobd-sizes button[aria-pressed="true"] { background: var(--tobd-ink); color: #f1eee8; }
.tobd-field { display: grid; gap: 4px; }
.tobd-field label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tobd-fnote { font-size: 13px; color: #9b2a1a; font-weight: 700; }
.tobd-fnote:empty { display: none; }
.tobd .tobd-bad-in { border-color: #9b2a1a; }
.tobd-yr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
.tobd-yr select { border: 1px solid var(--tobd-rule); background: #fff; padding: 0 8px; font: inherit; color: var(--tobd-ink); }
.tobd-step h4 { margin: 12px 0 7px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tobd-muted); }
.tobd-step h4:first-of-type { margin-top: 0; }
.tobd-layouts button small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tobd-muted); font-size: 11px; }
.tobd-layouts button:disabled { opacity: .35; cursor: not-allowed; }
.tobd-locklist { margin: 8px 0; padding: 10px 14px 10px 34px; background: #fff; border: 1px solid var(--tobd-rule); font-size: 17px; font-weight: 700; }
.tobd-summary { border: 1px solid var(--tobd-ink); background: var(--tobd-card); padding: 12px 14px; }
.tobd-sumwords { display: grid; gap: 6px; margin-bottom: 6px; }
.tobd-sumline { margin: 0; font-size: 16px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.tobd-sumline input { font-weight: 700; }
.tobd-ask { margin-top: 10px; border-top: 1px solid var(--tobd-rule); padding-top: 10px; }
.tobd-ask p { margin: 0 0 8px; font-size: 14px; }
.tobd-sizeask { margin: 9px 0 0; padding: 9px 11px; background: #fff; border-left: 3px solid var(--tobd-ink); font-size: 14px; font-weight: 700; }
/* size tiles with prices + the compare box (10-21) */
.tobd-sizes button { display: grid; gap: 2px; justify-items: center; min-width: 78px; padding: 9px 10px; }
.tobd-sizes button b { font-size: 15px; }
.tobd-price { font-weight: 400; font-size: 13px; }
.tobd-sizes button small { font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.tobd-compare { position: relative; margin-top: 9px; background: #fff; border: 1px solid var(--tobd-ink); padding: 12px 14px; box-shadow: 0 6px 18px rgba(23, 19, 15, .12); }
.tobd-compare h4 { margin: 0 24px 4px 0; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tobd-ink); }
.tobd-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--tobd-ink); }
.tobd-cmp { display: grid; margin-top: 8px; }
.tobd-cmprow { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--tobd-rule); font-size: 13px; }
.tobd-cmprow b { display: block; font-size: 14px; }
.tobd-cmpsize span { color: var(--tobd-muted); }
.tobd-cmpon { background: var(--tobd-card); box-shadow: inset 3px 0 0 var(--tobd-ink); padding-left: 8px; }
.tobd-sizenote { margin: 9px 0 0; font-size: 14px; }
/* design directions (10-21): finished example designs to pick from */
.tobd-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tobd-looks button { border: 1px solid var(--tobd-rule); background: var(--tobd-card); padding: 8px; cursor: pointer; display: grid; gap: 4px; text-align: left; color: var(--tobd-ink); font: inherit; align-content: start; }
.tobd-looks button[aria-pressed="true"] { border-color: var(--tobd-ink); box-shadow: inset 0 0 0 2px var(--tobd-ink); background: #fff; }
.tobd-looks img { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.tobd-looks b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.tobd-looks small { font-size: 12px; color: var(--tobd-muted); line-height: 1.35; }
@media (max-width: 560px) { .tobd-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tobd-spigrow { display: flex; gap: 8px; align-items: flex-start; }
.tobd-drafts h4 { margin: 4px 0 2px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
/* what's in it (10-21): quick picks + the engrave tick sit with the field */
.tobd-field .tobd-ideas { margin-top: 2px; }
.tobd-field label.tobd-rights { display: flex; gap: 8px; align-items: center; margin-top: 2px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tobd-muted); }
#tobd-f-name { text-transform: uppercase; }   /* the name is always all capitals */
/* the preview area (Jay 10-21): their lines as a plain list while typing, a look's example once locked, then their design; a guide says what's next */
.tobd-stage { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; justify-self: center; }
.tobd-stage .tobd-preview { max-width: none; }
.tobd-monitor { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #e9cf9f 0%, #c99a5b 70%, #a77a43 100%); border: 6px solid #3a2a1c;
  display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 14% 13%; gap: 8px; text-align: center; overflow: hidden; }
.tobd-mhead { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3a2a1c; opacity: .8; }
.tobd-mlines { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; width: 100%; }
.tobd-mlines li { display: grid; gap: 1px; background: rgba(251, 250, 247, .78); padding: 6px 10px; border-radius: 4px; }
.tobd-mlines li span { font-size: 16px; font-weight: 700; color: var(--tobd-ink); overflow-wrap: anywhere; }
.tobd-mlines li.tobd-mname span { font-size: 20px; letter-spacing: .04em; }
.tobd-mlines li.tobd-mempty span { color: var(--tobd-muted); font-weight: 400; font-style: italic; }
.tobd-mlines small { font-size: 12px; font-weight: 700; }
.tobd-mok { color: var(--tobd-ok); } .tobd-mwarn { color: var(--tobd-warn); } .tobd-mbad { color: #9b2a1a; } .tobd-mneed { color: var(--tobd-muted); }
.tobd-mroom { margin: 0; font-size: 12px; color: #3a2a1c; }
.tobd-exbadge { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); background: rgba(23, 19, 15, .82); color: #f1eee8; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 3px; white-space: nowrap; }
.tobd-guide { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(92%, 360px); background: #fbfaf7; border: 2px solid var(--tobd-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  padding: 12px 14px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.tobd-guide b { font-size: 16px; }
.tobd-guide .tobd-btn { width: 100%; justify-content: center; }
@media (max-width: 420px) { .tobd-mlines li span { font-size: 14px; } .tobd-mlines li.tobd-mname span { font-size: 17px; } .tobd-monitor { padding: 12% 10%; } .tobd-exbadge { font-size: 11px; white-space: normal; width: 90%; text-align: center; } }
/* a step that's been answered folds to one line (Jay 10-21) */
.tobd-folded > *:not(h3):not(.tobd-done) { display: none !important; }
.tobd-done { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.tobd-done > span { color: var(--tobd-ok); font-weight: 700; }
.tobd-folded { padding-top: 10px; padding-bottom: 10px; }
/* the drop-down explanation on each step (Jay 10-21) */
.tobd-help { margin: 0 0 6px; font-size: 14px; }
.tobd-help summary { cursor: pointer; color: var(--tobd-muted); font-weight: 700; font-size: 13px; list-style: none; display: inline-block; padding: 2px 0; }
.tobd-help summary::-webkit-details-marker { display: none; }
.tobd-help summary::after { content: ' ▾'; }
.tobd-help[open] summary::after { content: ' ▴'; }
.tobd-help[open] { background: var(--tobd-card); border: 1px solid var(--tobd-rule); padding: 8px 12px 4px; }
.tobd-help p { margin: 6px 0 8px; line-height: 1.5; }
/* mix and match (Jay 10-22): picture tiles in rows that scroll sideways */
.tobd-anything { margin: 0 0 10px; color: var(--tobd-ink); }
.tobd-mixh { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 12px 0 6px; }
.tobd-mixsub { color: var(--tobd-muted); margin-top: 8px; }
.tobd-tiles { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tobd-tile { flex: 0 0 84px; scroll-snap-align: start; display: grid; justify-items: center; gap: 4px; padding: 6px 4px; border: 1px solid var(--tobd-rule); background: var(--tobd-card); color: var(--tobd-ink); font: 12px/1.2 inherit; font-family: inherit; cursor: pointer; text-align: center; }
.tobd-tile img { width: 64px; height: 64px; display: block; border-radius: 50%; }
.tobd-tile:hover { border-color: var(--tobd-ink); }
.tobd-tile[aria-pressed="true"] { border-color: var(--tobd-ink); box-shadow: inset 0 0 0 2px var(--tobd-ink); background: #fff; font-weight: 700; }
.tobd-younote { margin: 4px 0 0; }
.tobd-ptext { margin-bottom: 4px; }
.tobd-scene { margin: 8px 0; color: var(--tobd-ink); }
/* email code step (Jay 10-22) */
.tobd-mail { margin-top: 14px; padding: 14px; border: 1px solid var(--tobd-ink); background: #fff; display: grid; gap: 8px; }
.tobd-mail h4 { margin: 0; font-size: 15px; }
.tobd-mail input { flex: 1; min-width: 0; }
.tobd-mail input[inputmode="numeric"] { letter-spacing: .3em; font-size: 18px; max-width: 12ch; }
.tobd-mmsg:empty { display: none; }

/* the preview in the product page's image column (designer.js moves .tobd-left there; Jay 10-22) */
/* on a designer product the left column is the preview all the way down: tabs + description move under the steps, so the
   pinned preview never rides over them (the v2 layout's areas are "img buy" / "tabs buy" / "desc buy") */
/* desktop only (Jay 10-28: under 768px the theme stacks img / buy / tabs / desc in one column — these must not override it) */
@media (min-width: 768px) {
  .ty-product-block.ty-product-detail:has(.tobd-col) { grid-template-areas: "img buy" "img tabs" "img desc" !important; }
  .ty-product-block.ty-product-detail:has(.tobd-col) .ty-product-block__left { position: static !important; }
}   /* the steps scroll; only the preview pins (the v2 layout pins the buy column) */
.tobd-col, .ty-product-block.ty-product-detail .ty-product-block__img-wrapper.tobd-col.tobd-col { position: sticky !important; top: 12px; align-self: start; display: grid; gap: 10px; }   /* out-specifies the v2 layout's 'position: static !important' on the image wrapper */
.tobd-col .tobd-left { position: static; }
.tobd-col .tobd-stage { max-width: none; }
.tobd-col .tobd-gallery { display: none; }
.tobd-col .tobd-seekit { justify-self: center; font-size: 13px; }
.tobd-col.tobd-col--photos .tobd-gallery { display: block; }
.tobd-col.tobd-col--photos .tobd-left > :not(.tobd-seekit) { display: none; }
/* 10-23: one column that never grows past the wrapper — with an auto track the carousel's full strip (11,040 px) set the width */
.tobd-col.tobd-col { grid-template-columns: minmax(0, 1fr); }
.tobd-col > * { min-width: 0; }
/* Jay 10-23: the kit photos show until a size is picked — a gallery scrolls with the page like any product's, it doesn't pin */
.ty-product-block.ty-product-detail .ty-product-block__img-wrapper.tobd-col.tobd-col.tobd-col--photos { position: static !important; z-index: auto; padding: 0; background: none; }
.tobd--canvas .tobd-top { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .tobd-col { position: sticky; top: 0; z-index: 30; background: #fff; padding: 6px 0; justify-items: center; }
  .tobd-col .tobd-stage { max-width: 150px; }
  .tobd-col .tobd-left > :not(.tobd-stage):not(.tobd-seekit) { display: none; }
  /* Jay 10-28: 'justify-items: center' above let the photo carousel shrink-to-fit its whole strip (20 slides wide) — the gallery keeps the column's width */
  .tobd-col > .tobd-gallery, .tobd-col > .ty-product-block__img { justify-self: stretch; width: 100%; max-width: 100%; min-width: 0; }
  /* Jay 10-28: on the small pinned preview the 'Example with sample words' badge covered the head — it becomes a caption under it */
  .tobd-col .tobd-stage { display: grid; justify-items: center; }
  .tobd-col .tobd-exbadge { position: static; transform: none; width: auto; max-width: 150px; margin-top: 2px; font-size: 10px; line-height: 1.2; text-align: center; white-space: normal; }
}

/* Jay 10-23 — a saved design brought back by the reminder e-mail's link (#design=CODE.KEY): the stage shows the design, the
   steps fold away (the code box says what to do), only the message line stays; "Change it or start a new design" reloads clean */
.tobd--resume .tobd-top > .tobd-steps > :not(.tobd-msg), .tobd--resume .tobd-drafts, .tobd--resume .tobd-mail,
.tobd--resume .tobd-note, .tobd--resume .tobd-check, .tobd--resume .tobd-seekit { display: none !important; }
.tobd--resume .tobd-code { border-color: var(--tobd-brass, #C9A25A); }
.tobd--resume .tobd-code .tobd-link { justify-self: start; margin-top: 4px; }

/* Jay 10-23: the typed-line spelling check at lock ("Did you mean…?") */
.tobd-sugs { display: grid; gap: 8px; }
.tobd-sug { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--tobd-ink); border-radius: 6px; font-size: 14px; }
.tobd-sug .tobd-row { flex-wrap: wrap; }

/* Jay 10-23: the check-every-word step before a design is saved */
.tobd-confirm { display: grid; gap: 10px; padding: 14px; border: 2px solid var(--tobd-ink); border-radius: 8px; margin-top: 12px; }
.tobd-confirm h3 { margin: 0; }
.tobd-confirm-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tobd-confirm-body img { width: 100%; height: auto; border-radius: 50%; }
.tobd-confirm-body ol { font-size: 17px; font-weight: 700; }
@media (max-width: 640px) { .tobd-confirm-body { grid-template-columns: 1fr; } }
/* Jay 10-28: reworded-card products — the steps are short, so nothing is pinned: the v2 layout stands (tabs + description
   under the photos on the left, the buy column on the right) and the left column is never left blank */
@media (min-width: 768px) {
  .ty-product-block.ty-product-detail:has(.tobd-col--rw) { grid-template-areas: "img buy" "tabs buy" "desc buy" !important; }
  .ty-product-block.ty-product-detail:has(.tobd-col--rw) .ty-product-block__left { position: sticky !important; }
  .ty-product-block.ty-product-detail .ty-product-block__img-wrapper.tobd-col.tobd-col.tobd-col--rw { position: static !important; }   /* phones keep the small pinned preview (the 900px block) */
}
.ty-product-block.ty-product-detail:has(.tobd-col--rw) > .ty-tabs { margin-top: 18px !important; }