/* Last stylesheet: Lampadario reference layout, preserving all editor controls.
   Product cards privilege the photograph; kits privilege their composition. */
:root {
  --quote-dock-height: 0px;
  --ref-space-1: 4px;
  --ref-space-2: 8px;
  --ref-space-3: 12px;
  --ref-space-4: 16px;
  --ref-space-5: 24px;
  --ref-ink-secondary: #665f59;
}

/* The quote context stays visible while the editor and its title scroll. */
.quote-dock { position: sticky; top: 0; z-index: 30; display: grid; gap: 6px; padding: 6px 0; margin-bottom: 12px; background: var(--canvas, #f3f1ee); }
.quote-dock .summary { margin: 0; max-height: max(78px, calc(50dvh - 84px)); overflow-y: auto; overscroll-behavior: contain; }
.room-dock { min-width: 0; padding: 8px 18px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.quote-dock .room-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 0 0 2px; scrollbar-width: thin; }
.quote-dock .room-tabs > button { flex-shrink: 0; }
.quote-list .item, .quote-list .component-card, .quote-list .group-head { scroll-margin-top: calc(var(--quote-dock-height) + 8px); }
.history-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.component-movement { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.component-movement h4 { margin: 0; font-size: 12px; }
.component-movement .move-fields { margin-bottom: 10px; }
.pointer-drag-ghost { position: fixed; z-index: 80; max-width: min(420px, calc(100vw - 24px)); max-height: 96px; overflow: hidden; padding: 12px 16px; border: 1px solid #bfb4aa; border-radius: 8px; background: #fff; color: #242322; box-shadow: 0 8px 22px #0002; pointer-events: none; font: 600 13px/1.4 Arial, sans-serif; overflow-wrap: anywhere; }
.pointer-drag-source { opacity: .45; }
.pointer-drop-target { outline: 2px dashed var(--red); outline-offset: -2px; background: #fff0f2 !important; }
body.pointer-ordering-active { cursor: grabbing; user-select: none; }
.ordering-end { display: none; }
body.pointer-ordering-active .ordering-end { display: block; min-height: 44px; padding: 14px; border: 1px dashed #bfb4aa; color: #665f59; text-align: center; font-size: 12px; }
[data-drag-item] { touch-action: pan-y; }
@media (max-width: 750px) {
  .quote-dock { gap: 4px; margin-bottom: 8px; }
  .quote-dock .summary { padding: 8px 12px; max-height: max(78px, calc(50dvh - 82px)); }
  .quote-dock .summary button { min-height: 32px; padding: 7px 9px; }
  .room-dock { padding: 6px 12px; }
  .quote-dock .room-tab { min-height: 50px; }
}

/* Quote context stays compact so the list remains the main working surface. */
.shell { padding: 0 10px 28px; }
.topline { min-height: 40px; padding: var(--ref-space-2) var(--ref-space-1); gap: var(--ref-space-3); }
.topline .brand { font-size: 16px; }
.topline .actions { gap: 6px; }
.topline button { min-height: 30px; }
.titlebar { min-height: 70px; padding: var(--ref-space-3) 18px; gap: var(--ref-space-4); }
.titlebar .heading { gap: 16px; min-width: 0; }
.titlebar .heading input { max-width: min(620px, 100%); }
.meta { padding: 14px 18px; gap: 12px; margin-bottom: 8px; }
.meta input, .meta textarea { min-height: 38px; font-size: 12px; }
.meta textarea { height: 38px; }
.save-status { min-height: 16px; line-height: 16px; font-size: 10px; margin-bottom: 4px; }
.summary { min-height: 68px; padding: 12px 18px; gap: 12px; margin: 8px 0 18px; }
.summary .actions { gap: 6px; }
.summary strong { font-size: 24px; }
.summary button { min-height: 34px; padding: 8px 10px; font-size: 11px; }
.room-tabs { gap: 7px; padding-bottom: 6px; }
.room-tab { min-width: 152px; min-height: 54px; gap: 2px; padding: 7px 10px; font-size: 12px; line-height: 1.2; }
.room-tab small { font-size: 10px; }
.room-tab b { font-size: 11px; }
.room-add { min-width: 140px; font-size: 11px; }
.toolbar { align-items: center; gap: 12px; min-height: 34px; margin-bottom: 6px; }
.toolbar > small { flex: 1; max-width: none; font-size: 10px; line-height: 1.4; }
.toolbar .actions { gap: 6px; }
.toolbar button { min-height: 30px; }

/* One compact row: edit price and currency, then total and position actions. */
.item-row, .table-head {
  grid-template-columns: minmax(210px, 1.3fr) minmax(120px, 1fr) 90px 122px 145px minmax(90px, 100px) 68px;
  gap: 10px;
}
.table-head { padding: 8px 10px; font-size: 9px; }
.item-row { padding: 9px 10px; }
.item-row > *, .item-row .actions, .item-title > span { min-width: 0; }
.item-row .item-title { flex: 1; }
.item-row .thumb { width: 48px; height: 48px; }
.item-row input, .item-row select { min-height: 32px; font-size: 12px; }
.item-row .number { width: 100%; max-width: none; }
.delivery-controls { grid-template-columns: minmax(0, 1fr); }
.quantity-unit { grid-template-columns: minmax(0, 1fr) 36px; gap: 5px; }
.unit-toggle, .currency-toggle { min-width: 32px; min-height: 32px; padding: 5px 3px; font-size: 12px; }
.unit-toggle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-currency-control { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 5px; }
.position-row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.position-row-actions button { display: grid; place-items: center; width: 32px; min-height: 32px; padding: 6px; }
.position-row-actions button:hover:not(:disabled), .currency-toggle:hover:not(:disabled), .unit-toggle:hover:not(:disabled) { border-color: #b89f90; background: #fbf7f4; }
.position-row-actions button:disabled, .currency-toggle:disabled, .unit-toggle:disabled { cursor: not-allowed; }
.currency-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.currency-choices button { min-width: 80px; }
.currency-choices [aria-pressed="true"] { border-color: var(--red); color: #b41325; background: #fff7f8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.stepper { min-width: 0; }
.stepper input { min-width: 10px; padding: 6px 0; }
.stepper button { min-width: 25px; min-height: 30px; padding: 5px; font-size: 14px; }
.line-total { overflow-wrap: anywhere; }
.group-head { min-height: 42px; padding: 8px 12px; gap: 10px; }
.group-head strong { font-size: 12px; }
.group-head .actions { gap: 6px; }
.group-head .small { min-height: 28px; padding: 5px 7px; }
.group-head .check { font-size: 11px; }

/* Named areas express the desktop relationship without changing DOM/Tab order. */
.item-detail {
  display: grid;
  grid-template-areas: "media heading price" "media main price";
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 18px;
  row-gap: 12px;
  padding: 12px 14px;
  background: #fff;
}
.item-detail--product { grid-template-columns: minmax(260px, .85fr) minmax(280px, 1fr) 260px; }
.item-detail--kit { grid-template-columns: 240px minmax(0, 1fr) 250px; }
.item-detail > .detail-heading { grid-area: heading; min-width: 0; }
.item-detail > .position-media { grid-area: media; min-width: 0; }
.item-detail > .detail-main { grid-area: main; display: block; min-width: 0; align-self: start; container: detail-content / inline-size; }
.item-detail > .price-panel { grid-area: price; display: block; min-width: 0; align-self: stretch; padding: 2px 0 0 14px; border-left: 1px solid var(--line); }
.detail-heading { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 7px 12px; align-items: end; }
.detail-heading > label:has(.detail-title) { grid-column: 1 / -1; color: var(--ref-ink-secondary); font-size: 10px; letter-spacing: 0; }
.detail-heading input.detail-title { min-height: 32px; margin-top: 2px; padding: 3px 0; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; border-color: transparent; background: transparent; }
.detail-heading input.detail-title:hover { border-color: var(--line); }
.detail-source { grid-column: 1 / -1; margin: 0; color: var(--ref-ink-secondary); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.detail-source:empty { display: none; }
.detail-short-title, .detail-kind { min-width: 0; }
.detail-heading .detail-short-title label, .detail-heading .detail-kind { color: var(--ref-ink-secondary); font-size: 10px; letter-spacing: .02em; }
.detail-short-title input, .detail-kind select { min-height: 30px; padding: 6px 7px; font-size: 12px; margin-top: 4px; }
.detail-heading .item-properties { grid-column: 1 / -1; min-width: 0; }
.detail-heading .item-properties > summary { padding: 6px 0; font-size: 11px; font-weight: 400; color: var(--ref-ink-secondary); }
.item-properties > .fields2 { margin-top: 8px; gap: 8px; }
.item-properties > label, .item-properties > .position-controls { margin-top: 8px; }
.item-properties input, .item-properties select { min-height: 30px; font-size: 12px; padding: 6px 7px; }
.detail-quick-summary { display: none; grid-column: 1 / -1; }
.detail-quick-summary span { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 11px; }
.detail-quick-summary strong { font-size: 16px; color: #242322; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.item-detail--product > .position-media > .photo-frame > .photo-large { height: 300px; }
.item-detail--kit > .position-media > .photo-frame > .photo-large { height: 240px; }
.position-media input[type=file] { max-width: 100%; min-width: 0; }
.position-media .upload-label { margin-top: 8px; }
.position-media .background-tools { gap: 8px; margin-top: 10px; }
.position-media .background-tools small { font-size: 10px; }
.position-media .drawing-tools { margin-top: 14px; padding-top: 12px; }
.position-media .drawing-tools h3 { font-size: 13px; }
.position-media .media-choice { min-width: 60px; padding: 5px; }
.position-media .media-count { font-size: 10px; }

/* A property is one label/value tile; unchecked source properties stay available. */
.detail-main .spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.detail-main .spec-row {
  display: grid;
  grid-template-columns: 15px 15px minmax(0, 1fr) 22px;
  grid-template-areas: "check icon name delete" "value value value value";
  gap: 4px 5px;
  margin: 0;
  padding: 8px 9px;
  min-width: 0;
  background: #fff;
  align-items: center;
}
.spec-row > input[type=checkbox] { grid-area: check; width: 13px; height: 13px; margin: 0; }
.spec-row > .spec-icon { grid-area: icon; width: 14px; height: 14px; color: #7b736c; }
.spec-row > .spec-name { grid-area: name; }
.spec-row > .spec-value { grid-area: value; }
.spec-row > [data-remove-spec] { grid-area: delete; padding: 1px; min-width: 22px; min-height: 22px; background: transparent; border-color: transparent; font-size: 15px; }
.item-detail .spec-row .spec-name, .item-detail .spec-row .spec-value { width: 100%; margin: 0; padding: 1px 0; min-width: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; }
.item-detail .spec-row .spec-name { min-height: 19px; font-size: 10px; line-height: 1.3; color: var(--ref-ink-secondary); text-transform: uppercase; }
.item-detail .spec-row .spec-value { min-height: 25px; font-size: 13px; font-weight: 600; line-height: 1.4; color: #242322; }
.spec-row input:not([type=checkbox]):hover { border-bottom-color: #ccc3bb; }
.detail-main .spec-row:has(> input[type=checkbox]:not(:checked)) { background: #fbfaf8; }
.item-detail .spec-row:has(> input[type=checkbox]:not(:checked)) .spec-value { color: #746c65; font-weight: 400; }
.item-detail .specs-editor > summary { padding: 4px 0 8px; font-size: 12px; }
.item-detail .specs-editor > button { min-height: 30px; margin-top: 8px; }

/* Six common kit components fit a table-like rhythm without removing controls. */
.detail-main .kit-composition { padding: 0 10px 10px; border-radius: 8px; }
.composition-heading { align-items: center; gap: 12px; padding: 9px 0; }
.composition-heading h3 { margin: 0; font-size: 12px; font-weight: 600; }
.composition-heading small { max-width: none; font-size: 10px; line-height: 1.35; }
.component-card { padding: 7px 0; }
.component-heading {
  display: grid;
  grid-template-columns: auto 14px 42px minmax(140px, 1fr) 68px 92px 24px;
  grid-template-areas: "controls number photo name quantity price delete";
  align-items: center;
  gap: 6px;
}
.component-heading > .position-controls { grid-area: controls; gap: 3px; flex-wrap: nowrap; }
.component-heading > .component-number { grid-area: number; }
.component-heading > .thumb { grid-area: photo; width: 42px; height: 42px; }
.component-heading > .component-title { grid-area: name; min-width: 0; }
.component-heading > label:first-of-type { grid-area: quantity; min-width: 0; }
.component-heading > label:last-of-type { grid-area: price; min-width: 0; }
.component-heading > [data-delete] { grid-area: delete; min-width: 24px; min-height: 28px; padding: 3px; }
.component-heading label { min-width: 0; font-size: 9px; letter-spacing: 0; color: var(--ref-ink-secondary); }
.component-heading label > input { min-height: 28px; margin-top: 3px; padding: 4px 5px; font-size: 12px; }
.component-title input { border-color: transparent; background: transparent; font-weight: 600; }
.component-title input:hover { border-color: var(--line); }
.component-heading > .position-controls button.small { min-width: 26px; min-height: 28px; padding: 4px 5px; }
.component-heading > .position-controls .drag-handle { min-width: 16px; }
/* editor.css uses !important on this old summary padding; undo only that rule. */
.item-detail .component-details > summary { padding: 4px 0 0 !important; font-size: 10px; line-height: 1.4; }
.component-body { padding: 10px 0 4px; }
.component-body .photo-large { height: 150px; }
.kit-composition + .specs-editor { margin-top: 12px; }

/* Keep the original compact price rail while retaining the added purchase fields. */
.price-panel .commercial-panel { font-size: 11px; line-height: 1.4; }
.price-panel .commercial-heading { margin-bottom: 12px; }
.price-panel .commercial-heading h3 { font-size: 10px; margin-bottom: 9px; }
.price-panel .commercial-heading > strong { font-size: 25px; }
.price-panel .commercial-accent { margin-top: 10px; }
.price-panel .commercial-panel label { font-size: 11px; }
.price-panel .commercial-panel input:not([type=checkbox]), .price-panel .commercial-panel select { min-height: 30px; padding: 6px 7px; font-size: 12px; }
.price-panel .commercial-panel button { min-height: 30px; padding: 6px 7px; font-size: 10px; }
.price-panel .commercial-summary { margin: 12px 0 14px; font-size: 11px; }
.price-panel .commercial-summary > div { margin: 5px 0; gap: 8px; }
.price-panel .commercial-summary dd { max-width: 58%; }
.price-panel .commercial-section { margin-top: 14px; padding-top: 12px; gap: 8px; }
.price-panel .commercial-section h4 { font-size: 12px; }
.price-panel .commercial-help { margin-top: 6px; font-size: 10px; line-height: 1.5; }
.price-panel > .check { margin: 10px 0; font-size: 11px; }
.price-panel > h3 { margin: 16px 0 10px; font-size: 12px; }
.price-panel .price-currency { margin-top: 12px; font-size: 11px; }
.price-panel .price-currency select { min-height: 32px; padding: 6px 7px; }
.price-panel > button { min-height: 30px; margin: 7px 4px 0 0; font-size: 11px; }

/* Notices inside a dialog stay above its backdrop; PDF controls use normal forms. */
dialog .modal-notice { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #d8cfc6; border-radius: 6px; color: #42392f; background: #f8f4ef; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
dialog .modal-notice.warning { border-color: #c7a36a; background: #fff4df; color: #65471c; }
dialog .modal-notice.error { border-color: #d2aaa4; background: #fff2f0; color: #941b26; }
dialog .modal-notice[hidden], .pdf-settings-error[hidden] { display: none; }
.pdf-settings-form { display: grid; gap: var(--ref-space-4); min-width: 0; }
.pdf-settings-form > section { min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.pdf-settings-form h3 { margin-bottom: 8px; font-size: 14px; }
.pdf-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.pdf-presets > * { min-width: 0; }
.pdf-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pdf-sections label { display: flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0; color: #42392f; }
.pdf-sections input[type=checkbox] { flex: none; }
.pdf-settings-error { color: #a31f25; font-size: 12px; line-height: 1.5; }
.pdf-settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pdf-preview-frame { display: block; width: 100%; height: min(66vh, 720px); border: 1px solid var(--line); border-radius: 6px; background: #f7f5f3; }

/* Component-aware properties: one/two/three columns follow the real center width. */
@container detail-content (min-width: 690px) {
  .detail-main .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container detail-content (max-width: 430px) {
  .detail-main .spec-grid { grid-template-columns: minmax(0, 1fr); }
}
@container detail-content (max-width: 650px) {
  .component-heading {
    grid-template-columns: 42px minmax(0, 1fr) 66px 78px 24px;
    grid-template-areas: "controls controls controls number delete" "photo name quantity price price";
  }
}

@media (max-width: 1280px) {
  .item-row, .table-head { grid-template-columns: minmax(160px, 1fr) 90px 122px 145px 95px 68px; gap: 8px; }
  .item-row > .row-note, .table-head > div:nth-child(2) { display: none; }
  .item-detail--kit { grid-template-columns: 210px minmax(0, 1fr) 240px; }
  .item-detail--product { grid-template-columns: minmax(240px, .85fr) minmax(260px, 1fr) 240px; }
  .item-detail { column-gap: 14px; padding: 12px; }
}

@media (max-width: 1180px) {
  .item-detail--product { grid-template-columns: minmax(230px, .7fr) minmax(0, 1fr); }
  .item-detail--kit { grid-template-columns: 190px minmax(0, 1fr); }
  .item-detail { grid-template-areas: "media heading" "media main" "price price"; }
  .item-detail > .price-panel { border-left: 0; border-top: 1px solid var(--line); padding: 14px 0 0; }
  .detail-quick-summary { display: flex; flex-wrap: wrap; gap: 7px 18px; padding: 8px 10px; background: #f7f5f2; border: 1px solid var(--line); border-radius: 6px; }
  .item-detail--product > .position-media > .photo-frame > .photo-large { height: 330px; }
  .price-panel .commercial-summary { max-width: 560px; }
  .price-panel .commercial-section { max-width: 560px; }
  .detail-heading { grid-template-columns: minmax(0, 1fr) 130px; }
}

@media (max-width: 900px) {
  .table-head { display: none; }
  .item-row { grid-template-columns: minmax(135px, 1.1fr) minmax(145px, 1.1fr) minmax(100px, 1fr) minmax(90px, 1fr); gap: 8px; }
  .item-row > .actions { grid-column: 1 / -1; }
  .item-row > div:nth-last-child(2) { grid-column: auto; }
  .item-row .mobile-label { display: block; min-height: 14px; margin-bottom: 4px; }
  .item-row .line-total { grid-column: auto; white-space: normal; align-self: end; padding-bottom: 6px; }
  .item-row .thumb { width: 44px; height: 44px; }
  .item-detail--product, .item-detail--kit { grid-template-columns: 170px minmax(0, 1fr); }
  .item-detail--product > .position-media > .photo-frame > .photo-large { height: 230px; }
  .item-detail--kit > .position-media > .photo-frame > .photo-large { height: 180px; }
  .detail-heading { grid-template-columns: minmax(0, 1fr) 105px; }
  .detail-heading input.detail-title { font-size: 19px; }
  .topline { flex-wrap: wrap; }
  .topline > .tag { display: none; }
  .toolbar { flex-wrap: wrap; }
  .toolbar > small { flex-basis: 100%; }
}

@media (max-width: 750px) {
  .shell { padding: 0 var(--ref-space-2) var(--ref-space-5); }
  .topline { align-items: center; gap: 8px; }
  .topline .brand { font-size: 14px; }
  .topline .actions { justify-content: flex-end; flex: 1 1 auto; }
  .topline button { min-height: 34px; }
  .titlebar { padding: 12px; gap: 8px; }
  .titlebar .heading { gap: 4px; }
  .titlebar .heading input { font-size: 22px; }
  .titlebar .actions { gap: 6px; }
  .titlebar button { min-height: 36px; padding: 8px 10px; font-size: 11px; }
  .meta { padding: 12px; gap: 10px; }
  .summary { min-height: 0; padding: 12px; gap: 10px; margin-bottom: 12px; }
  .summary button { min-height: 36px; }
  .room-tabs { padding-bottom: 8px; }
  .toolbar { gap: 8px; }
  .toolbar .actions { justify-content: flex-start; }
  .item-detail--product, .item-detail--kit { grid-template-columns: minmax(0, 1fr); }
  .item-detail { grid-template-areas: "heading" "media" "main" "price"; grid-template-rows: auto; padding: 12px 0; gap: 16px; }
  .item-detail > .price-panel { padding-top: 14px; }
  .detail-heading { grid-template-columns: minmax(0, 1fr) 105px; gap: 7px 10px; }
  .detail-heading input.detail-title { font-size: 19px; }
  .detail-quick-summary { padding: 8px; gap: 6px 14px; }
  .detail-quick-summary span { font-size: 10px; }
  .detail-quick-summary strong { font-size: 16px; }
  .item-detail--product > .position-media > .photo-frame > .photo-large { height: 280px; }
  .item-detail--kit > .position-media > .photo-frame > .photo-large { height: 210px; }
  .item-detail .position-media { max-width: none; }
  .detail-main .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .item-detail .spec-row { padding: 9px; grid-template-columns: 24px 16px minmax(0, 1fr) 28px; }
  .spec-row > input[type=checkbox] { width: 24px; height: 24px; }
  .spec-row > [data-remove-spec] { min-width: 28px; }
  .item-detail .spec-row .spec-name { min-height: 22px; }
  .item-detail .spec-row .spec-value { min-height: 28px; font-size: 14px; }
  .spec-row > [data-remove-spec] { min-height: 28px; }
  .component-body { grid-template-columns: minmax(0, 1fr); }
  .composition-heading { display: block; }
  .composition-heading small { display: block; margin-top: 5px; text-align: left; }
  .component-heading > .position-controls button.small { min-height: 32px; min-width: 30px; }
  .item-detail .component-details > summary { padding-top: 7px !important; min-height: 30px; }
  .group-head { padding: 8px 6px; }
  .group-head .actions { flex-wrap: wrap; }
  .pdf-sections { grid-template-columns: minmax(0, 1fr); }
  .pdf-settings-actions > button { min-height: 38px; }
}

@media (max-width: 600px) {
  .item-row { grid-template-columns: minmax(135px, 1fr) minmax(145px, 1fr); gap: 10px; padding-inline: 0; }
  .item-row > .actions, .item-row > .row-note { grid-column: 1 / -1; }
  .item-row > .row-note { display: block; }
  .item-row > div:nth-last-child(2), .item-row .line-total { grid-column: auto; }
  .item-row .line-total { font-size: 16px; }
  .item-row input, .item-row select { min-height: 36px; }
  .stepper button { min-height: 34px; min-width: 28px; }
  .item-row .stepper input { min-width: 0; }
  .component-heading { grid-template-columns: 42px minmax(0, 1fr) 16px 26px; grid-template-areas: "controls controls number delete" "photo name name name" "quantity quantity price price"; gap: 7px; }
  .component-heading > .thumb { width: 42px; height: 42px; }
  .component-heading label { font-size: 10px; }
  .component-heading label > input { min-height: 34px; }
  .component-heading > [data-delete] { min-height: 32px; }
  .component-title input { font-size: 13px; }
  .detail-heading .item-properties .fields2 { grid-template-columns: minmax(0, 1fr); }
  .price-panel .commercial-panel button { min-height: 36px; font-size: 11px; }
  .price-panel > .check { min-height: 30px; }
}

@media (max-width: 360px) {
  .item-row { grid-template-columns: minmax(0, 1fr); }
  .item-row > .actions, .item-row > .row-note, .item-row > div:nth-last-child(2), .item-row .line-total { grid-column: 1; }
  .delivery-controls, .quantity-unit { max-width: 260px; }
  .detail-heading { grid-template-columns: minmax(0, 1fr); }
  .detail-short-title, .detail-kind { grid-column: 1; }
}

/* Bounded finish pass: sparse properties, compact six-row kit, complete rail. */
.detail-main .spec-row { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.component-table-head { display:none; }
.commercial-purchase-options { margin-top:12px; border-top:1px solid var(--line); }
.item-detail .commercial-purchase-options > summary { padding:9px 0 2px; font-size:11px; font-weight:400; }
.price-panel .commercial-purchase-options .commercial-section { border:0; padding-top:8px; margin-top:0; }
.titlebar .heading { min-width:0; }
.titlebar .heading input { min-width:0; flex:1; }
@container detail-content (min-width:651px) {
 .component-table-head { display:grid; grid-template-columns:auto 14px 42px minmax(140px,1fr) 68px 92px 24px; column-gap:6px; font-size:10px; color:var(--ref-ink-secondary); padding:0 0 6px; }
 .component-table-head span:first-child { grid-column:4; }
 .component-table-head span:nth-child(2) { grid-column:5; }
 .component-table-head span:nth-child(3) { grid-column:6; }
 .component-heading label { font-size:0; }
 .component-heading label > input { margin-top:0; font-size:12px; }
 .component-card { padding-block:6px; }
}
@media(max-width:1000px) {
 .titlebar { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
 .titlebar .heading,.titlebar .actions { width:100%; }
 .titlebar .heading input { max-width:none; width:100%; }
 .titlebar .actions { justify-content:flex-start; }
}

/* Stage 0.9: fixed working photo, single PDF view chooser. */
@media(min-width:1181px){.item-detail--product{grid-template-columns:280px minmax(0,1fr) 260px}}
.pdf-settings-form fieldset{min-width:0;margin:0;padding:12px 0 0;border:0;border-top:1px solid var(--line)}
.pdf-settings-form legend{font-size:13px;font-weight:700;padding:0 12px 0 0}
.pdf-layout-buttons{display:flex;gap:7px;flex-wrap:wrap}
.pdf-layout-buttons button{flex:1;min-width:76px;padding:10px 7px;font-size:20px;font-weight:700}
.pdf-layout-buttons button span{display:block;font-size:10px;line-height:1.4;font-weight:400;margin-top:5px}
.pdf-layout-buttons button:last-child{font-size:12px;min-width:100px}
.pdf-theme-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pdf-theme-buttons button{padding:0;overflow:hidden;text-align:left}
.pdf-theme-buttons img{display:block;width:100%;height:95px;object-fit:cover;border-bottom:1px solid var(--line)}
.pdf-theme-buttons span{display:block;padding:9px;font-size:12px}
.pdf-layout-buttons button[aria-pressed=true],.pdf-theme-buttons button[aria-pressed=true]{border-color:var(--red);color:#b41325;background:#fff7f8;box-shadow:inset 0 0 0 1px var(--red)}
.pdf-sections .check{line-height:1.5}
@media(max-width:500px){.pdf-theme-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.pdf-theme-buttons img{height:85px}.pdf-layout-buttons{gap:6px}.pdf-layout-buttons button{min-width:54px}.pdf-layout-buttons button:last-child{flex-basis:100%}.pdf-sections{grid-template-columns:1fr}.pdf-sections input{width:22px;height:22px}}

/* UI-003: print-enabled properties stay in the primary working grid. */
.specs-editor .specs-more[hidden],.specs-editor .specs-empty[hidden]{display:none}
.specs-editor>.specs-more{margin-top:10px;padding:0;border:0}
.specs-editor>.specs-more>summary{display:list-item;list-style:disclosure-closed inside;cursor:pointer;width:fit-content;margin:0;padding:8px 10px!important;border:1px solid var(--line);border-radius:7px;color:#42392f;font-size:12px;font-weight:400!important}
.specs-editor>.specs-more[open]>summary{list-style:disclosure-open inside;margin-bottom:10px}
.specs-editor>.specs-more>summary:hover{background:#faf8f6;border-color:#aaa09a}
.specs-editor summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.specs-editor>.specs-empty{margin:8px 0 0;line-height:1.5}
.spec-grid--selected:empty,.spec-grid--more:empty{border:0;background:transparent}
@media(max-width:750px){.specs-editor>.specs-more>summary{min-height:40px;line-height:1.7}}


/* Position header follows its DOM order at tablet/mobile sizes. */
@media (max-width: 1050px) and (min-width: 901px) {
  .item-row, .table-head { grid-template-columns: minmax(150px, 1fr) 80px 112px 125px 85px 64px; gap: 7px; }
  .position-row-actions { gap: 2px; }
}
@media (max-width: 900px) {
  .item-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title title" "note note" "delivery quantity" "price price" "total actions"; gap: 10px; }
  .item-row > .actions { grid-area: title; }
  .item-row > .row-note { grid-area: note; display: block; }
  .item-row > .row-delivery { grid-area: delivery; }
  .item-row > .row-quantity { grid-area: quantity; }
  .item-row > .row-price { grid-area: price; }
  .item-row > .line-total { grid-area: total; text-align: left; align-self: center; padding: 0; }
  .item-row > .position-row-actions { grid-area: actions; }
  .delivery-controls { max-width: 150px; }
  .quantity-unit { max-width: 155px; }
  .price-currency-control { grid-template-columns: minmax(0, 1fr) 38px; }
  .position-row-actions button, .unit-toggle, .currency-toggle { min-height: 38px; }
  .position-row-actions button { width: 38px; }
  .item-row .price-currency-control .number { max-width: none; }
}