/* Dedicated, guided product configurator */
.configurator-page {
  --config-nav-width: 218px;
  --config-live-width: clamp(380px, 28vw, 520px);
  --wizard-control-height: 76px;
  --wizard-control-gap: 32px;
  --wizard-safe-bottom: env(safe-area-inset-bottom, 0px);
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
}
.configurator-page button,
.configurator-page input,
.configurator-page label { cursor: none; }

.config-header {
  height: 82px;
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 32px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(252, 251, 249, .94);
  backdrop-filter: blur(14px);
}
.config-header-title { display: grid; justify-items: center; gap: 5px; }
.config-header-title span,
.config-header-title strong,
.config-exit { font: 10px var(--mono); letter-spacing: .12em; }
.config-header-title span { color: var(--stone); }
.config-header-title strong { font-weight: 500; }
.config-exit { justify-self: end; }
.config-exit span { display: inline-block; margin-left: 18px; font-size: 15px; }
.config-progress-track { height: 3px; position: sticky; top: 82px; z-index: 81; background: var(--hairline); }
.config-progress-track i { display: block; width: 16.666%; height: 100%; background: var(--ink); transition: width .45s cubic-bezier(.22, 1, .36, 1); }

.config-layout {
  min-height: calc(100svh - 85px);
  display: grid;
  grid-template-columns: var(--config-nav-width) minmax(620px, 1fr) var(--config-live-width);
  align-items: start;
}
.config-steps {
  min-height: calc(100svh - 85px);
  position: sticky;
  top: 85px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hairline);
  padding: 34px 22px 24px;
}
.config-steps > p { color: var(--stone); font: 10px var(--mono); letter-spacing: .12em; margin: 0 0 24px; }
.config-steps > button {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 3px 10px;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--hairline);
  background: none;
  color: var(--stone);
  padding: 17px 4px;
  text-align: left;
}
.config-steps > button::before { content: ""; position: absolute; left: -22px; top: 0; bottom: 0; width: 3px; background: transparent; }
.config-steps > button.active { color: var(--ink); }
.config-steps > button.active::before { background: var(--ink); }
.config-steps > button span { grid-row: 1 / 3; font: 11px var(--mono); }
.config-steps > button strong { font-size: 15px; font-weight: 500; }
.config-steps > button small { font-size: 12px; }
.config-help { margin-top: auto; display: grid; gap: 9px; padding: 22px 4px 0; border-top: 1px solid var(--hairline); }
.config-help span { color: var(--stone); font: 9px var(--mono); letter-spacing: .1em; }
.config-help a { font-size: 13px; }

.config-stage {
  min-width: 0;
  padding: 58px 56px calc(var(--wizard-control-height) + var(--wizard-control-gap) + var(--wizard-safe-bottom));
}
.config-panel { display: none; animation: panelIn .38s cubic-bezier(.22, 1, .36, 1); }
.config-panel.active { display: block; }
.panel-heading { max-width: 650px; margin-bottom: 46px; }
.configurator-page .config-panel > .panel-heading { display: block; }
.panel-heading > p,
.panel-heading > div > p { color: var(--stone); font: 11px var(--mono); letter-spacing: .12em; margin: 0; }
.panel-heading h1 { font-size: clamp(38px, 3.2vw, 54px); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; margin: 16px 0; }
.panel-heading > span,
.panel-heading > div > span { display: block; max-width: 560px; color: var(--stone-dark); font-size: 16px; line-height: 1.55; }
.configurator-page .config-panel > .panel-heading-action { display: flex; justify-content: space-between; align-items: end; max-width: none; }
.panel-heading-action > button { border: 0; background: none; color: var(--stone); font: 10px var(--mono); letter-spacing: .1em; padding: 10px 0; }

.material-toolbar { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 16px; margin-bottom: 12px; }
.material-toolbar .search-field { min-width: 0; margin: 0; }
.material-toolbar .search-field span { font-size: 11px; }
.material-toolbar .search-field input { font-size: 16px; padding: 14px 0; }
.material-toolbar .material-filters { margin: 0; }
.material-toolbar .material-filters button { font-size: 10px; padding: 10px 12px; }
.material-toolbar > span { color: var(--stone); font: 10px var(--mono); padding-bottom: 11px; }

.custom-material-request { display: grid; grid-template-columns: minmax(220px,1fr) minmax(190px,.7fr) auto; align-items: end; gap: 12px 16px; border: 1px solid var(--ink); background: var(--paper); margin-bottom: 12px; padding: 15px; }
.custom-material-request > div { display: grid; grid-row: 1 / span 2; gap: 5px; }
.custom-material-request > div > span,
.custom-material-request label > span { color: var(--stone); font: 8px var(--mono); letter-spacing: .1em; }
.custom-material-request > div strong { font-size: 16px; font-weight: 500; }
.custom-material-request > div small { max-width: 430px; color: var(--stone-dark); font-size: 11px; line-height: 1.4; }
.custom-material-request label { display: grid; gap: 6px; }
.custom-material-request input { width: 100%; min-height: 42px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); font: 12px var(--mono); padding: 0 11px; }
.custom-material-request input:focus-visible { border-color: var(--ink); outline: 2px solid rgba(26,26,26,.24); outline-offset: 1px; }
.custom-material-request button { min-height: 42px; display: flex; justify-content: space-between; gap: 24px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 9px var(--mono); letter-spacing: .08em; padding: 0 13px; }
.custom-material-request output { grid-column: 2 / -1; color: var(--stone); font: 8px var(--mono); letter-spacing: .08em; }

.configurator-page .material-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.config-panel[data-panel="1"] .panel-heading { margin-bottom: 28px; }
.configurator-page .material-tile { min-height: 94px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; grid-template-rows: 1fr auto; align-items: center; gap: 6px 9px; padding: 10px 11px; }
.configurator-page .material-code { grid-row: 1 / 3; font-size: 27px; line-height: 1; }
.material-copy { min-width: 0; align-self: end; }
.configurator-page .material-copy strong { display: block; overflow: hidden; font-size: 13px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.configurator-page .material-copy small { display: block; overflow: hidden; font-size: 7px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; margin: 4px 0 0; }
.material-price { align-self: start; display: grid; justify-items: end; gap: 3px; }
.configurator-page .material-price b { font: 9px var(--mono); font-weight: 500; white-space: nowrap; }
.configurator-page .material-price small { font-size: 7px; margin: 0; }
.configurator-page .material-tile .selected-state { grid-column: 3; align-self: end; display: block; color: var(--stone); font: 7px var(--mono); letter-spacing: .08em; white-space: nowrap; margin: 0; }
.material-tile.selected .selected-state { color: var(--ink); }
.material-tile.selected { box-shadow: inset 0 0 0 1px var(--ink); }

.configurator-page .component-detail { display: grid; grid-template-columns: minmax(250px,.8fr) minmax(320px,1.2fr); gap: 10px 26px; margin-top: 18px; border: 1px solid var(--hairline); padding: 17px; }
.configurator-page .component-detail header { display: flex; justify-content: space-between; }
.configurator-page .component-detail header { grid-column: 1 / -1; }
.configurator-page .component-detail header span,
.configurator-page .builder-label { font-size: 10px; }
.detail-overview { display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 15px; padding: 8px 0; }
.configurator-page .detail-code { font-size: 46px; margin: 0; }
.configurator-page .component-detail h3 { font-size: 20px; margin: 0 0 5px; }
.configurator-page .component-detail .detail-overview p { color: var(--stone-dark); font-size: 11px; line-height: 1.4; margin: 0; }
.configurator-page .detail-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.configurator-page .detail-facts div { padding: 10px 0; }
.configurator-page .detail-facts div:nth-child(odd) { padding-right: 20px; }
.configurator-page .detail-facts dt,
.configurator-page .detail-facts dd,
.configurator-page .compatibility span,
.configurator-page .compatibility strong { font-size: 9px; }
.configurator-page .compatibility { grid-column: 1 / -1; margin-top: 3px; }

.configurator-page .drop-zone { min-height: 300px; margin-top: 0; padding: 20px; }
.configurator-page .composition-row { grid-template-columns: 54px 1fr 190px 40px; gap: 18px; padding: 20px 10px; }
.configurator-page .composition-row .row-code { width: 50px; height: 56px; font-size: 20px; }
.configurator-page .composition-row strong { font-size: 16px; }
.configurator-page .composition-row small { font-size: 10px; }
.configurator-page .composition-row input { font-size: 18px; }
.configurator-page .composition-row label span { font-size: 10px; }
.configurator-page .composition-row .quantity-field { display: grid; grid-template-columns: 1fr; gap: 7px; border: 0; }
.configurator-page .composition-row .quantity-field > span { color: var(--stone); font: 9px var(--mono); letter-spacing: .08em; }
.quantity-picker { position: relative; }
.quantity-trigger { width: 100%; min-height: 48px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 0 14px; }
.quantity-trigger:focus-visible,
.quantity-menu button:focus-visible,
.custom-quantity button:focus-visible { outline: 2px solid rgba(26,26,26,.34); outline-offset: 2px; }
.quantity-trigger b { font: 15px var(--mono); }
.quantity-trigger > i { width: 8px; height: 8px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.quantity-picker.open .quantity-trigger > i { transform: rotate(225deg) translate(-2px,-2px); }
.quantity-menu { width: 420px; position: absolute; right: 0; top: calc(100% + 7px); z-index: 90; display: none; grid-template-columns: repeat(3,1fr); border: 1px solid var(--ink); background: var(--paper); box-shadow: 0 18px 45px rgba(26,26,26,.16); padding: 7px; }
.quantity-picker.open .quantity-menu { display: grid; }
.quantity-menu button { min-height: 52px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); font: 13px var(--mono); padding: 0 12px; }
.quantity-menu button:hover,
.quantity-menu button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.quantity-menu button i { font-style: normal; }
.custom-quantity { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; border-top: 1px solid var(--hairline); padding-top: 7px; }
.custom-quantity span { color: var(--stone); font: 9px var(--mono); letter-spacing: .08em; }
.custom-quantity input { min-width: 0; height: 44px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); font: 13px var(--mono); padding: 0 10px; }
.custom-quantity input:focus-visible { border-color: var(--ink); outline: 2px solid rgba(26,26,26,.34); outline-offset: 1px; }
.custom-quantity button { min-height: 44px; border-color: var(--ink); background: var(--ink); color: var(--paper); }
.quantity-field > em { color: var(--stone-dark); font: normal 9px var(--mono); letter-spacing: .07em; }
.configurator-page .composition-row .remove-component { width: 40px; height: 48px; border: 1px solid var(--hairline); background: var(--paper); font-size: 20px; }
.dosage-planner { display: grid; gap: 18px; margin-top: 34px; border-top: 1px solid var(--ink); padding-top: 24px; }
.dosage-planner header { display: flex; justify-content: space-between; gap: 18px; align-items: end; }
.dosage-planner header p { margin: 0 0 7px; font: 10px var(--mono); letter-spacing: .12em; }
.dosage-planner header span { color: var(--stone-dark); font-size: 14px; line-height: 1.45; }
.dosage-planner header button { min-height: 44px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 10px var(--mono); letter-spacing: .08em; padding: 0 18px; transition: background .18s ease, color .18s ease, transform .18s ease; }
.dosage-planner header button:hover,
.dosage-planner header button:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.dosage-planner header button:active { transform: translateY(1px); }
.dosage-planner header button:disabled { border-color: var(--hairline); background: var(--wash); color: var(--stone); opacity: .7; pointer-events: none; }
.dosage-rows { display: grid; border: 1px solid var(--hairline); border-bottom: 0; }
.dosage-row { display: grid; grid-template-columns: 130px minmax(220px, 1fr) 110px 40px; align-items: end; gap: 14px; border-bottom: 1px solid var(--hairline); padding: 14px; background: var(--paper); }
.dosage-row label { display: grid; gap: 8px; }
.dosage-row label > span,
.dosage-row dt,
.dosage-totals dt { color: var(--stone); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dosage-row input { width: 100%; min-width: 0; height: 46px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); font: 18px var(--mono); padding: 0 12px; }
.dosage-row input:focus-visible { border-color: var(--ink); outline: 2px solid rgba(26,26,26,.34); outline-offset: 1px; }
.mini-stepper { display: grid; grid-template-columns: 46px 1fr 46px; }
.mini-stepper button { min-height: 46px; border: 1px solid var(--hairline); background: var(--wash); color: var(--ink); font: 12px var(--mono); transition: background .18s ease, color .18s ease; }
.mini-stepper button:hover,
.mini-stepper button:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.mini-stepper input { border-left: 0; border-right: 0; text-align: center; }
.dosage-row dl { display: grid; gap: 7px; margin: 0; }
.dosage-row dd,
.dosage-totals dd { margin: 0; font: 13px var(--mono); }
.dosage-row.moq-warning { background: #fbf3ef; }
.dosage-row.moq-warning dd { color: #8b2f22; }
.remove-dosage-range { width: 40px; height: 46px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); font-size: 20px; transition: background .18s ease, color .18s ease; }
.remove-dosage-range:hover,
.remove-dosage-range:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.remove-dosage-range:disabled { color: var(--stone); opacity: .35; pointer-events: none; }
.dosage-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; background: var(--hairline); border: 1px solid var(--hairline); }
.dosage-totals div { display: grid; gap: 8px; background: var(--wash); padding: 14px; }
.dosage-totals dd.warning { color: #8b2f22; }
.configurator-page input[type="number"]::-webkit-inner-spin-button,
.configurator-page input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.configurator-page .composition-bar { height: 14px; margin-top: 34px; }
.configurator-page .calculation-note { font-size: 10px; margin-top: 18px; }

.option-group { padding: 28px 0 36px; border-top: 1px solid var(--hairline); }
.option-group > div:first-child p { font: 11px var(--mono); letter-spacing: .1em; margin: 0 0 8px; }
.option-group > div:first-child span { color: var(--stone-dark); font-size: 14px; }
.large-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
.large-swatches.caps { grid-template-columns: repeat(6, 1fr); }
.swatch-option { min-height: 150px; display: grid; justify-items: center; align-content: center; gap: 8px; border: 1px solid var(--hairline); background: var(--wash); color: var(--ink); }
.swatch-option:hover,
.swatch-option.active { border-color: var(--ink); background: var(--paper); }
.swatch-option > i { width: 46px; height: 46px; border: 1px solid #d2d0cb; border-radius: 50%; background: #f4f3ef; margin-bottom: 4px; }
.swatch-option > i.amber { background: #725332; }
.swatch-option > i.smoke { background: #686761; }
.swatch-option > i.frost { background: #efeee9; }
.swatch-option > i.clear-coated { background: radial-gradient(circle,#fff 0 38%,#d7e5e7 42% 51%,#f5f5f1 54%); }
.swatch-option > i.amber-coated { background: radial-gradient(circle,#9a7041 0 38%,#d5b078 42% 51%,#725332 54%); }
.swatch-option > i.random { background: conic-gradient(#0754bf 0 12.5%,#24a8b4 0 25%,#36835a 0 37.5%,#e8c83f 0 50%,#df7b2f 0 62.5%,#b83f38 0 75%,#694b93 0 87.5%,#dc7d9b 0); }
.swatch-option > i.blue { background: #0754bf; }
.swatch-option > i.aqua { background: #24a8b4; }
.swatch-option > i.green { background: #36835a; }
.swatch-option > i.yellow { background: #e8c83f; }
.swatch-option > i.orange { background: #df7b2f; }
.swatch-option > i.red { background: #b83f38; }
.swatch-option > i.purple { background: #694b93; }
.swatch-option > i.pink { background: #dc7d9b; }
.swatch-option > i.black { background: var(--ink); }
.swatch-option > i.silver { background: #aaa8a2; }
.swatch-option > i.white { background: #f2f1ed; }
.swatch-option strong { font-size: 15px; font-weight: 500; }
.swatch-option small { color: var(--stone); font-size: 12px; }
.large-swatches.caps .swatch-option { min-height: 104px; gap: 5px; }
.large-swatches.caps .swatch-option > i { width: 34px; height: 34px; margin-bottom: 1px; }
.large-swatches.caps .swatch-option strong { font-size: 12px; }
.large-swatches.caps .swatch-option small { font-size: 9px; text-align: center; }
.cap-personalization { display: grid; grid-template-columns: 1fr minmax(230px,.7fr); gap: 10px; margin-top: 12px; }
.cap-text-toggle,
.cap-text-field { min-height: 82px; border: 1px solid var(--hairline); background: var(--wash); padding: 15px; }
.cap-text-toggle { display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 12px; }
.cap-text-toggle input { appearance: none; width: 17px; height: 17px; border: 1px solid var(--stone); }
.cap-text-toggle input:checked { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 4px var(--paper); }
.cap-text-toggle span { display: grid; gap: 5px; }
.cap-text-toggle b { font: 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.cap-text-toggle small { color: var(--stone); font: 8px var(--mono); letter-spacing: .06em; }
.cap-text-toggle strong { font: 9px/1.5 var(--mono); font-weight: 400; text-align: right; }
.cap-text-field { position: relative; display: grid; align-content: center; gap: 7px; }
.cap-text-field > span { color: var(--stone); font: 8px var(--mono); letter-spacing: .08em; }
.cap-text-field input { width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); font: 16px var(--mono); padding: 7px 45px 7px 0; text-transform: uppercase; }
.cap-text-field output { position: absolute; right: 15px; bottom: 23px; color: var(--stone); font: 8px var(--mono); }
.cap-personalization.locked { opacity: .48; }
.cap-personalization.active .cap-text-toggle,
.cap-personalization.active .cap-text-field { border-color: var(--ink); background: var(--paper); }
.label-builder { display: grid; gap: 26px; border-top: 1px solid var(--hairline); padding: 38px 0 12px; }
.label-builder-copy { display: grid; grid-template-columns: minmax(300px,1fr) minmax(220px,.55fr); gap: 20px 26px; align-items: start; }
.label-builder-copy > p,
.label-builder-copy h2,
.label-builder-copy > span { grid-column: 1; }
.brand-name-field { grid-column: 2; grid-row: 1 / span 3; margin-top: 4px; }
.label-builder-copy > p { font: 11px var(--mono); letter-spacing: .1em; margin: 0; }
.label-builder-copy h2 { font-size: 27px; font-weight: 400; line-height: 1.15; margin: 12px 0; }
.label-builder-copy > span { display: block; color: var(--stone-dark); font-size: 14px; line-height: 1.55; }
.brand-name-field { display: grid; gap: 8px; margin-top: 22px; }
.brand-name-field span { font: 10px var(--mono); letter-spacing: .12em; color: var(--stone-dark); }
.brand-name-field input { width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; padding: 10px 0; color: var(--ink); font: 500 18px var(--sans); outline: none; }
.brand-name-field input:focus { border-bottom-width: 2px; }
.label-mode-options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 2px; }
.label-mode-card { min-height: 132px; display: grid; grid-template-columns: 18px 1fr; align-content: start; align-items: start; gap: 12px; border: 1px solid var(--hairline); background: var(--wash); padding: 16px; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.label-mode-card.active { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.label-mode-card > input { appearance: none; width: 16px; height: 16px; border: 1px solid var(--stone); border-radius: 50%; }
.label-mode-card > input:checked { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 40%, transparent 46%); }
.label-mode-card > span { display: grid; gap: 6px; }
.label-mode-card b { font: 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.label-mode-card small { color: var(--stone); font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.label-mode-card strong { grid-column: 2; align-self: end; color: var(--stone-dark); font: 10px var(--mono); font-weight: 400; letter-spacing: .07em; }
.label-artwork-panel { display: grid; gap: 18px; }
.flat-vial-label { aspect-ratio: 2.55 / 1; position: relative; display: grid; grid-template-columns: 75px 1fr 125px; align-items: center; gap: 22px; overflow: hidden; border: 1px solid #d8d8d3; border-radius: 17px; background: #f8f8f5; color: #252624; box-shadow: 0 12px 24px rgba(26,26,26,.1); padding: 24px 22px; }
.flat-vial-label::after { content: attr(data-label-caption); position: absolute; left: 18px; top: 14px; color: #77746e; font: 8px var(--mono); letter-spacing: .11em; text-transform: uppercase; opacity: 0; transition: opacity .18s ease; }
.flat-vial-label[data-label-mode="none"] { border-style: dashed; background: transparent; box-shadow: none; }
.flat-vial-label[data-label-mode="none"]::after { inset: 0; display: grid; place-items: center; color: var(--stone-dark); font-size: 11px; opacity: 1; }
.flat-vial-label[data-label-mode="none"] .flat-label-logo,
.flat-vial-label[data-label-mode="none"] .flat-label-main,
.flat-vial-label[data-label-mode="none"] dl,
.flat-vial-label[data-label-mode="none"] em,
.flat-vial-label[data-label-mode="none"] > img { visibility: hidden; opacity: 0; }
.flat-vial-label[data-label-mode="box"]::after { opacity: 1; }
.flat-label-logo { justify-self: center; max-height: 145px; overflow: hidden; font-size: 18px; font-weight: 500; letter-spacing: .04em; writing-mode: vertical-rl; transform: rotate(180deg); }
.flat-label-main { align-self: stretch; display: grid; grid-template-rows: 1fr auto 1fr; align-items: center; }
.flat-label-main b { align-self: end; font: 500 25px var(--mono); }
.flat-label-main i { display: block; height: 2px; background: var(--ink); margin: 10px 0; }
.flat-label-main span { align-self: start; font: 18px var(--mono); }
.flat-vial-label dl { display: grid; gap: 5px; margin: 0; transform: rotate(90deg); white-space: nowrap; }
.flat-vial-label dl div { display: grid; grid-template-columns: auto 1fr; gap: 5px; }
.flat-vial-label dt,
.flat-vial-label dd { font: 11px var(--mono); margin: 0; }
.flat-vial-label dt { font-weight: 500; }
.flat-vial-label em { position: absolute; left: 118px; bottom: 17px; font: normal 10px var(--mono); letter-spacing: .08em; }
.flat-vial-label > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; background: #f8f8f5; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.flat-vial-label.has-artwork { background: #f8f8f5; padding: 0; }
.flat-vial-label.has-artwork::before { content: ""; position: absolute; inset: 10px; z-index: 1; border: 1px dashed rgba(37,38,36,.28); pointer-events: none; }
.flat-vial-label.has-artwork::after { z-index: 3; opacity: .72; background: rgba(248,248,245,.82); padding: 4px 6px; }
.flat-vial-label.has-artwork .flat-label-logo,
.flat-vial-label.has-artwork .flat-label-main,
.flat-vial-label.has-artwork dl,
.flat-vial-label.has-artwork em { opacity: 0; visibility: hidden; }
.flat-vial-label.has-artwork > img { opacity: 1; }
.label-artwork-tools { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: stretch; gap: 12px; min-width: 0; }
.label-spec,
.label-upload,
.copy-template-button { border: 1px solid var(--hairline); background: var(--wash); }
.label-spec { padding: 18px; }
.label-spec p { margin: 0 0 12px; font: 11px var(--mono); letter-spacing: .1em; }
.label-spec dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 0; }
.label-spec dl div { display: grid; gap: 5px; align-content: start; }
.label-spec dt,
.label-spec dd { margin: 0; font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.label-spec dt { color: var(--stone); }
.label-spec dd { color: var(--ink); overflow-wrap: anywhere; }
.label-upload { position: relative; min-height: 100%; display: grid; align-items: center; padding: 18px; transition: border-color .18s ease, background .18s ease; }
.label-upload:focus-within,
.label-upload:hover { border-color: var(--ink); background: var(--paper); }
.label-upload input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; }
.label-upload span { display: grid; gap: 7px; }
.label-upload b { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.label-upload small { color: var(--stone-dark); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.copy-template-button { grid-column: 1 / -1; min-height: 54px; padding: 18px; color: var(--ink); font: 10px/1.35 var(--mono); letter-spacing: .08em; white-space: normal; overflow-wrap: anywhere; transition: background .18s ease, color .18s ease, transform .18s ease; }
.copy-template-button:hover,
.copy-template-button:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.copy-template-button:active { transform: translateY(1px); }

.packaging-options { display: grid; gap: 10px; }
.packaging-card { min-height: 96px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 18px; border: 1px solid var(--hairline); background: var(--wash); padding: 20px; }
.packaging-card.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper); }
.packaging-card.disabled { opacity: .42; pointer-events: none; }
.packaging-card > input { appearance: none; width: 17px; height: 17px; border: 1px solid var(--stone); }
.packaging-card > input:checked { background: var(--ink); box-shadow: inset 0 0 0 4px var(--paper); border-color: var(--ink); }
.packaging-card > input:disabled { border-style: dashed; }
.included-kit > i { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ink); color: var(--ink); font: normal 10px var(--mono); }
.packaging-card > span { display: grid; gap: 8px; }
.packaging-card > span b { font: 12px var(--mono); letter-spacing: .07em; }
.packaging-card > span small { color: var(--stone); font: 9px var(--mono); letter-spacing: .06em; }
.packaging-card > strong { font: 14px var(--mono); font-weight: 400; }
.packaging-card > strong small { color: var(--stone); font-size: 9px; }
.box-color-section { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.box-color-section[hidden] { display: none; }
.box-color-section > div:first-child p { font: 11px var(--mono); letter-spacing: .1em; margin: 0 0 8px; }
.box-color-section > div:first-child span { color: var(--stone-dark); font-size: 14px; }
.box-colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 24px; }
.box-colors button { min-height: 86px; display: grid; justify-items: center; align-content: center; gap: 8px; border: 1px solid var(--hairline); background: var(--wash); color: var(--ink); }
.box-colors button.active { border-color: var(--ink); background: var(--paper); }
.box-colors i { width: 35px; height: 35px; border-radius: 50%; background: var(--color); border: 1px solid rgba(0,0,0,.12); }
.box-colors i.random-box-color { background: conic-gradient(#b89a57 0 10%,#161817 10% 20%,#15588c 20% 30%,#147e83 30% 40%,#94a68b 40% 50%,#eee9d9 50% 60%,#c9a98c 60% 70%,#bd6249 70% 80%,#633b55 80% 90%,#24334b 90%); }
.box-colors span { font-size: 11px; }
.packaging-note { color: var(--stone); font: 9px/1.6 var(--mono); letter-spacing: .06em; margin: 24px 0 0; }

.configurator-page .lab-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 0; }
.configurator-page .lab-card { min-height: 176px; grid-template-columns: 22px 1fr; align-content: start; gap: 16px; padding: 22px 20px; border: 1px solid var(--hairline); }
.configurator-page .lab-card:last-child { border-bottom: 1px solid var(--hairline); }
.configurator-page .lab-card.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.configurator-page .lab-card input { width: 15px; height: 15px; margin-top: 1px; }
.configurator-page .lab-card > span b { font-size: 13px; }
.configurator-page .lab-card > span small { font-size: 10px; margin-top: 7px; }
.configurator-page .lab-card dl { gap: 20px; margin-top: 18px; }
.configurator-page .lab-card dt { font-size: 9px; }
.configurator-page .lab-card dd { font-size: 12px; margin-top: 7px; }
.configurator-page .lab-note { font-size: 9px; }

.logistics-config { padding: 0; }
.logistics-section { display: grid; grid-template-columns: minmax(180px,.62fr) minmax(0,1fr); gap: 26px; border-top: 1px solid var(--hairline); padding: 28px 0; }
.logistics-copy { display: grid; align-content: start; gap: 9px; }
.logistics-copy p { margin: 0; font: 11px var(--mono); letter-spacing: .1em; }
.logistics-copy span { color: var(--stone-dark); font-size: 14px; line-height: 1.55; }
.warehouse-options,
.shipping-mode-options { display: grid; gap: 10px; }
.warehouse-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.warehouse-card,
.shipping-mode-card,
.logistics-insurance { border: 1px solid var(--hairline); background: var(--wash); transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.warehouse-card,
.shipping-mode-card { min-height: 116px; display: grid; grid-template-columns: 18px 1fr auto; align-items: start; gap: 13px; padding: 18px; }
.warehouse-card.active,
.shipping-mode-card.active,
.logistics-insurance.active { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.warehouse-card:focus-within,
.shipping-mode-card:focus-within,
.logistics-insurance:focus-within { border-color: var(--ink); outline: 2px solid rgba(26,26,26,.34); outline-offset: 2px; }
.warehouse-card input,
.shipping-mode-card input,
.logistics-insurance input { appearance: none; width: 16px; height: 16px; border: 1px solid var(--stone); }
.warehouse-card input,
.shipping-mode-card input { border-radius: 50%; }
.warehouse-card input:checked,
.shipping-mode-card input:checked { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 40%, transparent 46%); }
.logistics-insurance input:checked { background: var(--ink); box-shadow: inset 0 0 0 4px var(--paper); border-color: var(--ink); }
.warehouse-card span,
.shipping-mode-card span,
.logistics-insurance span { display: grid; gap: 7px; }
.warehouse-card b,
.shipping-mode-card b,
.logistics-insurance b { font: 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.warehouse-card small,
.shipping-mode-card small,
.logistics-insurance small { color: var(--stone); font: 9px/1.45 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.warehouse-card strong,
.logistics-insurance strong { color: var(--stone-dark); font: 12px var(--mono); font-weight: 400; white-space: nowrap; }
.shipping-controls { min-width: 0; display: grid; gap: 16px; }
.shipping-field { display: grid; gap: 8px; }
.shipping-field span,
.batch-split-controls span { color: var(--stone); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.shipping-field select,
.batch-split-controls input { width: 100%; min-height: 48px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); font: 14px var(--mono); padding: 0 12px; }
.shipping-field select:focus-visible,
.batch-split-controls input:focus-visible { border-color: var(--ink); outline: 2px solid rgba(26,26,26,.34); outline-offset: 1px; }
.batch-split-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.batch-split-controls[hidden] { display: none; }
.batch-split-controls label { display: grid; gap: 8px; }
.logistics-insurance { min-height: 108px; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 18px; margin-top: 10px; }
.logistics-totals { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 26px 0 0; background: var(--hairline); border: 1px solid var(--hairline); }
.logistics-totals div { display: grid; gap: 8px; background: var(--wash); padding: 15px; }
.logistics-totals dt { color: var(--stone); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.logistics-totals dd { margin: 0; font: 12px/1.35 var(--mono); }
.logistics-note { color: var(--stone); font: 9px/1.6 var(--mono); letter-spacing: .06em; margin: 18px 0 0; }

.shipment-destinations { display: grid; gap: 8px; }
.shipment-destination-row { display: grid; grid-template-columns: 24px minmax(100px,1fr) 54px 64px minmax(95px,.72fr) 30px; align-items: end; gap: 6px; border: 1px solid var(--hairline); background: var(--paper); padding: 9px; }
.shipment-destination-row.protected { border-color: var(--ink); }
.shipment-destination-row.inactive { background: var(--wash); }
.destination-index { align-self: center; color: var(--stone); font: 9px var(--mono); }
.shipment-destination-row > label:not(.destination-protection) { min-width: 0; display: grid; gap: 6px; }
.shipment-destination-row > label > span,
.hold-inputs label > span { color: var(--stone); font: 8px var(--mono); letter-spacing: .08em; }
.shipment-destination-row input[type="text"],
.shipment-destination-row input[type="number"],
.hold-inputs input { width: 100%; min-width: 0; min-height: 40px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); font: 11px var(--mono); padding: 0 9px; }
.shipment-destination-row input:focus-visible,
.hold-inputs input:focus-visible { border-color: var(--ink); outline: 2px solid rgba(26,26,26,.24); outline-offset: 1px; }
.destination-protection { min-height: 40px; display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 6px; border: 1px solid var(--hairline); padding: 6px; }
.destination-protection input,
.hold-toggle input { appearance: none; width: 15px; height: 15px; border: 1px solid var(--stone); }
.destination-protection input:checked,
.hold-toggle input:checked { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); }
.destination-protection span { display: grid; gap: 3px; }
.destination-protection b { font: 7px var(--mono); letter-spacing: .05em; }
.destination-protection small { color: var(--stone); font: 7px var(--mono); }
.remove-destination { width: 30px; height: 40px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); font-size: 18px; }
.remove-destination:disabled { opacity: .25; pointer-events: none; }
.shipment-destination-row > output { grid-column: 2 / -1; color: var(--stone-dark); font: 8px var(--mono); letter-spacing: .06em; }
.add-destination { min-height: 42px; display: flex; justify-content: space-between; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 9px var(--mono); letter-spacing: .08em; padding: 0 13px; }
.shipping-mode-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.shipping-mode-card { min-height: 94px; grid-template-columns: 18px 1fr; }
.hold-controls { display: grid; gap: 10px; }
.hold-toggle { min-height: 80px; display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--hairline); background: var(--wash); padding: 15px; }
.hold-toggle.active { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.hold-toggle > span { display: grid; gap: 5px; }
.hold-toggle b { font: 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.hold-toggle small { color: var(--stone); font: 8px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.hold-toggle strong { font: 9px var(--mono); font-weight: 400; white-space: nowrap; }
.hold-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hold-inputs[hidden] { display: none; }
.hold-inputs label { display: grid; gap: 7px; }
.logistics-totals { grid-template-columns: repeat(5,1fr); }
.logistics-totals dd.warning { color: #8b2f22; }

.review-checklist { border-top: 1px solid var(--ink); }
.review-panel .panel-heading { margin-bottom: 28px; }
.review-checklist > div { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; min-height: 66px; border-bottom: 1px solid var(--hairline); padding: 8px 0; }
.review-checklist > div > span { color: var(--stone); font: 11px var(--mono); }
.review-checklist p { display: grid; gap: 4px; margin: 0; }
.review-checklist strong { font-size: 14px; font-weight: 500; }
.review-checklist small { color: var(--stone); font: 8px/1.35 var(--mono); letter-spacing: .05em; }
.review-checklist button { border: 0; background: none; font: 10px var(--mono); letter-spacing: .1em; }
.review-notice { color: var(--stone-dark); font-size: 13px; line-height: 1.6; margin: 30px 0 0; }
.request-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); align-items: start; gap: 12px; margin-top: 24px; }
.request-summary > section { min-width: 0; border: 1px solid var(--hairline); padding: 16px; }
.request-summary header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ink); padding-bottom: 11px; }
.request-summary header span,
.request-summary header strong { font: 10px var(--mono); letter-spacing: .08em; }
.request-summary header strong { font-weight: 500; }
.review-composition-rows > div { display: grid; grid-template-columns: 26px minmax(115px,1fr) repeat(3, auto); align-items: center; gap: 10px; border-bottom: 1px solid var(--hairline); padding: 11px 0; }
.review-composition-rows > div > span { font: 11px var(--mono); }
.review-composition-rows p { display: grid; gap: 5px; margin: 0; }
.review-composition-rows p strong { font-size: 14px; font-weight: 500; }
.review-composition-rows p small { color: var(--stone); font: 8px var(--mono); }
.review-composition-rows dl { min-width: 48px; margin: 0; text-align: right; }
.review-composition-rows dt,
.pricing-summary dt { color: var(--stone); font: 8px var(--mono); letter-spacing: .07em; }
.review-composition-rows dd { font: 10px var(--mono); margin: 5px 0 0; }
.empty-review { color: var(--stone); font: 10px var(--mono); padding: 20px 0; }
.pricing-summary dl { margin: 6px 0 0; }
.pricing-summary dl > div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--hairline); padding: 9px 0; }
.pricing-summary dd { font: 10px var(--mono); margin: 0; text-align: right; }
.pricing-summary .known-total { border-top: 1px solid var(--ink); border-bottom-color: var(--ink); margin-top: 8px; }
.pricing-summary .known-total dt,
.pricing-summary .known-total dd { color: var(--ink); font-size: 11px; }
.pricing-summary > p { color: var(--stone-dark); font-size: 10px; line-height: 1.45; margin: 12px 0 0; }
.order-contact { border: 1px solid var(--hairline); margin-top: 12px; padding: 16px; }
.order-contact > header { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--ink); padding-bottom: 16px; }
.order-contact > header span,
.order-contact > header strong { font: 10px var(--mono); letter-spacing: .08em; }
.order-contact > header strong { font-weight: 500; }
.order-contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; }
.order-contact-fields label { display: grid; gap: 8px; }
.order-contact-fields label > span { color: var(--stone); font: 9px var(--mono); letter-spacing: .08em; }
.order-contact-fields input,
.order-contact-fields textarea { width: 100%; border: 1px solid var(--hairline); border-radius: 0; background: var(--paper); color: var(--ink); font: 13px/1.5 var(--mono); padding: 13px; }
.order-contact-fields input { min-height: 48px; }
.order-contact-fields textarea { min-height: 88px; resize: vertical; }
.order-contact-fields input:focus-visible,
.order-contact-fields textarea:focus-visible { border-color: var(--ink); outline: 2px solid rgba(26,26,26,.34); outline-offset: 1px; }
.order-contact-fields .order-notes { grid-column: 1 / -1; }
.order-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.review-status { display: none; grid-template-columns: auto 1fr; gap: 14px; align-items: start; border: 1px solid var(--ink); margin-top: 22px; padding: 20px; }
.review-status:not(:empty) { display: grid; }
.review-status > i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); margin-top: 4px; }
.review-status p { display: grid; gap: 7px; margin: 0; }
.review-status strong { font: 10px var(--mono); letter-spacing: .08em; }
.review-status span { color: var(--stone-dark); font-size: 13px; line-height: 1.5; }

.wizard-controls { position: fixed; left: var(--config-nav-width); bottom: 0; z-index: 60; width: calc(100% - var(--config-nav-width) - var(--config-live-width)); min-height: calc(var(--wizard-control-height) + var(--wizard-safe-bottom)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--hairline); background: rgba(252,251,249,.96); backdrop-filter: blur(12px); padding: 0 28px var(--wizard-safe-bottom); }
.wizard-controls button { width: max-content; border: 0; background: none; font: 11px var(--mono); letter-spacing: .1em; padding: 16px; }
.wizard-controls button:disabled { opacity: .25; }
.wizard-controls button:last-child { justify-self: end; min-width: 170px; background: var(--ink); color: var(--paper); }
.wizard-controls button:last-child span { margin-left: 25px; }
.wizard-controls > span { color: var(--stone); font: 10px var(--mono); letter-spacing: .1em; }

.config-live { min-height: calc(100svh - 85px); position: sticky; top: 85px; border-left: 1px solid var(--hairline); background: var(--charcoal); color: var(--paper); }
.config-live > header { height: 72px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(252,251,249,.12); padding: 0 28px; }
.config-live > header div { display: grid; gap: 5px; }
.config-live > header span,
.config-live > header strong,
.config-live > header i { font: 9px var(--mono); letter-spacing: .1em; }
.config-live > header span { color: rgba(252,251,249,.45); }
.config-live > header strong { font-size: 10px; font-weight: 400; }
.config-live > header i { color: rgba(252,251,249,.55); font-style: normal; }
.config-live > header i b { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--paper); margin-right: 7px; }
.config-live .config-preview { height: 410px; position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(252,251,249,.12); }
.preview-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(252,251,249,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(252,251,249,.04) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle, black, transparent 72%); }
#vial-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; touch-action: none; }
.config-preview.three-ready #vial-canvas { opacity: 1; }
.config-preview.three-ready > .builder-vial { visibility: hidden; }
.config-live .builder-vial {
  --cap: #0754bf;
  --cap-top: #0b64df;
  --glass-edge: rgba(186,190,185,.62);
  width: 170px;
  position: relative;
  filter: drop-shadow(0 30px 21px rgba(0,0,0,.38));
  transform-origin: center bottom;
}
.config-live .builder-cap {
  width: 106px;
  height: 32px;
  position: relative;
  z-index: 5;
  border: 0;
  border-radius: 50% 50% 12px 12px / 32% 32% 10px 10px;
  background: linear-gradient(90deg, var(--cap), var(--cap-top) 55%, var(--cap));
  box-shadow: inset 0 -7px 8px rgba(0,0,0,.22), 0 3px 4px rgba(0,0,0,.28);
}
.config-live .builder-cap::before { content: ""; position: absolute; inset: -5px 3px auto; height: 18px; border-radius: 50%; background: radial-gradient(ellipse at 45% 32%, var(--cap-top), var(--cap) 65%, #252525); box-shadow: inset 0 1px 2px rgba(255,255,255,.24); }
.config-live .builder-cap::after { content: ""; position: absolute; left: 5px; right: 5px; top: 26px; height: 21px; z-index: -1; border-radius: 2px 2px 7px 7px; background: linear-gradient(90deg,#777873,#d1d1cb 24%,#f0efea 52%,#9c9d98 82%,#6d6e69); box-shadow: inset 0 3px 4px rgba(255,255,255,.55),inset 0 -3px 4px rgba(0,0,0,.18); }
.config-live .builder-cap > b { position: absolute; left: 9px; right: 9px; top: -2px; z-index: 7; overflow: hidden; color: #fff; font: 500 7px/18px var(--mono); letter-spacing: .04em; text-align: center; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; }
.config-live .builder-neck { width: 88px; height: 42px; position: relative; z-index: 3; margin-top: 12px; border-inline: 2px solid rgba(235,238,234,.55); border-radius: 5px 5px 12px 12px; background: linear-gradient(90deg,rgba(120,124,121,.5),rgba(246,248,244,.65) 25%,rgba(255,255,255,.2) 65%,rgba(125,129,126,.5)); box-shadow: inset 0 0 8px rgba(255,255,255,.45); }
.config-live .builder-neck::before { content: ""; position: absolute; left: 17px; right: 17px; top: -10px; height: 14px; border-radius: 2px 2px 45% 45%; background: linear-gradient(90deg,#171817,#4b4d49 48%,#111211); opacity: .9; }
.config-live .builder-glass {
  width: 158px;
  height: 184px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 2px solid rgba(218,221,216,.6);
  border-top-color: rgba(244,246,242,.74);
  border-radius: 25px 25px 31px 31px;
  background: radial-gradient(ellipse at 50% 102%,rgba(250,251,247,.72),transparent 37%),linear-gradient(90deg,var(--glass-edge),rgba(255,255,255,.5) 18%,rgba(255,255,255,.14) 48%,rgba(245,247,243,.52) 72%,var(--glass-edge));
  padding: 0;
  box-shadow: inset 10px 0 15px rgba(255,255,255,.22),inset -11px 0 14px rgba(75,78,75,.14),inset 0 -8px 10px rgba(255,255,255,.4);
  color: var(--ink);
}
.config-live .builder-glass::before { content: ""; position: absolute; inset: 55px 7px 13px; z-index: -1; border-radius: 2px 2px 14px 14px; background: linear-gradient(90deg,#deded9,#fbfaf5 20%,#f5f4ee 72%,#d3d3cd); box-shadow: 0 1px 3px rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.05); }
.config-live .builder-glass::after { content: ""; position: absolute; left: 20px; top: 7px; width: 11px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(2px); }
.config-live .builder-glass b { position: relative; z-index: 1; color: var(--ink); font-size: 14px; letter-spacing: .28em; margin: 72px 0 0 .28em; }
.config-live .builder-glass i { position: relative; z-index: 1; max-width: 130px; color: var(--ink); font: normal 12px var(--mono); letter-spacing: .04em; text-align: center; margin-top: 13px; }
.config-live .builder-glass small { position: relative; z-index: 1; color: #555650; font: 10px var(--mono); margin-top: 7px; }
.config-live .builder-glass em { position: absolute; z-index: 1; left: 0; right: 0; bottom: 20px; color: #777871; font: normal 6px var(--mono); letter-spacing: .04em; text-align: center; }
.config-live .builder-vial:not([data-label-mode="vial"]) .builder-glass::before,
.config-live .builder-vial:not([data-label-mode="vial"]) .builder-glass b,
.config-live .builder-vial:not([data-label-mode="vial"]) .builder-glass i,
.config-live .builder-vial:not([data-label-mode="vial"]) .builder-glass small,
.config-live .builder-vial:not([data-label-mode="vial"]) .builder-glass em { opacity: 0; }
.config-live .builder-vial[data-cap="blue"] { --cap: #0754bf; --cap-top: #0b64df; }
.config-live .builder-vial[data-cap="aqua"] { --cap: #168b96; --cap-top: #24a8b4; }
.config-live .builder-vial[data-cap="green"] { --cap: #286d49; --cap-top: #36835a; }
.config-live .builder-vial[data-cap="yellow"] { --cap: #bba22e; --cap-top: #e8c83f; }
.config-live .builder-vial[data-cap="orange"] { --cap: #bd6222; --cap-top: #df7b2f; }
.config-live .builder-vial[data-cap="red"] { --cap: #8f2d29; --cap-top: #b83f38; }
.config-live .builder-vial[data-cap="purple"] { --cap: #513574; --cap-top: #694b93; }
.config-live .builder-vial[data-cap="pink"] { --cap: #bd5e7e; --cap-top: #dc7d9b; }
.config-live .builder-vial[data-cap="black"] { --cap: #1a1a1a; --cap-top: #3b3b38; }
.config-live .builder-vial[data-cap="silver"] { --cap: #929491; --cap-top: #d0d1ce; }
.config-live .builder-vial[data-cap="white"] { --cap: #d7d7d2; --cap-top: #f5f4ef; }
.config-live .builder-vial:is([data-cap="yellow"],[data-cap="silver"],[data-cap="white"]) .builder-cap > b { color: #1a1a1a; text-shadow: 0 1px 1px rgba(255,255,255,.55); }
.config-live .builder-vial[data-glass="amber"] { --glass-edge: rgba(111,77,39,.72); }
.config-live .builder-vial[data-glass="smoke"] { --glass-edge: rgba(73,74,71,.7); }
.config-live .builder-vial[data-glass="frost"] { --glass-edge: rgba(231,232,227,.92); }
.config-live .rotate-note { position: absolute; left: 25px; bottom: 20px; color: rgba(252,251,249,.38); font: 9px var(--mono); letter-spacing: .1em; }
.live-composition { display: grid; gap: 8px; padding: 22px 28px; border-bottom: 1px solid rgba(252,251,249,.12); }
.live-composition span { color: rgba(252,251,249,.42); font: 9px var(--mono); letter-spacing: .1em; }
.live-composition strong { font-size: 16px; font-weight: 400; }
.live-summary { margin: 0; padding: 10px 28px; }
.live-summary div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(252,251,249,.09); }
.live-summary dt { color: rgba(252,251,249,.42); font: 9px var(--mono); letter-spacing: .08em; }
.live-summary dd { font: 12px var(--mono); margin: 0; text-align: right; }
.config-live > button { width: calc(100% - 56px); min-height: 56px; border: 0; background: var(--paper); color: var(--ink); font: 10px var(--mono); letter-spacing: .08em; margin: 12px 28px 28px; }

.configurator-page[data-config-step="7"] .config-live .config-preview { height: 340px; }

@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 960px) {
  .request-summary { grid-template-columns: 1fr; }
  .order-contact-fields { grid-template-columns: 1fr; }
  .order-contact-fields .order-notes { grid-column: auto; }
}

@media (max-width: 1220px) {
  .configurator-page { --config-nav-width: 190px; }
  .config-layout { grid-template-columns: 190px minmax(500px, 1fr); }
  .config-live { position: relative; top: auto; grid-column: 2; min-height: auto; border-top: 1px solid var(--hairline); }
  .config-live .config-preview { height: 430px; }
  .configurator-page[data-config-step="7"] .config-live .config-preview { height: 360px; }
  .wizard-controls { width: calc(100% - var(--config-nav-width)); }
}

@media (max-width: 760px) {
  .configurator-page { --config-nav-width: 0px; --wizard-control-height: 72px; --wizard-control-gap: 24px; cursor: auto; }
  .configurator-page button,
  .configurator-page input,
  .configurator-page label { cursor: auto; }
  .config-header { grid-template-columns: 1fr auto; height: 70px; padding: 0 20px; }
  .config-header-title { display: none; }
  .config-progress-track { top: 70px; }
  .config-layout { display: flex; flex-direction: column; }
  .config-steps { min-height: 0; width: 100%; position: sticky; top: 73px; z-index: 50; display: flex; flex-direction: row; gap: 5px; overflow-x: auto; border: 0; border-bottom: 1px solid var(--hairline); background: var(--paper); padding: 12px 20px; }
  .config-steps > p,
  .config-steps > button small,
  .config-help { display: none; }
  .config-steps > button { flex: 0 0 auto; width: auto; display: flex; gap: 7px; border: 1px solid var(--hairline); padding: 10px 12px; }
  .config-steps > button::before { display: none; }
  .config-steps > button span { font-size: 10px; }
  .config-steps > button strong { font-size: 12px; }
  .config-steps > button.active { background: var(--ink); color: var(--paper); }
  .config-stage { padding: 44px 20px calc(var(--wizard-control-height) + var(--wizard-control-gap) + var(--wizard-safe-bottom)); }
  .panel-heading h1 { font-size: 11vw; }
  .material-toolbar { grid-template-columns: 1fr auto; }
  .material-toolbar .search-field { grid-column: 1 / -1; }
  .custom-material-request { grid-template-columns: 1fr auto; }
  .custom-material-request > div { grid-column: 1 / -1; grid-row: auto; }
  .custom-material-request label { grid-column: 1; }
  .custom-material-request output { grid-column: 1 / -1; }
  .configurator-page .material-list { grid-template-columns: 1fr 1fr; }
  .configurator-page .material-tile { min-height: 98px; padding: 11px; }
  .configurator-page .component-detail { grid-template-columns: 1fr; }
  .configurator-page .component-detail header,
  .configurator-page .compatibility { grid-column: auto; }
  .detail-overview { grid-template-columns: 90px 1fr; gap: 20px; }
  .configurator-page .detail-code { font-size: 62px; }
  .configurator-page .detail-facts { grid-template-columns: 1fr; }
  .large-swatches { grid-template-columns: 1fr 1fr; }
  .large-swatches.caps { grid-template-columns: repeat(4,1fr); }
  .cap-personalization { grid-template-columns: 1fr; }
  .label-builder-copy,
  .label-mode-options,
  .label-artwork-tools { grid-template-columns: 1fr; }
  .label-builder-copy > p,
  .label-builder-copy h2,
  .label-builder-copy > span,
  .brand-name-field,
  .label-mode-options { grid-column: auto; grid-row: auto; }
  .copy-template-button { min-height: 54px; }
  .configurator-page .lab-options { grid-template-columns: 1fr; }
  .logistics-section,
  .warehouse-options,
  .batch-split-controls { grid-template-columns: 1fr; }
  .shipment-destination-row { grid-template-columns: 26px minmax(130px,1fr) 70px 80px 34px; }
  .destination-protection { grid-column: 2 / 5; }
  .shipment-destination-row > output { grid-column: 2 / -1; }
  .logistics-totals { grid-template-columns: repeat(2,1fr); }
  .wizard-controls { left: 0; width: 100%; padding: 0 10px var(--wizard-safe-bottom); }
  .wizard-controls > span { display: none; }
  .wizard-controls { grid-template-columns: 1fr 1fr; }
  .config-live { display: none; }
}

@media (max-width: 480px) {
  .config-exit { font-size: 0; }
  .config-exit span { margin-left: 0; font-size: 18px; }
  .configurator-page .material-list { grid-template-columns: 1fr; }
  .configurator-page .material-tile { min-height: 92px; }
  .configurator-page .composition-row { grid-template-columns: 46px minmax(70px, 1fr) 120px 36px; gap: 8px; }
  .quantity-menu { width: min(330px,calc(100vw - 40px)); grid-template-columns: repeat(2,1fr); right: -44px; }
  .custom-quantity { grid-template-columns: 1fr; }
  .dosage-planner header { display: grid; }
  .dosage-planner header button { width: 100%; }
  .dosage-row { grid-template-columns: 1fr; align-items: stretch; }
  .dosage-row dl { grid-template-columns: 1fr auto; align-items: center; }
  .dosage-totals { grid-template-columns: 1fr 1fr; }
  .panel-heading-action { display: block; }
  .panel-heading-action > button { margin-top: 20px; }
  .large-swatches,
  .large-swatches.caps { grid-template-columns: 1fr 1fr; }
  .flat-vial-label { grid-template-columns: 50px 1fr 88px; gap: 10px; padding: 14px 12px; }
  .flat-vial-label.has-artwork { padding: 0; }
  .flat-label-logo { font-size: 20px; }
  .flat-label-main b { font-size: 16px; }
  .flat-label-main span { font-size: 13px; }
  .flat-vial-label dt,
  .flat-vial-label dd { font-size: 8px; }
  .flat-vial-label em { left: 72px; bottom: 8px; font-size: 6px; }
  .label-mode-card { min-height: 0; grid-template-columns: 18px 1fr auto; align-items: center; }
  .label-mode-card strong { grid-column: auto; }
  .label-spec dl { grid-template-columns: 1fr; }
  .label-spec dl div { grid-template-columns: 1fr; gap: 3px; }
  .configurator-page .lab-options { grid-template-columns: 1fr; }
  .configurator-page .lab-card { min-height: 0; }
  .configurator-page .lab-card dl { grid-template-columns: 1fr 1fr; }
  .warehouse-card,
  .shipping-mode-card,
  .logistics-insurance { grid-template-columns: 18px 1fr; }
  .warehouse-card strong,
  .logistics-insurance strong { grid-column: 2; }
  .review-checklist > div { grid-template-columns: 30px 1fr auto; gap: 10px; }
  .custom-material-request { grid-template-columns: 1fr; }
  .custom-material-request button,
  .custom-material-request label { grid-column: 1; }
  .shipment-destination-row { grid-template-columns: 24px 1fr 64px 32px; align-items: end; }
  .shipment-destination-row > label:nth-of-type(1) { grid-column: 2 / -1; }
  .shipment-destination-row > label:nth-of-type(2) { grid-column: 2; }
  .shipment-destination-row > label:nth-of-type(3) { grid-column: 3; }
  .destination-protection { grid-column: 2 / -1; }
  .remove-destination { grid-column: 4; grid-row: 2; }
  .shipping-mode-options,
  .hold-inputs,
  .logistics-totals { grid-template-columns: 1fr; }
  .request-summary { grid-template-columns: 1fr; }
  .review-composition-rows > div { grid-template-columns: 24px 1fr; }
  .review-composition-rows dl { text-align: left; }
  .live-summary { grid-template-columns: 1fr; }
}