/*126: independent door/frame tabs; compact keeps two rows with named wood sections. */
#atelier .finish-category-title { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
#atelier .finish-option-count { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
#atelier .finish-option-count i { inline-size: 3px; block-size: 3px; flex: none; border-radius: 50%; background: currentColor; opacity: .65; }
#atelier .band-shades .swatch[data-mobile-finish-hidden] { display: none; }
#atelier .finish-view-all i { display: flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
#atelier .finish-view-all i svg { inline-size: 24px; block-size: 24px; }
#atelier .finish-view-all span { font-size: 10px; white-space: normal; line-height: 1.2; }
#atelier .finish-category-dialog .aluminium-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#atelier .finish-category-dialog .aluminium-swatches .swatch i { inline-size: 100%; block-size: 48px; border-radius: 5px; background-size: cover; background-position: center; }
#atelier .finish-category-dialog .aluminium-swatches .swatch { min-block-size: 72px; }
.band-shades [data-finish-rail="veneer"]:empty { display: none; }
.band-shades [data-finish-rail="stone"]:empty { display: none; }
.band-shades [data-finish-rail="alu-slat"]:empty { display: none; }
.band-shades [data-finish-rail="alu-slat"] [data-finish-heading="alu-ral"] {
  grid-column: 1 / -1; margin-block: 12px 4px;
}
.band-shades [data-finish-rail="formica"]:empty { display: none; }
#atelier .band-wall-clad .swatches { overflow-x: auto; padding-block: 4px 10px; padding-inline: 3px; scroll-padding-inline: 3px; scrollbar-width: thin; overscroll-behavior-inline: contain; }
#atelier .band-wall-clad h4.sub { margin-block: 12px 6px; font-size: 14px; }
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  :root[data-variant="a"] #atelier .band-wall-clad .swatch { inline-size: 80px; min-block-size: 64px; padding-block: 4px; gap: 2px; }
  :root[data-variant="a"] #atelier .band-wall-clad .swatch i { inline-size: 64px; block-size: 40px; }
  #atelier .band-wall-clad .swatches { padding-block: 4px 6px; }
  #atelier .band-wall-clad h4.sub { margin-block: 6px 4px; font-size: 12px; }
}
#atelier .finish-coming { cursor: default; color: var(--muted); }
#atelier .finish-coming i { background: transparent; border: 1px dashed var(--line); box-shadow: none; }
.band-shades .swatches [data-finish-heading] { scroll-snap-align: start; }

/* Desktop finish categories each occupy one horizontal scroll row. */
#atelier .design-colour-open { display: none; }
@media (min-width: 1025px), (min-width: 721px) and (orientation: landscape) {
  #atelier .band-shades [data-finish-heading] { margin-block: 12px 6px; }
  #atelier .band-shades :is([data-finish-heading="paint"], [data-finish-heading="alu-slat"]):not([hidden]) {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
  }
  #atelier [data-finish-heading="alu-slat"] { flex-wrap: wrap; }
  #atelier [data-finish-heading="alu-slat"] .design-colour-open { margin-inline-start: auto; }
  #atelier .design-colour-open {
    display: inline-flex; align-items: center; min-block-size: 44px; padding: 0;
    border: 0; background: transparent; color: var(--ink); font: inherit;
    font-size: 12px; font-weight: 400; cursor: pointer;
    text-decoration: underline; text-underline-offset: 4px;
  }
  #atelier .design-colour-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  #atelier .design .band-shades [data-finish-rail]:not([hidden]):not(:empty) {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 7px; padding-block: 3px 10px; padding-inline: 3px;
    scroll-padding-inline: 3px; scrollbar-width: thin; overscroll-behavior-inline: contain;
  }
  #atelier .design .band-shades [data-finish-rail] .swatch {
    flex: 0 0 80px; inline-size: 80px; min-block-size: 68px;
  }
  #atelier .design .band-shades [data-finish-rail] .swatch i { inline-size: 68px; block-size: 42px; }
}

/* Compact cycles layouts beside the face selector, without another gallery row. */
.veneer-layout button span { display: none; }
#atelier .veneer-layout-cycle { display: none; }
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  #atelier .proto-strip > .veneer-layout { position: absolute; inset-inline-end: 0; inset-block-start: 16px; display: block; margin: 0; padding: 0; }
  #atelier .proto-strip > .veneer-layout [role="radio"] { display: none; }
  #atelier .proto-strip > .veneer-layout .veneer-layout-cycle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; inline-size: 44px; block-size: 44px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink); font: inherit; }
  #atelier .proto-strip > .veneer-layout .veneer-layout-cycle span { display: inline; font-size: 9.5px; line-height: 1; }
}

/* A quiet horizontal filter row for the same finish gallery at every width. */
#atelier .finish-filters { display: flex; align-items: center; gap: 3px; min-inline-size: 0; min-block-size: 44px; overflow-x: auto; overflow-y: hidden; padding-inline: 1px; position: sticky; inset-block-start: var(--filter-sticky-top, 0px); z-index: 2; background: var(--panel); scrollbar-width: none; overscroll-behavior-inline: contain; }
#atelier .finish-filters::-webkit-scrollbar { display: none; }
#atelier .finish-filter { flex: none; position: relative; min-block-size: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 11px; white-space: nowrap; cursor: pointer; transition: color 180ms ease; }
#atelier .finish-filter::before { content: ""; position: absolute; inset-block: 7px; inset-inline: 1px; border: 1px solid transparent; border-radius: inherit; background: transparent; z-index: -1; transition: background 180ms ease, border-color 180ms ease; }
/* Decorative separators sit in the existing gap and do not enlarge the rail. */
#atelier .finish-filter + .finish-filter::after { content: ""; position: absolute; inset-inline-start: -2.5px; inset-block-start: calc(50% - 1px); inline-size: 2px; block-size: 2px; border-radius: 50%; background: var(--ink-2); opacity: .5; pointer-events: none; }
#atelier .finish-filter[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
#atelier .finish-filter[aria-pressed="true"]::before { background: rgb(30 30 26 / .06); border-color: var(--line); }
#atelier .finish-filter:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
#atelier .band-shades .swatch[hidden], #atelier .band-shades [data-finish-heading][hidden], #atelier .band-shades [data-finish-rail][hidden] { display: none; }
@media (hover: hover) { #atelier .finish-filter:hover { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { #atelier .finish-filter, #atelier .finish-filter::before { transition: none; } }
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  #atelier .finish-filters { margin-inline: -4px; padding-inline: 4px; }
  #atelier .design > .band-shades { padding-block: 0 2px; }
  #atelier .design .band-shades .swatch { min-block-size: 64px; padding-block: 4px; gap: 2px; }
  #atelier .design .band-shades .swatch i { block-size: 40px; }
  #atelier .design .band-shades .swatch span { font-size: 10px; line-height: 12px; }
  #atelier .band-shades:not([data-finish-filter="all"]) [data-finish-heading] { display: none; }
}

/* Recover a little gallery room around the Design face toggle. */
:root[data-step="2"] #atelier .proto-side-row { margin-block: 2px; }
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  :root[data-step="2"] #atelier .proto-strip { padding-block-start: 6px; }
  :root[data-step="2"] #atelier .proto-side-row { margin-block: 0; }
  :root[data-step="2"] #atelier .proto-strip > .veneer-layout { inset-block-start: 6px; }
}

/* Fading hairline separates navigation from samples without adding height. */
#atelier .finish-filters { background-image: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); background-size: 100% 1px; background-position: center 100%; background-repeat: no-repeat; }

/* Seat the samples slightly lower beneath the filter divider. */
#atelier .finish-filters + .design { margin-block-start: 4px; }
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  #atelier .finish-filters + .design > .band-shades { padding-block-end: 0; }
  :root[data-step="2"] #atelier:has(.finish-filters) > .actions { margin-block-start: 8px; }
}

/* Handles share the finish pills, dots and divider. */
#atelier .handle-filters + .handle-options { margin-block-start: 4px; }
#atelier .handle-options [hidden] { display: none; }
#atelier .handle-options[data-handle-filter="integral"] .integral-area { margin-block-start: 0; padding-block-start: 4px; border-block-start: 0; }
@media (min-width: 1025px), (min-width: 721px) and (orientation: landscape) {
  #atelier .body:has(> .handle-filters) { scroll-padding-block-start: var(--handle-sticky-height, 194px); }
}
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  :root[data-step="3"] #atelier .proto-side-row { margin-block: 0; }
  #atelier .handle-options .handle-list .rail-cat { font-size: 11px; }
  #atelier .handle-options .handle-list .handle-option { inline-size: 92px; padding-block: 4px 6px; }
  #atelier .handle-options .handle-list .handle-pick .handle-option { inline-size: 100%; }
  #atelier .handle-options .handle-list .handle-option .thumb,
  #atelier .handle-options .handle-list .handle-option img { block-size: clamp(36px, calc(var(--handle-rail-room) - 64px), 70px); }
  #atelier .handle-options .handle-list .handle-option img { aspect-ratio: auto; object-fit: contain; }
  #atelier .handle-options .handle-list .handle-option .model,
  #atelier .handle-options .handle-list .handle-option > span:not(.thumb) { font-size: 11px; line-height: 14px; }
  #atelier .handle-options .same-wing-slot { min-block-size: min(108px, calc(var(--handle-rail-room) - 18px)); padding-block: 3px; }
  #atelier .handle-options .same-wing-slot img { block-size: clamp(36px, calc(var(--handle-rail-room) - 74px), 44px); }
  :root[data-step="3"] #body:has(.handle-pick:not([hidden]) .pair-wings),
  :root[data-step="3"] #body:has(.same-wing-card:not([hidden]) .same-wing-remove) { overflow-y: auto; }
}

#atelier .handle-catalog-group, #atelier .handle-catalog-row { display: contents; }
#atelier .mobile-handle-brand { display: none; }

/* Selected outer/inner cards retain the catalogue selection treatment. */
#atelier .handle-selection-cards { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; gap: 8px; min-inline-size: 0; }
#atelier .handle-face-card { position: relative; display: flex; flex-direction: column; min-inline-size: 0; border: 1px solid transparent; border-radius: 12px; color: var(--ink-2); }
#atelier .handle-face-card.is-editing { border-color: rgb(255 255 255 / .5); color: var(--ink); background: linear-gradient(155deg, rgb(255 255 255 / .58), rgb(255 255 255 / .2)); box-shadow: 0 3px 10px rgb(40 35 28 / .05); }
#atelier .handle-face-card.is-editing::before { content: ''; position: absolute; inset-block: 8px; inset-inline-start: 0; inline-size: 2px; background: var(--accent); }
#atelier .handle-face-pick { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; min-inline-size: 0; min-block-size: 74px; padding: 4px 4px 0; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
#atelier .handle-face-pick .thumb { display: block; inline-size: 100%; block-size: 57px; overflow: hidden; }
#atelier .handle-face-pick img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
#atelier .handle-face-pick bdi { display: block; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 14px; margin-block-start: 0; }
#atelier .handle-card-side { position: absolute; inset-block-start: 4px; color: var(--ink-2); font-size: 10px; line-height: 12px; }
#atelier .handle-selection-cards button:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
#atelier .same-wing-card.is-extra-only .same-wing-slots { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  #atelier .handle-bar .finish-row { display: flex; justify-content: center; gap: 8px; }
  #atelier .handle-bar .finish-option { flex: 0 1 60px; min-inline-size: 44px; block-size: 44px; min-block-size: 44px; padding-block: 4px; gap: 2px; border-radius: 8px; }
  #atelier .handle-bar .finish-option i { inline-size: 16px; block-size: 16px; }
  #atelier .handle-bar .finish-option .finish-name-short { font-size: 10px; line-height: 12px; }
  :root[data-variant="a"][data-step="3"] .handle-strip { padding-block-start: 2px; column-gap: 4px; }
  :root[data-variant="a"][data-step="3"] .handle-strip .proto-side-row { inline-size: clamp(96px, calc(100vw - 214px), 172px); }
  #atelier .handle-selection-cards { flex: 0 0 216px; inline-size: 216px; scroll-snap-align: start; margin-block: 2px 0; }
  #atelier .handle-face-card { min-block-size: 118px; }
  #atelier .handle-list .rail-label { display: none; }
  #atelier .handle-catalog-group { display: flex; flex: none; flex-direction: column; gap: 2px; }
  #atelier .handle-catalog-row { display: flex; align-items: flex-start; gap: 8px; }
  #atelier .handle-list .rail-cat { display: flex; align-items: baseline; gap: 8px; writing-mode: horizontal-tb; margin: 0; padding: 0; border: 0; min-block-size: 16px; font-size: 11px; font-weight: 500; text-align: start; }
  #atelier .mobile-handle-brand { display: inline; color: var(--ink-2); font-size: 9px; letter-spacing: .03em; }
  #atelier .handle-catalog-row > .handle-option,
  #atelier .handle-catalog-row > .handle-pick { margin-block-start: 14px; }
  #atelier .handle-list .rail-area { position: relative; padding-block-start: 14px; }
  #atelier .handle-list .rail-eyebrow { display: block; position: absolute; inset-block-start: 0; inset-inline-start: 4px; writing-mode: horizontal-tb; margin: 0; padding: 0; font-size: 9px; line-height: 12px; }
  #atelier .handle-options .handle-list .handle-catalog-group .handle-option .thumb,
  #atelier .handle-options .handle-list .handle-catalog-group .handle-option img { block-size: 48px; }
  :root[data-variant="a"] #atelier .same-wing-card.is-extra-only { inline-size: 84px; padding: 3px; }
}

/* A separate, compact selection area keeps chosen handles out of the catalogue. */
#atelier .handle-selected-combo { display: flex; align-items: stretch; align-self: start; border-radius: 12px; background: linear-gradient(155deg, rgb(255 255 255 / .58), rgb(255 255 255 / .2)); box-shadow: 0 3px 10px rgb(40 35 28 / .05); }
#atelier .handle-selected-combo .handle-option[aria-checked="true"] { background: transparent; box-shadow: none; }
#atelier .handle-both-toggle { display: flex; flex: 0 0 44px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-inline-size: 44px; min-block-size: 44px; padding: 3px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); font: inherit; font-size: 9px; line-height: 11px; cursor: pointer; }
#atelier .handle-both-toggle i { position: relative; inline-size: 14px; block-size: 24px; border-radius: 10px; background: var(--line); }
#atelier .handle-both-toggle i::after { content: ''; position: absolute; inset-inline-start: 2px; inset-block-end: 2px; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--panel); }
#atelier .handle-both-toggle[aria-checked="true"] i { background: var(--ink); }
#atelier .handle-both-toggle[aria-checked="true"] i::after { inset-block-end: 12px; }
#atelier .handle-both-toggle span { text-align: center; }
#atelier .handle-both-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
#atelier .handle-face-pick[aria-pressed="true"] .handle-card-side { font-weight: 700; }

#atelier .handle-selection-cards { padding: 4px; margin-block: 4px 6px; border-radius: 14px; background: rgb(255 255 255 / .3); }
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  #atelier .handle-selection-cards { inline-size: auto; gap: 6px; margin-block: 5px 0; padding: 0 2px; }
  #atelier .handle-face-card { display: grid; grid-template-rows: 52px; min-block-size: 52px; }
  #atelier .handle-selected-combo { flex: none; scroll-snap-align: start; }
  #atelier .handle-face-pick { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 14px 18px; align-content: center; align-items: center; gap: 2px 8px; padding: 6px 9px; min-block-size: 52px; text-align: start; }
  #atelier .handle-face-pick .thumb { grid-column: 1; grid-row: 1 / span 2; inline-size: 48px; block-size: 40px; }
  #atelier .handle-card-side { position: static; grid-column: 2; grid-row: 1; font-size: 11px; line-height: 14px; }
  #atelier .handle-face-pick bdi { grid-column: 2; grid-row: 2; font-size: 12px; line-height: 18px; }
  #atelier .handle-filters + .handle-options { margin-block-start: 4px; }
  #atelier .handle-list { padding-block-end: 2px; }
  #atelier .handle-list .rail-cat, #atelier .handle-list .rail-eyebrow { display: none; }
  #atelier .handle-catalog-group { gap: 0; }
  #atelier .handle-options .handle-catalog-row > .handle-option, #atelier .handle-options .handle-catalog-row > .handle-pick { margin-block-start: 0; }
  #atelier .handle-list .rail-area { padding-block-start: 0; }
  #atelier .handle-options .handle-list .handle-catalog-group .handle-option .thumb,
  #atelier .handle-options .handle-list .handle-catalog-group .handle-option img { block-size: 36px; }
  /* Compensate for the older square thumbnails' transparent padding; wide video previews stay native. */
  #atelier .handle-face-pick .thumb { position: relative; }
  #atelier .handle-options .handle-list .handle-option img.handle-thumb-wide,
  #atelier .handle-face-pick img.handle-thumb-wide { inline-size: 86%; margin-inline: auto; object-fit: cover; }
  #atelier .handle-options .handle-list .handle-option img.handle-thumb-turned-wide,
  #atelier .handle-face-pick img.handle-thumb-turned-wide { position: absolute; inset-inline: 0; inset-block-start: 50%; inline-size: 86%; block-size: auto; aspect-ratio: 1; margin-inline: auto; translate: 0 -50%; object-fit: contain; }
  #atelier .handle-options .handle-list .handle-option { padding-block: 2px 4px; }
  #atelier .handle-options .handle-option .model,
  #atelier .handle-options .handle-option > span:not(.thumb) { max-inline-size: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #atelier .handle-options .same-wing-slot { min-block-size: 68px; }
  #atelier .handle-options .same-wing-card.is-extra-only .same-wing-empty { min-block-size: 60px; gap: 3px; padding: 3px 2px; }
  #atelier .same-wing-card.is-extra-only .same-wing-plus { font-size: 20px; line-height: 22px; }
  :root[data-step="3"] #body:has(> .handle-selection-cards) .handle-strip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "finish"; }
  :root[data-step="3"] #body:has(> .handle-selection-cards) .handle-strip .proto-side-row { display: none; }
  :root[data-step="3"] #body:has(> .handle-selection-cards) .handle-strip .finish-row { border-inline-start: 0; max-inline-size: none; margin-inline: 0; padding-inline: 0; }
}

/* Selected controls occupy the former filter line; both model families stay visible. */
#atelier .engrave-family[hidden] { display: none; }
#atelier .engraving-tools { flex: none; }
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  :root[data-step="2"][data-group="engrave"] #atelier .design { flex: 1 1 0; min-block-size: 0; margin-block-start: 0; }
  :root[data-step="2"][data-group="engrave"] #atelier .design > .band-engrave { padding-block-start: 8px; }
  :root[data-step="2"][data-group="engrave"] #atelier .engrave-grid { min-block-size: 0; margin-block-start: 0; }
  :root[data-step="2"][data-group="engrave"] #atelier .engrave-opt { gap: 3px; padding-block: 0; }
  :root[data-step="2"][data-group="engrave"] #atelier .engrave-opt img { block-size: clamp(44px, calc(var(--engrave-filter-room) - 32px), 118px); object-fit: contain; }
  :root[data-step="2"][data-group="engrave"] #atelier .engrave-family-title { min-block-size: 44px; align-self: stretch; font-size: 11px; }
  #atelier .engrave-grid [data-engrave-family="frames"] .engrave-opt > span { min-block-size: 24px; line-height: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  :root[data-step="2"][data-group="engrave"] #atelier .engraving-tools { inset-block-start: 0; }
}

/* Horizontal finish labels | depth, within the same 44px toolbar. */
#atelier .engraving-tools > .engrave-opts { display: flex; flex-direction: row; align-items: center; justify-content: space-between; inline-size: 100%; gap: 4px; padding: 0; margin: 0; border: 0; }
#atelier .engraving-tools .engrave-opts > button { display: flex; flex-direction: row; position: relative; flex: none; inline-size: auto; min-inline-size: 44px; min-block-size: 44px; padding: 0 4px; gap: 6px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 11px; box-shadow: none; cursor: pointer; }
#atelier .engraving-tools .engrave-opts > button span { white-space: nowrap; font-size: inherit; }
#atelier .engraving-tools .engrave-opts > button[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
#atelier .engraving-tools .engrave-opts > button i { inline-size: 18px; block-size: 18px; border: 1px solid var(--line); border-radius: 50%; flex: none; background-size: cover; }
#atelier .engraving-tools .engrave-opts > button i.silver { background: linear-gradient(135deg, #b5b7b8, #eee, #b5b7b8); }
#atelier .engraving-tools .engrave-opts > button[aria-pressed="true"] i { outline: 1px solid var(--ink-2); outline-offset: 3px; }
#atelier .engraving-tools .engrave-opts > button[aria-pressed="true"]::after { content: ""; position: absolute; inset-inline: 8px; inset-block-end: 5px; block-size: 1px; background: var(--accent); }
#atelier .engraving-tools .engrave-depth { position: relative; flex: 0 0 64px; display: flex; align-items: center; margin-inline-start: 8px; padding: 0; border: 0; }
#atelier .engraving-tools .engrave-depth::before { content: ""; position: absolute; inset-inline-start: -7px; inset-block-start: calc(50% - 8px); inline-size: 1px; block-size: 16px; background: var(--line); }
#atelier [data-engrave-depth] { display: flex; align-items: center; justify-content: center; inline-size: 64px; min-block-size: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 11px; cursor: pointer; }
#atelier .engrave-depth-value { display: inline-flex; align-items: center; gap: 5px; min-block-size: 28px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 8px; background: rgb(255 255 255 / .45); }
#atelier .engrave-depth-value svg { inline-size: 12px; block-size: 12px; transition: transform 160ms ease; }
#atelier [data-engrave-depth][aria-expanded="true"] .engrave-depth-value svg { transform: rotate(180deg); }
#atelier .engrave-depth-menu { box-sizing: border-box; inline-size: 128px; margin: 0; padding: 5px; inset-block-end: auto; inset-inline-end: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: 0 8px 28px rgb(40 35 28 / .15); }
#atelier .engrave-depth-menu:popover-open { display: grid; gap: 2px; }
#atelier .engrave-depth-menu [role="option"] { display: flex; align-items: center; justify-content: space-between; min-block-size: 44px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
#atelier .engrave-depth-menu [aria-selected="true"] { background: rgb(30 30 26 / .06); font-weight: 500; }
#atelier .engrave-depth-menu svg { inline-size: 14px; block-size: 14px; color: var(--accent); visibility: hidden; }
#atelier .engrave-depth-menu [aria-selected="true"] svg { visibility: visible; }
#atelier .engraving-tools .engrave-opts > button:focus-visible,
#atelier [data-engrave-depth]:focus-visible,
#atelier .engrave-depth-menu [role="option"]:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
@media (hover: hover) { #atelier .engrave-depth-menu [role="option"]:hover { background: rgb(30 30 26 / .06); } }
@media (prefers-reduced-motion: reduce) { #atelier .engrave-depth-value svg { transition: none; } }
#atelier .engraving-tools > .frame-selection-summary { display: flex; inline-size: 100%; margin: 0; border: 0; }
#atelier .engrave-control-card { grid-column: auto; grid-template-columns: minmax(44px, 1fr); }
@media (min-width: 1025px), (min-width: 721px) and (orientation: landscape) {
  #atelier .engrave-control-card { position: static; display: grid; padding: 5px; }
  #atelier .band-engrave > .engrave { grid-template-columns: 30px minmax(0, 1fr); }
}
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  #atelier .engrave-control-card { flex-basis: 56px; inline-size: 56px; }
  #atelier .band-engrave .engrave-grid { scroll-padding-inline-start: 72px; }
}