/* V6: product-first overview, spacious editing, focused mobile positioning. */
.preview-pane { padding: 12px 26px 10px; }
.canvas-toolbar { gap: 12px; }
.preview-controls, .zoom-tools { display: flex; align-items: center; gap: 10px; }
.preview-controls { gap: 14px; }
.history-tools { border-right: 1px solid var(--line); padding-right: 10px; }
.zoom-tools > button { min-height: 40px; padding: 7px 12px; font-size: 13px; font-weight: 400; }
.zoom-tools > button[aria-pressed=true] { background: #eef0e9; border-color: #88927f; color: #253026; font-weight: 700; }
.zoom-stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: white; }
.zoom-stepper button { min-height: 38px; width: 36px; padding: 7px; border: 0; background: none; }
.zoom-stepper .icon { width: 18px; height: 18px; }
.zoom-stepper output { width: 47px; font-size: 12px; text-align: center; color: #51594d; }
.mobile-zoom { display: none; }
.preview-body { position: relative; display: block; padding: 0; margin-top: 8px; }
.canvas-holder { position: absolute; inset: 0 104px 0 0; container-type: normal; display: block; }
.garment-canvas { width: 100%; height: 100%; aspect-ratio: auto; background: white; touch-action: none; }
.canvas-content { inset: auto; transform-origin: 0 0; }
.garment-canvas.can-pan { cursor: grab; }
.garment-canvas.panning { cursor: grabbing; }
.view-tag { z-index: 2; top: 4px; left: 7px; padding: 2px 5px; background: #ffffffeb; border-radius: 3px; }
.preview-caption { min-height: 28px; margin-top: 4px; font-size: 12px; }
.product-bar { padding: 15px 23px 11px; }
.product-topline > strong { font-size: 17px; }
.product-bar > span { margin-top: 4px; }
.product-bottomline { margin-top: 4px; }
.tool-nav { height: 70px; }
.sheet-heading { padding: 20px 23px 16px; }
.sheet-heading h1 { font-size: 25px; margin-top: 5px; letter-spacing: -.5px; }
.panel-body { padding-inline: 23px; }
.muted { margin-bottom: 18px; line-height: 1.55; }
.start-options button { min-height: 77px; }
.quick-note { margin-top: 12px; padding-top: 15px; }
.desktop-help { padding-block: 8px; }
.footer-guidance strong { font-size: 16px; }
.footer-guidance > span { font-size: 13px; }

@media (min-width: 901px) {
  .side-switcher { position: absolute; left: var(--rail-left, calc(100% - 88px)); top: 50%; transform: translateY(-50%); width: 82px; gap: 11px; }
  .side-switcher button { min-height: 103px; padding: 8px 6px; }
  .side-switcher img { width: 42px; height: 46px; }
  .side-switcher small { font-size: 10px; }
  .sheet-heading .eyebrow { font-size: 10px; }
}
@media (min-width: 1700px) {
  .preview-pane { padding-inline: 34px; }
  .product-bar { padding: 17px 27px 12px; }
  .sheet-heading { padding: 22px 27px 18px; }
  .sheet-heading h1 { font-size: 27px; }
  .panel-body { padding-inline: 27px; }
  .tool-nav { height: 72px; }
}
@media (min-width: 901px) and (max-width: 1190px) {
  .preview-pane { padding-inline: 16px; }
  .canvas-toolbar { flex-wrap: wrap; }
  .preview-controls { margin-left: auto; }
  .preview-controls { gap: 6px; }
  .history-tools { padding-right: 5px; gap: 0; }
  .history-tools button { width: 34px; padding: 6px; }
  .zoom-tools { gap: 5px; }
  .zoom-tools > button { padding-inline: 7px; font-size: 12px; }
  .canvas-holder { right: 90px; }
  .side-switcher { width: 72px; }
  .side-switcher button { min-height: 95px; }
}
@media (max-width: 900px) {
  .preview-pane { padding: 8px 14px 3px; }
  .canvas-toolbar { position: relative; gap: 5px; z-index: 4; }
  .preview-controls { gap: 2px; }
  .history-tools { padding-right: 0; border: 0; }
  .history-tools .icon-button { width: 30px; padding: 5px; }
  .view-toggle button { padding-inline: 7px; }
  .mobile-zoom { display: inline-flex; min-height: 40px; padding: 6px 4px; gap: 3px; font-size: 11px; font-weight: 400; border-color: transparent; }
  .mobile-zoom .icon { width: 17px; height: 17px; }
  .mobile-zoom[aria-expanded=true] { background: #eef0e9; border-color: #88927f; }
  .zoom-tools { display: none; position: absolute; top: 47px; left: 0; right: 0; justify-content: center; gap: 6px; padding: 8px; border: 1px solid #c5cbbf; border-radius: 8px; background: #fff; box-shadow: 0 4px 15px #0002; }
  .zoom-tools-open .zoom-tools { display: flex; }
  .zoom-tools > button { font-size: 12px; padding-inline: 8px; min-height: 40px; }
  .zoom-stepper output { width: 39px; font-size: 11px; }
  .zoom-stepper button { width: 31px; min-height: 38px; padding: 6px; }
  .preview-body { margin-top: 1px; padding: 0; }
  .canvas-holder { inset: 0 0 47px; }
  .side-switcher { left: 50%; top: auto; bottom: 0; transform: translateX(-50%); width: auto; }
  .view-tag { top: 3px; font-size: 9px; }
  .tool-nav { height: 56px; }
  .sheet-heading { padding: 11px 16px 9px; }
  .sheet-heading h1 { font-size: 19px; margin: 0; }
  .panel-body { padding: 0 16px 14px; }
  .muted { font-size: 14px; margin-bottom: 12px; }
  .start-options button { min-height: 62px; }
  .preview-caption { margin-top: 0; }
  body.preview-clean .preview-caption { min-height: 40px; }
  body.keyboard-open .zoom-tools { display: none; }
}
@media (max-width: 900px) and (max-height: 690px) {
  .preview-pane { min-height: 115px; padding-top: 4px; }
  .canvas-holder { bottom: 41px; }
  .mobile-zoom { min-height: 34px; }
  .zoom-tools { top: 40px; }
  .tool-nav { height: 50px; }
}

/* V6 responsive workspace. View magnification never changes artwork geometry. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.position-entry, .position-dock { display: none; }
.quantity-group { padding: 0; overflow: hidden; margin: 13px 0; }
.quantity-heading { gap: 0; padding: 0 8px 0 0; }
.quantity-heading .quantity-toggle { display: flex; flex: 1; min-width: 0; padding: 14px 10px 14px 15px; border: 0; background: transparent; text-align: left; gap: 10px; min-height: 72px; border-radius: 0; font-size: 15px; }
.quantity-toggle > i { width: 20px; height: 20px; flex-shrink: 0; }
.quantity-toggle > span { flex: 1; min-width: 0; }
.quantity-toggle strong { display: block; }
.quantity-toggle small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.quantity-toggle > b { font-size: 12px; font-weight: 400; white-space: nowrap; color: var(--muted); }
.quantity-toggle > .icon { width: 17px; height: 17px; }
.is-open .quantity-toggle > .icon { transform: rotate(180deg); }
.quantity-heading .remove-color { flex: none; width: 40px; min-height: 44px; padding: 7px; border: 0; color: #7d6559; }
.remove-color .icon { width: 17px; height: 17px; }
.sizes-grid { padding: 0 15px 17px; margin-top: 0; }
.sizes-grid input[aria-invalid=true] { border-color: #b63828; }
.quantities-hint { margin: 7px 0 15px; font-size: 12px; }
#add-order-color { margin-top: 2px; justify-content: space-between; border-style: dashed; background: transparent; }
.quantity-summary { flex: none; background: #fafaf8; padding: 0 23px 15px; border-top: 1px solid var(--line); }
.quantity-summary .quantity-total { margin: 0; border: 0; padding-top: 13px; font-size: 15px; }
.quantity-total strong { font-size: 20px; }
.quantity-benefit { display: flex; gap: 10px; padding: 13px 0 11px; border-bottom: 1px solid #d9e0d2; }
.benefit-check { flex: none; display: grid; place-items: center; width: 27px; height: 27px; background: #e4ebdd; color: #344b2d; border-radius: 50%; }
.benefit-check .icon { width: 17px; height: 17px; }
.quantity-benefit strong { display: block; font-size: 14px; color: #344b2d; }
.quantity-benefit span:not(.benefit-check) { display: block; font-size: 12px; color: #535f4d; margin-top: 2px; }
.quantity-benefit small { display: block; color: #73796e; font-size: 10px; line-height: 1.5; margin-top: 5px; }
.order-color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.order-color-grid button { min-width: 0; justify-content: flex-start; gap: 11px; padding: 13px; min-height: 66px; }
.order-color-grid i { width: 27px; height: 27px; border: 1px solid #0003; border-radius: 50%; flex: none; }
.order-color-grid strong { flex: 1; font-size: 14px; text-align: left; }
.order-color-grid .icon { width: 17px; height: 17px; }
@media (min-width: 901px) {
  :root { --panel: clamp(370px, 33vw, 640px); }
  .preview-pane { padding-inline: 22px; }
  .canvas-toolbar { flex-wrap: wrap; row-gap: 6px; }
  .preview-controls { margin-left: auto; gap: 7px; }
  .zoom-tools { gap: 5px; }
  .zoom-tools > button { padding-inline: 8px; }
  .history-tools { padding-right: 5px; gap: 0; }
  .history-tools .icon-button { width: 36px; padding: 7px; }
  .sheet-heading h1 { font-size: 28px; }
  .start-options button { min-height: 82px; }
  .panel-body > section { max-width: 580px; margin-inline: auto; }
  .quantity-summary { padding-inline: 23px; }
  body[data-step=sizes] .tool-nav, body[data-step=review] .tool-nav { display: none; }
  body[data-step=sizes] .sheet-heading, body[data-step=review] .sheet-heading { padding-top: 24px; }
}
@media (min-width: 1700px) {
  .control-panel .product-bar, .sheet-heading { padding-inline: 32px; }
  .panel-body, .quantity-summary { padding-inline: 32px; }
  .sheet-heading h1 { font-size: 30px; }
  .tool-nav { height: 76px; }
  .start-options button { min-height: 90px; }
}
@media (max-width: 900px) {
  .position-entry { display: flex; margin: 0 0 12px; min-height: 44px; font-size: 13px; }
  body:not(.positioning) .selection-handle { display: none; }
  .editor-tabs [data-editor-tab=position] { display: none; }
  .editor-tabs { margin-bottom: 10px; }
  .tool-nav button, .side-switcher button { min-height: 44px; }
  .tool-nav { height: 56px; }
  .history-tools .icon-button { width: 32px; min-height: 44px; }
  .mobile-zoom { min-height: 44px; }
  .position-dock { order: 2; flex: none; display: block; border-top: 1px solid #d4d9cd; background: #fafaf8; padding: 12px 16px max(10px, env(safe-area-inset-bottom)); }
  .position-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .position-heading .eyebrow { font-size: 9px; margin-bottom: 1px; }
  .position-heading strong { display: block; font-size: 18px; letter-spacing: -.3px; }
  .position-done { min-height: 44px; padding: 9px 17px; background: #252b25; border-color: #252b25; color: white; }
  .position-done .icon { width: 17px; height: 17px; }
  .position-dock > p { font-size: 12px; margin: 7px 0 9px; color: var(--muted); }
  .position-fields { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 18px; align-items: end; }
  .position-fields label { min-width: 0; font-size: 12px; font-weight: 700; }
  .position-fields output { float: right; font-weight: 400; }
  .position-fields input { width: 100%; display: block; min-height: 38px; margin: 2px 0 0; accent-color: #3c4737; }
  .position-fields button { width: 44px; min-height: 44px; padding: 10px; }
  .position-dock > .text-link { min-height: 44px; font-size: 12px; margin-top: 0; }
  body.positioning .controls-wrap, body.positioning .action-bar, body.positioning .side-switcher, body.positioning .view-toggle { display: none; }
  body.positioning .preview-pane { padding-bottom: 0; }
  body.positioning .canvas-holder { bottom: 8px; }
  body.positioning .canvas-toolbar { justify-content: flex-end; }
  body.positioning .selection-handle { width: 48px; height: 48px; right: -24px; bottom: -24px; min-height: 48px; }
  body.positioning .selection-handle:after { left: 18px; top: 18px; width: 12px; height: 12px; }
  body.positioning .canvas-content { transition: none; }
  .quantity-summary { padding: 0 16px 11px; }
  .quantity-summary .quantity-total { padding-top: 10px; }
  .quantity-benefit { padding-block: 11px 9px; gap: 8px; }
  .quantity-benefit strong { font-size: 13px; }
  .quantity-benefit span:not(.benefit-check) { font-size: 11px; }
  .quantity-benefit small { font-size: 10px; margin-top: 3px; }
  .quantity-heading .quantity-toggle { min-height: 70px; padding-left: 12px; font-size: 14px; }
  .quantity-toggle small { font-size: 11px; }
  .quantity-toggle > b { font-size: 11px; }
  .quantity-heading .remove-color { width: 36px; }
  .sizes-grid { gap: 10px; padding-inline: 12px; }
  .quantities-hint { line-height: 1.5; margin-bottom: 11px; }
  .color-dialog { position: fixed; margin: 0; top: auto; bottom: 0; left: 0; width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .color-dialog h2 { font-size: 25px; }
  .order-color-grid { margin-top: 18px; }
  .order-color-grid button { padding: 11px; min-height: 64px; }
  .order-color-grid strong { font-size: 13px; }
}