/*
  Thread custom-order form styles. Hosted on the Cloudflare worker as a static asset
  (served at /form/form.css) and loaded by the tiny Shopify shell. Edit here + redeploy
  the worker (npm --prefix cloudflare-intake run deploy) — no Shopify re-paste needed.
*/
  .thread-cof { max-width: 1320px; margin: 0 auto; }
  .thread-cof-title { margin: 0 0 .25rem; }
  .thread-cof-intro { margin: 0 0 1.5rem; opacity: .85; }
  .thread-cof-req { color: #b00020; }
  .thread-cof-hint { font-weight: 400; opacity: .65; font-size: .9em; }
  .thread-cof-hidden { display: none !important; }

  .cof-card { border: 1px solid #e3e3e3; border-radius: 12px; padding: 1.1rem 1.25rem 1.25rem; margin: 0 0 1.1rem; }
  .cof-card > legend { font-weight: 700; padding: 0 .4rem; }
  .thread-cof label { display: block; margin-bottom: .9rem; font-weight: 600; }
  .thread-cof input[type="text"], .thread-cof input[type="email"], .thread-cof input[type="tel"],
  .thread-cof input[type="number"], .thread-cof input[type="date"], .thread-cof input[type="time"],
  .thread-cof select, .thread-cof textarea {
    display: block; width: 100%; margin-top: .35rem; padding: .55rem .7rem;
    font: inherit; font-weight: 400; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box;
  }
  .thread-cof input[type="file"] { font-weight: 400; margin-top: .35rem; }
  .thread-cof-inline { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0 1.2rem .5rem 0; }
  .thread-cof-inline input { width: auto; margin: 0; }
  .thread-cof-radios { margin-bottom: .9rem; }

  /* Intake header — three columns on desktop, stacked on mobile. */
  .cof-header { display: block; }
  @media (min-width: 880px) {
    .cof-header { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 1.1rem; align-items: start; }
    .cof-header .cof-card { margin-bottom: 1.1rem; }
  }

  /* Fulfillment (pickup vs ship). */
  #cof-ship-fields[hidden] { display: none; }
  .cof-fulfillment-choices { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .4rem; }
  #cof-ship-fields { margin-top: .6rem; }
  .cof-ship-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .8rem; }
  @media (max-width: 520px) { .cof-ship-grid { grid-template-columns: 1fr; } }

  /* Buttons. */
  .thread-cof button { font: inherit; cursor: pointer; }
  .thread-cof button[type="submit"] { padding: .85rem 1.8rem; font-size: 1.02rem; font-weight: 700; border: 0; border-radius: 8px; background: #111; color: #fff; }
  .thread-cof button[type="submit"]:disabled { opacity: .6; cursor: default; }
  .cof-link { background: transparent; border: 0; color: #555; font-weight: 600; padding: 0; text-decoration: underline; }
  .cof-link-danger { background: transparent; border: 0; color: #b00020; font-weight: 600; padding: 0; font-size: .9em; }
  .cof-add { background: #f3f4f6; border: 1px dashed #bbb; border-radius: 8px; padding: .55rem .9rem; font-weight: 600; color: #333; }
  .cof-add:hover { border-color: #111; }

  /* Mode toggle. */
  .cof-mode { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
  .cof-mode-btn { padding: .6rem 1rem; border: 1px solid #ccc; border-radius: 999px; background: #fff; font-weight: 600; color: #444; }
  .cof-mode-btn.is-active { background: #111; color: #fff; border-color: #111; }
  .cof-vague-grid { display: grid; gap: 1rem; }
  @media (min-width: 700px) { .cof-vague-grid { grid-template-columns: 1fr 1fr; } }

  /* Print group panel. */
  .cof-group { border: 1px solid #e0e0e0; border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; background: #fcfcfc; }
  .cof-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
  .cof-group-name { font-weight: 700; font-size: 1.05rem; }
  .cof-group-body { display: block; }
  @media (min-width: 900px) { .cof-group-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.4rem; align-items: start; } }
  .cof-col-head { font-weight: 700; margin-bottom: .6rem; }
  .cof-empty { font-size: .9rem; opacity: .6; margin: 0 0 .6rem; }

  /* Product browse cards. */
  .cof-browse { border: 1px solid #e3e3e3; border-radius: 10px; padding: .7rem; margin-bottom: .7rem; background: #fff; }
  .cof-browse-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: .6rem; }
  .cof-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
  /* flex:1 → the card fills its (grid-stretched) cell, so all cards in a row match the tallest
     title and the "View pricing" links line up — no hardcoded height. */
  .cof-card-pick { display: flex; flex-direction: column; flex: 1; text-align: left; padding: 0; background: #fff; color: inherit; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; font-weight: 400; }
  .cof-card-pick:hover { border-color: #111; }
  .cof-card-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; background: #f3f4f6; }
  .cof-card-img img { width: 100%; height: 100%; object-fit: contain; }
  .cof-card-title { font-weight: 600; padding: .4rem .5rem 0; line-height: 1.2; font-size: .92rem; }
  .cof-card-brand { font-size: .78rem; opacity: .65; padding: .1rem .5rem 0; }
  .cof-card-colors { font-size: .76rem; opacity: .6; padding: .1rem .5rem .5rem; }
  .cof-noimg { font-size: .8rem; opacity: .5; }

  /* A product line. */
  .cof-line { border: 1px solid #e6e6e6; border-radius: 10px; padding: .7rem .8rem; margin-bottom: .7rem; background: #fff; }
  .cof-line-top { display: flex; align-items: center; gap: .6rem; }
  .cof-line-thumb { width: 44px; height: 44px; border-radius: 6px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
  .cof-line-thumb img { width: 100%; height: 100%; object-fit: contain; }
  .cof-line-name { flex: 1; display: flex; flex-direction: column; }
  .cof-line-brand { font-size: .82rem; opacity: .6; font-weight: 400; }
  .cof-line-color { font-weight: 600; font-size: .92rem; margin: .6rem 0 .35rem; }
  .cof-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: .35rem; max-height: 132px; overflow-y: auto; padding: 2px; }
  .cof-swatch { padding: 0; width: 100%; aspect-ratio: 1/1; border: 1px solid #d0d0d0; border-radius: 5px; overflow: hidden; background: #fff; }
  .cof-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cof-swatch.is-selected { outline: 2px solid #111; outline-offset: 1px; }
  .cof-swatch-fallback { background: repeating-linear-gradient(45deg, #eee, #eee 4px, #ddd 4px, #ddd 8px); }
  .cof-sizes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: .4rem; margin-top: .7rem; }
  .cof-size { margin: 0; text-align: center; font-weight: 600; font-size: .85rem; }
  .cof-size span { display: block; margin-bottom: .15rem; }
  .cof-size input { margin-top: 0 !important; padding: .35rem .3rem !important; text-align: center; }

  /* A design row. */
  .cof-design { border: 1px solid #e6e6e6; border-radius: 10px; padding: .7rem .8rem; margin-bottom: .7rem; background: #fff; }
  .cof-design-row { display: flex; gap: .5rem; align-items: center; }
  .cof-design-row select { margin-top: 0; }
  .cof-design-place { flex: 1.2; }
  .cof-design-ready { flex: 1; }
  .cof-design-spacer { width: .9rem; }
  .cof-file { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 0; font-weight: 400; }
  .cof-file-btn { background: #f3f4f6; border: 1px solid #ccc; border-radius: 8px; padding: .35rem .7rem; font-weight: 600; font-size: .9rem; white-space: nowrap; }
  .cof-file input[type="file"] { display: none; }
  .cof-file-name { font-size: .85rem; opacity: .8; word-break: break-all; }

  /* Group card sections (stacked: garments → designs). */
  .cof-section { margin-top: .2rem; }
  .cof-section-head { font-weight: 800; font-size: 1rem; margin: 0 0 .7rem; }
  .cof-connector { text-align: center; font-weight: 700; font-size: .82rem; opacity: .5; letter-spacing: .04em; margin: 1rem 0; }

  /* Guided "what goes here" placement flow. */
  .cof-design-head { display: flex; align-items: flex-end; gap: .6rem; }
  .cof-design-place-l { flex: 1; margin: 0; }
  .cof-design-x { align-self: center; padding-bottom: .55rem; }
  .cof-q { margin-top: .9rem; }
  .cof-q-label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; }
  .cof-toggle { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
  .cof-toggle-btn { padding: .5rem .95rem; border: 1px solid #ccc; border-radius: 999px; background: #fff; font-weight: 600; color: #444; }
  .cof-toggle-btn:hover { border-color: #111; }
  .cof-toggle-btn.is-on { background: #111; color: #fff; border-color: #111; }
  .cof-design-note-l { display: block; margin: .9rem 0 0; font-weight: 600; }
  .cof-fineprint { font-size: .82rem; opacity: .82; line-height: 1.55; }
  .cof-fineprint p { margin: 0 0 .6rem; }
  .cof-fineprint p:last-child { margin-bottom: 0; }
  .cof-fineprint a { color: inherit; }
  .cof-terms-check { font-weight: 600; margin-top: .2rem; align-items: flex-start; }

  /* Visual placement picker — cards, each a tee outline with the print zone highlighted. */
  .cof-place-q { flex: 1; }
  .cof-place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: .5rem; margin-top: .5rem; }
  .cof-place-card { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .4rem .3rem; border: 1px solid #e3e3e3; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
  .cof-place-card:hover { border-color: #111; }
  .cof-place-card.is-on { border-color: #111; box-shadow: inset 0 0 0 2px #111; }
  .cof-place-svg { width: 100%; height: 56px; }
  .cof-place-svg .cof-tee { fill: #f3f4f6; stroke: #c8c8c8; stroke-width: 2; stroke-linejoin: round; }
  .cof-place-svg .cof-tee-neck { fill: none; stroke: #c8c8c8; stroke-width: 2; }
  .cof-place-svg .cof-tee-tag { fill: #c8c8c8; }
  .cof-place-svg .cof-zone { fill: rgba(17,17,17,.16); stroke: #111; stroke-width: 1.5; }
  .cof-place-svg .cof-zone-dashed { fill: none; stroke-dasharray: 3 2; }
  .cof-place-card.is-on .cof-zone { fill: rgba(17,17,17,.85); }
  .cof-place-label { font-size: .72rem; text-align: center; line-height: 1.15; font-weight: 600; }

  .cof-add-group { background: #fff; border: 2px dashed #111; border-radius: 10px; padding: .8rem 1.2rem; font-weight: 700; color: #111; width: 100%; }
  .cof-add-group:hover { background: #f7f7f7; }
  #cof-add-group-hint { margin: .5rem 0 0; }

  /* Color status on a line + the "Choose a color" call to action. */
  .cof-line-colorrow { display: block; font-size: .9rem; margin-top: .25rem; font-weight: 600; }
  .cof-line-needs { color: #b00020; }
  .cof-change-color { background: transparent; border: 0; color: #555; text-decoration: underline; cursor: pointer; font: inherit; font-size: .82em; font-weight: 600; padding: 0 0 0 .45rem; }
  .cof-change-color:hover { color: #111; }
  .cof-choose-color { margin-top: .7rem; background: #111; color: #fff; border: 0; border-radius: 8px; padding: .6rem 1.1rem; font-weight: 700; }
  .cof-choose-color:hover { background: #333; }
  .cof-sizes-wrap { margin-top: .7rem; }
  .cof-sizes-label { font-size: .85rem; font-weight: 600; opacity: .75; margin-bottom: .35rem; }

  /* Color picker modal (appended to <body>; floats above the storefront theme). */
  .cof-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 2147483000; padding: 1rem; }
  .cof-modal { background: #fff; color: #111; border-radius: 14px; width: 100%; max-width: 760px; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
  .cof-modal.cof-browse-modal { max-width: 960px; } /* the garment browser gets more room for the rail + grid */
  .cof-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #ececec; }
  .cof-modal-title { font-weight: 700; font-size: 1.08rem; }
  .cof-modal-close { background: transparent; border: 0; font-size: 1.25rem; line-height: 1; cursor: pointer; color: #777; padding: .2rem .4rem; }
  .cof-modal-close:hover { color: #111; }
  .cof-modal-search { margin: .9rem 1.25rem .2rem; padding: .6rem .75rem; border: 1px solid #ccc; border-radius: 9px; font: inherit; }
  .cof-modal-body { overflow-y: auto; padding: .9rem 1.25rem 1.25rem; }
  .cof-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: .55rem; }
  .cof-color-opt { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .35rem; background: #fff; border: 1px solid #e3e3e3; border-radius: 9px; cursor: pointer; font: inherit; color: inherit; }
  .cof-color-opt:hover { border-color: #111; }
  .cof-color-opt.is-selected { border-color: #111; box-shadow: inset 0 0 0 2px #111; }
  .cof-color-chip { width: 100%; aspect-ratio: 1 / 1; border-radius: 7px; overflow: hidden; background: #f3f4f6; border: 1px solid #e0e0e0; }
  .cof-color-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cof-color-label { font-size: .76rem; text-align: center; line-height: 1.2; }
  .cof-modal-empty { text-align: center; opacity: .6; padding: 1.5rem 0; }
  body.cof-modal-open { overflow: hidden; }

  /* Product-browser results = a left filter rail + the product grid. Base (mobile) = grouped pills
     above the grid; at >=880px the rail becomes a left sidebar (Option A). */
  .cof-results { display: block; }
  .cof-filter-rail { display: flex; flex-direction: row; flex-wrap: wrap; gap: .8rem 1rem; margin-bottom: .8rem; }
  .cof-fgroup { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
  .cof-fgroup-label { font-size: .8rem; font-weight: 700; opacity: .55; }
  .cof-fopts { display: flex; flex-wrap: wrap; gap: .35rem; }
  .cof-fopt { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid #ccc; border-radius: 999px; background: #fff; font: inherit; font-weight: 600; font-size: .85rem; color: #444; cursor: pointer; }
  .cof-fopt:hover { border-color: #111; }
  .cof-fopt.is-on { background: #111; color: #fff; border-color: #111; }
  .cof-fopt-n { font-size: .72rem; font-weight: 700; opacity: .45; }
  .cof-fopt.is-on .cof-fopt-n { opacity: .85; }
  /* Result count + "Clear filters" line above the grid (inside results-main). */
  .cof-browse-count { display: flex; align-items: center; gap: .6rem; padding: 0 0 .55rem; font-size: .82rem; opacity: .75; }
  .cof-clear { background: transparent; border: 0; color: #555; text-decoration: underline; font-weight: 600; font-size: .82rem; cursor: pointer; padding: 0; }
  .cof-clear:hover { color: #111; }
  @media (min-width: 880px) {
    .cof-results { display: flex; gap: 1.4rem; align-items: flex-start; }
    .cof-filter-rail { flex: 0 0 188px; flex-direction: column; flex-wrap: nowrap; gap: 1.2rem; margin-bottom: 0; }
    .cof-results-main { flex: 1; min-width: 0; }
    .cof-fgroup { display: block; }
    .cof-fgroup-label { display: block; margin-bottom: .45rem; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
    .cof-fopts { flex-direction: column; gap: .12rem; }
    .cof-fopt { width: 100%; justify-content: space-between; border: 0; border-radius: 7px; padding: .4rem .55rem; font-size: .88rem; }
    .cof-fopt:hover { background: #f2f2f2; }
  }

  /* "Departments" entry screen — garment-type tiles (a representative product photo over a line-art
     fallback) — plus the breadcrumb shown once you're in a results view. */
  .cof-dept-q { font-weight: 700; font-size: 1rem; margin: 0 0 .8rem; }
  .cof-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .7rem; }
  .cof-dept { display: flex; flex-direction: column; padding: 0; background: #fff; color: inherit; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; cursor: pointer; font: inherit; }
  .cof-dept:hover { border-color: #111; }
  .cof-dept-img { position: relative; aspect-ratio: 1/1; background: #f3f4f6; display: block; }
  .cof-dept-svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14%; box-sizing: border-box; }
  .cof-dept-svg .cof-tee { fill: #e9eaee; stroke: #cfd2d8; stroke-width: 2; stroke-linejoin: round; }
  .cof-dept-svg .cof-tee-neck { fill: none; stroke: #cfd2d8; stroke-width: 2; }
  .cof-dept-svg .cof-tee-tag { fill: #cfd2d8; }
  .cof-dept-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #f3f4f6; }
  .cof-dept-label { font-weight: 700; font-size: .92rem; padding: .45rem .55rem 0; line-height: 1.2; text-align: left; }
  .cof-dept-count { font-size: .76rem; opacity: .6; padding: .1rem .55rem .6rem; text-align: left; }
  /* Breadcrumb above the results (aisle / search). */
  .cof-crumb { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .7rem 1.25rem .1rem; font-size: .9rem; }
  .cof-crumb-home { background: transparent; border: 0; color: #555; font-weight: 600; cursor: pointer; padding: 0; font-size: .9rem; }
  .cof-crumb-home:hover { color: #111; text-decoration: underline; }
  .cof-crumb-sep { opacity: .4; }
  .cof-crumb-here { font-weight: 700; }

  /* "Not sure on sizes?" total-quantity entry on a line. */
  .cof-total-input { max-width: 8rem; }
  .cof-qty-toggle { display: inline-block; margin-top: .55rem; font-size: .85rem; }

  /* "View pricing" on a browse card + the stacked pricing-estimate modal. */
  .cof-card-wrap { display: flex; flex-direction: column; gap: .25rem; }
  .cof-card-price { background: transparent; border: 0; color: #555; text-decoration: underline; font-weight: 600; font-size: .82rem; padding: .15rem 0 .25rem; cursor: pointer; text-align: center; }
  .cof-card-price:hover { color: #111; }
  .cof-price-backdrop { z-index: 2147483200; }
  .cof-price-modal { max-width: 560px; }
  .cof-price-lead { font-weight: 600; margin: 0 0 .6rem; }
  .cof-price-scroll { overflow-x: auto; }
  .cof-price-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  .cof-price-table th, .cof-price-table td { padding: .45rem .6rem; text-align: right; border-bottom: 1px solid #eee; white-space: nowrap; }
  .cof-price-table th { font-weight: 700; border-bottom: 2px solid #e0e0e0; }
  .cof-price-table th:first-child, .cof-price-table td.cof-price-qty { text-align: left; font-weight: 700; }
  .cof-price-note { font-size: .82rem; opacity: .7; margin: .9rem 0 0; line-height: 1.4; }

  /* Customer mockup preview — "see it on a garment". DOM overlay: garment photo + draggable art. */
  .cof-mockup-modal { max-width: 880px; }
  .cof-mockup-body { display: flex; gap: 1.25rem; padding: 1rem 1.25rem 1.25rem; overflow-y: auto; }
  .cof-mockup-stage { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; justify-content: center; }
  .cof-mockup-frame { position: relative; display: inline-block; line-height: 0; background: #f3f4f6; border-radius: 8px; max-width: 100%; }
  .cof-mockup-garment { display: block; max-width: 100%; max-height: 56vh; width: auto; height: auto; user-select: none; -webkit-user-drag: none; }
  .cof-mk-empty { padding: 2.5rem 1.5rem; text-align: center; opacity: .6; font-size: .9rem; line-height: 1.45; max-width: 280px; }
  .cof-mk-art { position: absolute; cursor: move; touch-action: none; }
  .cof-mk-art:hover { outline: 1px dashed rgba(17,17,17,.35); outline-offset: 1px; }
  .cof-mk-art.is-selected { outline: 1.5px dashed rgba(17,17,17,.7); outline-offset: 1px; }
  .cof-mk-art img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
  .cof-mk-handle { display: none; position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; background: #111; border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; touch-action: none; }
  .cof-mk-art.is-selected .cof-mk-handle { display: block; }
  .cof-mockup-side { flex: 0 0 224px; display: flex; flex-direction: column; gap: .85rem; }
  .cof-mk-row { display: flex; flex-wrap: wrap; gap: .4rem; }
  .cof-mk-pill { padding: .35rem .9rem; border: 1px solid #ccc; border-radius: 999px; background: #fff; font: inherit; font-weight: 600; font-size: .85rem; color: #444; cursor: pointer; }
  .cof-mk-pill.is-on { background: #111; color: #fff; border-color: #111; }
  .cof-mk-pill.is-disabled { opacity: .4; cursor: not-allowed; }
  .cof-mk-chip { width: 34px; height: 34px; padding: 0; border: 1px solid #ddd; border-radius: 7px; overflow: hidden; background: #fff; cursor: pointer; }
  .cof-mk-chip.is-on { border-color: #111; box-shadow: inset 0 0 0 2px #111; }
  .cof-mk-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cof-mk-chip-hex { display: block; width: 100%; height: 100%; }
  .cof-mk-hint { font-size: .8rem; min-height: 1px; }
  .cof-mk-skip { color: #8a6d00; line-height: 1.4; }
  .cof-mockup-note { font-size: .78rem; opacity: .75; line-height: 1.5; margin: 0; }
  /* Per-design sign-off inside the preview (folds the ready/needs-work question in). */
  .cof-mk-signoff { border-top: 1px solid #eee; padding-top: .8rem; }
  .cof-mk-signoff-hint { font-size: .82rem; opacity: .65; margin: 0; line-height: 1.4; }
  .cof-mk-signoff-q { font-size: .88rem; font-weight: 700; margin-bottom: .45rem; }
  .cof-mk-note { width: 100%; margin-top: .55rem; padding: .5rem .6rem; border: 1px solid #ccc; border-radius: 8px; font: inherit; font-size: .85rem; box-sizing: border-box; }
  /* One sign-off row per previewable design on the current side; persists whether or not it's selected. */
  .cof-mk-signoff-item { padding: .55rem .6rem; border-radius: 8px; }
  .cof-mk-signoff-item + .cof-mk-signoff-item { margin-top: .4rem; }
  .cof-mk-signoff-item.is-active { background: #f4f6ff; box-shadow: inset 0 0 0 1px #d7defb; }
  /* The form's per-design sign-off line (the "Preview & position" CTA + committed status). */
  .cof-signoff-row { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-top: .65rem; }
  .cof-preview-link { background: #111; color: #fff; border: 0; border-radius: 8px; padding: .5rem .9rem; font-weight: 700; font-size: .88rem; cursor: pointer; }
  .cof-preview-link:hover { background: #333; }
  .cof-signoff { font-size: .85rem; font-weight: 600; }
  .cof-signoff-ok { color: #137333; }
  .cof-signoff-work { color: #8a6d00; }
  .cof-signoff-todo { opacity: .6; font-weight: 600; }
  /* Previewable design = a two-column card: compact controls left, big clickable preview right. */
  .cof-design-2col { display: flex; gap: 1.6rem; align-items: stretch; flex-wrap: wrap; }
  .cof-design-controls { flex: 1 1 290px; min-width: 0; }
  .cof-design-preview { flex: 1 1 320px; min-width: 0; display: flex; }
  .cof-design-preview-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
  .cof-design-preview-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; width: 100%; background: #fafafa; border: 1px solid #e3e3e3; border-radius: 14px; padding: 1.1rem; cursor: pointer; font: inherit; transition: border-color .12s, background .12s; }
  .cof-design-preview-btn:hover { border-color: #111; background: #f3f3f3; }
  .cof-design-preview-frame { position: relative; width: 100%; max-width: 380px; background: #f3f4f6; border-radius: 12px; overflow: hidden; line-height: 0; }
  .cof-design-preview-g { display: block; width: 100%; height: auto; }
  .cof-design-preview-art { position: absolute; height: auto; }
  .cof-design-preview-faint { opacity: .45; }
  .cof-design-preview-blank { display: flex; align-items: center; justify-content: center; min-height: 220px; }
  .cof-design-preview-svg { width: 64%; max-width: 220px; height: auto; padding: 1.2rem 0; }
  .cof-design-preview-svg .cof-tee { fill: #e9eaee; stroke: #cfd2d8; stroke-width: 2; stroke-linejoin: round; }
  .cof-design-preview-svg .cof-tee-neck { fill: none; stroke: #cfd2d8; stroke-width: 2; }
  .cof-design-preview-svg .cof-tee-tag { fill: #cfd2d8; }
  .cof-design-preview-cap { font-size: .78rem; opacity: .55; font-weight: 600; }
  .cof-design-preview-cta { font-size: .92rem; font-weight: 700; color: #111; }
  /* Flip the saved design across the group's other garments (only shown when there's more than one). */
  .cof-design-preview-nav { display: flex; align-items: center; justify-content: center; gap: .5rem; max-width: 380px; width: 100%; }
  .cof-pv-arrow { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid #ccc; border-radius: 50%; background: #fff; color: #111; font-size: 1.15rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
  .cof-pv-arrow:hover { border-color: #111; background: #f3f3f3; }
  .cof-pv-label { font-size: .8rem; font-weight: 600; opacity: .75; text-align: center; flex: 1 1 auto; min-width: 0; }
  .cof-pv-count { opacity: .6; font-weight: 700; }
  @media (max-width: 640px) { .cof-design-2col { flex-direction: column; gap: 1rem; } }
  /* Modal footer with the explicit Save & close action + the in-panel "Saved" confirmation. */
  .cof-mockup-foot { padding: .9rem 1.25rem; border-top: 1px solid #ececec; display: flex; justify-content: flex-end; }
  .cof-mk-done { background: #111; color: #fff; border: 0; border-radius: 9px; padding: .7rem 1.4rem; font-weight: 700; font-size: .95rem; cursor: pointer; }
  .cof-mk-done:hover { background: #333; }
  .cof-mk-saved { font-size: .82rem; color: #137333; font-weight: 600; margin: .6rem 0 0; line-height: 1.4; }
  @media (max-width: 720px) {
    .cof-mockup-body { flex-direction: column; }
    .cof-mockup-side { flex: none; }
  }

  .thread-cof .cf-turnstile { margin: .25rem 0 1rem; }
  .thread-cof-status { margin-top: 1rem; font-weight: 600; font-size: 1.05rem; }
  .thread-cof-ok { color: #137333; }
  .thread-cof-err { color: #b00020; }