/* Graphite Studio: interface colours are separate from garment and artwork colours. */
:root {
  --ink: #222326;
  --muted: #686a70;
  --green: #222326;
  --green-dark: #090a0b;
  --mint: #eeeeec;
  --paper: #fafaf9;
  --stage: #f2f2f0;
  --line: #e4e4e3;
  --focus: #466b91;
  --workspace-gutter: 28px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", sans-serif;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}
body { background: var(--paper); letter-spacing: .005em; }
h1, h2, h3 { letter-spacing: -.025em; }
h1 span, h2 span { color: inherit; }
button, a, input, select, textarea { accent-color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible,
.enquiry-dialog :is(button, input, a):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
button svg, a svg, label svg { stroke-width: 1.55; }
.topbar {
  height: 72px; padding-inline: 24px; gap: 24px;
  background: #fafaf9f5; border-color: var(--line);
}
.brand { width: 276px; min-height: 44px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.brand-logo { display: block; width: 150px; height: 30px; object-fit: contain; }
.brand b { font-size: 15px; letter-spacing: .1em; font-weight: 650; }
.brand small { font-size: 10px; letter-spacing: .08em; margin-top: 0; }
.document-title { gap: 20px; }
.document-title input { font-size: 13px; font-weight: 500; padding: 9px 10px; }
.document-title input:hover, .document-title input:focus { background: #eeeeec; }
.save-status { font-size: 11px; color: var(--muted); }
.save-status i { background: #858980; width: 4px; height: 4px; }
.icon-button { border-radius: 7px; }
.top-actions { gap: 6px; }
.top-actions .primary { min-height: 40px; padding-inline: 22px; margin-left: 12px; }
.button { border-radius: 7px; background: #fff; font-weight: 550; }
.button:hover { border-color: #b9babe; background: #f3f3f1; }
.button.primary, .enquiry-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.button.primary:hover, .enquiry-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.button:disabled { opacity: .45; }
.studio { height: calc(100dvh - 72px); grid-template-columns: 72px 320px minmax(0, 1fr); }
.tool-rail { padding: 16px 7px 12px; gap: 6px; background: var(--paper); }
.tool { width: 56px; height: 64px; border-radius: 8px; color: #74767b; gap: 7px; font-size: 11px; }
.tool > svg { width: 21px; height: 21px; }
.tool:hover { background: #f0f0ee; color: var(--ink); }
.tool.active { background: #eaeae8; color: var(--ink); font-weight: 600; }
.tool.active::before { display: none; }
.tool em { background: var(--ink); border-radius: 4px; }
.help-link { color: var(--muted); }
.panel-shell { background: var(--paper); scrollbar-color: #d6d6d3 transparent; }
.panel { padding: 28px 24px; }
.panel-heading { margin-bottom: 24px; }
.panel-heading .eyebrow, .details-heading .eyebrow { display: none; }
.panel-heading h1, .panel-heading h2, .details-heading h2 {
  font-size: 23px; font-weight: 600; line-height: 1.45; letter-spacing: -.025em;
}
.panel-heading > p:last-child { font-size: 12px; line-height: 1.8; margin-top: 8px; }
.product-details .details-heading { margin-bottom: 26px; }
.detail-current { gap: 14px; align-items: center; }
.detail-current > img { border-radius: 8px; background: #f0f0ee; width: 72px; height: 82px; }
.detail-current h3 { font-weight: 600; font-size: 15px; line-height: 1.55; }
.detail-current small { color: var(--muted); font-size: 10px; }
.detail-current a, .detail-fabric-change { color: #56585f; }
.detail-change { margin-top: 20px; min-height: 42px; font-size: 12px; }
.detail-section { margin-top: 26px; padding-top: 22px; }
.detail-section h3, .section-label h3 { font-weight: 550; }
.detail-note, .panel-note p { color: var(--muted); }
.panel-note { margin-top: 28px; padding-top: 20px; }
.panel-note svg { stroke: #6c6e74; }
.detail-colour-targets { background: #eeeeec; padding: 4px; border-radius: 8px; }
.detail-colour-targets button { color: #686a70; border-radius: 5px; font-size: 13px; }
.detail-colour-targets button[aria-pressed=true] { color: var(--ink); border-color: #dededb; font-weight: 600; }
.detail-colour-targets button:focus-visible, .custom-part :focus-visible, .catalog-fabric select:focus-visible { outline-color: var(--focus); }
.palette-tools select { border-color: var(--line); border-radius: 6px; }
.palette-expand { color: var(--ink); border-radius: 6px; }
.colour-rail-arrow:hover:not(:disabled) { background: #eaeae8; }
.product-details .colour-rail-track > .detail-swatch[aria-pressed=true] { outline-color: #74767b; }
.catalog-detail .colour-rail-track > .catalog-swatch[aria-pressed=true] { border-color: #74767b; }
.product-details .colour-rail-track.palette-expanded > .detail-swatch[aria-pressed=true],
.catalog-detail .colour-rail-track.palette-expanded > .catalog-swatch[aria-pressed=true],
.product-details .colour-rail-track.palette-grouped > .detail-swatch[aria-pressed=true],
.catalog-detail .colour-rail-track.palette-grouped > .catalog-swatch[aria-pressed=true] { border-color: #b7b8b9; }
.workspace { background: var(--stage); padding: 24px var(--workspace-gutter) 16px; }
.workspace-kicker { display: none; }
.workspace-heading { min-height: 28px; }
.workspace-heading h2 { margin: 0; font-size: 14px; letter-spacing: -.015em; font-weight: 550; }
.workspace-heading h2 span { color: var(--muted); font-size: 12px; }
.product-title-button { font-weight: 550; }
.object-toolbar {
  background: #ffffffdd; border: 1px solid #e6e6e3; border-radius: 9px;
  height: 40px; max-width: 510px; margin: 14px auto 4px;
}
.object-actions button:hover:not(:disabled) { background: #eeeeec; color: var(--ink); }
.object-toolbar-label { color: #77797e; font-size: 11px; }
.multi-select-toggle { color: #5d5f65; border-color: #dededb; border-radius: 7px; top: 22px; }
.multi-select-toggle[aria-pressed=true] { color: #fff; background: var(--ink); }
.workspace-bottom { min-height: 66px; }
.side-switch { gap: 6px; padding: 4px; border: 1px solid #e0e0dd; border-radius: 12px; background: #eaeae7; }
.side-switch button { height: 54px; width: 114px; background: transparent; border-color: transparent; border-radius: 8px; padding: 5px 10px; }
.side-switch button.active { background: #fff; border-color: #d5d5d1; box-shadow: 0 1px 2px #22232608; }
.side-switch img { height: 37px; width: 37px; }
.side-switch span { font-weight: 550; }
.side-switch small { color: #73757a; font-size: 9px; }
.side-switch button.active i { background: #62646a; }
.workspace .zoom-control { border-color: #e1e1de; border-radius: 8px; background: #ffffffdb; }
.zoom-control button { font-family: var(--font); }
.zoom-control button:hover { background: #eeeeec; }
.canvas-note { margin-top: 8px; color: #77797e; }
.current-product-bar {
  border-color: #e1e1df; background: #fafaf9;
  margin: 16px calc(-1 * var(--workspace-gutter)) -16px;
  padding: 10px var(--workspace-gutter); min-height: 70px;
}
.current-product-bar > img { background: #f0f0ee; border-radius: 6px; }
.current-product-copy > strong { font-size: 12px; font-weight: 550; }
.current-product-copy small { font-size: 10px; }
.current-product-actions button { color: #55575d; border-color: var(--line); border-radius: 6px; font-weight: 500; }
.current-product-actions button:first-child { border-color: #cecfcb; font-weight: 550; }
.current-product-actions button:hover { background: #ededeb; border-color: #b7b8b8; }
.template-collection-label { font-weight: 550; margin-bottom: 18px; }
.template-search { margin-top: 18px; color: #5d5f65; font-weight: 500; }
.template-search input { background: #fff; border-color: #ddddda; border-radius: 8px; font-size: 13px; min-height: 44px; }
.template-search input::placeholder { color: #818389; }
.template-category-filters { gap: 6px; }
.template-category { background: transparent; border-color: #dededb; color: #5e6066; border-radius: 20px; padding: 8px 10px; min-height: 34px; }
.template-category[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.template-category small { font-variant-numeric: tabular-nums; }
.template-results-count { margin: 18px 0 12px; font-size: 11px; }
.template-apply-status { color: #50565c; background: #eaeae7; padding: 10px 12px; border-radius: 7px; font-size: 11px; }
.design-template-grid { gap: 22px 14px; }
.design-template-card { background: transparent; border: 0; border-radius: 0; padding: 0 0 4px; box-shadow: none; }
.design-template-card:hover { border: 0; box-shadow: none; }
.design-template-visual { height: auto; aspect-ratio: 1; margin-bottom: 12px; border: 1px solid #dededb; border-radius: 9px; }
.design-template-card:hover .design-template-visual { border-color: #8f9195; }
.design-template-card strong, .design-template-card small { margin-inline: 0; }
.design-template-card strong { font-size: 11px; font-weight: 600; line-height: 1.55; letter-spacing: .005em; }
.design-template-card small { font-size: 10px; line-height: 1.65; margin-top: 4px; }
.design-template-card .template-card-category { color: #6b6d72; font-size: 9px; }
.template-card-tag { background: #ffffffed; color: #51535a; font-size: 8px; font-weight: 500; border-radius: 4px; }
.current-color { border-color: var(--line); background: #fff; border-radius: 9px; }
.color-note > span { background: #eeeeec; color: var(--ink); }
.upload-zone { background: #f0f0ee; border: 1px dashed #b7b8b9; border-radius: 9px; padding: 30px 12px; }
.upload-zone:hover, .upload-zone.dragover { border-color: #67696f; background: #eaeae7; }
.upload-zone > svg { color: #696b70; }
.upload-zone strong { font-weight: 550; }
.add-text { background: #eeeeec; border-color: #d9d9d5; color: var(--ink); font-weight: 550; }
.field { font-weight: 500; color: #55575e; }
.field :is(input, textarea, select) { background: #fff; border-color: #dcdcd9; border-radius: 7px; color: var(--ink); }
#text-bold[aria-pressed=true] { background: #eaeae7; color: var(--ink); border-color: #c9cacc; }
.layer-row { border-color: #e2e2df; border-radius: 8px; background: #fff; padding: 12px; }
.layer-row.active { border-color: #aaaeb2; background: #eeeeec; }
.layer-row .layer-thumb { background: #e5e5e1; }
.layer-row strong { font-weight: 550; }
.print-positions button[aria-pressed=true], #apply-print-position { border-color: #c9cacc; }
.artwork-size-panel { background: var(--paper); border-color: var(--line); }
.size-inputs label span { border-color: #cfd0ce; }
.artwork-quality:not([data-state=low]) { border-color: #d8d8d4; color: #50545a; background: #f1f1ee; }
dialog { border-radius: 20px; background: var(--paper); box-shadow: 0 24px 80px #15161b26; }
dialog::backdrop, .product-dialog::backdrop, .enquiry-dialog::backdrop { background: #191b205c; backdrop-filter: blur(7px); }
.product-dialog { border-color: #dddeda; border-radius: 18px; background: var(--paper); }
.catalog-head { padding: 24px 28px; }
.catalog-head .eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.catalog-head h2 { font-size: 25px; font-weight: 600; }
.catalog-head .icon-button { border-color: #dededa; background: #f0f0ee; width: 40px; height: 40px; }
.catalog-navigation { background: #f2f2f0; }
.catalog-navigation > p { letter-spacing: 0; font-size: 11px; }
.catalog-category { border-radius: 7px; color: #686a70; }
.catalog-category:hover { background: #e8e8e5; }
.catalog-category[aria-pressed=true] { box-shadow: none; background: #e3e3e0; color: var(--ink); font-weight: 600; }
.catalog-search { border-color: #d9dad6; background: #fff; }
.catalog-search input::placeholder { color: #787a80; }
.catalog-search:focus-within { outline-color: var(--focus); }
.catalog-grid { gap: 26px 18px; }
.catalog-card { border: 0; border-radius: 0; background: transparent; }
.catalog-card:hover { box-shadow: none; border: 0; }
.catalog-card-visual { background: #eeefeb; border: 1px solid #e2e2de; border-radius: 9px; }
.catalog-card:hover .catalog-card-visual { border-color: #a9abae; }
.catalog-card-visual > img { mix-blend-mode: normal; }
.catalog-kind, .catalog-kind.catalog-popular { color: #53565b; background: #ffffffeb; border-radius: 4px; font-size: 10px; font-weight: 500; }
.catalog-current { background: var(--ink); }
.catalog-card-info { padding: 14px 2px 4px; }
.catalog-card-info > strong { font-size: 14px; font-weight: 600; line-height: 1.55; }
.catalog-card-summary { font-size: 11px; }
.catalog-sku { letter-spacing: .02em; }
.catalog-footer { background: var(--paper); border-color: var(--line); }
.catalog-fabric select, .catalog-generic-colour input { border-color: #d1d2ce; }
.enquiry-head small, .enquiry-heading p, .enquiry-muted, .enquiry-product small,
.enquiry-field > span, .enquiry-summary dt { color: var(--muted); }
.enquiry-field input { border-color: #cccfc9; border-radius: 7px; }
.enquiry-field input[aria-invalid=true] { border-color: var(--red); }
.enquiry-field input::placeholder { color: #787b80; }
.enquiry-footer { background: var(--paper); }
.enquiry-primary { font-weight: 550; border-radius: 7px; }
.enquiry-reference, .enquiry-note { background: #eeeeeb; }
.mobile-text-dialog input { border-color: #cccfc9; }
.file-action > svg { color: #62656a; }
.share-result { background: #eeeeeb; }
.share-result input { border-color: #d1d3cc; }
.spinner { border-color: #d7d8d2; border-top-color: var(--ink); }
@media (min-width: 1600px) {
  :root { --workspace-gutter: 44px; }
  .studio { grid-template-columns: 76px 344px minmax(0, 1fr); }
  .brand { width: 304px; }
  .panel { padding-inline: 28px; }
  .design-template-visual { height: auto; }
  .artwork-size-panel { left: 104px; width: 288px; }
}
@media (min-width: 1151px) and (max-width: 1599px) {
  .artwork-size-panel { left: 96px; width: 272px; }
}
@media (min-width: 701px) {
  .workspace .object-toolbar { visibility: hidden; }
  .has-artwork-selection .workspace .object-toolbar { visibility: visible; }
}
@media (min-width: 701px) and (max-width: 1150px) {
  :root { --workspace-gutter: 20px; }
  .studio { grid-template-columns: 64px 280px minmax(0, 1fr); }
  .brand { width: 238px; }
  .topbar { padding-inline: 16px; gap: 16px; }
  .panel { padding: 24px 20px; }
  .tool { width: 50px; }
  .side-switch button { width: 88px; padding-inline: 5px; }
  .side-switch img { width: 29px; height: 29px; }
  .side-switch { gap: 3px; padding: 3px; }
  .artwork-size-panel { left: 84px; width: 240px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .studio { grid-template-columns: 60px 244px minmax(0, 1fr); }
  .brand { width: 210px; }
  .panel { padding-inline: 16px; }
  .panel-heading h2, .details-heading h2 { font-size: 21px; }
  .document-title input { width: 90px; }
  .tool { width: 46px; }
  .side-switch button { width: 69px; padding-inline: 4px; }
  .side-switch img { display: none; }
  .side-switch small { font-size: 8px; }
  .top-actions .primary { padding-inline: 12px; margin-left: 4px; }
  .artwork-size-panel { left: 76px; width: 212px; }
}
@media (max-width: 700px) {
  .topbar { height: 56px; min-height: 56px; padding-inline: 12px; gap: 8px; }
  .topbar .brand { width: auto; min-width: 0; gap: 0; }
  .topbar .brand-logo { width: 120px; height: 24px; }
  .topbar .brand b { font-size: 12px; letter-spacing: .07em; }
  .topbar .top-actions { gap: 0; }
  .top-actions .primary { min-height: 40px; padding-inline: 12px; margin-left: 4px; }
  .top-actions .icon-button { width: 36px; height: 44px; }
  .tool-rail { background: #fafaf9f7; border-color: var(--line); padding: 3px 4px; gap: 0; }
  .tool { height: 56px; width: calc(100% / 6); max-width: 62px; font-size: 10px; gap: 5px; border-radius: 9px; }
  .tool > svg { width: 22px; height: 22px; }
  .tool.active { background: #eaeae7; color: var(--ink); }
  .studio .panel-shell:not(.collapsed), .mobile-tool-header { background: var(--paper); }
  .mobile-tool-header { padding-inline: 20px; min-height: 58px; }
  .mobile-tool-header strong { font-size: 18px; font-weight: 600; }
  .mobile-tool-header button { font-size: 13px; color: #53565b; }
  .panel-shell:has(.mobile-tool-header) .panel-heading h2 { display: none; }
  .panel[data-panel=templates] .panel-heading { display: none; }
  .panel-heading:has(> p:last-child) { margin-bottom: 18px; }
  .panel-heading > p:last-child { font-size: 13px; margin: 0; }
  .studio .panel-shell > .panel { padding: 20px 20px 28px !important; }
  .studio .panel-shell.mobile-colour-sheet > .panel { padding: 0 !important; }
  .workspace-heading { min-height: 44px; }
  .workspace-heading h2 { font-size: 13px; }
  .workspace-bottom { min-height: 48px; height: 48px; }
  .side-switch { padding: 3px; gap: 3px; border-radius: 10px; background: #e8e8e4; border-color: #e0e0dc; }
  .side-switch button { height: 38px; width: calc((100% - 9px) / 4); padding: 0; border-radius: 7px; }
  .side-switch button.active { background: #fff; border-color: #d3d4ce; }
  .side-switch span { font-size: 12px; }
  .workspace .zoom-control { background: #fffffff0; }
  .workspace .zoom-control button { min-width: 36px; }
  .multi-select-toggle { top: 48px; }
  .has-artwork-selection .multi-select-toggle { top: 94px; }
  .mobile-positions-toggle { color: #55585d; background: #fffffff0; }
  .studio .panel-shell.mobile-colour-sheet:not(.collapsed) { border-radius: 18px 18px 0 0; border-top: 1px solid #d8d9d3; box-shadow: 0 -8px 28px #2223260a; }
  .palette-tools select { background: #fff; }
  .template-search { margin-top: 0; }
  .template-search input { font-size: 16px; min-height: 48px; }
  .template-category { min-height: 44px; font-size: 12px; }
  .template-results-count { margin-top: 16px; }
  .panel .design-template-grid { gap: 22px 14px; }
  .design-template-visual { height: auto; aspect-ratio: 1; }
  .design-template-card > strong { font-size: 12px !important; line-height: 1.55; }
  .design-template-card > small { font-size: 11px !important; line-height: 1.6; }
  .template-card-tag { font-size: 9px !important; }
  .layer-row strong { font-size: 14px; }
  .catalog-head { padding: 18px 20px; }
  .catalog-head h2 { font-size: 23px; }
  .catalog-card-info > strong { font-size: 14px; }
  .product-dialog, .enquiry-dialog { border-radius: 0; }
  .enquiry-heading h2 { font-size: 25px; font-weight: 600; }
  .panel .field { font-size: 13px; }
  .panel .field :is(input, textarea, select) { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tool, .button, .template-category, .side-switch button { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
  .design-template-visual, .catalog-card-visual { transition: border-color 140ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .spinner { animation-duration: 2s; }
}

@media (max-width: 360px) {
  .topbar .brand-logo { width: 100px; height: 20px; }
}