/* Water Dragon garment designer
   Visual language taken from the garment drawings themselves: black line
   art on white, with indigo standing in for the blue trim lines. The one
   decorative device is the "trim stitch" (an indigo dashed line), used
   only to show what is selected, hovered or focused. */

@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/figtree-latin-400-normal.7bfd10a3def3.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/figtree-latin-ext-400-normal.a920986a5789.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/figtree-latin-600-normal.4376f5953b85.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/figtree-latin-ext-600-normal.d5396b002e5b.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/figtree-latin-700-normal.70aaa6879de5.woff2") format("woff2"); }

:root {
  --paper: #ffffff;
  --wash: #f2f3f1;       /* undyed cotton, for quiet panels */
  --ink: #000000;        /* same black as the drawings and logo */
  --mist: #5e636b;       /* secondary text, 6.1:1 on white */
  --rule: #d5d8dc;
  --indigo: #24398a;     /* the trim colour */
  --indigo-wash: #eef0f8;
  --alert: #a1261b;
  --ok: #1f6b3a;
  --line: 1.5px;         /* drawing line weight */
  --radius: 3px;
  --measure: 68ch;
  --page: 1120px;
  --font: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
/* "hidden" always hides, also on elements with their own display (.btn etc.). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px dashed var(--indigo); outline-offset: 3px; }

h1, h2, h3 { font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 4.2vw, 44px); }
h2 { font-size: 26px; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1em; max-width: var(--measure); }
.lead { font-size: 19px; color: var(--mist); }
.muted { color: var(--mist); }
.small { font-size: 14px; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; background: var(--paper); padding: 8px 12px; z-index: 10; }

/* ---- header / footer ---------------------------------------------- */
.site-header { border-bottom: var(--line) solid var(--ink); }
.site-header .wrap { max-width: calc(var(--page) + 160px); display: flex; align-items: center; gap: 24px; min-height: 72px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand img { width: 44px; height: auto; }
.brand-name { font-weight: 700; font-size: 18px; line-height: 1.1; }
.brand-sub { display: block; font-weight: 400; font-size: 14px; color: var(--mist); }
.site-nav { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-style: dashed; text-decoration-color: var(--indigo); }
.site-nav form { margin: 0; display: flex; }
.linklike { display: block; background: none; border: 0; padding: 0; margin: 0; font: 600 15px/1.55 var(--font); color: var(--ink); cursor: pointer; }
.linklike:hover { text-decoration: underline dashed var(--indigo); }

main { padding: 48px 0 80px; min-height: 60vh; }
.site-footer { border-top: 1px solid var(--rule); padding: 28px 0 40px; font-size: 14px; color: var(--mist); }
.site-footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer a { color: var(--mist); }
.site-footer .spacer { margin-right: auto; }

/* ---- messages ------------------------------------------------------- */
.messages { list-style: none; padding: 0; margin: 0 0 32px; }
.messages li { border-left: 4px solid var(--indigo); background: var(--indigo-wash); padding: 12px 16px; margin-bottom: 8px; }
.messages li.error { border-color: var(--alert); background: #fbefee; }

/* ---- buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border: var(--line) solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper); font: 600 16px var(--font); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--indigo); border-color: var(--indigo); }
.btn.secondary { background: var(--paper); color: var(--ink); }
.btn.secondary:hover { border-color: var(--indigo); color: var(--indigo); background: var(--paper); }
.btn.danger { background: var(--alert); border-color: var(--alert); }
.btn[disabled] { background: var(--wash); color: var(--mist); border-color: var(--rule); cursor: not-allowed; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 24px; }

/* ---- forms ---------------------------------------------------------- */
.form-page { max-width: 460px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.field input[type=text], .field input[type=email], .field input[type=password] {
  width: 100%; min-height: 46px; padding: 10px 12px; font: 400 17px var(--font); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper);
}
.field input:focus { outline: 2px dashed var(--indigo); outline-offset: 2px; border-color: var(--indigo); }
.field .help { font-size: 14px; color: var(--mist); margin-top: 6px; }
.field .errors, .form-errors { color: var(--alert); font-size: 15px; margin: 6px 0 0; padding: 0; list-style: none; }
.form-errors { border-left: 4px solid var(--alert); background: #fbefee; padding: 12px 16px; margin-bottom: 24px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--indigo); }
.check label { font-weight: 400; margin: 0; }
.form-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 15px; }
.form-foot p { margin-bottom: 6px; }

/* ---- home ----------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(36px, 5.4vw, 60px); line-height: 1.03; letter-spacing: -0.02em; }
.hero-art { justify-self: center; width: min(100%, 380px); }
.stitch { height: 0; border-top: 2px dashed var(--indigo); width: 120px; margin: 4px 0 28px; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: var(--line) solid var(--ink); }
.steps li { counter-increment: step; padding-top: 20px; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 34px; height: 34px; border: var(--line) solid var(--ink); border-radius: 50%; font-weight: 700; margin-bottom: 14px; }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--mist); font-size: 16px; }

/* ---- catalog -------------------------------------------------------- */
.page-head { margin-bottom: 36px; }
.crumbs { font-size: 15px; margin-bottom: 14px; }
.crumbs a { color: var(--mist); }
.group { margin-bottom: 56px; }
.group > h2 { font-size: 20px; font-weight: 600; color: var(--mist); margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.card {
  display: flex; flex-direction: column; color: var(--ink); text-decoration: none;
  border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper);
  position: relative;
}
.card .photo { aspect-ratio: 4 / 5; background: var(--paper); display: grid; place-items: center; border-bottom: var(--line) solid var(--ink); overflow: hidden; }
.card .photo img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.card .photo .none { color: var(--mist); font-size: 14px; padding: 16px; text-align: center; }
.card .body { padding: 14px 16px 16px; }
.card .title { font-weight: 600; font-size: 17px; line-height: 1.3; }
.card .meta { font-size: 14px; color: var(--mist); margin-top: 4px; }
/* the trim stitch: an inset dashed indigo line, like trim sewn on a hem */
.card::after { content: ""; position: absolute; inset: 5px; border: 2px dashed transparent; border-radius: 1px; pointer-events: none; }
.card:hover::after, .card:focus-visible::after { border-color: var(--indigo); }
.card:focus-visible { outline: none; }

.style-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.style-photo { border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 20px; }
.choices { margin: 24px 0 0; padding: 0; }
.choices div { padding: 12px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 150px 1fr; gap: 16px; }
.choices dt { font-weight: 600; }
.choices dd { margin: 0; color: var(--mist); }
.notice { border: var(--line) dashed var(--indigo); background: var(--indigo-wash); padding: 16px 18px; border-radius: var(--radius); margin-top: 28px; }
.notice p:last-child { margin-bottom: 0; }
.more { margin-top: 64px; }

.empty { border: var(--line) dashed var(--rule); padding: 40px; text-align: center; color: var(--mist); border-radius: var(--radius); }

/* ---- account / legal ---------------------------------------------- */
.account-sections > section { padding: 28px 0; border-top: 1px solid var(--rule); }
.account-sections > section:first-child { border-top: 0; padding-top: 0; }
.legal h2 { font-size: 21px; margin-top: 36px; }
.legal { max-width: 760px; }
.todo { background: #fff4d6; padding: 0 4px; }

/* ---- staff check ---------------------------------------------------- */
table.check-table { border-collapse: collapse; width: 100%; font-size: 15px; }
.check-table th, .check-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.check-table th { border-bottom: var(--line) solid var(--ink); }
.yes { color: var(--ok); font-weight: 600; }
.no { color: var(--alert); font-weight: 600; }
code { font-size: 14px; background: var(--wash); padding: 1px 4px; border-radius: 2px; word-break: break-all; }

@media (max-width: 820px) {
  main { padding-top: 32px; }
  .hero, .style-layout { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { width: 112px; justify-self: start; order: -1; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .choices div { grid-template-columns: 1fr; gap: 2px; }
  .site-footer .wrap { flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- designer ------------------------------------------------------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn.small-btn { min-height: 38px; padding: 0 14px; font-size: 15px; }
.linkbtn { background: none; border: 0; padding: 0; font: 600 15px/1.55 var(--font); color: var(--indigo); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.notice-line { border-left: 4px solid var(--indigo); background: var(--indigo-wash); padding: 12px 16px; margin-bottom: 24px; max-width: none; }

.designer-head { display: flex; align-items: flex-end; gap: 24px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 28px; }
.name-field { flex: 1 1 360px; max-width: 620px; }
.name-field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.name-field input { width: 100%; font: 700 clamp(24px, 3vw, 32px)/1.2 var(--font); letter-spacing: -0.01em; color: var(--ink);
  border: 0; border-bottom: var(--line) solid var(--ink); padding: 4px 0 8px; background: transparent; border-radius: 0; }
.name-field input:focus { outline: none; border-bottom: 2px dashed var(--indigo); }
.name-field input:disabled { border-bottom-color: var(--rule); }
.name-field p { margin: 8px 0 0; }

.designer-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.stage-col { position: sticky; top: 24px; }
.view-switch { display: inline-flex; border: var(--line) solid var(--ink); border-radius: var(--radius); margin-bottom: 12px; }
.view-btn { font: 600 15px var(--font); background: var(--paper); color: var(--ink); border: 0; padding: 8px 18px; cursor: pointer; }
.view-btn + .view-btn { border-left: var(--line) solid var(--ink); }
.view-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.stage { border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper); padding: 16px; min-height: 320px; display: grid; place-items: center; }
.stage[data-view="photo"] .stage-drawing, .stage[data-view="drawing"] .stage-photo { display: none; }
.stage-photo, .stage-drawing { width: 100%; }
.stage-photo img { margin: 0 auto; max-height: 72vh; object-fit: contain; }
.layers { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
.layers img { width: 100%; height: auto; }
.layers img + img { position: absolute; inset: 0; }
.layers img[hidden] { display: none; }
.layers .wm-band { display: block; width: 100%; height: auto; }
.layers canvas.legs-drawing { display: block; width: 100%; height: auto; }
.legs-labels { display: flex; justify-content: space-around; max-width: 640px; margin: 4px auto 0; }
.fabric-view { width: 100%; max-width: 640px; margin: 0 auto; }
.fabric-view canvas { width: 100%; height: auto; display: block; }
.stage-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; }
.stage-foot .stage-hint { margin: 0; }
.in-fabric-toggle { display: inline-flex; align-items: center; gap: 8px; }
img.drawing-pic { width: 100%; height: auto; display: block; }
.stage-empty { text-align: center; padding: 40px 16px; max-width: none; }
.stage-note, .stage-hint { margin: 10px 0 0; }

.controls-col fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.opt-group { padding: 20px 0; border-top: 1px solid var(--rule); }
.opt-group:first-child { border-top: 0; padding-top: 0; }
.opt-title { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.opt-group > p { margin: -4px 0 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: var(--line) solid var(--ink);
  border-radius: var(--radius); font-size: 15px; line-height: 1.3; background: var(--paper); }
.pill input:checked + span { background: var(--ink); color: var(--paper); }
.pill input:focus-visible + span { outline: 2px dashed var(--indigo); outline-offset: 3px; }
.pill:hover input:not(:checked):not(:disabled) + span { border-color: var(--indigo); color: var(--indigo); }
fieldset:disabled .pill { cursor: default; }
fieldset:disabled .pill span { border-color: var(--rule); }
fieldset:disabled .pill input:checked + span { background: var(--mist); border-color: var(--mist); }

.fabric-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; }
.fabric-slot + .fabric-slot { border-top: 1px dashed var(--rule); }
.swatch { width: 64px; height: 64px; border: var(--line) solid var(--ink); border-radius: var(--radius); overflow: hidden; background:
  repeating-linear-gradient(45deg, var(--wash) 0 6px, var(--paper) 6px 12px); }
.swatch img { width: 100%; height: 100%; object-fit: cover; }
.fabric-title { font-weight: 600; }
.fabric-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.designer-more { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; margin-top: 56px; padding-top: 32px; border-top: var(--line) solid var(--ink); }
.comment { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.comment p { margin: 0 0 6px; }
.comment-meta { display: flex; gap: 14px; align-items: center; }
.comment-meta form { margin: 0; }
.comment-meta .linkbtn { font-size: 14px; }
.comment-form { margin-top: 20px; }
.comment-form label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.comment-form textarea { width: 100%; font: 400 17px/1.5 var(--font); padding: 10px 12px; border: var(--line) solid var(--ink); border-radius: var(--radius); resize: vertical; }
.comment-form textarea:focus { outline: 2px dashed var(--indigo); outline-offset: 2px; }
.comment-form .actions { margin-top: 12px; }
.design-manage { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.design-manage h2 { margin-bottom: 4px; }
.design-manage form { margin: 0; }

dialog#fabric-dialog { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: var(--line) solid var(--ink);
  border-radius: var(--radius); padding: 0; color: var(--ink); }
dialog#fabric-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 0; }
.dialog-head h2 { margin: 0; font-size: 22px; }
.dialog-filters { display: flex; gap: 12px; padding: 14px 22px 0; flex-wrap: wrap; }
.dialog-filters input, .dialog-filters select { min-height: 44px; font: 400 16px var(--font); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 0 12px; background: var(--paper); color: var(--ink); }
.dialog-filters input { flex: 1 1 260px; }
.dialog-filters input:focus, .dialog-filters select:focus { outline: 2px dashed var(--indigo); outline-offset: 2px; }
.fabric-count { padding: 8px 22px 0; margin: 0; }
.fabric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; padding: 14px 22px 22px; overflow-y: auto; max-height: calc(100vh - 240px); }
.fabric-tile { position: relative; }
.tile-open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; text-align: left; background: var(--paper); border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.tile-open .swatch { width: 100%; height: auto; aspect-ratio: 1; }
.tile-open:hover .swatch, .tile-open:focus-visible .swatch { outline: 2px dashed var(--indigo); outline-offset: 3px; }
.tile-open:focus-visible { outline: none; }
.tile-open[aria-current="true"] .swatch { outline: 3px solid var(--indigo); outline-offset: 3px; }
.fav-btn { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; border: var(--line) solid var(--ink);
  background: var(--paper); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.fav-btn[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: var(--paper); }
.fav-btn:focus-visible { outline: 2px dashed var(--indigo); outline-offset: 2px; }
.fav-btn.fav-wide { position: static; width: auto; height: auto; border-radius: var(--radius); padding: 8px 14px; font: 600 15px var(--font); display: inline-flex; gap: 6px; }
.tile-code { font-weight: 600; font-size: 15px; margin-top: 4px; }
.tile-desc, .tile-extra { font-size: 13px; color: var(--mist); line-height: 1.35; }
.tile-extra { color: var(--alert); }

.list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.design-card .card-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.design-card:focus-within::after, .design-card:hover::after { border-color: var(--indigo); }
.design-card .card-link:focus-visible { outline: none; }
.layers.thumb { padding: 12px; }

@media (max-width: 900px) {
  .designer-grid, .designer-more { grid-template-columns: 1fr; gap: 32px; }
  .stage-col { position: static; }
  .stage-photo img { max-height: 56vh; }
}
@media (max-width: 520px) {
  .fabric-slot { grid-template-columns: 56px minmax(0, 1fr); }
  .swatch { width: 56px; height: 56px; }
  .fabric-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
  .dialog-head, .dialog-filters, .fabric-count { padding-left: 16px; padding-right: 16px; }
  .fabric-grid { padding: 12px 16px 16px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
.opt-group > .pills + p { margin: 10px 0 0; }

/* ---- quotations ----------------------------------------------------- */
.head-actions { margin-top: 0; }
.quote-history { margin-top: 64px; }
.quote-form { max-width: 760px; }
.quote-designs { border: 0; padding: 0; margin: 0 0 8px; }
.quote-choice { display: grid; grid-template-columns: 24px 88px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); cursor: pointer; }
.quote-choice:last-child { border-bottom: 1px solid var(--rule); }
.quote-choice input { width: 20px; height: 20px; accent-color: var(--indigo); }
.quote-choice input:focus-visible { outline: 2px dashed var(--indigo); outline-offset: 3px; }
.quote-thumb { width: 88px; height: 104px; border: var(--line) solid var(--ink); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; padding: 4px; }
.quote-thumb > img { width: 100%; height: 100%; object-fit: contain; }
.quote-text { display: flex; flex-direction: column; gap: 2px; }
.quote-text .title { font-weight: 600; }
.quote-form textarea { width: 100%; font: 400 17px/1.5 var(--font); padding: 10px 12px; border: var(--line) solid var(--ink); border-radius: var(--radius); resize: vertical; }
.quote-form textarea:focus { outline: 2px dashed var(--indigo); outline-offset: 2px; }
.form-narrow { max-width: 360px; }

/* ---- outfits -------------------------------------------------------- */
.outfit-photo { display: flex !important; align-items: center; justify-content: center; gap: 4px; padding: 10px; }
.outfit-photo .outfit-piece { flex: 1 1 0; min-width: 0; display: block; }
.outfit-photo .outfit-piece img, .outfit-photo .outfit-piece .layers img { width: 100%; height: auto; }
.outfit-photo .layers { position: relative; display: block; }
.quote-thumb.outfit-photo { width: 120px; padding: 4px; }
.quote-choice { grid-template-columns: 24px 120px minmax(0, 1fr); }
.warn { color: var(--alert); }

.outfit-name .inline-save { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.outfit-name .inline-save input { flex: 1 1 260px; width: auto; }
.piece-list { list-style: none; padding: 0; margin: 0 0 24px; border-top: var(--line) solid var(--ink); }
.piece-row { display: grid; grid-template-columns: 34px 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.piece-row.no-number { grid-template-columns: 96px minmax(0, 1fr) auto; }
.piece-list > li.muted { padding: 16px 0; }
.piece-no { width: 30px; height: 30px; border: var(--line) solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.piece-thumb { width: 96px; height: 112px; border: var(--line) solid var(--ink); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; padding: 4px; background: var(--paper); }
.piece-thumb > img { max-height: 100%; width: auto; }
.piece-thumb .layers { position: relative; width: 100%; }
.empty-thumb { border-style: dashed; border-color: var(--mist); background: var(--wash); }
.piece-row.open .piece-text .title { color: var(--ink); }
.piece-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.piece-text .title { font-weight: 600; color: var(--ink); text-decoration: none; }
.piece-text a.title:hover { text-decoration: underline; }
.piece-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.add-more { margin: 8px 0 32px; }
.teaser { margin: 40px 0 16px; padding: 28px; background: var(--indigo-wash); border: var(--line) dashed var(--indigo); border-radius: var(--radius); }
.teaser h2 { margin-bottom: 4px; }
.teaser-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 18px; }
.outfit-manage { margin-top: 48px; padding-top: 24px; border-top: var(--line) solid var(--ink); }
.outfit-manage .actions { margin-top: 4px; }
.outfit-manage form { margin: 0; }

.set-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.set-card .photo { aspect-ratio: 16 / 10; }
.set-card .body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.set-card .meta { margin: 0; }
.set-pieces { margin: 0 0 6px; padding-left: 20px; font-size: 15px; }
.set-card form { margin-top: auto; }

/* ---- fabric browser ------------------------------------------------- */
.fabric-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.fabric-filters input[type=search], .fabric-filters select { min-height: 44px; font: 400 16px var(--font); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 0 12px; background: var(--paper); color: var(--ink); }
.fabric-filters input[type=search] { flex: 1 1 280px; }
.fabric-filters input:focus, .fabric-filters select:focus { outline: 2px dashed var(--indigo); outline-offset: 2px; }
.fav-filter { align-items: center; }
.fabric-grid.page-grid { max-height: none; overflow: visible; padding: 8px 0 0; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
dialog#fabric-detail { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 0; color: var(--ink); }
dialog#fabric-detail::backdrop { background: rgba(0, 0, 0, .45); }
.detail-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; padding: 18px 22px 24px; }
.detail-pictures { display: grid; gap: 12px; align-content: start; }
.detail-pictures figure { margin: 0; display: grid; gap: 4px; }
.detail-pictures figure[hidden] { display: none; }
.detail-swatch .swatch, .detail-closeup .swatch { width: 100%; height: auto; aspect-ratio: 1; }
.detail-name { margin: 0 0 8px; }
.detail-desc { margin: 0 0 12px; }
.detail-list div { grid-template-columns: 140px 1fr; padding: 8px 0; }
.detail-fav { margin-top: 16px; }
.scope-switch { margin: 0; }
.dialog-foot { padding: 0 22px 18px; margin: 0; }

@media (max-width: 640px) {
  .piece-row { grid-template-columns: 28px 72px minmax(0, 1fr); gap: 12px; }
  .piece-row.no-number { grid-template-columns: 72px minmax(0, 1fr); }
  .piece-thumb { width: 72px; height: 88px; }
  .piece-actions { grid-column: 2 / -1; flex-direction: row; align-items: center; gap: 16px; }
  .detail-body { grid-template-columns: 1fr; }
  .teaser { padding: 20px 16px; }
  .teaser-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .teaser-grid .card .photo img { padding: 8px; }
  .teaser-grid .card .body { padding: 10px 12px 12px; }
  .teaser-grid .card .title { font-size: 15px; }
  .quote-choice { grid-template-columns: 24px 88px minmax(0, 1fr); }
  .quote-thumb.outfit-photo { width: 88px; }
}

/* ---- measurements ------------------------------------------------- */
.measure-top { display: flex; gap: 8px 32px; align-items: flex-end; flex-wrap: wrap; }
.measure-top .field { flex: 0 1 420px; }
.measure-top input[type=text] { width: 100%; }
.units-note { margin: 0 0 24px; }
.field textarea, .measure-form input[type=text] { font: 400 17px/1.5 var(--font); padding: 10px 12px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.field textarea { width: 100%; resize: vertical; }
.measure-form input:focus, .field textarea:focus { outline: 2px dashed var(--indigo); outline-offset: 2px; border-color: var(--indigo); }
.measure-form input[aria-invalid="true"] { border-color: var(--alert); }
.tips { border: var(--line) dashed var(--indigo); background: var(--indigo-wash); border-radius: var(--radius); padding: 14px 18px; margin: 4px 0 8px; max-width: 760px; }
.tips summary, .howto summary, .guide-mini summary { cursor: pointer; font-weight: 600; }
.tips ul { margin: 10px 0 8px; padding-left: 20px; }
.tips p { margin: 0; }
.measure-section { padding: 36px 0 8px; border-top: var(--line) solid var(--ink); margin-top: 36px; }
.measure-section h2 { margin-bottom: 4px; }
.measure-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; margin-top: 18px; }
.measure-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius); align-items: start; }
.measure-card.has-error { border-color: var(--alert); }
.measure-pic { width: 120px; height: auto; aspect-ratio: 3 / 4; object-fit: contain; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.measure-label, .garment-cell label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.unit-input { display: inline-flex; align-items: center; gap: 8px; }
.unit-input input[type=text] { width: 110px; text-align: right; }
.unit { color: var(--mist); font-size: 15px; min-width: 22px; }
.field-error { color: var(--alert); font-size: 14px; margin: 6px 0 0; }
.howto { margin-top: 10px; font-size: 15px; }
.howto summary { color: var(--indigo); font-size: 15px; }
.howto p { margin: 8px 0 0; }
.garment-block { margin-top: 28px; }
.guide-strip { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 16px; }
.guide-mini { border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; max-width: 360px; font-size: 15px; }
.guide-mini summary { display: flex; align-items: center; gap: 10px; list-style: none; }
.guide-mini summary::-webkit-details-marker { display: none; }
.guide-mini summary img { width: 60px; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.guide-mini summary span { text-decoration: underline dashed var(--indigo); text-underline-offset: 3px; }
.guide-mini p { margin: 8px 0 0; }
.garment-table { border-top: 1px solid var(--rule); }
.garment-row { border: 0; border-bottom: 1px solid var(--rule); margin: 0; padding: 14px 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.garment-row legend { float: left; font-weight: 700; padding: 0; margin-top: 30px; }
.garment-cells { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.garment-cell label { font-size: 15px; font-weight: 400; color: var(--mist); }
.garment-cell.has-error input { border-color: var(--alert); }
.sash-block { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
.sash-fields { display: flex; gap: 14px 28px; flex-wrap: wrap; margin-top: 14px; }
.sash-fields[hidden] { display: none; }
.measure-actions { border-top: var(--line) solid var(--ink); padding-top: 24px; }
.delete-link { margin-left: auto; color: var(--alert); }
.measure-list { list-style: none; padding: 0; margin: 0; border-top: var(--line) solid var(--ink); }
.measure-item { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.measure-item-text { display: flex; flex-direction: column; gap: 2px; }
.measure-item-text .title { font-weight: 700; font-size: 19px; color: var(--ink); }
.measure-item-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.guide-tips ul { margin: 0; padding-left: 20px; }
.guide-list { list-style: none; padding: 0; margin: 32px 0 0; }
.guide-entry { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; padding: 28px 0; border-top: 1px solid var(--rule); align-items: start; }
.guide-entry h2 { font-size: 22px; }
.guide-pic img { width: 180px; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.send-review { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 40px; margin-bottom: 24px; }
.review-list { margin-top: 0; }
.review-list div { grid-template-columns: minmax(0, 1fr) auto; }
.review-list dd { color: var(--ink); font-weight: 600; text-align: right; }
.send-form { margin-top: 28px; }
.quote-measurements { border: 0; padding: 0; margin: 24px 0 20px; }
.quote-measure-choice { padding: 8px 0; }
@media (max-width: 640px) {
  .measure-grid { grid-template-columns: minmax(0, 1fr); }
  .measure-card { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .measure-pic { width: 84px; }
  .garment-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .garment-row legend { margin-top: 0; float: none; }
  .guide-entry { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
  .guide-pic img { width: 110px; }
  .sash-block { grid-template-columns: 84px minmax(0, 1fr); }
  .delete-link { margin-left: 0; }
}
.sash-choice { margin-bottom: 8px; }
.staff-note { border-left: 4px solid var(--indigo); background: var(--indigo-wash); padding: 8px 12px; }
.extras-block { margin-top: 28px; }
.extra-list { border-top: 1px solid var(--rule); margin-bottom: 14px; }
.extra-row { border: 0; border-bottom: 1px solid var(--rule); margin: 0; padding: 14px 0; min-width: 0; }
.extra-row.has-error .extra-desc input, .extra-row.has-error .unit-input input { border-color: var(--alert); }
.extra-fields { display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 1.3fr); gap: 12px 24px; align-items: start; }
.extra-fields label { display: block; font-size: 15px; color: var(--mist); margin-bottom: 6px; }
.extra-desc input { width: 100%; }
.extra-pic input[type=file] { font: 400 15px var(--font); max-width: 100%; }
.extra-pic .check label { color: var(--ink); margin: 0; }
.extra-thumb { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 6px; }
.extra-delete { margin-top: 8px; }
.extra-delete label { color: var(--alert); }
@media (max-width: 640px) { .extra-fields { grid-template-columns: minmax(0, 1fr); } }
.guide-section { padding: 36px 0 8px; border-top: var(--line) solid var(--ink); }

/* ---- favourite garments ------------------------------------------- */
.style-card { display: flex; flex-direction: column; }
.style-card .card-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.style-card:focus-within::after, .style-card:hover::after { border-color: var(--indigo); }
.style-card .card-link:focus-visible { outline: none; }
.style-card .fav-form { position: absolute; top: 8px; right: 8px; margin: 0; z-index: 1; }
.style-card .fav-btn { position: static; background: var(--paper); font-size: 18px; line-height: 1; cursor: pointer; }
.style-card .fav-btn[aria-pressed="true"] { background: var(--indigo); color: var(--paper); }
.style-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fav-form-wide { margin: 6px 0 0; }
.fav-btn.fav-wide { background: var(--paper); color: var(--ink); cursor: pointer; }
.fav-btn.fav-wide[aria-pressed="true"] { background: var(--indigo); color: var(--paper); }
.fav-btn.fav-wide .star { font-size: 18px; line-height: 1; }

/* ---- arrange & what's new ----------------------------------------- */
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.group-head h1, .group-head h2 { margin-bottom: 18px; }
.arrange-links { display: flex; gap: 18px; flex-wrap: wrap; }
.arrange-links a { color: var(--mist); }
.arrange-links .staff-link { color: var(--indigo); }
.new-badge { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--indigo); color: var(--paper); font: 600 12px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--radius); }
.new-badge.static { position: static; display: inline-block; }
.fabric-tile .new-badge { top: 6px; left: 6px; font-size: 11px; padding: 4px 6px; }
.news-banner { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; border: var(--line) dashed var(--indigo); background: var(--indigo-wash); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 40px; }
.news-banner p { margin: 0; flex: 1 1 320px; }
.nav-new { display: inline-flex; align-items: center; gap: 6px; }
.nav-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--indigo); color: var(--paper); font-size: 12px; }
.tile-link { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.tile-link .swatch { width: 100%; height: auto; aspect-ratio: 1; }
.tile-link:hover .swatch, .tile-link:focus-visible .swatch { outline: 2px dashed var(--indigo); outline-offset: 3px; }
.arrange-group { margin-bottom: 32px; }
.arrange-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); max-width: 760px; }
.arrange-row { display: grid; grid-template-columns: 24px 56px minmax(0, 1fr) 64px auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.drag-handle { color: var(--mist); font-size: 14px; letter-spacing: -3px; cursor: grab; user-select: none; }
.arrange-thumb { width: 56px; height: 64px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.arrange-thumb img { max-height: 100%; width: auto; object-fit: contain; }
.arrange-name { font-weight: 600; }
.arrange-pos { width: 64px; min-height: 38px; font: 400 16px var(--font); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 0 8px; }
.arrange-buttons { display: flex; gap: 6px; }
.arrange-btn { width: 38px; height: 38px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper); font-size: 17px; cursor: pointer; }
.arrange-btn:hover { border-color: var(--indigo); color: var(--indigo); }
.js-arrange .arrange-pos { width: 48px; border-color: var(--rule); color: var(--mist); }
.is-dragging { opacity: .5; outline: 2px dashed var(--indigo); }
.reset-link { margin-left: auto; color: var(--mist); }
@media (max-width: 640px) {
  .arrange-row { grid-template-columns: 18px 44px minmax(0, 1fr) auto; }
  .arrange-pos { display: none; }
  .arrange-thumb { width: 44px; height: 52px; }
}

/* ---------------------------------------------------------------- orders */
.orders-section { margin: 8px 0 40px; }
.orders-section .group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.outfits-title { margin-top: 8px; }
.order-list { display: grid; gap: 16px; }
.order-card { border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 16px 18px 18px; background: var(--paper); }
.order-card-link { display: flex; gap: 16px; align-items: center; color: inherit; text-decoration: none; }
.order-card-link:hover .title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.order-thumbs { display: flex; gap: 6px; flex: none; }
.order-thumb { width: 64px; height: 80px; border: 1px solid var(--rule); display: grid; place-items: center; overflow: hidden; background: var(--paper); }
.order-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.order-thumb .none { font-size: 11px; color: var(--mist); text-align: center; padding: 2px; }
.order-head { display: flex; flex-direction: column; min-width: 0; }
.order-head .title { font-weight: 600; font-size: 18px; }
.order-head .meta { font-size: 14px; color: var(--mist); }
.order-now { margin-top: 4px; font-weight: 600; color: var(--indigo); }

/* progress: a stitched seam with knots */
.track { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; counter-reset: step; }
.track-step { position: relative; padding-top: 22px; font-size: 14px; line-height: 1.3; color: var(--mist); text-align: center; }
.track-step::before { content: ""; position: absolute; top: 7px; left: -50%; right: 50%; border-top: 2px dashed var(--rule); }
.track-step:first-child::before { display: none; }
.track-step.is-done::before, .track-step.is-current::before { border-top: 2px solid var(--ink); }
.track-dot { position: absolute; top: 0; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--rule); background: var(--paper); z-index: 1; }
.track-step.is-done { color: var(--ink); }
.track-step.is-done .track-dot { background: var(--ink); border-color: var(--ink); }
.track-step.is-current { color: var(--indigo); font-weight: 700; }
.track-step.is-current .track-dot { background: var(--indigo); border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-wash); }
.track-label { display: block; padding: 0 4px; }
.track-date { display: block; font-size: 12px; color: var(--mist); font-weight: 400; }
.track-big { margin: 8px 0 20px; }
.track-big .track-step { font-size: 16px; padding-top: 30px; }
.track-big .track-dot { width: 22px; height: 22px; margin-left: -11px; }
.track-big .track-step::before { top: 10px; }
.order-status { border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 22px 22px 14px; margin-bottom: 36px; }
.order-now-text { max-width: var(--measure); margin: 0 0 10px; }

.ordered-list { list-style: none; margin: 0; padding: 0; }
.ordered-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding: 24px 0; border-top: 1px solid var(--rule); }
.ordered-pictures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.ordered-pic { margin: 0; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.ordered-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; padding: 10px; }
.ordered-pic.photo-pic img { object-fit: cover; padding: 0; }
.ordered-pic .none { display: grid; place-items: center; aspect-ratio: 4 / 5; color: var(--mist); }
.ordered-pic figcaption { font-size: 13px; color: var(--mist); padding: 6px 10px; border-top: 1px solid var(--rule); }
.ordered-text h3 { font-size: 22px; margin-bottom: 4px; }
.ordered-facts { margin: 12px 0 16px; display: grid; gap: 4px; font-size: 15px; }
.ordered-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
.ordered-facts dt { color: var(--mist); }
.ordered-facts dd { margin: 0; }
.share-form { margin: 14px 0; padding: 12px 14px; background: var(--wash); border-radius: var(--radius); }
.share-form p { margin: 6px 0 0; }
.again-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.again-actions form { margin: 0; }
.reorder-note { color: var(--indigo); }

.wardrobe-card { display: flex; flex-direction: column; }
.wardrobe-card .body { display: flex; flex-direction: column; flex: 1; }
.wardrobe-card .again-actions { margin-top: auto; padding-top: 12px; }
.wardrobe-card .photo { position: relative; }
.wardrobe-photo { position: absolute; right: 10px; bottom: 10px; width: 34%; aspect-ratio: 4 / 5; border: var(--line) solid var(--ink); background: var(--paper); border-radius: var(--radius); overflow: hidden; }
.wardrobe-photo img { width: 100%; height: 100%; object-fit: cover; padding: 0 !important; }
.wardrobe-card .hide-link { margin-top: 8px; color: var(--mist); }
.wardrobe-card .new-badge { background: var(--ink); }

.type-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.type-filter a { border: var(--line) solid var(--ink); border-radius: 999px; padding: 4px 14px; color: var(--ink); text-decoration: none; font-size: 15px; }
.type-filter a[aria-current] { background: var(--ink); color: var(--paper); }
.inspiration-card .photo img { object-fit: cover; padding: 0; }
.pager { display: flex; gap: 18px; justify-content: center; align-items: center; margin: 28px 0; }

@media (max-width: 720px) {
  .ordered-row { grid-template-columns: 1fr; gap: 16px; }
  .order-card-link { align-items: flex-start; flex-direction: column; }
  .track-step { font-size: 12px; }
  .track-big .track-step { font-size: 13px; }
  .ordered-facts div { grid-template-columns: 110px 1fr; }
}
.email-pref { margin: 0 0 8px; }
.email-pref .check { align-items: flex-start; }
.track-link { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; }
.tracking-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }

/* ---- landing page --------------------------------------------------- */
.hero-note { margin-top: 14px; }
.home-block { margin-top: 80px; }
.home-block > .steps { margin-top: 0; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.block-head h2 { margin: 0; }
.block-head a { font-size: 15px; }
.home-garments { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.home-garments .card .body, .home-garments .card .title, .home-garments .card .meta { display: block; }
.home-fabrics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; background: var(--wash); padding: 40px; border-radius: var(--radius); }
.home-fabrics p { margin-bottom: 20px; }
.swatch-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.swatch-row img { width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--line) solid var(--ink); border-radius: var(--radius); }
.hand-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: var(--line) solid var(--ink); padding-top: 20px; }
.hand-points p { color: var(--mist); font-size: 16px; }
.home-final { margin-top: 80px; }

/* ---- uniform guide -------------------------------------------------- */
.guide-page { max-width: 820px; min-width: 0; }
.guide-head { margin-bottom: 28px; }
.guide-head .lead { max-width: var(--measure); }
.guide-cover { margin: 0 0 32px; }
.guide-cover img { width: 100%; border: var(--line) solid var(--ink); border-radius: var(--radius); }
.guide-toc { border-left: 2px dashed var(--indigo); padding: 4px 0 4px 18px; margin: 0 0 36px; }
.guide-toc p { margin: 0 0 4px; }
.guide-toc ul { margin: 0; padding: 0; list-style: none; }
.guide-toc li { margin: 2px 0; }
.guide-text h2 { margin-top: 44px; scroll-margin-top: 16px; }
.guide-text h3 { margin-top: 28px; }
.guide-text ul, .guide-text ol { max-width: var(--measure); padding-left: 22px; margin: 0 0 1em; }
.guide-text li { margin-bottom: 6px; }
.guide-note { background: var(--indigo-wash); border-left: 4px solid var(--indigo); padding: 14px 18px; margin: 0 0 1.2em; max-width: var(--measure); }
.guide-note p { margin: 0; }
.guide-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 40px; }
.guide-card .body { display: block; padding: 20px; }
.guide-card .title { display: inline-block; font-size: 20px; margin-bottom: 6px; }
.guide-card .meta { display: block; }
.design-box { margin-top: 56px; border-top: var(--line) solid var(--ink); padding-top: 28px; }
.guide-styles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 20px; }
.guide-style-card .body > .btn { margin-top: 12px; }
.photo-card .photo img { object-fit: cover; padding: 0; }
.guide-page .inspiration-grid { margin-top: 20px; }
.guide-page > section { margin-top: 56px; }
.guide-faq details { border-bottom: 1px solid var(--rule); padding: 14px 0; max-width: var(--measure); }
.guide-faq details:first-of-type { border-top: 1px solid var(--rule); }
.guide-faq summary { font-weight: 600; cursor: pointer; }
.guide-faq details p { margin: 10px 0 0; color: var(--mist); }
.signup-box { margin-top: 56px; background: var(--indigo-wash); border: var(--line) solid var(--indigo); border-radius: var(--radius); padding: 32px; }
.signup-box .actions { margin-top: 16px; }
.guide-more { margin-top: 48px; }
.guide-more h2 { font-size: 20px; }
.guide-more ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }

@media (max-width: 820px) {
  .home-block { margin-top: 56px; }
  .home-fabrics { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .hand-points { grid-template-columns: 1fr; gap: 0; }
  .signup-box { padding: 22px; }
}
@media (max-width: 560px) {
  .home-garments, .home-block .inspiration-grid, .guide-styles, .guide-page .inspiration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home-garments .card .body, .guide-style-card .body { padding: 10px; }
  .home-garments .card .title { font-size: 15px; }
}

/* ---- staff overview ("Admin") --------------------------------------- */
.staff-group { margin-bottom: 40px; }
.staff-group h2 { font-size: 20px; border-bottom: var(--line) solid var(--ink); padding-bottom: 8px; }
.staff-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 32px; }
.staff-links li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.staff-links a { font-weight: 600; display: block; }
.staff-links span { display: block; margin-top: 2px; }
.staff-foot { margin-top: 8px; }
.staff-waiting .staff-links li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.staff-waiting .staff-links a, .staff-waiting .staff-links span { display: inline-grid; margin: 0; }
.nav-admin { display: inline-flex; align-items: center; gap: 6px; }
.guide-card .photo { aspect-ratio: 16 / 9; }
.guide-card .photo img { object-fit: cover; padding: 0; }
.design-box + .staff-note, .guide-styles + .staff-note { margin-top: 16px; }
.guide-figure { margin: 8px 0 28px; }
.guide-figure img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.guide-figure a { display: block; }
.guide-figure figcaption { font-size: 14px; color: var(--mist); margin-top: 8px; max-width: var(--measure); }
.guide-text h3 + p { margin-top: 0; }

/* ---- guide: reading column + column that stays in view -------------- */
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; }
.guide-layout .guide-page { max-width: 780px; }
.guide-aside { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; display: grid; gap: 24px; padding-bottom: 8px; }
.aside-design { border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 18px; background: var(--paper); }
.aside-design .aside-title { font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.aside-design p { margin: 0 0 14px; }
.aside-design .btn { width: 100%; justify-content: center; }
.aside-design .aside-note { margin: 8px 0 0; text-align: center; }
.aside-toc { margin: 0; }
.aside-toc li { font-size: 15px; line-height: 1.35; margin: 6px 0; }
.aside-top { margin: 0; }
.guide-aside .aside-top a { color: var(--mist); }
.inline-toc { display: none; }
.guide-card-group { margin-bottom: 8px; }
.guide-card-group + .guide-card-group { margin-top: 8px; }
.guide-next { margin-top: 48px; }
.guide-next a { display: block; border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 16px 20px; text-decoration: none; color: var(--ink); }
.guide-next a:hover { border-color: var(--indigo); color: var(--indigo); }
.guide-next .small { display: block; }
.guide-next .next-title { display: block; font-weight: 700; font-size: 20px; margin-top: 2px; }
.guide-mobilebar { display: none; }

@media (max-width: 980px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .guide-aside { display: none; }
  .inline-toc { display: block; }
  .guide-mobilebar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: var(--line) solid var(--ink); }
  .guide-mobilebar .btn { flex: 1; justify-content: center; }
  .guide-mobilebar .top-link { font-size: 15px; color: var(--mist); white-space: nowrap; }
  body:has(.guide-mobilebar) .site-footer { padding-bottom: 84px; }
}
@media print { .guide-aside, .guide-mobilebar { display: none !important; } }
.home-topics { margin-top: 20px; max-width: none; }
.guide-toc .toc-sub { padding-left: 14px; font-size: 14px; }
.inline-toc .toc-sub { display: none; }
.guide-text h3 { scroll-margin-top: 16px; }
.guide-style-card .title { font-size: 17px; margin: 0; }
.guide-style-card .variant-hint { margin: 10px 0 6px; }
.variant-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.variant-hint + .variant-list { margin-top: 0; }
.variant-list .btn { width: 100%; justify-content: center; min-height: 38px; text-align: center; line-height: 1.2; padding: 6px 12px; }
.guide-style-card:hover::after { border-color: transparent; }
.design-note { margin: 16px 0 4px; }
.design-note p, .design-note ul { margin: 0 0 6px; }
.design-note p:last-child, .design-note ul:last-child { margin-bottom: 0; }
.design-note ul { padding-left: 20px; }
.guide-figure.figure-right { float: right; width: 260px; margin: 4px 0 16px 28px; }
.guide-figure.figure-right figcaption { font-size: 13px; }
.guide-text h2, .guide-text h3, .guide-text .guide-note { clear: both; }
.guide-text::after { content: ""; display: block; clear: both; }
@media (max-width: 560px) { .guide-figure.figure-right { float: none; width: 100%; max-width: 240px; margin: 8px 0 24px; } }
.type-description { max-width: var(--measure); margin: 0 0 12px; }
.guide-links { margin-top: 48px; border-top: 1px solid var(--rule); padding-top: 20px; }
.guide-links h2 { font-size: 18px; margin-bottom: 10px; }
.guide-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.tile-static { cursor: default; }
.fabric-collections { margin-top: 48px; }
.fabric-collections h2 { font-size: 20px; }
.fabric-collections ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.fabric-collections a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: var(--line) solid var(--ink); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.fabric-collections a:hover { border-color: var(--indigo); color: var(--indigo); }
.fabric-collections img { width: 40px; height: 40px; object-fit: cover; border-radius: 2px; }
.fabric-list { margin-top: 12px; }

/* ---- "Questions? Ask us" (contact app) ---- */
.ask-btn { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 18px 0 8px; background: var(--ink); color: var(--paper); border-radius: 23px;
  text-decoration: none; font-weight: 600; font-size: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.ask-btn span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper); color: var(--ink); font-weight: 700; }
.ask-btn:hover, .ask-btn:focus-visible { background: var(--indigo); }
.ask-btn:focus-visible { outline: 2px dashed var(--indigo); outline-offset: 3px; }
main { padding-bottom: 72px; }
dialog.help-panel { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(460px, 100vw); max-width: 100vw;
  border: 0; border-left: var(--line) solid var(--ink); padding: 0; background: var(--paper); color: var(--ink); }
dialog.help-panel::backdrop { background: rgba(0, 0, 0, .35); }
.help-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px 12px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.help-head h2 { margin: 0; font-size: 22px; }
.help-body { padding: 16px 22px 28px; }
.help-write-title { margin: 24px 0 8px; font-size: 18px; }
.help-search input { width: 100%; min-height: 44px; font: 400 16px var(--font); padding: 0 12px;
  border: var(--line) solid var(--ink); border-radius: var(--radius); margin-bottom: 8px; }
.help-answer { border-bottom: 1px solid var(--rule); }
.help-answer summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.help-answer p { margin: 0 0 12px; }
.help-form .field { display: block; margin: 0 0 14px; }
.help-form .field > span { display: block; font-weight: 600; margin-bottom: 4px; }
.help-form select, .help-form textarea, .help-form input[type=text], .help-form input[type=email] {
  width: 100%; font: 400 16px var(--font); padding: 10px 12px; border: var(--line) solid var(--ink);
  border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.help-form select, .help-form input[type=text], .help-form input[type=email] { min-height: 46px; padding-top: 0; padding-bottom: 0; }
.help-form :is(select, textarea, input):focus { outline: 2px dashed var(--indigo); outline-offset: 2px; }
.help-form .field-error { display: block; color: var(--alert); min-height: 0; }
.help-form .field-error:empty { display: none; }
.help-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.help-context { margin: 0 0 14px; }
.help-context-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--indigo-wash);
  border-left: 3px solid var(--indigo); border-radius: var(--radius); font-size: 15px; cursor: pointer; }
.help-context-card input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.help-pictures { margin: 0 0 16px; }
.help-pictures-title { display: block; font-weight: 600; margin-bottom: 6px; }
.help-drop { display: block; position: relative; padding: 16px; border: var(--line) dashed var(--mist);
  border-radius: var(--radius); text-align: center; cursor: pointer; font-size: 15px; }
.help-drop.over, .help-drop:hover { border-color: var(--indigo); background: var(--indigo-wash); }
.help-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.help-drop:focus-within { outline: 2px dashed var(--indigo); outline-offset: 2px; }
.help-thumbs { list-style: none; padding: 0; margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 10px; }
.help-thumbs li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
.help-thumbs img { width: 76px; height: 76px; object-fit: cover; border: 1px solid var(--rule); border-radius: var(--radius); }
.help-pictures small { display: block; margin-top: 4px; }
.help-done { padding-top: 32px; }
.help-page { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.help-page h2 { font-size: 22px; }
.help-page-form { padding: 20px 24px; border: var(--line) solid var(--ink); border-radius: var(--radius); }
.help-inline { display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 980px) {
  .help-page { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .ask-btn { right: 12px; bottom: 12px; padding-right: 14px; font-size: 15px; }
  dialog.help-panel { border-left: 0; }
  .help-head, .help-body { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 980px) { body:has(.guide-mobilebar) .ask-btn { display: none; } }

/* ---- Uniform from the guide ---- */
.uniform-pieces { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 32px; }
.uniform-piece h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; margin: 0 0 12px; }
.uniform-piece .piece-no { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: var(--line) solid var(--ink); font-size: 16px; }
.tag-required, .tag-optional { font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.tag-required { background: var(--ink); color: var(--paper); }
.tag-optional { background: var(--wash); color: var(--mist); }
.uniform-continue p { margin: 0 0 4px; }
.uniform-note { border-left-color: var(--indigo); }

/* ---- Recommended fabrics ---- */
.tile-rec { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--indigo);
  border: 1px solid var(--indigo); border-radius: 10px; padding: 0 7px; }
.fabric-rec-hint { padding: 8px 22px 0; margin: 0; color: var(--indigo); }
.rec-fabrics { margin-top: 40px; }
.rec-fabrics h2 { font-size: 22px; }
.tag-choose { background: var(--indigo-wash); color: var(--indigo); font-size: 13px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.uniform-plan { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
.uniform-plan li { display: inline-flex; gap: 6px; align-items: center; }
.card-group-intro { max-width: var(--measure); margin-bottom: 20px; }

/* ---- Fabric palettes ---- */
.fabric-grid.palette-mode { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; align-content: start; }
.palette-group { grid-column: 1 / -1; margin: 12px 0 0; font-size: 16px; color: var(--mist); font-weight: 600; }
.palette-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 0 0 10px; background: var(--paper);
  border: var(--line) solid var(--ink); border-radius: var(--radius); cursor: pointer; font: inherit; color: var(--ink); overflow: hidden; }
.palette-card:hover, .palette-card:focus-visible { border-color: var(--indigo); outline: none; box-shadow: 0 0 0 2px var(--indigo-wash); }
.palette-pic { display: block; aspect-ratio: 16 / 9; background: var(--wash); overflow: hidden; }
.palette-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.palette-strip { display: grid; grid-template-columns: repeat(6, 1fr); }
.palette-strip span { display: block; overflow: hidden; }
.palette-name { font-weight: 600; padding: 4px 10px 0; }
.palette-meta, .palette-desc { font-size: 13px; color: var(--mist); padding: 0 10px; }
.palette-card .tile-extra { margin: 0 10px; align-self: flex-start; }
.palette-open-bar { grid-column: 1 / -1; display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.palette-open-title { font-weight: 600; }
.palette-open-desc { grid-column: 1 / -1; margin: 0 0 8px; }
.scope-switch { flex-wrap: wrap; }
.palette-open-pic { grid-column: 1 / -1; margin: 0 0 8px; max-width: 720px; }
.palette-open-pic img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.fabric-grid.page-grid.palette-mode { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---- fabric comparison (Oct 2026) ---- */
.cmp-btn { display: block; width: 100%; margin-top: 6px; min-height: 32px; padding: 4px 8px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius); font: 600 13px var(--font); cursor: pointer; text-align: center; }
.cmp-btn:hover { border-color: var(--indigo); color: var(--indigo); }
.cmp-btn[aria-pressed="true"] { background: var(--indigo-wash); border-color: var(--indigo); color: var(--indigo); }
.cmp-btn.cmp-wide { display: inline-block; width: auto; margin-top: 10px; padding: 8px 14px; font-size: 15px; border-width: var(--line); border-color: var(--ink); }
.cmp-open { min-height: 44px; padding: 0 16px; font-size: 15px; }
dialog.compare-dialog { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 0; color: var(--ink); }
dialog.compare-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.compare-intro { padding: 6px 22px 0; margin: 0; }
.compare-body { padding: 14px 22px 18px; }
.compare-foot { text-align: right; }
.fabric-grid.compare-mode { display: block; }
.cmp { display: flex; flex-direction: column; gap: 0; }
.cmp-row { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--rule); }
.cmp-row:first-child { border-top: 0; padding-top: 4px; }
.cmp-info h3 { margin: 0 0 8px; font-size: 18px; }
.cmp-info dl { margin: 0; }
.cmp-info dl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 5px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.cmp-info dt { color: var(--mist); }
.cmp-info dd { margin: 0; }
.cmp-colors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 16px; align-content: start; }
.cmp-pick { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
button.cmp-pick { cursor: pointer; }
.cmp-pick .swatch { width: 100%; height: auto; aspect-ratio: 1; }
button.cmp-pick:hover .swatch, button.cmp-pick:focus-visible .swatch { outline: 2px dashed var(--indigo); outline-offset: 3px; }
.cmp-pick[aria-current="true"] .swatch { outline: 3px solid var(--indigo); outline-offset: 3px; }
.cmp-off .swatch { opacity: .45; }
.cmp-remove { font-size: 13px; margin-top: 2px; }
.wd-note { position: fixed; left: 16px; bottom: 16px; z-index: 1000; max-width: min(420px, calc(100vw - 32px)); background: var(--ink); color: var(--paper);
  padding: 12px 16px; border-radius: var(--radius); font-size: 15px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.wd-note.show { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .cmp-row { grid-template-columns: 1fr; gap: 12px; }
  .cmp-colors { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
  .compare-body, .compare-intro { padding-left: 16px; padding-right: 16px; }
}

/* ---- swap main and trim fabric (Oct 2026) ---- */
.fabric-swap-row { padding: 6px 0 6px 78px; border-top: 1px dashed var(--rule); }
.fabric-swap { font-size: 14px; }
.fabric-swap[disabled] { color: var(--mist); text-decoration: none; cursor: default; }
@media (max-width: 640px) { .fabric-swap-row { padding-left: 0; } }

/* ---- prices (Oct 2026) ---- */
.field > select { width: 100%; min-height: 46px; padding: 8px 10px; font: 400 17px var(--font); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper); }
.price-sec { margin: 0 0 36px; }
.price-sec h2 { font-size: 22px; margin-bottom: 10px; }
.price-switch { font-size: 16px; max-width: 760px; }
.price-table { max-width: 640px; }
.price-table td { vertical-align: middle; }
.price-table .cur { color: var(--mist); margin-right: 4px; }
.price-input { width: 110px; min-height: 38px; padding: 4px 8px; font: 400 16px var(--font); border: 1px solid var(--ink); border-radius: var(--radius); }
.price-input.small-input { width: 74px; }
.price-scroll { overflow-x: auto; }
.sur-table { max-width: none; min-width: 760px; }
.price-table select { min-height: 38px; font: 400 15px var(--font); border: 1px solid var(--ink); border-radius: var(--radius); padding: 2px 6px; max-width: 280px; }
.price-save { position: sticky; bottom: 0; background: var(--paper); padding: 12px 0; border-top: 1px solid var(--rule); }
.price-box { border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 14px 16px; margin: 18px 0 0; }
.price-box h3 { margin: 0 0 6px; font-size: 16px; }
.price-lines { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.price-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.price-lines li span:last-child { white-space: nowrap; }
.price-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 18px; border-top: 1px solid var(--ink); margin-top: 6px; padding-top: 6px; }
.price-note { font-size: 13px; color: var(--mist); margin: 8px 0 0; }
.price-from { font-weight: 600; color: var(--ink); }
.price-tag { display: inline-block; font-weight: 600; }
.price-summary { border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 16px 18px; margin: 24px 0; max-width: 520px; }
.price-summary h2 { font-size: 20px; margin: 0 0 8px; }
.price-sub { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 6px !important; }

/* ---- palette list: jump links and "more below" (Oct 2026) ---- */
.palette-jump { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.palette-jump-btn { border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 600 14px var(--font); padding: 6px 12px; cursor: pointer; }
.palette-jump-btn:hover, .palette-jump-btn:focus-visible { border-color: var(--indigo); color: var(--indigo); }
.palette-group { scroll-margin-top: 8px; }
.more-below { grid-column: 1 / -1; position: sticky; bottom: 0; justify-self: center; margin-top: 4px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 14px var(--font);
  padding: 8px 16px; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.more-below[hidden] { display: none; }

/* ---- fabric choice window: one scroll area (Oct 20, 2026) ----
   The window has a fixed height; head, filters and foot stay put and only the
   fabric list scrolls (no list inside a scrolling window – Firefox couldn't
   scroll that reliably). The category buttons stay visible at the top. */
dialog#fabric-dialog[open] { display: flex; flex-direction: column; height: calc(100vh - 48px); overflow: hidden; }
dialog#fabric-dialog > * { flex: 0 0 auto; }
dialog#fabric-dialog .fabric-grid { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
dialog#fabric-dialog .dialog-foot { padding-top: 10px; max-width: none; box-shadow: 0 -1px 0 var(--rule); }
.fabric-grid .palette-jump { position: sticky; top: -14px; z-index: 2; background: var(--paper); padding: 12px 0 10px; margin-top: -12px;
  border-bottom: 1px solid var(--rule); }
.palette-group { scroll-margin-top: 64px; }
/* Rows keep their full height (cards have overflow: hidden, which otherwise
   lets a height-limited grid squeeze its rows instead of scrolling). */
.fabric-grid { grid-auto-rows: max-content; }
.price-discount span:last-child { color: var(--cds-status-good, #1e6b35); }

/* ---- community (Oct 2026) ---- */
.field input[type=url], .field input[type=number], .field input[type=file], .field textarea { width: 100%; font: 400 16px var(--font); padding: 10px 12px;
  border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.field input[type=file] { padding: 8px; }
.wide-form { max-width: 640px; }
.community-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.community-head .actions { margin: 0; }
.community-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 24px; }
.community-filters select { min-height: 44px; font: 400 16px var(--font); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 0 12px; background: var(--paper); color: var(--ink); }
.community-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.community-card .photo { aspect-ratio: 1; }
.community-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.community-card .title a { color: var(--ink); text-decoration: none; }
.community-by a { color: var(--mist); }
.like-count { color: var(--indigo); font-weight: 600; }
.community-foot { margin-top: 32px; }
.community-post { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.post-pictures { display: grid; gap: 12px; }
.post-pictures img { width: 100%; height: auto; border: var(--line) solid var(--ink); border-radius: var(--radius); display: block; }
.post-author { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.post-title { font-size: 28px; margin: 0 0 6px; }
.post-caption { font-size: 17px; }
.post-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0; }
.post-actions form { margin: 0; }
.like-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 18px; border: var(--line) solid var(--ink); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: 600 16px var(--font); cursor: pointer; text-decoration: none; }
.like-btn[aria-pressed="true"] { background: var(--indigo-wash); border-color: var(--indigo); color: var(--indigo); }
.post-report, .post-delete, .post-staff { margin-top: 16px; }
.post-report input { margin: 8px 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); }
.avatar-large { width: 96px; height: 96px; }
.share-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.share-label { font-weight: 600; margin-right: 4px; }
.share-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper);
  color: var(--ink); font: 600 14px var(--font); text-decoration: none; cursor: pointer; }
.share-btn:hover { border-color: var(--indigo); color: var(--indigo); }
.share-native { background: var(--ink); color: var(--paper); }
.share-hint { flex-basis: 100%; margin: 4px 0 0; }
.post-comments { margin-top: 40px; max-width: 720px; }
.comment { border-top: 1px solid var(--rule); padding: 12px 0; }
.comment p { margin: 0 0 4px; }
.comment-pending { opacity: .7; }
.comment-report button { font-size: 13px; }
.profile-head { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.my-posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.my-posts li { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.my-posts a { display: inline-flex; gap: 12px; align-items: center; }
.my-posts img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rule); }
.invite-link { display: flex; gap: 8px; max-width: 560px; }
.invite-link input { flex: 1; min-height: 40px; padding: 0 10px; font: 400 15px var(--font); border: 1px solid var(--ink); border-radius: var(--radius); }
.share-source { border: 0; padding: 0; }
.share-source legend { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.share-source .check { margin-bottom: 6px; }
.mod-row { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--rule); }
.mod-row img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rule); }
.mod-row p { margin: 0 0 6px; }
.mod-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mod-actions input[type=text] { min-height: 36px; min-width: 260px; padding: 0 10px; border: 1px solid var(--ink); border-radius: var(--radius); font: 400 14px var(--font); }
.mod-repost { display: flex; flex-wrap: wrap; gap: 12px; }
.mod-repost a { display: grid; gap: 4px; text-decoration: none; color: var(--mist); }
.mod-repost img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); }
.school-join { margin-bottom: 8px; flex-wrap: wrap; }
.footer-social a { font-weight: 600; }
@media (max-width: 760px) { .community-post { grid-template-columns: 1fr; gap: 24px; } }
.field .field { margin-top: 16px; margin-bottom: 0; }

/* ---- Invite friends ------------------------------------------------- */
.invite-page { max-width: 820px; }
.invite-offer { border-left: 4px solid var(--indigo); background: var(--indigo-wash); padding: 14px 18px; margin-bottom: 32px; }
.invite-offer p { margin: 0 0 6px; }
.invite-offer p:last-child { margin-bottom: 0; }
.invite-hero .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 600; color: var(--indigo); margin: 0 0 6px; }
.invite-hero h1 { margin-top: 0; }
.invite-points { padding-left: 20px; margin: 0 0 16px; }
.invite-points li { margin-bottom: 6px; }
.invite-slogan { font-size: 20px; font-weight: 600; margin: 20px 0 24px; }
.invite-box { background: var(--wash); padding: 18px 20px; border-radius: var(--radius); margin-bottom: 40px; }
.invite-box .opt-title { display: block; margin-bottom: 8px; }
.invite-box .share-bar { margin-top: 14px; }
.invite-reward { border: var(--line) solid var(--ink); padding: 16px 20px; margin-bottom: 24px; border-radius: var(--radius); }
.invite-reward p { margin: 0 0 8px; }
.invite-reward .reward-amount { font-size: 22px; font-weight: 700; }
.code-chip { display: inline-block; font: 700 17px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .06em; padding: 4px 10px; border: 1px dashed var(--indigo); background: var(--paper); color: var(--indigo); user-select: all; }
.invite-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.invite-table th, .invite-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.invite-table th { font-size: 13px; color: var(--mist); font-weight: 600; }
@media (max-width: 560px) { .invite-table th:nth-child(2), .invite-table td:nth-child(2) { display: none; } }
.nav-user { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.nav-user .nav-name { font-size: 12px; color: var(--mist); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referral-note { color: var(--ok); }

/* ---- Reviews -------------------------------------------------------- */
.stars { display: inline-flex; gap: 1px; color: var(--rule); font-size: 17px; line-height: 1; vertical-align: -2px; }
.stars .star.on { color: #b8860b; }
.stars-small { font-size: 13px; }
.stars-large { font-size: 24px; }
.reviews-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
.reviews-side { position: sticky; top: 16px; }
@media (max-width: 860px) { .reviews-layout { grid-template-columns: 1fr; gap: 24px; } .reviews-side { position: static; } }
.review-summary { margin-bottom: 20px; }
.review-average { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.avg-number { font-size: 40px; font-weight: 700; line-height: 1; }
.star-bars { list-style: none; padding: 0; margin: 0 0 10px; }
.star-bars li { display: grid; grid-template-columns: 36px 1fr 32px; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 4px; }
.star-bars .bar { height: 8px; background: var(--wash); border-radius: 4px; overflow: hidden; }
.star-bars .bar span { display: block; height: 100%; background: #b8860b; }
.review-filters { display: grid; gap: 4px; margin-bottom: 16px; }
.review-filters .field span { display: block; font-size: 13px; font-weight: 600; }
.review-filters select { width: 100%; min-height: 38px; }
.review-disclosure { border-top: 1px solid var(--rule); padding-top: 12px; }
.review { border-bottom: 1px solid var(--rule); padding: 20px 0 22px; }
.review:first-child { padding-top: 0; }
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-title { font-size: 18px; margin: 0; }
.review-text { margin: 10px 0; max-width: var(--measure); }
.review-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0; font-size: 14px; }
.review-facts div { display: flex; gap: 6px; align-items: baseline; }
.review-facts dt { color: var(--mist); }
.review-facts dd { margin: 0; }
.review-photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.review-photos img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rule); }
.review-photos.edit label { display: grid; gap: 4px; font-size: 13px; }
.review-photos.edit img { width: 96px; height: 96px; }
.review-by .verified { color: var(--ok); font-weight: 600; }
.review-reply { margin-top: 12px; padding: 10px 16px; border-left: 3px solid var(--indigo); background: var(--indigo-wash); max-width: var(--measure); }
.review-reply p { margin: 0 0 4px; }
.review-garments { list-style: none; padding: 0; margin: 20px 0; }
.review-garments li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.star-field, .choice-row { border: 0; padding: 0; margin: 0 0 18px; }
.star-field legend, .choice-row legend { font-weight: 600; font-size: 15px; margin-bottom: 4px; padding: 0; }
.star-pick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick label { font-size: 30px; line-height: 1; color: var(--rule); cursor: pointer; padding: 0 2px; }
.star-field.big .star-pick label { font-size: 40px; }
.star-pick label:hover, .star-pick label:hover ~ label, .star-pick input:checked ~ label { color: #b8860b; }
.star-pick input:focus-visible + label { outline: 2px solid var(--indigo); outline-offset: 2px; }
.choice-row { display: block; }
.chip-choice { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); border-radius: 18px; padding: 6px 12px; margin: 0 6px 6px 0; cursor: pointer; font-size: 14px; }
.chip-choice:has(input:checked) { border-color: var(--indigo); background: var(--indigo-wash); }
.review-mod { display: grid; grid-template-columns: auto 1fr; gap: 16px; }
.review-mod-photos { display: grid; gap: 6px; align-content: start; }
.review-mod-photos img { width: 96px; height: 96px; object-fit: cover; }
.review-mod-form textarea { width: 100%; }
.review-mod-form .mod-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.review-mod-form .mod-actions input[type=text] { flex: 1; min-width: 220px; min-height: 36px; }
.home-review-average { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.home-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 16px 0 12px; }
@media (max-width: 860px) { .home-review-grid { grid-template-columns: 1fr; } }
.home-review { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.home-review .photo { aspect-ratio: 4 / 3; }
.home-review .photo img { width: 100%; height: 100%; object-fit: cover; }
.home-review .body { display: grid; gap: 6px; padding: 14px 16px; }
.home-review .title { font-weight: 700; }
.home-review-text { color: var(--ink); font-size: 15px; }
.field .chip-choice, .choice-row .chip-choice { display: inline-flex; width: auto; font-weight: 400; margin: 0 6px 8px 0; }
.choice-row .chip-choice input { margin: 0; }

/* ---- Friends -------------------------------------------------------- */
.friends-badge { background: var(--indigo); color: var(--paper); }
.community-card .photo { position: relative; }
.community-card .friends-badge { position: absolute; top: 8px; left: 8px; z-index: 1; }
.post-author .friends-badge { position: static; display: inline-block; margin-left: 6px; }
.connect-box { margin: 8px 0 12px; }
.connect-box .inline-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.friends-mark { color: var(--ok); font-weight: 600; }
.friend-list { list-style: none; padding: 0; margin: 8px 0; }
.friend-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.friend-list li > a, .friend-list li > span:first-child { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.friend-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.friend-actions form { margin: 0; }
.friends-page .invite-link { margin-bottom: 8px; }

/* ---- Embroidery ----------------------------------------------------- */
.embroidery-intro { margin: 4px 0 12px; font-size: 15px; }
.embroidery-intro summary { cursor: pointer; font-weight: 600; color: var(--indigo); }
.embroidery-intro p, .embroidery-intro ul { margin: 8px 0; }
.embroidery-list { list-style: none; padding: 0; margin: 8px 0; }
.embroidery-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.emb-pic { width: 56px; height: 56px; border: 1px solid var(--rule); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; background: var(--wash); font-weight: 700; color: var(--mist); }
.emb-pic img { width: 100%; height: 100%; object-fit: contain; background: var(--paper); }
.emb-text { display: grid; gap: 2px; }
.emb-actions { display: inline-flex; gap: 10px; }
.embroidery-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: var(--line) solid var(--ink); border-radius: var(--radius); }
.embroidery-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.emb-form { padding: 20px 24px 24px; }
.emb-form .dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.emb-form .dialog-head h2 { margin: 0; font-size: 22px; }
.emb-step { border: 0; padding: 0; margin: 18px 0 0; }
.emb-step legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.emb-kinds { margin-bottom: 10px; }
.emb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.emb-card { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); cursor: pointer; text-align: center; font: 600 13px var(--font); color: var(--ink); }
.emb-card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.emb-card[aria-pressed="true"] { border: 2px solid var(--indigo); background: var(--indigo-wash); }
.emb-own-preview img { max-width: 160px; max-height: 160px; border: 1px solid var(--rule); margin-top: 8px; }
.emb-thread { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; margin-top: 8px; }
.emb-size { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.emb-size input { width: 90px; min-height: 36px; }
.emb-form .field select, .emb-form .field input[type=text], .emb-form textarea { width: 100%; }
.embroidery-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin: 24px 0; }
.embroidery-page-grid figure { margin: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.embroidery-page-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; background: var(--paper); }
.embroidery-page-grid figcaption { padding: 10px 12px; font-size: 14px; }
.staff-emb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.staff-emb-grid .card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.prose { max-width: var(--measure); }
.embroidery-group [data-embroidery-add] { margin-bottom: 10px; }
.box-editor { display: grid; grid-template-columns: minmax(0, 640px) 300px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .box-editor { grid-template-columns: 1fr; } }
.box-stage { position: relative; border: 1px solid var(--rule); user-select: none; touch-action: none; cursor: crosshair; background: var(--paper); }
.box-stage > img { display: block; width: 100%; height: auto; pointer-events: none; }
.box { position: absolute; border: 2px dashed; box-sizing: border-box; cursor: move; transform-origin: center; }
.box.active { border-style: solid; }
.box-1 { border-color: #24398a; background: rgba(36, 57, 138, .08); }
.box-2 { border-color: #a1261b; background: rgba(161, 38, 27, .08); }
.box-label { position: absolute; top: -20px; left: 0; font: 600 11px var(--font); white-space: nowrap; background: var(--paper); padding: 0 4px; }
.box-handle { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: var(--ink); cursor: nwse-resize; }
.box-sample { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .55; pointer-events: none; }
.box-swatch { display: inline-block; width: 12px; height: 12px; border: 2px solid; vertical-align: -1px; }
.box-swatch.box-1 { border-color: #24398a; } .box-swatch.box-2 { border-color: #a1261b; }
.box-key { margin-bottom: 6px; }
.box-copy { display: flex; gap: 8px; align-items: center; }
.staff-table { width: 100%; border-collapse: collapse; }
.staff-table th, .staff-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rule); }
.emb-preview-note { margin: 6px auto 0; max-width: 640px; }
.art-previews { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.art-previews figure { margin: 0; width: 160px; }
.art-previews img { width: 160px; height: 160px; object-fit: contain; border: 1px solid var(--rule); display: block; }
.art-previews .checker img { background: repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.art-previews .checker.dark img { background: repeating-conic-gradient(#3a3a3a 0 25%, #555 0 50%) 0 0 / 16px 16px; }
.thread-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; }
.thread-color { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--rule); padding: 6px 0; }
.thread-color input[type=color] { width: 48px; height: 32px; border: 1px solid var(--rule); padding: 0; background: none; }
.thread-colors .actions { grid-column: 1 / -1; }
@font-face { font-family: "WD Embroidery Script"; src: url("../fonts/embroidery/kaushan-script.4648267a9594.woff2") format("woff2"), url("../fonts/embroidery/kaushan-script.cd038cf9df04.woff") format("woff"); font-display: swap; }
@font-face { font-family: "WD Embroidery Block"; src: url("../fonts/embroidery/oswald.8af401f8e32b.woff2") format("woff2"), url("../fonts/embroidery/oswald.f20b68ca863f.woff") format("woff"); font-weight: 500; font-display: swap; }
.emb-font-script { font-family: "WD Embroidery Script", cursive; font-size: 17px; }
.emb-font-block { font-family: "WD Embroidery Block", sans-serif; font-weight: 500; letter-spacing: .02em; }
.emb-fonts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.layers .emb-overlay { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; }
.lettering-table input[type=text]{width:100%;min-width:8em}
.lettering-table .preset-text{font-size:1.25rem}
/* Lettering library and direction (designer embroidery dialog) */
.emb-font-chinese { font-family: "Kaiti TC", "STKaiti", "KaiTi", "BiauKai", serif; font-size: 16px; }
.emb-library { margin: 4px 0 10px; }
.emb-library summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.emb-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px;
  max-height: 260px; overflow-y: auto; padding: 6px 2px; }
.emb-preset { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px;
  border: 1px solid var(--line, #ddd); border-radius: 10px; background: var(--card, #fff); cursor: pointer;
  font: inherit; color: inherit; text-align: center; }
.emb-preset:hover { border-color: var(--accent, #24398a); }
.emb-preset[aria-pressed="true"] { border-color: var(--accent, #24398a); box-shadow: 0 0 0 2px var(--accent, #24398a) inset; }
.emb-preset-text { font-family: "Kaiti TC", "STKaiti", "KaiTi", "BiauKai", serif; font-size: 26px; line-height: 1.2; }
.emb-preset-pinyin { font-size: 12px; color: var(--muted, #666); }
.emb-preset-meaning { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.emb-meaning { margin: 4px 0 6px; color: var(--muted, #555); }
.emb-directions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.emb-dir-icon { display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px;
  background: no-repeat center / contain; }
.emb-dir-horizontal { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2 9h13M11 5l4 4-4 4' fill='none' stroke='%2324398a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.emb-dir-vertical { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 2v13M5 11l4 4 4-4' fill='none' stroke='%2324398a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.emb-dir-sideways { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 3c7 0 10 3 10 10M10 10l4 4 4-4' fill='none' stroke='%2324398a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Sash ends and pants legs: arrangement at the end (lower edge of the sketch = the end) */
.emb-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 4px 0 6px; }
.emb-layout { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line, #ddd);
  border-radius: 10px; cursor: pointer; }
.emb-layout:has(input:checked) { border-color: var(--accent, #24398a); box-shadow: 0 0 0 1px var(--accent, #24398a) inset; }
.emb-layout input { margin: 0; }
.emb-layout > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.emb-layout-pic { flex: none; width: 22px; height: 40px; background: no-repeat center / contain; }
.emb-part-title { font-weight: 700; margin: 10px 0 4px; }
.emb-layout-logo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cpath d='M5 1h14v42H5z' fill='none' stroke='%239aa3b8' stroke-width='1.2'/%3E%3Ccircle cx='12' cy='35' r='4.5' fill='%23c9a227'/%3E%3C/svg%3E"); }
.emb-layout-text { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cpath d='M5 1h14v42H5z' fill='none' stroke='%239aa3b8' stroke-width='1.2'/%3E%3Crect x='9' y='28' width='6' height='3' rx='1' fill='%2324398a'/%3E%3Crect x='9' y='33' width='6' height='3' rx='1' fill='%2324398a'/%3E%3Crect x='9' y='38' width='6' height='3' rx='1' fill='%2324398a'/%3E%3C/svg%3E"); }
.emb-layout-logo_text { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cpath d='M5 1h14v42H5z' fill='none' stroke='%239aa3b8' stroke-width='1.2'/%3E%3Ccircle cx='12' cy='36' r='4.5' fill='%23c9a227'/%3E%3Crect x='9' y='14' width='6' height='3' rx='1' fill='%2324398a'/%3E%3Crect x='9' y='19' width='6' height='3' rx='1' fill='%2324398a'/%3E%3Crect x='9' y='24' width='6' height='3' rx='1' fill='%2324398a'/%3E%3C/svg%3E"); }
.emb-layout-text_logo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44'%3E%3Cpath d='M5 1h14v42H5z' fill='none' stroke='%239aa3b8' stroke-width='1.2'/%3E%3Crect x='9' y='28' width='6' height='3' rx='1' fill='%2324398a'/%3E%3Crect x='9' y='33' width='6' height='3' rx='1' fill='%2324398a'/%3E%3Crect x='9' y='38' width='6' height='3' rx='1' fill='%2324398a'/%3E%3Ccircle cx='12' cy='19' r='4.5' fill='%23c9a227'/%3E%3C/svg%3E"); }
/* Customers' own embroidery pictures */
.own-thumb { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--line, #ddd); border-radius: 6px; }
.own-compare { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; }
.own-compare figure { margin: 0; width: 220px; }
.own-compare img { width: 220px; height: 220px; object-fit: contain; display: block; border: 1px solid var(--line, #ddd); border-radius: 8px; }
.own-compare figcaption { font-size: 13px; color: var(--muted, #666); margin-top: 4px; }
.checker img, .checker > span { background-color: #fff; background-image: linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%), linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.emb-own-result { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.emb-own-result figure { margin: 0; }
.emb-own-result img { width: 132px; height: 132px; object-fit: contain; display: block; border: 1px solid var(--line, #ddd); border-radius: 8px; }
.emb-own-result figcaption { font-size: 12.5px; color: var(--muted, #666); margin-top: 3px; text-align: center; }
.emb-own-tips { margin: 4px 0 8px; padding-left: 18px; }
.emb-own-tips li { margin: 1px 0; }
.emb-preview-note .emb-own-rendered { display: block; }
.emb-preview-note span + .emb-own-rendered { margin-top: 4px; }
.emb-inside { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 26px; }
.emb-rights { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 10px; font-size: 14px; line-height: 1.4; }
.emb-rights input { margin-top: 3px; flex: none; }
/* Placement box editor: copying to other styles; overlapping boxes */
.box-copy-to { margin-top: 18px; border-top: 1px solid var(--line, #ddd); padding-top: 10px; }
.box-copy-to summary { cursor: pointer; font-weight: 600; }
.box-copy-to .copy-group { border: 0; padding: 0; margin: 10px 0 0; max-height: 220px; overflow-y: auto; }
.box-copy-to .copy-group legend { font-weight: 600; font-size: 14px; }
.box-copy-to .copy-group label { display: block; margin: 3px 0; }
.box-stage .box.active { z-index: 50 !important; }
.box-stage .box:not(.active) .box-sample { opacity: .35; }
/* Front / Back drawing (embroidery preview, phase 2) */
.view-switch.side-switch { margin-left: 10px; }
.view-switch.side-switch[hidden] { display: none; }
.box-views { margin-bottom: 14px; }
.box-views .view-btn { text-decoration: none; display: inline-block; }
.piece-thumb { position: relative; }
.piece-thumb .back-pic { position: absolute; right: -4px; bottom: -4px; width: 42%; height: auto; border: 1px solid var(--rule, #ccc); border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
/* Placement box size in cm (keeps the sample's proportions) */
.box-size { display: flex; align-items: flex-end; gap: 8px; margin: 4px 0 2px; }
.box-size label { display: flex; flex-direction: column; font-size: 14px; }
.box-size input { width: 6.5em; }
/* Embroideries placed freely on the drawing (Nov 3, 2026) */
.stage-drawing { position: relative; }
.emb-free-zones { position: absolute; pointer-events: none; z-index: 4; image-rendering: pixelated; }
.emb-free-frame { position: absolute; z-index: 5; box-sizing: border-box; border: 2px solid #1f8a4c; cursor: move;
  touch-action: none; box-shadow: 0 0 0 1px rgba(255,255,255,.8); }
.emb-free-frame.bad { border-color: #c62828; }
.emb-free-frame > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.emb-free-frame > canvas.emb-free-own { border: 2px dashed #24398a; box-sizing: border-box; }
.emb-free-size { position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; background: #1f8a4c;
  border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; }
.emb-free-rot { position: absolute; left: 50%; top: -30px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: #fff; border: 2px solid #1f8a4c; cursor: grab; }
.emb-free-rot::after { content: ""; position: absolute; left: 6px; top: 16px; width: 2px; height: 12px; background: #1f8a4c; }
.emb-free-frame.bad .emb-free-size { background: #c62828; }
.emb-free-frame.bad .emb-free-rot, .emb-free-frame.bad .emb-free-rot::after { border-color: #c62828; }
.emb-free-frame.bad .emb-free-rot::after { background: #c62828; }
.emb-free-panel { border: 1px solid var(--rule, #ccc); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: var(--paper, #fff); }
.emb-free-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.emb-free-fields input { width: 5.5em; }
.emb-free-msg { margin: 6px 0 0; }
.emb-size-note { margin: 4px 0 0; flex-basis: 100%; }
/* colors per area (Nov 4, 2026) */
.area-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); vertical-align: middle; }
.area-numbered img { max-width: 360px; height: auto; }
.emb-areas { display: grid; gap: 8px; margin-top: 8px; }
.emb-areas-pic { position: relative; max-width: 240px; }
.emb-areas-pic canvas { width: 100%; height: auto; display: block; cursor: pointer; border-radius: 6px; background: #f3f1ec; }
.emb-area-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emb-area-row.active { outline: 2px solid var(--accent, #24398a); outline-offset: 3px; border-radius: 6px; }
.emb-area-row .emb-area-name { min-width: 110px; }
.emb-area-row input[type="text"] { max-width: 180px; }
.emb-chars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.emb-char { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.emb-char b { font-size: 1.2rem; line-height: 1.2; }
.emb-char select { max-width: 110px; }
/* sleeve line in the placement editor (Nov 4, 2026) */
.box-stage .sleeve-line-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.sleeve-line-svg line { stroke: #1f4fa8; stroke-width: 4; stroke-dasharray: 10 6; vector-effect: non-scaling-stroke; }
.sleeve-line-svg circle { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sleeve-line-svg circle.shoulder { fill: #c0192b; }
.sleeve-line-svg circle.armpit { fill: #1f4fa8; }
.box-stage.marking { cursor: copy; }
.sleeve-line-svg circle.cuff { fill: #1f7a3a; }
/* sleeve boxes (Nov 4, 2026) */
.box-3 { border-color: #1f7a3a; background: rgba(31, 122, 58, .08); }
.box-4 { border-color: #8a5a00; background: rgba(138, 90, 0, .08); }
.box-5 { border-color: #6a2c91; background: rgba(106, 44, 145, .08); }
.box-swatch.box-3 { border-color: #1f7a3a; } .box-swatch.box-4 { border-color: #8a5a00; } .box-swatch.box-5 { border-color: #6a2c91; }