:root {
  --bg: #f5f1ea;
  --panel: #f8f4ee;
  --panel-2: #fbf8f3;
  --line: #d7ccbc;
  --text: #21382d;
  --muted: #647267;
  --accent: #376544;
  --accent-2: #274f34;
  --shadow: 0 18px 40px rgba(58, 44, 20, 0.08);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --font-symbol: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Arial Unicode MS", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, var(--font-symbol), serif;
  --font-soft: "Segoe Print", "Bradley Hand", "Noteworthy", "Comic Sans MS", var(--font-symbol), cursive;
  --font-modern: "Avenir Next", "Futura", "Trebuchet MS", "Helvetica Neue", Arial, var(--font-symbol), sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-modern);
  background: var(--bg);
  color: var(--text);
}

button, input, select, textarea, [contenteditable="true"] { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

.shell {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
}

.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(245, 241, 234, 0.95);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
}
.topbar-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  font-size: clamp(34px, 3vw, 44px);
}
.prototype {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 14px;
}

.page {
  padding: 28px 0 44px;
}
.intro {
  margin-bottom: 16px;
  max-width: none;
}
.eyebrow,
.step-label {
  display: inline-block;
  color: #5c775f;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  font-size: 14px;
}
.intro h1 {
  font-family: var(--font-serif);
  font-size: clamp(54px, 4.7vw, 72px);
  line-height: 0.95;
  margin: 8px 0 0;
  letter-spacing: -0.025em;
}
.intro-text {
  max-width: none;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

.configurator {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.controls-card,
.viewer-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.controls-card {
  padding: 20px 20px 18px;
}
.viewer-card {
  overflow: hidden;
}
.viewer-card-mobile { display: none; }

.progress {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
}
.progress span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #eae4da;
  color: #7b847d;
  font-weight: 700;
}
.progress span.active { background: var(--accent); color: #fff; }
.progress i {
  display: block;
  height: 1px;
  background: var(--line);
}

.control-section {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
}
.control-section-first {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.control-section h2,
.quantity-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 2.35vw, 38px);
  line-height: 1.04;
  margin: 8px 0 14px;
  letter-spacing: -0.025em;
}
#step1 .control-section-first h2 {
  white-space: nowrap;
}
.field-label,
.control-section legend {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
}
.optional { color: var(--muted); font-weight: 400; margin-left: 6px; }

.editor-wrap {
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid #cfc5b8;
  border-radius: 15px;
  overflow: hidden;
  min-height: 74px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.editor-wrap:focus-within {
  border-color: #6d9774;
  box-shadow: 0 0 0 3px rgba(69,116,81,.10), inset 0 1px 0 rgba(255,255,255,.8);
}
.engraving-editor {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 74px;
  min-height: 74px;
  max-height: 74px;
  margin: 0;
  padding: 11px 48px 11px 16px;
  border: 0 !important;
  border-radius: 0;
  outline: 0 !important;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: #2b4732;
  text-align: center;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0;
  box-shadow: none !important;
}
.engraving-editor::placeholder { color: #96a097; opacity: 1; }
.engraving-editor.font-classic { font-family: var(--font-serif); }
.engraving-editor.font-soft { font-family: var(--font-soft); }
.engraving-editor.font-modern { font-family: var(--font-modern); }
.counter {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 2;
  color: #7f887f;
  font-size: 13px;
  line-height: 1;
  background: rgba(255,255,255,.92);
  padding-left: 4px;
  pointer-events: none;
}
.field-help {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.42;
  font-size: 14px;
}

.font-options,
.symbols,
.symbol-size-options,
.quantity-presets {
  display: grid;
  gap: 12px;
}
.font-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.font-option,
.symbol,
.symbol-size-option,
.quantity-presets button,
.quantity-button,
.back-button,
.reset-view {
  border: 1px solid #d4c8b8;
  background: #fff;
  color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.font-option:hover,
.symbol:hover,
.symbol-size-option:hover,
.quantity-presets button:hover,
.quantity-button:hover,
.back-button:hover,
.reset-view:hover {
  border-color: #9fb39b;
}
.font-option.selected,
.symbol.selected,
.symbol-size-option.selected,
.quantity-presets button.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.font-option {
  min-height: 82px;
  border-radius: 18px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.font-sample {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #f0ece5;
  font-size: 21px;
}
.font-sample.classic { font-family: var(--font-serif); }
.font-sample.soft { font-family: var(--font-soft); }
.font-sample.modern { font-family: var(--font-modern); }
.font-option strong { display: block; font-size: 15px; margin-bottom: 2px; line-height: 1.15; }
.font-option small { display: block; color: var(--muted); font-size: 13px; line-height: 1.25; }

.symbols-six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.symbol {
  min-height: 84px;
  border-radius: 18px;
  padding: 8px;
  display: grid;
  place-items: center;
  gap: 6px;
}
.symbol span {
  font-size: 30px;
  line-height: 1;
  font-family: var(--font-modern);
}
.symbol small { color: var(--muted); font-size: 13px; line-height: 1.15; }
.none-mark { font-size: 28px !important; }
.symbol-size-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.symbol-size-option {
  min-height: 48px;
  border-radius: 999px;
  font-weight: 700;
}
.summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: #f4efe7;
  border: 1px solid #e1d8ca;
  border-radius: 18px;
  padding: 12px;
  margin-top: 16px;
}
.summary span,
.order-preview span,
.order-preview small,
.preview-note,
.prototype-note,
.quantity-intro {
  color: var(--muted);
}
.summary span { display: block; font-size: 13px; margin-bottom: 6px; }
.summary strong { display: block; font-size: 15px; }

.continue,
.back-button {
  min-height: 62px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 18px;
}
.continue {
  width: 100%;
  margin-top: 16px;
  border: 0;
  background: var(--accent);
  color: #fff;
}
.continue span { margin-left: 8px; }
.back-button {
  padding: 0 22px;
}
.step-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.step-actions .continue { margin-top: 0; }

.viewer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.viewer-head strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 21px;
  margin-top: 2px;
}
.reset-view {
  min-height: 50px;
  border-radius: 999px;
  padding: 0 22px;
  color: var(--muted);
  background: transparent;
}
.stone-stage {
  background: #f3eee6;
  padding: 18px 18px 14px;
}
.stone-figure {
  position: relative;
  width: min(520px, 100%);
  margin: 0 auto;
}
.stone-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  filter: drop-shadow(0 12px 10px rgba(42, 37, 23, 0.18));
}
.stone-engraving {
  position: absolute;
  left: 50%;
  top: var(--engraving-top, 53.8%);
  width: 60%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(53, 45, 34, 0.76);
  mix-blend-mode: multiply;
  filter: saturate(0.78) contrast(1.04);
  text-shadow:
    0 0 0 rgba(255,255,255,0.14),
    0 1px 1px rgba(255,255,255,0.12),
    0 -1px 1px rgba(0,0,0,0.14),
    0 0 2px rgba(0,0,0,0.14);
  line-height: 1.16;
  font-size: 56px;
}
.stone-engraving.font-classic { font-family: var(--font-serif); }
.stone-engraving.font-soft { font-family: var(--font-soft); }
.stone-engraving.font-modern { font-family: var(--font-modern); }
.engraving-line {
  display: block;
  width: 100%;
  min-height: 1em;
  white-space: pre;
  text-align: center;
}
.engraving-line + .engraving-line { margin-top: 0.26em; }
.engraving-symbol {
  display: inline-block;
  color: rgba(53, 45, 34, 0.78);
  font-family: var(--font-modern);
  transform-origin: center bottom;
  vertical-align: baseline;
}
.engraving-line.line2 .engraving-symbol { transform-origin: center top; }
.preview-note {
  margin: 0;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line);
  line-height: 1.4;
}

.quantity-picker {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 10px;
}
.quantity-button {
  min-height: 48px;
  border-radius: 16px;
  font-size: 27px;
}
.quantity-picker input {
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid #d4c8b8;
  background: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}
.quantity-presets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}
.quantity-presets button {
  min-height: 50px;
  border-radius: 16px;
  font-weight: 700;
}
.order-preview {
  margin-top: 16px;
  border-radius: 18px;
  background: #f4efe7;
  border: 1px solid #e1d8ca;
  padding: 14px;
}
.order-preview strong {
  display: block;
  font-size: 27px;
  margin: 6px 0;
}
.order-preview b { font-family: var(--font-serif); }
.prototype-note { margin: 14px 0 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(24px);
  background: var(--accent-2);
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hidden { display: none !important; }


@media (min-width: 1101px) {
  .intro {
    display: grid;
    grid-template-columns: minmax(520px, 0.95fr) minmax(420px, 1.05fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "title copy";
    column-gap: clamp(46px, 5vw, 88px);
    row-gap: 6px;
    align-items: end;
    padding: 2px 4px 18px;
    border-bottom: 1px solid var(--line);
  }
  .intro .eyebrow { grid-area: eyebrow; margin: 0; }
  .intro h1 { grid-area: title; white-space: nowrap; }
  .intro h1 span { display: inline; }
  .intro-text {
    grid-area: copy;
    max-width: 720px;
    padding-bottom: 4px;
  }
  .configurator {
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    gap: 30px;
  }
}

@media (max-width: 1100px) {
  .configurator {
    grid-template-columns: 1fr;
  }
  .viewer-card-desktop { display: none; }
  .viewer-card-mobile { display: block; margin-top: 20px; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 22px, 760px); }
  .topbar-inner { min-height: 68px; }
  .brand { font-size: 30px; }
  .prototype { font-size: 12px; letter-spacing: 0.14em; }
  .page { padding-top: 22px; }
  .intro { margin-bottom: 16px; }
  .intro h1 { font-size: clamp(44px, 16vw, 76px); margin-bottom: 10px; }
  .intro h1 span { display: block; }
  .intro-text { font-size: 16px; }
  .controls-card { padding: 14px; }
  .control-section h2, .quantity-section h2 { font-size: 27px; }
  .font-options,
  .symbols-six,
  .summary,
  .symbol-size-options,
  .quantity-presets {
    grid-template-columns: 1fr;
  }
  .summary { gap: 10px; }
  .editor-wrap { min-height: 66px; padding: 0; }
  .engraving-editor { height: 64px; min-height: 64px; max-height: 64px; font-size: 15px; padding: 9px 46px 9px 12px; }
  .viewer-head { padding: 16px 16px 12px; }
  .viewer-head strong { font-size: 18px; }
  .reset-view { min-height: 44px; padding: 0 18px; }
  .stone-stage { padding: 18px 14px 12px; }
  .stone-engraving { width: 66%; top: var(--engraving-top, 54.2%); font-size: 46px; }
  .preview-note { padding: 12px 16px 16px; font-size: 14px; }
}

/* v34 laptop/desktop polish */
@media (min-width: 761px) {
  .intro h1 { font-size: clamp(52px, 5vw, 68px); line-height: .94; }
  .intro { margin-bottom: 16px; }
}
@media (max-width: 760px) {
  #step1 .control-section-first h2 { white-space: normal; }
  .control-section h2, .quantity-section h2 { font-size: 27px; }
  .editor-wrap { min-height: 72px; }
  .engraving-editor { height: 72px; min-height: 72px; max-height: 72px; }
}


/* v36 compact option cards + preview centering */
.control-section legend { margin-bottom: 10px; }
.font-options,
.symbols,
.symbol-size-options { gap: 10px; }
.symbol-size-option { font-size: 16px; }
.symbol-size-options { margin-top: 2px; }
.viewer-card { align-self: start; }
@media (min-width: 761px) {
  .font-option { min-height: 78px; }
  .symbol { min-height: 80px; }
  .symbol-size-option { min-height: 46px; }
  .stone-engraving { width: 58%; }
}
@media (max-width: 760px) {
  .font-option { min-height: 76px; }
  .symbol { min-height: 76px; }
  .symbol-size-option { min-height: 46px; }
}


/* v37 visual reset: lighter, tighter, more elegant option UI */
.controls-card{
  padding:18px 18px 16px;
}
.control-section{
  border-top:1px solid rgba(181,167,148,.46);
  padding-top:14px;
  margin-top:14px;
}
.control-section-first{
  border-top:0;
  padding-top:0;
  margin-top:0;
}
.control-section legend{
  display:inline-block;
  padding:0 6px 0 0;
  margin:0 0 8px;
  background:var(--panel-2);
  font-size:15px;
  line-height:1.15;
}
.optional{font-size:13px;margin-left:4px;}

.font-options,
.symbols,
.symbol-size-options{
  gap:8px;
}
.font-option{
  min-height:66px;
  border-radius:15px;
  padding:8px 10px;
  gap:10px;
  box-shadow:none;
}
.font-option.selected,
.symbol.selected,
.symbol-size-option.selected{
  background:#f7faf7;
  box-shadow:inset 0 0 0 1px var(--accent);
}
.font-sample{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:10px;
  font-size:19px;
}
.font-option strong{
  font-size:14px;
  margin-bottom:1px;
}
.font-option small{
  font-size:11.5px;
  line-height:1.15;
}

.symbols-six{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.symbol{
  min-height:62px;
  border-radius:15px;
  padding:6px 4px;
  gap:4px;
}
.symbol span{
  font-size:25px;
}
.symbol small{
  font-size:10.5px;
  line-height:1.05;
}
.none-mark{font-size:21px!important;}

.symbol-size-options{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.symbol-size-option{
  min-height:40px;
  border-radius:999px;
  font-size:14px;
}

.summary{
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;
  gap:8px;
}
.summary span{font-size:11.5px;margin-bottom:3px;}
.summary strong{font-size:13px;}
.continue{
  min-height:50px;
  margin-top:12px;
  font-size:16px;
}

.editor-wrap{
  min-height:66px;
  border-radius:14px;
}
.engraving-editor{
  height:66px;
  min-height:66px;
  max-height:66px;
  padding:9px 44px 9px 14px;
  font-size:15px;
}
.field-help{
  margin-top:7px;
  font-size:12.5px;
}

.viewer-card{
  border-color:rgba(190,177,158,.72);
  box-shadow:0 14px 34px rgba(58,44,20,.055);
}
.viewer-head{
  padding:13px 15px 10px;
}
.viewer-head strong{font-size:20px;}
.reset-view{
  min-height:42px;
  padding:0 16px;
  font-size:14px;
}
.stone-stage{
  padding:14px 16px 10px;
}
.stone-figure{
  width:min(500px,100%);
}
.preview-note{
  padding:10px 14px 12px;
  font-size:11.5px;
  line-height:1.35;
}

/* Keep the preview optically centered in a safe engraving zone. */
.stone-engraving{
  left:50%;
  width:56%;
}

@media (min-width:1101px){
  .configurator{
    grid-template-columns:minmax(0,600px) minmax(0,1fr);
    gap:26px;
  }
}

@media (max-width:760px){
  .controls-card{padding:14px;}
  .control-section{padding-top:12px;margin-top:12px;}
  .font-options{grid-template-columns:1fr;gap:8px;}
  .font-option{min-height:62px;}
  .symbols-six{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .symbol{min-height:60px;}
  .symbol-size-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .symbol-size-option{min-height:42px;}
  .viewer-card-mobile{margin-top:14px;}
  .stone-stage{padding:12px 10px 8px;}
  .stone-engraving{width:61%;}
  .preview-note{font-size:12.5px;}
}


/* v38 polish: cleaner control groups + more sales-friendly preview */
fieldset.control-section{
  border:0;
  padding-left:0;
  padding-right:0;
  min-width:0;
}
.control-section legend{
  background:transparent;
  padding-right:8px;
}
.font-options,
.symbols,
.symbol-size-options{
  gap:10px;
}
.font-option{
  min-height:60px;
  border-radius:14px;
  padding:7px 10px;
}
.font-sample{
  width:32px;
  height:32px;
  min-width:32px;
  font-size:18px;
}
.font-option strong{font-size:13px;}
.font-option small{font-size:11px;}
.symbols-six{grid-template-columns:repeat(6,minmax(0,1fr));}
.symbol{
  min-height:56px;
  border-radius:14px;
  padding:6px 3px;
}
.symbol span{font-size:22px;}
.symbol small{font-size:10px;}
.none-mark{font-size:18px!important;}
.symbol-size-option{min-height:38px;font-size:13px;}
.summary{padding:9px 10px;}
.stone-stage{padding:18px 22px 16px;}
.stone-figure{width:min(560px,100%);}
.stone-engraving{
  left:49.2%;
  width:50%;
  top:var(--engraving-top,53.9%);
  color:rgba(58,48,35,.72);
  filter:saturate(.72) contrast(1.01);
  text-shadow:0 1px 1px rgba(255,255,255,.10), 0 -1px 1px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.10);
}
.engraving-line + .engraving-line{margin-top:0.19em;}
.engraving-symbol{margin-left:0.08em;color:rgba(58,48,35,.76);}
.engraving-symbol.grow-up,
.engraving-symbol.grow-down{transform-origin:center center !important;}
@media (min-width:761px){
  .configurator{grid-template-columns:minmax(0,590px) minmax(0,1fr);gap:24px;}
  .font-options{grid-template-columns:repeat(3,minmax(0,1fr));}
  .stone-figure{width:min(580px,100%);}
  .stone-engraving{width:48%; left:49%;}
}
@media (max-width:760px){
  .symbols-six{grid-template-columns:repeat(3,minmax(0,1fr));}
  .font-option,.symbol{min-height:64px;}
  .stone-figure{width:min(480px,100%);}
  .stone-engraving{width:56%; left:49.5%; top:var(--engraving-top,54.4%);}
}


/* v40: true one-screen desktop composition */
@media (min-width: 1101px) {
  html, body { height: 100%; overflow: hidden; }
  .topbar { position: relative; }
  .topbar-inner { min-height: 62px; }
  .brand { font-size: 31px; }
  .prototype { font-size: 12px; }

  .page {
    height: calc(100vh - 63px);
    padding: 10px 0 10px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .intro {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "title copy";
    align-items: center;
    gap: 34px;
    min-height: 48px;
    margin: 0 0 8px;
    padding: 0 6px 8px;
    border-bottom: 1px solid rgba(215,204,188,.75);
  }
  .intro .eyebrow { display: none; }
  .intro h1 {
    grid-area: title;
    margin: 0;
    font-size: 34px;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -.02em;
  }
  .intro h1 span { display: inline; }
  .intro-text {
    grid-area: copy;
    margin: 0;
    padding: 0;
    max-width: none;
    font-size: 14px;
    line-height: 1.3;
  }

  .configurator {
    min-height: 0;
    height: 100%;
    grid-template-columns: minmax(0, 570px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
  }
  .controls-card,
  .viewer-card-desktop {
    height: 100%;
    min-height: 0;
    border-radius: 22px;
  }
  .controls-card {
    padding: 12px 14px 12px;
    overflow: hidden;
  }
  .viewer-card-desktop {
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr) auto;
  }

  .progress { margin-bottom: 8px; }
  .progress span { width: 24px; height: 24px; font-size: 12px; }
  .step-label { font-size: 11px; letter-spacing: .18em; }
  .control-section h2,
  .quantity-section h2 {
    font-size: 31px;
    line-height: 1;
    margin: 5px 0 9px;
  }
  .field-label,
  .control-section legend { font-size: 13px; margin-bottom: 6px; }
  .field-help { margin-top: 5px; font-size: 11px; line-height: 1.25; }

  .editor-wrap { min-height: 58px; height: 58px; }
  .engraving-editor {
    height: 58px;
    min-height: 58px;
    max-height: 58px;
    padding: 7px 42px 7px 12px;
    font-size: 14px;
    line-height: 1.32;
  }
  .counter { right: 10px; bottom: 7px; font-size: 11px; }

  fieldset.control-section,
  .control-section {
    margin-top: 9px;
    padding-top: 9px;
  }
  fieldset.control-section { border: 0; }
  .control-section:not(.control-section-first) {
    border-top: 1px solid rgba(181,167,148,.34);
  }
  .control-section legend { background: var(--panel-2); padding-right: 7px; }

  .font-options,
  .symbols,
  .symbol-size-options { gap: 7px; }
  .font-option {
    min-height: 48px;
    height: 48px;
    padding: 5px 8px;
    gap: 7px;
    border-radius: 12px;
  }
  .font-sample { width: 29px; height: 29px; min-width: 29px; font-size: 16px; border-radius: 8px; }
  .font-option strong { font-size: 12px; }
  .font-option small { font-size: 9.5px; }

  .symbols-six { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .symbol {
    min-height: 44px;
    height: 44px;
    border-radius: 12px;
    padding: 3px 2px;
    gap: 1px;
  }
  .symbol span { font-size: 18px; }
  .symbol small { font-size: 8.5px; }
  .none-mark { font-size: 15px !important; }

  .symbol-size-option { min-height: 32px; height: 32px; font-size: 11px; }

  .summary { display: none; }
  .continue { min-height: 42px; height: 42px; margin-top: 9px; font-size: 14px; }

  .viewer-head { height: 54px; padding: 9px 14px 7px; align-items: center; }
  .viewer-head strong { font-size: 17px; margin-top: 0; }
  .reset-view { min-height: 36px; height: 36px; padding: 0 14px; font-size: 12px; }
  .stone-stage {
    min-height: 0;
    height: 100%;
    padding: 8px 14px 4px;
    display: grid;
    place-items: center;
  }
  .stone-figure { width: min(610px, 90%); }
  .preview-note { padding: 7px 12px 8px; font-size: 9.5px; line-height: 1.25; }

  .stone-engraving {
    left: 49.2%;
    width: 49%;
    top: var(--engraving-top, 49%);
  }
}

/* laptop widths still use the one-screen composition */
@media (min-width: 1101px) and (max-height: 760px) {
  .topbar-inner { min-height: 54px; }
  .page { height: calc(100vh - 55px); padding-top: 6px; padding-bottom: 6px; }
  .intro { min-height: 40px; margin-bottom: 6px; padding-bottom: 6px; }
  .intro h1 { font-size: 29px; }
  .intro-text { font-size: 12px; }
  .controls-card { padding-top: 9px; padding-bottom: 9px; }
  .progress { margin-bottom: 5px; }
  .control-section h2, .quantity-section h2 { font-size: 27px; margin-bottom: 7px; }
  .editor-wrap, .engraving-editor { height: 52px; min-height: 52px; max-height: 52px; }
  fieldset.control-section, .control-section { margin-top: 7px; padding-top: 7px; }
  .font-option { height: 44px; min-height: 44px; }
  .symbol { height: 40px; min-height: 40px; }
  .symbol-size-option { height: 29px; min-height: 29px; }
  .continue { height: 38px; min-height: 38px; }
}

@media (max-width: 1100px) {
  .stone-engraving { top: var(--engraving-top, 49.4%); }
}


/* v41: step 2 cleanup, price summary and no redundant intro */
body.step-2-active .intro { display: none !important; }

.order-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin: 7px 0 3px;
}
.order-total-row .quantity-line {
  color: var(--text);
  font-size: 22px;
}
.order-total-row .quantity-line strong {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
}
#totalPriceSummary {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--text);
  white-space: nowrap;
}
.order-preview .unit-price {
  display: block;
  margin-bottom: 7px;
}
.order-preview #designSummary {
  display: block;
}

@media (min-width: 1101px) {
  body.step-2-active .page {
    grid-template-rows: minmax(0, 1fr);
  }
  body.step-2-active .configurator {
    height: 100%;
  }
  .quantity-intro {
    margin: 0 0 12px;
  }
}

@media (max-width: 760px) {
  .order-total-row {
    align-items: flex-end;
  }
  .order-total-row .quantity-line,
  #totalPriceSummary {
    font-size: 22px;
  }
  .order-total-row .quantity-line strong {
    font-size: 25px;
  }
}


/* v42: order card polish + improved visual centering */
.back-button {
  background: #f7f2ea;
  color: var(--text);
  min-width: 140px;
  font-weight: 600;
}
.back-button span { display: inline-block; margin-right: 6px; }
.order-total-row .quantity-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}
.order-total-row .quantity-line strong {
  display: inline;
  margin: 0;
  line-height: 1;
}
.order-total-row .quantity-unit {
  display: inline;
  font-size: 0.9em;
}
.price-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: max-content;
}
.price-group strong {
  margin: 0;
  line-height: 1;
}
.vat-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.step-actions {
  align-items: stretch;
}
@media (min-width: 1101px) {
  .step-actions { gap: 10px; }
  .back-button { min-width: 128px; }
}
@media (max-width: 760px) {
  .order-total-row { align-items: flex-start; }
  .price-group { align-items: flex-end; }
  .quantity-unit { font-size: 0.92em; }
}


/* v43: stronger preview, better step-2 actions, clearer quantity spacing */
.stone-figure {
  width: min(540px, 94%);
}
.stone-engraving {
  left: 49.6%;
  width: 54%;
}
.engraving-line + .engraving-line {
  margin-top: 0.16em;
}
.order-total-row .quantity-line {
  gap: 0.12em;
}
.order-total-row .quantity-unit {
  font-size: 0.88em;
}
.step-actions {
  display: grid;
  grid-template-columns: minmax(132px, 148px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.step-actions .continue,
.step-actions .back-button {
  width: 100%;
  min-height: 62px;
  height: 62px;
  margin-top: 0;
}
.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 761px) {
  .stone-stage { padding: 14px 18px 12px; }
  .stone-figure { width: min(548px, 93%); }
  .stone-engraving { width: 54%; left: 49.7%; }
}
@media (max-width: 760px) {
  .stone-figure { width: min(540px, 86%); }
  .stone-engraving { width: 56%; left: 49.6%; }
  .step-actions {
    grid-template-columns: minmax(112px, 132px) minmax(0, 1fr);
    gap: 10px;
  }
  .step-actions .continue,
  .step-actions .back-button {
    min-height: 48px;
    height: 48px;
  }
}


/* v44: reliable mobile caret insertion + compact desktop navigation */
.action-arrow {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 12px;
  flex: 0 0 18px;
  color: currentColor;
}
.action-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  width: 15px;
  background: currentColor;
  border-radius: 2px;
  transform: translateY(-50%);
}
.action-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.arrow-right::before { left: 0; }
.arrow-right::after {
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}
.arrow-left::before { right: 0; }
.arrow-left::after {
  left: 0;
  transform: translateY(-50%) rotate(-135deg);
}

.step-actions .continue,
.step-actions .back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

@media (min-width: 761px) {
  .step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
  }
  .step-actions .back-button,
  .step-actions .continue {
    width: auto;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    padding: 0 18px;
    margin-top: 0;
    font-size: 14px;
  }
  .step-actions .continue {
    flex: 0 0 auto;
    padding-left: 22px;
    padding-right: 20px;
  }
  .step-actions .back-button {
    flex: 0 0 auto;
    padding-left: 16px;
    padding-right: 18px;
  }
}

@media (max-width: 760px) {
  .step-actions .continue,
  .step-actions .back-button {
    gap: 8px;
  }
  .action-arrow {
    width: 17px;
    flex-basis: 17px;
  }
}


/* v45: let desktop preview sit naturally at the top and leave page background below */
@media (min-width: 1101px) {
  html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
  .page {
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
    padding-top: 10px;
    padding-bottom: 18px;
  }
  .configurator {
    height: auto;
    min-height: 0;
    align-items: start;
  }
  .controls-card,
  .viewer-card-desktop {
    height: auto;
    min-height: 0;
    align-self: start;
  }
  .viewer-card-desktop {
    display: block;
  }
  .stone-stage {
    height: auto;
    min-height: 0;
    display: block;
    padding: 12px 16px 10px;
  }
  .stone-figure {
    width: min(560px, 92%);
    margin: 0 auto;
  }
  .preview-note {
    padding: 10px 14px 12px;
    font-size: 11px;
    line-height: 1.35;
  }
}

@media (min-width: 1101px) and (max-height: 760px) {
  html, body { height: auto; overflow-y: auto; }
  .page { height: auto; overflow: visible; }
}


/* v46: desktop preview card matches controls card size and stone sits smaller, higher */
@media (min-width: 1101px) {
  .configurator {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
  }
  .controls-card,
  .viewer-card-desktop {
    align-self: stretch;
    height: auto;
    min-height: 0;
  }
  .viewer-card-desktop {
    display: grid;
    grid-template-rows: 54px 1fr auto;
    min-height: 100%;
  }
  .stone-stage {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 18px 0;
  }
  .stone-figure {
    width: min(470px, 78%);
    margin: 0 auto;
  }
  .preview-note {
    margin-top: auto;
  }
}

@media (min-width: 1101px) and (max-width: 1450px) {
  .stone-figure {
    width: min(430px, 76%);
  }
}


/* v47: quantity summary uses the same UI type style instead of a separate copied numeral look */
.order-total-row .quantity-line {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.order-total-row .quantity-line strong {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: inherit;
}
.order-total-row .quantity-unit {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
}
@media (max-width: 760px) {
  .order-total-row .quantity-line,
  .order-total-row .quantity-line strong,
  .order-total-row .quantity-unit {
    font-size: 19px;
  }
}


/* v48: mobile actions feel cleaner and preview fitting is safer on stone */
.engraving-symbol {
  position: relative;
  line-height: 1;
  vertical-align: middle;
}
.engraving-symbol.grow-up {
  top: calc((1 - var(--symbol-scale, 1)) * 0.10em);
}
.engraving-symbol.grow-down {
  top: calc((var(--symbol-scale, 1) - 1) * 0.20em);
}

@media (max-width: 760px) {
  .stone-stage {
    padding: 10px 10px 8px;
  }
  .stone-figure {
    width: min(470px, 82%);
  }
  .stone-engraving {
    width: 53%;
    left: 49.5%;
  }

  .step-actions {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }
  .step-actions .back-button,
  .step-actions .continue {
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .step-actions .back-button {
    width: auto;
    min-width: 132px;
    white-space: nowrap;
  }
  .step-actions .continue {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    white-space: nowrap;
  }
  .step-actions .continue > span:first-child,
  .step-actions .back-button > span:last-child {
    white-space: nowrap;
  }
  .step-actions .continue,
  .step-actions .back-button {
    gap: 10px;
  }
  .action-arrow {
    width: 20px;
    height: 12px;
    flex-basis: 20px;
  }
  .action-arrow::before {
    width: 16px;
    height: 2.2px;
  }
  .action-arrow::after {
    width: 8px;
    height: 8px;
    border-top-width: 2.2px;
    border-right-width: 2.2px;
  }

  #continueToQuantity {
    min-height: 50px;
    font-size: 15px;
  }
}


/* v49: quantity value blends into the same UI typography, and large symbols stay centered with extra line spacing */
.order-total-row .quantity-line {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.order-total-row .quantity-line strong {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: inherit;
}
.order-total-row .quantity-unit {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
}

.engraving-line + .engraving-line {
  margin-top: var(--line-gap, 0.16em);
}
.engraving-symbol {
  position: relative;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  transform-origin: center center;
}
.engraving-symbol.grow-up,
.engraving-symbol.grow-down {
  top: 0;
}

@media (max-width: 760px) {
  .order-total-row .quantity-line,
  .order-total-row .quantity-line strong,
  .order-total-row .quantity-unit {
    font-size: 18px;
  }
  .order-total-row .quantity-line strong {
    font-weight: 500;
  }
}


/* v50: make quantity value and unit read as one tonal block */
.order-total-row .quantity-line {
  color: var(--text);
  gap: 0.08em;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.order-total-row .quantity-line strong,
.order-total-row .quantity-unit {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}
.order-total-row .quantity-line strong {
  margin-right: 0;
}
@media (max-width: 760px) {
  .order-total-row .quantity-line,
  .order-total-row .quantity-line strong,
  .order-total-row .quantity-unit {
    font-size: 18px;
    font-weight: 400;
  }
}


/* v52: compact step 2 layout and price meta row */
.order-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 6px;
}
.order-preview .unit-price,
.order-meta-row .vat-note {
  display: block;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.order-total-row .quantity-line {
  gap: 0.16em;
}
.order-total-row .quantity-unit {
  white-space: nowrap;
}
.price-group {
  min-width: 0;
}

@media (min-width: 761px) {
  #step2 .quantity-section {
    padding-top: 2px;
  }
  #step2 h2 {
    margin-bottom: 8px;
  }
  #step2 .quantity-intro {
    margin: 0 0 10px;
    max-width: 520px;
    line-height: 1.35;
  }
  #step2 .field-label {
    margin-bottom: 8px;
  }
  #step2 .quantity-picker {
    grid-template-columns: 56px minmax(220px, 1fr) 56px;
    gap: 10px;
    max-width: 560px;
  }
  #step2 .quantity-button,
  #step2 .quantity-picker input {
    min-height: 44px;
    height: 44px;
    border-radius: 15px;
  }
  #step2 .quantity-button {
    font-size: 24px;
  }
  #step2 .quantity-picker input {
    font-size: 20px;
  }
  #step2 .order-preview {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 18px;
  }
  #step2 .order-total-row {
    margin: 4px 0 2px;
  }
  #step2 .order-total-row .quantity-line,
  #step2 #totalPriceSummary {
    font-size: 19px;
    line-height: 1.15;
  }
  #step2 .order-meta-row {
    max-width: 100%;
  }
  #step2 #designSummary {
    line-height: 1.35;
  }
  #step2 .step-actions {
    justify-content: flex-start;
    gap: 12px;
    margin-top: 12px;
  }
  #step2 .step-actions .back-button,
  #step2 .step-actions .continue {
    height: 44px;
    min-height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }
}

@media (max-width: 760px) {
  #step2 .quantity-picker {
    grid-template-columns: 52px 1fr 52px;
    gap: 8px;
  }
  #step2 .quantity-button,
  #step2 .quantity-picker input {
    min-height: 44px;
    height: 44px;
  }
  #step2 .quantity-picker input {
    font-size: 18px;
  }
  #step2 .order-preview {
    margin-top: 12px;
    padding: 12px 12px 11px;
  }
  #step2 .order-total-row {
    margin: 4px 0 2px;
  }
  #step2 .order-meta-row {
    margin: 2px 0 6px;
  }
  #step2 .order-preview .unit-price,
  #step2 .order-meta-row .vat-note {
    font-size: 12px;
  }
  #step2 .step-actions {
    gap: 8px;
  }
  #step2 .step-actions .back-button,
  #step2 .step-actions .continue {
    min-height: 42px;
    height: 42px;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 12.5px;
  }
}


/* v53: compress step 2 further, especially on desktop, while keeping mobile tidy */
@media (min-width: 761px) {
  #step2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
    grid-template-areas:
      "progress progress"
      "section summary"
      "actions actions"
      "note note";
    column-gap: 14px;
    row-gap: 10px;
    align-items: start;
  }
  #step2 > .progress { grid-area: progress; margin-bottom: 0; }
  #step2 > .quantity-section { grid-area: section; margin: 0; padding-top: 12px; }
  #step2 > .order-preview { grid-area: summary; margin-top: 0; align-self: start; padding: 12px 14px; }
  #step2 > .step-actions { grid-area: actions; margin-top: 2px; }
  #step2 > .prototype-note { grid-area: note; margin-top: 0; max-width: 640px; }

  #step2 h2 {
    font-size: clamp(28px, 2.2vw, 36px);
    margin: 6px 0 8px;
  }
  #step2 .quantity-intro {
    max-width: none;
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.32;
  }
  #step2 .field-label {
    margin-bottom: 6px;
    font-size: 15px;
  }
  #step2 .quantity-picker {
    max-width: 500px;
    grid-template-columns: 52px minmax(140px, 1fr) 52px;
    gap: 8px;
  }
  #step2 .quantity-button,
  #step2 .quantity-picker input {
    height: 42px;
    min-height: 42px;
    border-radius: 14px;
  }
  #step2 .quantity-button { font-size: 22px; }
  #step2 .quantity-picker input { font-size: 18px; }

  #step2 .order-preview span:first-child {
    font-size: 15px;
    line-height: 1.2;
  }
  #step2 .order-total-row {
    margin: 4px 0 1px;
  }
  #step2 .order-total-row .quantity-line,
  #step2 #totalPriceSummary {
    font-size: 18px;
    line-height: 1.12;
  }
  #step2 .order-meta-row {
    gap: 8px;
    margin: 2px 0 5px;
  }
  #step2 .order-preview .unit-price,
  #step2 .order-meta-row .vat-note,
  #step2 #designSummary {
    font-size: 12px;
    line-height: 1.3;
  }

  #step2 .step-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }
  #step2 .step-actions .back-button,
  #step2 .step-actions .continue {
    width: auto;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    font-size: 13px;
  }
  #step2 .step-actions .continue {
    padding-left: 18px;
    padding-right: 14px;
  }
  #step2 .step-actions .back-button {
    padding-left: 14px;
    padding-right: 16px;
  }
}

@media (max-width: 760px) {
  #step2 .quantity-section {
    padding-top: 10px;
  }
  #step2 h2 {
    margin: 6px 0 10px;
  }
  #step2 .quantity-intro {
    margin: 0 0 10px;
    line-height: 1.34;
  }
  #step2 .field-label {
    margin-bottom: 6px;
  }
  #step2 .quantity-picker {
    grid-template-columns: 48px 1fr 48px;
    gap: 8px;
  }
  #step2 .quantity-button,
  #step2 .quantity-picker input {
    height: 42px;
    min-height: 42px;
    border-radius: 14px;
  }
  #step2 .quantity-picker input {
    font-size: 18px;
  }
  #step2 .order-preview {
    margin-top: 10px;
    padding: 10px 12px;
  }
  #step2 .order-total-row {
    margin: 4px 0 2px;
  }
  #step2 .order-total-row .quantity-line,
  #step2 #totalPriceSummary {
    font-size: 17px;
    line-height: 1.12;
  }
  #step2 .order-meta-row {
    margin: 2px 0 5px;
    gap: 8px;
  }
  #step2 .order-preview .unit-price,
  #step2 .order-meta-row .vat-note,
  #step2 #designSummary {
    font-size: 12px;
    line-height: 1.3;
  }
  #step2 .step-actions {
    gap: 8px;
    margin-top: 10px;
  }
  #step2 .step-actions .back-button,
  #step2 .step-actions .continue {
    min-height: 46px;
    height: 46px;
    font-size: 12.5px;
  }
  #step2 .step-actions .continue {
    padding-left: 18px;
    padding-right: 13px;
  }
  #step2 .step-actions .back-button {
    padding-left: 12px;
    padding-right: 15px;
  }
}


/* v54: fix step visibility and tighten step 2 toward compact reference */
.step-panel[hidden] {
  display: none !important;
}

@media (min-width: 761px) {
  #step2:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.62fr);
    grid-template-areas:
      "section summary"
      "actions actions"
      "note note";
    column-gap: 16px;
    row-gap: 10px;
    align-items: start;
  }

  #step2:not([hidden]) > .quantity-section {
    grid-area: section;
    margin: 0;
    padding-top: 0;
  }

  #step2:not([hidden]) > .order-preview {
    grid-area: summary;
    margin: 12px 0 0;
    align-self: start;
    padding: 12px 14px;
    max-width: 310px;
  }

  #step2:not([hidden]) > .step-actions {
    grid-area: actions;
    margin-top: 0;
    gap: 12px;
  }

  #step2:not([hidden]) > .prototype-note {
    grid-area: note;
    margin-top: 0;
    max-width: 620px;
  }

  #step2 h2 {
    font-size: clamp(30px, 2.3vw, 38px);
    line-height: 1.04;
    margin: 8px 0 10px;
    max-width: 14ch;
  }

  #step2 .quantity-intro {
    font-size: 14px;
    line-height: 1.35;
    max-width: 41ch;
    margin: 0 0 10px;
  }

  #step2 .field-label {
    margin-bottom: 6px;
  }

  #step2 .quantity-picker {
    max-width: 430px;
    grid-template-columns: 42px minmax(120px, 1fr) 42px;
    gap: 10px;
  }

  #step2 .quantity-button,
  #step2 .quantity-picker input {
    height: 44px;
    min-height: 44px;
    border-radius: 14px;
  }

  #step2 .quantity-button {
    font-size: 22px;
  }

  #step2 .quantity-picker input {
    font-size: 18px;
    padding: 0 12px;
  }

  #step2 .order-preview span:first-child {
    font-size: 14px;
  }

  #step2 .order-total-row .quantity-line,
  #step2 #totalPriceSummary {
    font-size: 17px;
  }

  #step2 .order-preview .unit-price,
  #step2 .order-meta-row .vat-note,
  #step2 #designSummary {
    font-size: 12px;
  }

  #step2 .step-actions .back-button,
  #step2 .step-actions .continue {
    width: auto;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    font-size: 12.5px;
    border-radius: 999px;
  }

  #step2 .step-actions .continue {
    padding-right: 14px;
    padding-left: 18px;
  }
}

@media (max-width: 760px) {
  #step2 .quantity-picker {
    grid-template-columns: 48px 1fr 48px;
    gap: 8px;
  }

  #step2 .order-preview {
    margin-top: 10px;
  }
}


/* v55: stronger compression for step 2 and a tighter stone preview card */
@media (min-width: 761px) {
  /* tighter step 2 composition closer to compact reference */
  #step2:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) 248px;
    grid-template-areas:
      "section summary"
      "actions actions"
      "note note";
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
  }

  #step2:not([hidden]) > .quantity-section {
    max-width: 430px;
    padding-top: 0;
  }

  #step2 h2 {
    font-size: clamp(27px, 2.2vw, 36px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 6px 0 10px;
    max-width: 9.5ch;
  }

  #step2 .quantity-intro {
    font-size: 13px;
    line-height: 1.34;
    max-width: 32ch;
    margin: 0 0 10px;
  }

  #step2 .field-label {
    margin-bottom: 4px;
    font-size: 12px;
  }

  #step2 .quantity-picker {
    max-width: 424px;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
    align-items: center;
  }

  #step2 .quantity-button,
  #step2 .quantity-picker input {
    height: 42px;
    min-height: 42px;
    border-radius: 14px;
  }

  #step2 .quantity-button {
    font-size: 21px;
  }

  #step2 .quantity-picker input {
    font-size: 17px;
    padding: 0 10px;
  }

  #step2:not([hidden]) > .order-preview {
    margin: 118px 0 0;
    max-width: 248px;
    padding: 12px 14px 11px;
    border-radius: 18px;
  }

  #step2 .order-preview span:first-child {
    font-size: 13px;
  }

  #step2 .order-total-row {
    margin-top: 6px;
    gap: 10px;
    align-items: flex-start;
  }

  #step2 .order-total-row .quantity-line,
  #step2 #totalPriceSummary {
    font-size: 16px;
    line-height: 1.12;
  }

  #step2 .order-meta-row {
    margin: 4px 0 6px;
    gap: 8px;
    align-items: baseline;
  }

  #step2 .order-preview .unit-price,
  #step2 .order-meta-row .vat-note,
  #step2 #designSummary {
    font-size: 11px;
    line-height: 1.3;
  }

  #step2 .step-actions {
    margin-top: 2px;
    gap: 10px;
    justify-content: flex-start;
  }

  #step2 .step-actions .back-button,
  #step2 .step-actions .continue {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    font-size: 12px;
  }

  #step2 .step-actions .continue {
    padding-left: 20px;
    padding-right: 14px;
  }

  #step2 .prototype-note {
    max-width: 620px;
    font-size: 13px;
    line-height: 1.35;
    margin-top: 0;
  }

  /* tighter viewer card / stone panel */
  .configurator {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr);
    gap: 18px;
  }

  .viewer-card-desktop {
    display: grid;
    grid-template-rows: auto auto auto;
    align-self: start;
  }

  .viewer-head {
    padding: 12px 14px 10px;
  }

  .stone-stage {
    padding: 6px 10px 4px;
  }

  .stone-figure {
    width: min(455px, 76%);
    margin: 0 auto;
  }

  .preview-note {
    padding: 8px 12px 10px;
    font-size: 10.5px;
    line-height: 1.32;
  }
}

@media (max-width: 760px) {
  #step2 .quantity-section {
    padding-top: 0;
  }

  #step2 h2 {
    margin-bottom: 10px;
  }

  #step2 .quantity-intro {
    margin-bottom: 10px;
  }

  #step2 .quantity-picker {
    grid-template-columns: 46px 1fr 46px;
    gap: 8px;
  }

  #step2 .quantity-button,
  #step2 .quantity-picker input {
    min-height: 44px;
    height: 44px;
  }

  #step2 .order-preview {
    margin-top: 8px;
    padding: 12px 12px 11px;
  }

  #step2 .order-total-row .quantity-line,
  #step2 #totalPriceSummary {
    font-size: 16px;
  }

  #step2 .order-preview .unit-price,
  #step2 .order-meta-row .vat-note,
  #step2 #designSummary {
    font-size: 11.5px;
  }

  .viewer-card-mobile .stone-stage {
    padding: 8px 8px 6px;
  }

  .viewer-card-mobile .stone-figure {
    width: min(458px, 80%);
  }

  .viewer-card-mobile .preview-note {
    padding: 10px 12px 12px;
    font-size: 11px;
  }
}


/* v56: make step 2 on desktop match the compact mobile composition */
@media (min-width: 761px) {
  #step2:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "section"
      "summary"
      "actions"
      "note" !important;
    row-gap: 14px !important;
    column-gap: 0 !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    align-items: start !important;
  }

  #step2:not([hidden]) > .quantity-section,
  #step2:not([hidden]) > .order-preview,
  #step2:not([hidden]) > .step-actions,
  #step2:not([hidden]) > .prototype-note {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #step2:not([hidden]) > .quantity-section {
    padding-top: 0 !important;
  }

  #step2 .quantity-section h2 {
    max-width: 11ch !important;
    font-size: clamp(32px, 3vw, 40px) !important;
    line-height: 1.04 !important;
    margin: 8px 0 18px !important;
  }

  #step2 .quantity-intro {
    max-width: 28ch !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
    margin: 0 0 18px !important;
  }

  #step2 .field-label {
    margin-bottom: 10px !important;
    font-size: 15px !important;
  }

  #step2 .quantity-picker {
    max-width: none !important;
    width: 100% !important;
    grid-template-columns: 72px minmax(0, 1fr) 72px !important;
    gap: 16px !important;
    align-items: center !important;
  }

  #step2 .quantity-button,
  #step2 .quantity-picker input {
    height: 84px !important;
    min-height: 84px !important;
    border-radius: 28px !important;
  }

  #step2 .quantity-button {
    font-size: 34px !important;
  }

  #step2 .quantity-picker input {
    font-size: 28px !important;
    padding: 0 18px !important;
  }

  #step2 .order-preview {
    padding: 26px 28px 24px !important;
    border-radius: 30px !important;
    margin-top: 10px !important;
  }

  #step2 .order-preview span:first-child {
    font-size: 18px !important;
  }

  #step2 .order-total-row {
    margin-top: 10px !important;
    gap: 18px !important;
    align-items: flex-start !important;
  }

  #step2 .order-total-row .quantity-line,
  #step2 #totalPriceSummary {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  #step2 .order-meta-row {
    margin: 8px 0 12px !important;
    gap: 12px !important;
  }

  #step2 .order-preview .unit-price,
  #step2 .order-meta-row .vat-note,
  #step2 #designSummary {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  #step2 .step-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    margin-top: 0 !important;
  }

  #step2 .step-actions .back-button,
  #step2 .step-actions .continue {
    width: 100% !important;
    min-width: 0 !important;
    height: 84px !important;
    min-height: 84px !important;
    border-radius: 999px !important;
    padding: 0 28px !important;
    font-size: 22px !important;
    justify-content: center !important;
  }

  #step2 .prototype-note {
    max-width: 34ch !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin-top: -2px !important;
  }
}


/* v57: prevent duplicate stone preview when desktop window is narrowed */
@media (min-width: 761px) {
  .mobile-preview-wrap,
  .viewer-card-mobile {
    display: none !important;
  }

  .viewer-card-desktop {
    display: flex !important;
  }
}

@media (max-width: 760px) {
  .mobile-preview-wrap,
  .viewer-card-mobile {
    display: block !important;
  }

  .viewer-card-desktop {
    display: none !important;
  }
}


/* v59: restore the good stone preview and make step 2 genuinely compact on wide screens */

/* Keep exactly one preview, but restore desktop preview to a normal vertical card layout. */
@media (min-width: 761px) {
  .mobile-preview-wrap,
  .viewer-card-mobile {
    display: none !important;
  }

  .viewer-card-desktop {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .viewer-card-desktop .viewer-head {
    padding: 12px 14px 10px !important;
  }

  .viewer-card-desktop .stone-stage {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 12px 8px !important;
  }

  .viewer-card-desktop .stone-figure {
    width: min(520px, 82%) !important;
    margin: 0 auto !important;
  }

  .viewer-card-desktop .preview-note {
    margin-top: 0 !important;
    padding: 9px 12px 11px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }
}

/* Wide desktop: stop stretching both cards just because the viewport is wide. */
@media (min-width: 1101px) {
  body.step-2-active .configurator {
    grid-template-columns: minmax(0, 610px) minmax(0, 610px) !important;
    gap: 20px !important;
    max-width: 1240px !important;
    width: 100% !important;
    margin: 0 auto !important;
    height: auto !important;
    align-items: start !important;
  }

  body.step-2-active .controls-card,
  body.step-2-active .viewer-card-desktop {
    width: 100% !important;
    max-width: 610px !important;
  }

  /* Step 2 should read like the successful mobile version: one compact vertical flow. */
  #step2:not([hidden]) {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #step2:not([hidden]) > .quantity-section,
  #step2:not([hidden]) > .order-preview,
  #step2:not([hidden]) > .step-actions,
  #step2:not([hidden]) > .prototype-note {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #step2 .quantity-section {
    padding-top: 4px !important;
    margin: 0 !important;
  }

  #step2 h2 {
    max-width: none !important;
    font-size: 31px !important;
    line-height: 1.05 !important;
    margin: 7px 0 8px !important;
  }

  #step2 .quantity-intro {
    max-width: 500px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 0 0 10px !important;
  }

  #step2 .field-label {
    margin-bottom: 5px !important;
    font-size: 13px !important;
  }

  #step2 .quantity-picker {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    gap: 9px !important;
  }

  #step2 .quantity-button,
  #step2 .quantity-picker input {
    height: 43px !important;
    min-height: 43px !important;
    border-radius: 14px !important;
  }

  #step2 .quantity-button {
    font-size: 21px !important;
  }

  #step2 .quantity-picker input {
    font-size: 18px !important;
  }

  #step2 .order-preview {
    margin-top: 10px !important;
    padding: 12px 14px 11px !important;
    border-radius: 18px !important;
  }

  #step2 .order-preview span:first-child {
    font-size: 14px !important;
  }

  #step2 .order-total-row {
    margin: 5px 0 2px !important;
    gap: 12px !important;
  }

  #step2 .order-total-row .quantity-line,
  #step2 #totalPriceSummary {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  #step2 .order-meta-row {
    margin: 3px 0 6px !important;
    gap: 10px !important;
  }

  #step2 .order-preview .unit-price,
  #step2 .order-meta-row .vat-note,
  #step2 #designSummary {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  #step2 .step-actions {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  #step2 .step-actions .back-button,
  #step2 .step-actions .continue {
    width: auto !important;
    min-width: 0 !important;
    height: 41px !important;
    min-height: 41px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
  }

  #step2 .step-actions .continue {
    padding-left: 19px !important;
    padding-right: 14px !important;
  }

  #step2 .prototype-note {
    max-width: 520px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    margin-top: 9px !important;
  }

  body.step-2-active .viewer-card-desktop .stone-figure {
    width: min(460px, 80%) !important;
  }
}

@media (max-width: 760px) {
  .mobile-preview-wrap,
  .viewer-card-mobile {
    display: block !important;
  }
  .viewer-card-desktop {
    display: none !important;
  }
}


/* v60: make step 2 text and preview engraving respond to narrower desktop widths. */
@media (min-width: 761px) {
  #step2 .quantity-section h2 {
    font-size: clamp(28px, 2.8vw, 34px) !important;
    line-height: 1.04 !important;
    text-wrap: balance;
  }

  #step2 .quantity-intro {
    font-size: clamp(13px, 1.35vw, 15px) !important;
    line-height: 1.4 !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body.step-2-active .viewer-card-desktop .stone-figure {
    width: min(460px, 76%) !important;
  }

  body.step-2-active .viewer-card-desktop .preview-note {
    font-size: 11px !important;
  }
}


/* v61: step 2 desktop preview uses a slightly tighter safe zone so engraving scales with the stone. */
@media (min-width: 761px) {
  body.step-2-active .viewer-card-desktop .stone-engraving {
    width: 50% !important;
    left: 49.5% !important;
  }
}


/* v62: keep step-2 buttons compact on narrower desktop widths, and keep the stone visible by embedding the preview into the desktop flow. */
#continueToDelivery .label-short {
  display: none;
}

@media (min-width: 761px) and (max-width: 1100px) {
  /* Keep step 2 action buttons one-line and fixed-height instead of growing taller. */
  #step2 .step-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  #step2 .step-actions .back-button,
  #step2 .step-actions .continue {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 999px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #step2 .step-actions .back-button {
    flex: 0 0 128px !important;
    width: 128px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 14px !important;
    gap: 10px !important;
  }

  #step2 .step-actions .continue {
    flex: 0 0 210px !important;
    width: 210px !important;
    max-width: 210px !important;
    padding-left: 18px !important;
    padding-right: 14px !important;
    font-size: 14px !important;
    gap: 10px !important;
  }

  #continueToDelivery .label-full {
    display: none !important;
  }

  #continueToDelivery .label-short {
    display: inline !important;
  }

  /* When the browser narrows on desktop, keep the preview visible below the form instead of hiding it. */
  body.step-2-active .mobile-preview-wrap,
  body.step-2-active .viewer-card-mobile {
    display: none !important;
  }

  body.step-2-active .viewer-card-desktop {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 14px !important;
  }

  body.step-2-active .viewer-card-desktop .stone-stage {
    padding: 12px 12px 8px !important;
  }

  body.step-2-active .viewer-card-desktop .stone-figure {
    width: min(440px, 76%) !important;
    margin: 0 auto !important;
  }

  body.step-2-active .viewer-card-desktop .preview-note {
    padding: 9px 12px 11px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}


/* v63: step 2 quantity row should stay lower on desktop, and the preview must remain visible when the viewport narrows into the mobile breakpoint. */
@media (min-width: 761px) {
  #step2 .quantity-picker {
    max-width: 340px !important;
    grid-template-columns: 56px minmax(150px, 1fr) 56px !important;
    gap: 10px !important;
    align-items: center !important;
  }

  #step2 .quantity-button,
  #step2 .quantity-picker input {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 16px !important;
  }

  #step2 .quantity-button {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  #step2 .quantity-picker input {
    font-size: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 760px) {
  /* Step 2 should still show the stone preview, embedded in the flow, even after the desktop preview would normally be hidden. */
  body.step-2-active .mobile-preview-wrap,
  body.step-2-active .viewer-card-mobile {
    display: none !important;
  }

  body.step-2-active .viewer-card-desktop {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 14px !important;
  }

  body.step-2-active .viewer-card-desktop .viewer-head {
    padding: 12px 14px 10px !important;
  }

  body.step-2-active .viewer-card-desktop .stone-stage {
    padding: 12px 12px 8px !important;
  }

  body.step-2-active .viewer-card-desktop .stone-figure {
    width: min(460px, 82%) !important;
    margin: 0 auto !important;
  }

  body.step-2-active .viewer-card-desktop .preview-note {
    padding: 9px 12px 11px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}


/* v64: equalize step-1/step-2 card heights on desktop, unify stone/text sizing across steps, and compress step 2 a bit further. */
@media (min-width: 761px) {
  .configurator {
    align-items: stretch !important;
  }

  .controls-card,
  .viewer-card-desktop {
    align-self: stretch !important;
    height: 100% !important;
  }

  .viewer-card-desktop {
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    min-height: 100% !important;
  }

  .viewer-card-desktop .viewer-head {
    padding: 12px 14px 10px !important;
  }

  .viewer-card-desktop .stone-stage {
    display: grid !important;
    place-items: center !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 12px 16px 8px !important;
  }

  /* Same stone size and same engraving safe-zone in both step 1 and step 2. */
  .viewer-card-desktop .stone-figure,
  body.step-2-active .viewer-card-desktop .stone-figure {
    width: min(500px, 78%) !important;
    margin: 0 auto !important;
  }

  .viewer-card-desktop .stone-engraving,
  body.step-2-active .viewer-card-desktop .stone-engraving {
    width: 54% !important;
    left: 49.6% !important;
    top: var(--engraving-top, 49.8%) !important;
  }

  .viewer-card-desktop .preview-note {
    padding: 9px 12px 11px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  /* Slightly more compact step 2 desktop composition. */
  #step2 .quantity-section {
    padding-top: 2px !important;
  }

  #step2 .quantity-intro {
    margin-bottom: 8px !important;
    max-width: 520px !important;
  }

  #step2 .field-label {
    margin-bottom: 4px !important;
  }

  #step2 .quantity-picker {
    max-width: 332px !important;
    grid-template-columns: 52px minmax(140px, 1fr) 52px !important;
    gap: 10px !important;
  }

  #step2 .quantity-button,
  #step2 .quantity-picker input {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-radius: 16px !important;
  }

  #step2 .quantity-button {
    font-size: 18px !important;
  }

  #step2 .quantity-picker input {
    font-size: 17px !important;
  }

  #step2 .order-preview {
    margin-top: 8px !important;
    padding: 10px 14px 9px !important;
  }

  #step2 .order-total-row {
    margin: 4px 0 2px !important;
  }

  #step2 .order-meta-row {
    margin: 2px 0 5px !important;
  }

  #step2 #designSummary {
    display: block !important;
    line-height: 1.3 !important;
  }

  #step2 .step-actions {
    margin-top: 8px !important;
    gap: 10px !important;
  }

  #step2 .step-actions .back-button,
  #step2 .step-actions .continue {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  #step2 .prototype-note {
    margin-top: 8px !important;
    max-width: 560px !important;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  #step2 .quantity-section h2 {
    font-size: clamp(26px, 4vw, 32px) !important;
  }

  #step2 .quantity-intro {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #step2 .order-preview {
    padding: 9px 12px 8px !important;
  }
}


/* v65: move desktop step-2 price block closer to the quantity summary. */
@media (min-width: 761px) {
  #step2 .order-preview {
    --summary-column-gap: clamp(24px, 3vw, 42px);
  }

  #step2 .order-total-row {
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    justify-content: start !important;
    align-items: baseline !important;
    column-gap: var(--summary-column-gap) !important;
    row-gap: 0 !important;
  }

  #step2 .order-meta-row {
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    justify-content: start !important;
    align-items: start !important;
    column-gap: var(--summary-column-gap) !important;
    row-gap: 0 !important;
  }

  #step2 .price-group {
    align-items: flex-start !important;
    justify-self: start !important;
    min-width: 0 !important;
  }

  #step2 .order-meta-row .vat-note {
    justify-self: start !important;
  }
}


/* v66: match the compact step-2 reference: left/right summary columns and actions at opposite ends. */
@media (min-width: 761px) {
  #step2 .order-total-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 18px !important;
    width: 100% !important;
  }

  #step2 .order-meta-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 18px !important;
    width: 100% !important;
  }

  #step2 .price-group {
    align-items: flex-end !important;
    justify-self: auto !important;
    margin-left: auto !important;
  }

  #step2 .order-meta-row .vat-note {
    margin-left: auto !important;
    text-align: right !important;
  }

  #step2 .step-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
  }

  #step2 .step-actions .back-button,
  #step2 .step-actions .continue {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  #step2 .step-actions .back-button {
    margin-right: auto !important;
  }

  #step2 .step-actions .continue {
    margin-left: auto !important;
  }

  #continueToDelivery .label-full {
    display: inline !important;
  }

  #continueToDelivery .label-short {
    display: none !important;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  #step2 .step-actions {
    gap: 10px !important;
  }

  #step2 .step-actions .back-button {
    padding-left: 14px !important;
    padding-right: 16px !important;
  }

  #step2 .step-actions .continue {
    padding-left: 18px !important;
    padding-right: 14px !important;
  }
}

/* v68: keep the text input intentionally narrower inside step 1. */
@media (min-width: 761px) {
  #step1 .control-section-first .field-label,
  #step1 .control-section-first .editor-wrap,
  #step1 .control-section-first .field-help {
    width: min(100%, 460px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #step1 .control-section-first .field-label {
    text-align: left !important;
  }

  #step1 .control-section-first .editor-wrap {
    max-width: 460px !important;
  }
}

@media (min-width: 1101px) {
  #step1 .control-section-first .field-label,
  #step1 .control-section-first .editor-wrap,
  #step1 .control-section-first .field-help {
    width: min(100%, 420px) !important;
  }

  #step1 .control-section-first .editor-wrap {
    max-width: 420px !important;
  }
}

/* v69: narrower step-1 text field and a more consistent preview text/stone ratio. */
@media (min-width: 761px) {
  #step1 .control-section-first .field-label,
  #step1 .control-section-first .editor-wrap,
  #step1 .control-section-first .field-help {
    width: min(100%, 360px) !important;
  }

  #step1 .control-section-first .editor-wrap {
    max-width: 360px !important;
  }

  .viewer-card-desktop .stone-stage,
  body.step-2-active .viewer-card-desktop .stone-stage {
    display: grid !important;
    place-items: center !important;
  }

  .viewer-card-desktop .stone-figure,
  body.step-2-active .viewer-card-desktop .stone-figure {
    width: min(520px, 82%) !important;
    margin: 0 auto !important;
  }

  .viewer-card-desktop .stone-engraving,
  body.step-2-active .viewer-card-desktop .stone-engraving {
    width: 58% !important;
    left: 49.5% !important;
  }
}

@media (min-width: 1101px) {
  #step1 .control-section-first .field-label,
  #step1 .control-section-first .editor-wrap,
  #step1 .control-section-first .field-help {
    width: min(100%, 340px) !important;
  }

  #step1 .control-section-first .editor-wrap {
    max-width: 340px !important;
  }
}

@media (max-width: 760px) {
  .viewer-card-desktop .stone-engraving,
  .viewer-card-mobile .stone-engraving,
  body.step-2-active .viewer-card-desktop .stone-engraving {
    width: 58% !important;
    left: 49.5% !important;
  }
}

/* v70: keep mobile engraving more conservative so text and symbols stay inside the stone. */
@media (max-width: 760px) {
  .viewer-card-mobile .stone-stage {
    padding: 16px 12px 10px !important;
  }

  .viewer-card-mobile .stone-figure {
    width: min(100%, 540px) !important;
    margin: 0 auto !important;
  }

  .viewer-card-mobile .stone-engraving {
    width: 54% !important;
    left: 49.4% !important;
    top: var(--engraving-top, 54.4%) !important;
  }

  .viewer-card-mobile .preview-note {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* v71: make engraving scale feel larger and more consistent with the stone
   across step 1, step 2 and browser resizing. */
.viewer-card-desktop .stone-stage,
body.step-2-active .viewer-card-desktop .stone-stage,
.viewer-card-mobile .stone-stage {
  display: grid !important;
  place-items: center !important;
}

.viewer-card-desktop .stone-figure,
body.step-2-active .viewer-card-desktop .stone-figure {
  width: min(540px, 84%) !important;
  margin: 0 auto !important;
}

.viewer-card-desktop .stone-engraving,
body.step-2-active .viewer-card-desktop .stone-engraving {
  width: 56% !important;
  left: 49.6% !important;
  top: var(--engraving-top, 54.2%) !important;
}

@media (max-width: 760px) {
  .viewer-card-mobile .stone-engraving {
    width: 55% !important;
    left: 49.5% !important;
    top: var(--engraving-top, 54.2%) !important;
  }
}


/* v73: align step 2 typography and make engraving larger + optically centered. */
#step2 .order-total-row {
  align-items: baseline !important;
  gap: 18px !important;
}
#step2 .order-total-row .quantity-line {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  color: var(--text) !important;
}
#step2 .order-total-row .quantity-line strong,
#step2 .order-total-row .quantity-unit,
#step2 #totalPriceSummary {
  font-size: 18px !important;
  line-height: 1.1 !important;
}

.viewer-card-desktop .stone-engraving,
.viewer-card-mobile .stone-engraving,
body.step-2-active .viewer-card-desktop .stone-engraving {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 58% !important;
  left: 50% !important;
}

.viewer-card-desktop .stone-engraving,
body.step-2-active .viewer-card-desktop .stone-engraving {
  top: var(--engraving-top, 43.9%) !important;
}

.viewer-card-mobile .stone-engraving {
  width: 56% !important;
  left: 50% !important;
  top: var(--engraving-top, 44.2%) !important;
}

.engraving-line {
  width: 100% !important;
  text-align: center !important;
}
.engraving-line + .engraving-line {
  margin-top: var(--line-gap, 0.16em) !important;
}

@media (max-width: 760px) {
  #step2 .order-total-row .quantity-line,
  #step2 .order-total-row .quantity-line strong,
  #step2 .order-total-row .quantity-unit,
  #step2 #totalPriceSummary {
    font-size: 17px !important;
  }
  .viewer-card-mobile .stone-engraving {
    width: 58% !important;
    left: 50% !important;
    top: var(--engraving-top, 44.2%) !important;
  }
}


/* v75: mobile editor text should sit optically higher and feel centered in the input. */
@media (max-width: 760px) {
  .editor-wrap {
    min-height: 64px !important;
    height: 64px !important;
  }

  .engraving-editor {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 4px 44px 11px 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .counter {
    bottom: 9px !important;
  }
}


/* v76: step 2 heading uses the available width instead of forced narrow wrapping. */
#step2 .quantity-section h2 {
  max-width: none !important;
  width: auto !important;
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (min-width: 1101px) {
  #step2 .quantity-section h2 {
    white-space: nowrap !important;
    font-size: clamp(28px, 2.15vw, 34px) !important;
    line-height: 1.05 !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  #step2 .quantity-section h2 {
    font-size: clamp(27px, 3.15vw, 32px) !important;
    line-height: 1.06 !important;
  }
}

@media (max-width: 760px) {
  #step2 .quantity-section h2 {
    font-size: clamp(31px, 8.4vw, 42px) !important;
    line-height: 1.06 !important;
    margin-bottom: 14px !important;
  }
}


/* v77: let the step-2 intro sentence use the available width naturally,
   and refine the order-summary typography/spacing for a calmer visual rhythm. */
#step2 .quantity-intro {
  max-width: none !important;
  width: auto !important;
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (min-width: 1101px) {
  #step2 .quantity-intro {
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  #step2 .quantity-intro {
    font-size: 14px !important;
    line-height: 1.42 !important;
    margin-bottom: 14px !important;
  }
}

@media (max-width: 760px) {
  #step2 .quantity-intro {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
  }
}

#step2 .order-preview {
  display: grid !important;
  row-gap: 4px !important;
}

#step2 .order-preview > span:first-child {
  font-size: 15px !important;
  line-height: 1.22 !important;
  color: var(--muted) !important;
}

#step2 .order-total-row {
  margin: 2px 0 0 !important;
  align-items: baseline !important;
  gap: 16px !important;
}

#step2 .order-total-row .quantity-line {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.18em !important;
  letter-spacing: -0.01em !important;
  font-size: 18px !important;
  line-height: 1.14 !important;
}

#step2 .order-total-row .quantity-line strong,
#step2 .order-total-row .quantity-unit,
#step2 #totalPriceSummary {
  font-size: 18px !important;
  line-height: 1.14 !important;
}

#step2 .order-meta-row {
  margin: 0 !important;
  gap: 10px !important;
  align-items: baseline !important;
}

#step2 .order-preview .unit-price,
#step2 .order-meta-row .vat-note {
  font-size: 13px !important;
  line-height: 1.28 !important;
}

#step2 #designSummary {
  display: block !important;
  margin-top: 2px !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
}

@media (max-width: 760px) {
  #step2 .order-preview {
    row-gap: 3px !important;
  }

  #step2 .order-preview > span:first-child {
    font-size: 14px !important;
  }

  #step2 .order-total-row .quantity-line,
  #step2 .order-total-row .quantity-line strong,
  #step2 .order-total-row .quantity-unit,
  #step2 #totalPriceSummary {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  #step2 .order-preview .unit-price,
  #step2 .order-meta-row .vat-note,
  #step2 #designSummary {
    font-size: 12px !important;
    line-height: 1.36 !important;
  }
}


/* v79: on mobile and narrow browser widths, show the stone preview before quantity/order information in step 2. */
.step2-inline-preview {
  display: none;
}

@media (max-width: 980px) {
  body.step-2-active .step2-inline-preview {
    display: block !important;
    margin: 14px 0 16px !important;
  }

  body.step-2-active .viewer-card-step2-inline {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body.step-2-active .viewer-card-step2-inline .viewer-head {
    padding: 12px 14px 10px !important;
  }

  body.step-2-active .viewer-card-step2-inline .stone-stage {
    display: grid !important;
    place-items: center !important;
    padding: 10px 10px 6px !important;
  }

  body.step-2-active .viewer-card-step2-inline .stone-figure {
    width: min(520px, 82%) !important;
    margin: 0 auto !important;
  }

  body.step-2-active .viewer-card-step2-inline .stone-engraving {
    width: 58% !important;
    left: 50% !important;
    top: var(--engraving-top, 44.2%) !important;
  }

  body.step-2-active .viewer-card-step2-inline .preview-note {
    padding: 10px 12px 12px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  /* Prevent a second preview below the controls at these widths. */
  body.step-2-active .viewer-card-desktop {
    display: none !important;
  }

  body.step-2-active .mobile-preview-wrap,
  body.step-2-active .viewer-card-mobile {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body.step-2-active .step2-inline-preview {
    margin-top: 12px !important;
    margin-bottom: 14px !important;
  }

  body.step-2-active .viewer-card-step2-inline .stone-figure {
    width: min(100%, 520px) !important;
  }

  body.step-2-active .viewer-card-step2-inline .preview-note {
    font-size: 12px !important;
  }
}

@media (min-width: 981px) {
  body.step-2-active .step2-inline-preview {
    display: none !important;
  }
}


/* v80: center the step-1 content column on desktop while keeping its text left-aligned. */
@media (min-width: 761px) {
  #step1 .control-section-first > .step-label,
  #step1 .control-section-first > h2,
  #step1 .control-section-first > .field-label,
  #step1 .control-section-first > .editor-wrap,
  #step1 .control-section-first > .field-help {
    width: min(100%, 360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #step1 .control-section-first > .step-label,
  #step1 .control-section-first > h2,
  #step1 .control-section-first > .field-label,
  #step1 .control-section-first > .field-help {
    display: block !important;
    text-align: left !important;
  }

  #step1 .control-section-first > h2 {
    white-space: normal !important;
  }
}

@media (min-width: 1101px) {
  #step1 .control-section-first > .step-label,
  #step1 .control-section-first > h2,
  #step1 .control-section-first > .field-label,
  #step1 .control-section-first > .editor-wrap,
  #step1 .control-section-first > .field-help {
    width: min(100%, 340px) !important;
  }
}


/* v81: let the step-1 heading use the available width naturally, like the step-2 heading, while keeping the text field itself compact and centered. */
@media (min-width: 761px) {
  #step1 .control-section-first > .step-label,
  #step1 .control-section-first > h2 {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #step1 .control-section-first > h2 {
    white-space: normal !important;
    text-wrap: wrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.06 !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  #step1 .control-section-first > .step-label,
  #step1 .control-section-first > h2 {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
  }
}


/* v82: align the step-1 heading column with the Text label while keeping the input box compact. */
@media (min-width: 761px) {
  #step1 .control-section-first > .step-label,
  #step1 .control-section-first > h2,
  #step1 .control-section-first > .field-label {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
  #step1 .control-section-first > h2 {
    white-space: normal !important;
    text-wrap: wrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  #step1 .control-section-first > .editor-wrap {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #step1 .control-section-first > .field-help {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
}


/* v84: keep step-1 heading/label aligned with the input column, but allow a full-width enough column so the heading stays on one line when space exists and wraps only responsively. */
@media (min-width: 761px) {
  #step1 .control-section-first > .step-label,
  #step1 .control-section-first > h2,
  #step1 .control-section-first > .field-label,
  #step1 .control-section-first > .editor-wrap,
  #step1 .control-section-first > .field-help {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #step1 .control-section-first > .step-label,
  #step1 .control-section-first > h2,
  #step1 .control-section-first > .field-label,
  #step1 .control-section-first > .field-help {
    text-align: left !important;
  }
  #step1 .control-section-first > h2 {
    white-space: normal !important;
    text-wrap: pretty !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}


/* v85: hero heading should not have forced line breaks; let it wrap responsively only when needed. */
.intro h1 {
  white-space: normal !important;
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
}
.intro h1 span {
  display: inline !important;
}
@media (max-width: 760px) {
  .intro h1 {
    white-space: normal !important;
    line-height: 0.95;
  }
  .intro-text {
    max-width: 34ch;
  }
}


/* v87: iPhone-focused flow compression while preserving the desktop layout. */
@media (max-width: 760px) {
  /* Make the text the customer types easier to read. */
  #step1 .editor-wrap {
    height: 70px !important;
    min-height: 70px !important;
  }
  #step1 .engraving-editor {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 5px 48px 12px 14px !important;
    font-size: 19px !important;
    line-height: 1.22 !important;
  }
  #step1 .counter {
    right: 12px !important;
    bottom: 9px !important;
    font-size: 12px !important;
  }

  /* Two compact style cards per row; the third naturally starts the next row. */
  #step1 .font-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #step1 .font-option {
    height: 50px !important;
    min-height: 50px !important;
    padding: 5px 8px !important;
    gap: 7px !important;
    border-radius: 13px !important;
  }
  #step1 .font-sample {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 8px !important;
    font-size: 17px !important;
  }
  #step1 .font-option strong {
    font-size: 13px !important;
    line-height: 1.05 !important;
    margin-bottom: 1px !important;
  }
  #step1 .font-option small {
    font-size: 10px !important;
    line-height: 1.08 !important;
  }

  /* With "Ingen" removed, use a clear two-column symbol grid. */
  #step1 .symbols-six {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #step1 .symbol {
    height: 62px !important;
    min-height: 62px !important;
    border-radius: 14px !important;
    padding: 6px 4px !important;
    gap: 3px !important;
  }
  #step1 .symbol span {
    font-size: 32px !important;
    line-height: .95 !important;
  }
  #step1 .symbol small {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  /* Pull following controls upward through reduced vertical rhythm. */
  #step1 fieldset.control-section,
  #step1 .control-section {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }
  #step1 .control-section legend {
    margin-bottom: 6px !important;
  }
  #step1 .symbol-size-options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }
  #step1 .symbol-size-option {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 13px !important;
  }

  /* Compact design recap: all three selections on one row. */
  #step1 .summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .9fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    align-items: start !important;
  }
  #step1 .summary span {
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }
  #step1 .summary strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Step 2: explanatory copy belongs with the quantity control. */
  #step2 .field-label {
    margin-bottom: 5px !important;
  }
  #step2 .quantity-intro {
    margin: 0 0 9px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* v88: on mobile, stack the three font choices in a slim left column and fit two symbol buttons per row to the right. */
@media (max-width: 760px) {
  /* Larger typed text in the editor for easier reading while composing. */
  #step1 .editor-wrap {
    height: 74px !important;
    min-height: 74px !important;
  }
  #step1 .engraving-editor {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 6px 48px 12px 14px !important;
    font-size: 22px !important;
    line-height: 1.16 !important;
  }

  /* Reflow the lower part of step 1 into a compact two-column layout. */
  #step1 {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    align-items: start !important;
  }
  #step1 > .control-section-first,
  #step1 > .mobile-preview-wrap,
  #step1 > fieldset.control-section:nth-of-type(3),
  #step1 > .summary,
  #step1 > .continue {
    grid-column: 1 / -1 !important;
  }
  #step1 > fieldset.control-section:nth-of-type(1) {
    grid-column: 1 !important;
    margin-top: 0 !important;
  }
  #step1 > fieldset.control-section:nth-of-type(2) {
    grid-column: 2 !important;
    margin-top: 0 !important;
  }

  /* Keep the font choices on three rows, but make each button narrower and lighter. */
  #step1 > fieldset.control-section:nth-of-type(1) {
    padding-top: 6px !important;
  }
  #step1 > fieldset.control-section:nth-of-type(1) legend {
    margin-bottom: 7px !important;
  }
  #step1 .font-options {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #step1 .font-option {
    min-height: 66px !important;
    height: 66px !important;
    padding: 6px 8px !important;
    gap: 7px !important;
    border-radius: 13px !important;
    align-items: center !important;
  }
  #step1 .font-sample {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    font-size: 20px !important;
  }
  #step1 .font-option strong {
    font-size: 12px !important;
    line-height: 1.05 !important;
    margin-bottom: 1px !important;
  }
  #step1 .font-option small {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /* Two symbol buttons per row in the wider right column, plus one added symbol. */
  #step1 > fieldset.control-section:nth-of-type(2) {
    padding-top: 6px !important;
  }
  #step1 > fieldset.control-section:nth-of-type(2) legend {
    margin-bottom: 7px !important;
  }
  #step1 .symbols-six {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #step1 .symbol {
    min-height: 66px !important;
    height: 66px !important;
    border-radius: 13px !important;
    padding: 7px 4px 8px !important;
    gap: 3px !important;
  }
  #step1 .symbol span {
    font-size: 27px !important;
    line-height: 0.94 !important;
  }
  #step1 .symbol small {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  /* Pull the remaining controls upward a little after the denser layout. */
  #step1 > fieldset.control-section:nth-of-type(3) {
    margin-top: 0 !important;
    padding-top: 4px !important;
  }
  #step1 .summary {
    margin-top: 2px !important;
  }
}

/* v89: make step transitions behave like separate pages even on mobile overrides. */
#step1[hidden],
#step2[hidden] {
  display: none !important;
}


/* v90: stronger step separation and improved symbol fallback */
.step-panel {
  display: none;
}
.step-panel.is-active {
  display: block;
}
@media (min-width: 761px) {
  #step2.step-panel.is-active {
    display: grid;
  }
}

.engraving-editor,
.stone-engraving,
.symbol span,
.engraving-symbol {
  font-variant-emoji: text;
}

.symbol span,
.engraving-symbol {
  font-family: var(--font-symbol);
}

/* v91: use a monochrome outline bird glyph and make step navigation truly page-like. */
.dove-symbol,
.engraving-symbol {
  font-family: "Noto Sans Egyptian Hieroglyphs", "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Arial Unicode MS", sans-serif !important;
  font-variant-emoji: text;
}

/* The inactive step must never participate in layout, including on iPhone Safari. */
#step1:not(.is-active),
#step2:not(.is-active),
#step1[hidden],
#step2[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* v92: larger, clearer symbol buttons plus custom flower icon. */
.symbol span {
  font-size: 34px;
  line-height: 1;
}
.symbol .symbol-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.symbol .symbol-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.symbol .dove-symbol {
  font-size: 34px;
  line-height: 1;
}
.engraving-symbol-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.92em;
  height: 0.92em;
  vertical-align: -0.1em;
}
.engraving-symbol-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 760px) {
  #step1 .symbol span {
    font-size: 34px !important;
  }
  #step1 .symbol .symbol-icon {
    width: 38px !important;
    height: 38px !important;
  }
  #step1 .symbol .dove-symbol {
    font-size: 36px !important;
  }
}


/* v93: keep symbol graphics inside buttons and make the dove both visible in the editor and stable in preview. */
.engraving-editor.font-classic {
  font-family: var(--font-serif), "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Apple Color Emoji", sans-serif;
}
.engraving-editor.font-soft {
  font-family: var(--font-soft), "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Apple Color Emoji", sans-serif;
}
.engraving-editor.font-modern {
  font-family: var(--font-modern), "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Apple Color Emoji", sans-serif;
}
.symbol {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 86px !important;
  gap: 6px !important;
  padding: 10px 8px !important;
  overflow: hidden;
}
.symbol span,
.symbol .symbol-icon {
  flex: 0 0 auto;
}
.symbol small {
  display: block;
  margin: 0;
  line-height: 1.1;
  text-align: center;
}
.symbol span {
  font-size: 30px !important;
  line-height: 1 !important;
}
.symbol .symbol-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
}
.symbol .symbol-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.symbol .dove-icon {
  width: 40px !important;
  height: 40px !important;
}
.symbol .dove-icon svg,
.engraving-dove-icon,
.engraving-flower-icon {
  overflow: visible;
}
.engraving-symbol {
  font-family: var(--font-symbol), "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif !important;
}
.engraving-symbol-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.08em;
}
.engraving-symbol-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 760px) {
  .symbol {
    min-height: 82px !important;
    padding: 8px 6px !important;
  }
  .symbol span {
    font-size: 28px !important;
  }
  .symbol .symbol-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .symbol .dove-icon {
    width: 38px !important;
    height: 38px !important;
  }
}


/* v94: icon-only symbol buttons with larger icons and a simpler outline dove. */
#step1 .symbols-six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
#step1 .symbol {
  min-height: 58px !important;
  height: 58px;
  padding: 6px !important;
  border-radius: 16px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
}
#step1 .symbol small {
  display: none !important;
}
#step1 .symbol span {
  font-size: 34px !important;
  line-height: 1 !important;
}
#step1 .symbol .symbol-icon {
  width: 34px !important;
  height: 34px !important;
}
#step1 .symbol .flower-icon {
  width: 36px !important;
  height: 36px !important;
}
#step1 .symbol .dove-icon {
  width: 36px !important;
  height: 36px !important;
}
#step1 .symbol .symbol-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
#step1 .engraving-dove-icon,
#step1 .dove-icon svg,
#step1 .engraving-flower-icon,
#step1 .flower-icon svg {
  overflow: visible;
}
@media (max-width: 760px) {
  #step1 .symbols-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  #step1 .symbol {
    min-height: 56px !important;
    height: 56px;
    padding: 5px !important;
  }
  #step1 .symbol span {
    font-size: 32px !important;
  }
  #step1 .symbol .symbol-icon,
  #step1 .symbol .flower-icon,
  #step1 .symbol .dove-icon {
    width: 34px !important;
    height: 34px !important;
  }
}


/* v95: smaller symbol buttons, same-size icons, and dove image asset. */
#step1 .symbols-six {
  grid-template-columns: repeat(6, 128px);
  justify-content: start;
  gap: 8px;
}
#step1 .symbol {
  min-height: 52px !important;
  height: 52px;
  padding: 4px !important;
  border-radius: 15px;
}
#step1 .symbol span {
  font-size: 34px !important;
}
#step1 .symbol .symbol-icon,
#step1 .symbol .flower-icon,
#step1 .symbol .dove-icon {
  width: 38px !important;
  height: 38px !important;
}
#step1 .symbol .dove-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.engraving-symbol-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}
.engraving-dove-image {
  width: 1.18em;
  height: 1.18em;
  display: block;
  object-fit: contain;
}
@media (max-width: 980px) {
  #step1 .symbols-six {
    grid-template-columns: repeat(6, 112px);
  }
}
@media (max-width: 760px) {
  #step1 .symbols-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  #step1 .symbol {
    min-height: 52px !important;
    height: 52px;
  }
  #step1 .symbol .symbol-icon,
  #step1 .symbol .flower-icon,
  #step1 .symbol .dove-icon {
    width: 36px !important;
    height: 36px !important;
  }
}


/* v96: identical progress-to-step spacing on every step.
   The chosen gap sits between the previous step-1 (too airy) and step-2 (too tight) spacing. */
.controls-card > .progress {
  margin-bottom: 24px !important;
}
#step1 > .control-section-first,
#step2 > .quantity-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

@media (max-width: 760px) {
  .controls-card > .progress {
    margin-bottom: 30px !important;
  }
  #step1 > .control-section-first,
  #step2 > .quantity-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }
}


/* v97: make all six symbol buttons fit inside the holder on larger screens without shrinking the symbols themselves. */
#step1 .symbols-six {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
  gap: 8px !important;
}
#step1 .symbol {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 4px !important;
  border-radius: 15px !important;
}
#step1 .symbol span {
  font-size: 34px !important;
}
#step1 .symbol .symbol-icon,
#step1 .symbol .flower-icon,
#step1 .symbol .dove-icon {
  width: 38px !important;
  height: 38px !important;
}
@media (max-width: 980px) {
  #step1 .symbols-six {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  #step1 .symbol {
    min-height: 48px !important;
    height: 48px !important;
  }
  #step1 .symbol span {
    font-size: 32px !important;
  }
  #step1 .symbol .symbol-icon,
  #step1 .symbol .flower-icon,
  #step1 .symbol .dove-icon {
    width: 36px !important;
    height: 36px !important;
  }
}


/* v100: restore mobile symbol buttons to two per row and keep the "Mjuk" helper on one row. */
@media (max-width: 760px) {
  #step1 .symbols-six {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #step1 .symbol {
    min-height: 58px !important;
    height: 58px !important;
    padding: 5px !important;
  }
  #step1 .symbol span {
    font-size: 32px !important;
  }
  #step1 .symbol .symbol-icon,
  #step1 .symbol .flower-icon,
  #step1 .symbol .dove-icon {
    width: 36px !important;
    height: 36px !important;
  }

  #step1 .font-option small {
    white-space: nowrap;
  }
  #step1 .font-option[data-font="soft"] small {
    font-size: 9.5px !important;
    letter-spacing: 0;
  }
}


/* v101: center the editor placeholder/typed text and keep symbol buttons as tall as the font buttons on mobile. */
#step1 .engraving-editor {
  text-align: center !important;
}
#step1 .engraving-editor::placeholder {
  text-align: center;
}

@media (max-width: 760px) {
  /* Make the symbol buttons visually match the height of the font buttons. */
  #step1 .font-option,
  #step1 .symbol {
    min-height: 66px !important;
    height: 66px !important;
  }

  #step1 .symbol {
    border-radius: 13px !important;
    padding: 7px 4px 8px !important;
  }

  /* Keep the typing field centered horizontally even with the counter in the corner. */
  #step1 .engraving-editor {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}


/* v102: correct editor centering and restore smaller v100-sized mobile buttons. */
#step1 .editor-wrap {
  position: relative;
}
#step1 .engraving-editor {
  text-align: center !important;
  line-height: 1.15 !important;
  padding-left: 58px !important;
  padding-right: 58px !important;
}
#step1 .engraving-editor::placeholder {
  text-align: center !important;
}

@media (max-width: 760px) {
  #step1 .engraving-editor {
    min-height: 72px !important;
    height: 72px !important;
    max-height: 72px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
  }

  /* Make both button groups use the v100 symbol-button height. */
  #step1 .font-option,
  #step1 .symbol {
    min-height: 58px !important;
    height: 58px !important;
  }

  #step1 .font-option {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  #step1 .symbol {
    padding: 5px !important;
    border-radius: 13px !important;
  }
}


/* v103: on mobile, let the sticky header glide away while scrolling down and return on scroll up. */
@media (max-width: 760px) {
  .topbar {
    will-change: transform, opacity;
    transition: transform 240ms cubic-bezier(.2,.7,.2,1), opacity 180ms ease;
  }
  .topbar.mobile-header-hidden {
    transform: translateY(calc(-100% - 2px));
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .topbar {
    transition: none;
  }
}


/* v104: tighter step-1 spacing, centered quantity picker, robust symbol alignment */
#step1 .control-section-first > .step-label {
  display: block;
  margin-bottom: 12px;
}

/* Keep the quantity stepper visually centered on laptop/desktop widths. */
@media (min-width: 761px) {
  #step2 .quantity-picker {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Keep symbol rows optically centered, especially the infinity symbol on its own row. */
.engraving-symbol-infinity {
  margin-left: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.12em;
  transform: translateX(-0.03em);
}
.engraving-line.line-only-infinity .engraving-symbol-infinity {
  min-width: 1.22em;
  transform: none;
}

/* Slightly more explicit mobile textarea geometry so JS centering has a stable box. */
@media (max-width: 760px) {
  .editor-wrap {
    min-height: 74px;
  }
  .engraving-editor {
    height: 74px;
    min-height: 74px;
    max-height: 74px;
  }
}


/* v105: mobile header on one row, true empty-placeholder centering, and preview spacing that mirrors the editor. */
.topbar-inner {
  flex-wrap: nowrap;
}
.brand,
.prototype {
  white-space: nowrap;
}
.brand {
  min-width: 0;
}
.prototype {
  flex: 0 0 auto;
}

/* Do not give infinity an artificial width/offset in the preview. This lets leading/trailing
   spaces move it the same way they do in the editor. */
.engraving-symbol-infinity,
.engraving-line.line-only-infinity .engraving-symbol-infinity {
  display: inline-block;
  min-width: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .topbar-inner {
    gap: 12px;
  }
  .brand {
    flex: 1 1 auto;
    font-size: clamp(25px, 7.7vw, 30px);
  }
  .prototype {
    font-size: 11px;
    letter-spacing: 0.11em;
  }

  /* A textarea placeholder follows the text line box. Give the empty editor one line whose
     line-height equals the field height, so the placeholder is centered both vertically and horizontally. */
  #step1 .engraving-editor.is-empty {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
    line-height: 74px !important;
    text-align: center !important;
  }
  #step1 .engraving-editor.is-empty::placeholder {
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  .topbar-inner { gap: 8px; }
  .prototype {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}


/* v106: preserve true two-line typing on iOS and optically center infinity on desktop. */
@media (min-width: 761px) {
  /* The infinity glyph has asymmetric side bearings in the preview font.
     A tiny optical correction centers the visible glyph without changing the
     line width, so leading/trailing spaces still move it naturally. */
  .viewer-card-desktop .engraving-symbol-infinity,
  body.step-2-active .viewer-card-desktop .engraving-symbol-infinity {
    position: relative;
    left: -0.055em;
  }
}

@media (max-width: 760px) {
  /* Typed text must use a normal line box; the 74px placeholder line-height
     applies only while the textarea is empty. */
  #step1 .engraving-editor:not(.is-empty) {
    line-height: 1.22 !important;
  }
}


/* v107: symmetric infinity centering, true placeholder centering everywhere, larger mobile preview text. */
@media (min-width: 761px) {
  /* Infinity has asymmetric visible side bearings in the preview font.
     Correct it in opposite directions depending on whether it begins or ends a line,
     so mirrored lines are visually centered around the same stone axis. */
  .viewer-card-desktop .engraving-line.line-starts-infinity .engraving-symbol-infinity,
  body.step-2-active .viewer-card-desktop .engraving-line.line-starts-infinity .engraving-symbol-infinity {
    left: 0.055em;
  }
  .viewer-card-desktop .engraving-line.line-ends-infinity .engraving-symbol-infinity,
  body.step-2-active .viewer-card-desktop .engraving-line.line-ends-infinity .engraving-symbol-infinity {
    left: -0.055em;
  }
  .viewer-card-desktop .engraving-line.line-only-infinity .engraving-symbol-infinity,
  body.step-2-active .viewer-card-desktop .engraving-line.line-only-infinity .engraving-symbol-infinity {
    left: 0;
  }
}

/* The empty editor is centered by JS using the textarea's live height. */
#step1 .engraving-editor.is-empty {
  text-align: center !important;
}
#step1 .engraving-editor.is-empty::placeholder {
  text-align: center !important;
}


/* v109: vertically center engraving symbols in their own text line on desktop and mobile.
   The symbol keeps a fixed 1em layout slot, so Liten/Normal/Stor changes only the symbol,
   not the surrounding text size or the line's measured width. */
.engraving-symbol {
  display: inline-flex !important;
  box-sizing: border-box;
  width: 1em !important;
  min-width: 1em !important;
  height: 1em !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  font-size: 1em !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: scale(var(--symbol-scale, 1.2)) !important;
  transform-origin: 50% 50% !important;
}

/* Infinity has a small horizontal optical correction only. Do not move it vertically;
   vertical-align: middle above keeps it centered in either engraving row. */
.engraving-symbol-infinity,
.viewer-card-desktop .engraving-line.line-starts-infinity .engraving-symbol-infinity,
.viewer-card-desktop .engraving-line.line-ends-infinity .engraving-symbol-infinity,
.viewer-card-desktop .engraving-line.line-only-infinity .engraving-symbol-infinity,
.viewer-card-mobile .engraving-line.line-starts-infinity .engraving-symbol-infinity,
.viewer-card-mobile .engraving-line.line-ends-infinity .engraving-symbol-infinity,
.viewer-card-mobile .engraving-line.line-only-infinity .engraving-symbol-infinity,
body.step-2-active .viewer-card-desktop .engraving-line.line-starts-infinity .engraving-symbol-infinity,
body.step-2-active .viewer-card-desktop .engraving-line.line-ends-infinity .engraving-symbol-infinity,
body.step-2-active .viewer-card-desktop .engraving-line.line-only-infinity .engraving-symbol-infinity {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 1em !important;
  min-width: 1em !important;
  height: 1em !important;
  vertical-align: middle !important;
  transform: translateX(-0.035em) scale(var(--symbol-scale, 1.2)) !important;
  transform-origin: 50% 50% !important;
}

/* Keep custom graphic symbols centered in the same fixed slot. */
.engraving-symbol-svg svg,
.engraving-dove-image {
  display: block !important;
  width: 0.88em !important;
  height: 0.88em !important;
  max-width: none !important;
  max-height: none !important;
  margin: auto !important;
}


/* v110: desktop preview centering must match the centered editor line.
   Infinity is visually scaled inside a fixed 1em slot so symbol size does not
   reduce the text size. On desktop, compensate the line itself for the
   one-sided visual overhang when infinity is only at the beginning or end. */
@media (min-width: 761px) {
  .viewer-card-desktop .engraving-line,
  body.step-2-active .viewer-card-desktop .engraving-line {
    transform: translateX(var(--line-optical-shift, 0em));
    transform-origin: 50% 50%;
  }

  /* Do not add a second fixed horizontal nudge to infinity on desktop.
     The line-level correction above keeps Liten, Normal and Stor centered
     around the same stone axis. Mobile retains the v109 glyph correction. */
  .viewer-card-desktop .engraving-symbol-infinity,
  body.step-2-active .viewer-card-desktop .engraving-symbol-infinity {
    left: 0 !important;
    transform: scale(var(--symbol-scale, 1.2)) !important;
    transform-origin: 50% 50% !important;
  }
}
\n\n/* v111: center the visible engraving line, not an unscaled symbol placeholder.\n   The outer slot participates in line layout at the scaled symbol width. The\n   inner visual scales around its own centre, so Liten/Normal/Stor remain vertically\n   aligned while the complete line is naturally centered by text-align:center. */\n.engraving-symbol {\n  display: inline-flex !important;\n  position: relative !important;\n  box-sizing: border-box !important;\n  width: calc(var(--symbol-scale, 1.2) * 1em) !important;\n  min-width: calc(var(--symbol-scale, 1.2) * 1em) !important;\n  height: 1em !important;\n  align-items: center !important;\n  justify-content: center !important;\n  vertical-align: middle !important;\n  font-size: 1em !important;\n  line-height: 1 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  transform: none !important;\n  left: 0 !important;\n  top: 0 !important;\n}\n\n.engraving-symbol-visual {\n  display: inline-flex !important;\n  width: 1em !important;\n  min-width: 1em !important;\n  height: 1em !important;\n  align-items: center !important;\n  justify-content: center !important;\n  line-height: 1 !important;\n  transform: scale(var(--symbol-scale, 1.2)) !important;\n  transform-origin: 50% 50% !important;\n}\n\n.engraving-symbol-infinity,\n.viewer-card-desktop .engraving-symbol-infinity,\n.viewer-card-mobile .engraving-symbol-infinity,\nbody.step-2-active .viewer-card-desktop .engraving-symbol-infinity,\n.viewer-card-desktop .engraving-line.line-starts-infinity .engraving-symbol-infinity,\n.viewer-card-desktop .engraving-line.line-ends-infinity .engraving-symbol-infinity,\n.viewer-card-desktop .engraving-line.line-only-infinity .engraving-symbol-infinity,\n.viewer-card-mobile .engraving-line.line-starts-infinity .engraving-symbol-infinity,\n.viewer-card-mobile .engraving-line.line-ends-infinity .engraving-symbol-infinity,\n.viewer-card-mobile .engraving-line.line-only-infinity .engraving-symbol-infinity {\n  width: calc(var(--symbol-scale, 1.2) * 1em) !important;\n  min-width: calc(var(--symbol-scale, 1.2) * 1em) !important;\n  height: 1em !important;\n  transform: none !important;\n  left: 0 !important;\n  top: 0 !important;\n}\n\n.viewer-card-desktop .engraving-line,\nbody.step-2-active .viewer-card-desktop .engraving-line,\n.viewer-card-mobile .engraving-line {\n  transform: none !important;\n}\n\n.engraving-symbol-svg svg,\n.engraving-dove-image {\n  width: 0.88em !important;\n  height: 0.88em !important;\n}\n

/* v112: infinity symbol removed. Five supported symbols share one layout. */
#step1 .symbols-six {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 760px) {
  #step1 .symbols-six {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v113: clearer engraving-safe flower, stronger outline heart on mobile,
   and deterministic centering in the two-line engraving editor. */
#step1 .flower-icon,
.engraving-flower-icon {
  color: #173d2c;
}

@media (max-width: 760px) {
  #step1 .symbol[data-symbol="♡"] span {
    color: #123d2a !important;
    font-family: "Arial Unicode MS", "Segoe UI Symbol", "Apple Symbols", sans-serif !important;
    font-weight: 700 !important;
    -webkit-text-stroke: 0.55px currentColor;
    text-shadow: 0 0 0 currentColor;
  }

  #step1 .engraving-editor {
    box-sizing: border-box;
    text-align: center !important;
    text-align-last: center;
  }

  #step1 .engraving-editor.is-empty {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: center !important;
  }

  #step1 .engraving-editor::placeholder {
    text-align: center;
    opacity: 1;
  }
}

/* v114: balance symbol weight across desktop/mobile and use a daisy-style flower. */
#step1 .flower-icon,
.engraving-flower-icon {
  color: #18392c;
}

/* Keep the new daisy lighter than the former geometric flower. */
#step1 .symbol .flower-icon {
  width: 35px !important;
  height: 35px !important;
}
.engraving-flower-icon {
  display: block !important;
  width: 0.86em !important;
  height: 0.86em !important;
  overflow: visible !important;
}

/* The dove source is thickened as an asset in v114; give it enough visual area too. */
#step1 .symbol .dove-icon {
  width: 39px !important;
  height: 39px !important;
}
#step1 .symbol .dove-icon img {
  filter: contrast(1.08);
}
.engraving-dove-image {
  width: 1.00em !important;
  height: 1.00em !important;
  opacity: 0.96 !important;
  filter: contrast(1.08);
}

@media (max-width: 760px) {
  /* Two symbols per row remains the mobile layout. */
  #step1 .symbols-six {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #step1 .symbol .flower-icon {
    width: 35px !important;
    height: 35px !important;
  }
  #step1 .symbol .dove-icon {
    width: 39px !important;
    height: 39px !important;
  }

  /* Make the outline heart read as strongly as the other line-based symbols. */
  #step1 .symbol[data-symbol="♡"] span {
    color: #0d2f22 !important;
    -webkit-text-stroke: 0.75px currentColor !important;
    font-weight: 700 !important;
  }

  /* Mobile editor: placeholder and actual one/two-line input share the same centered axis. */
  #step1 .engraving-editor {
    text-align: center !important;
    text-align-last: center !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  #step1 .engraving-editor::placeholder {
    text-align: center !important;
  }
  #step1 .engraving-editor.is-empty {
    line-height: 72px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #step1 .engraving-editor:not(.is-empty) {
    line-height: 1.22 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}


/* v115: Step 3 - partner-aware delivery */
.step-3-active .viewer-card-desktop { display: none; }
.step-3-active .configurator { grid-template-columns: minmax(0, 1fr); max-width: 980px; margin-inline: auto; }
.delivery-section h2 { margin: .35rem 0 .5rem; font-size: clamp(1.35rem, 2.1vw, 1.9rem); }
.delivery-intro { margin: 0 0 1.25rem; max-width: 760px; color: var(--muted, #5f655f); line-height: 1.55; }
.partner-status { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.05rem; margin: 0 0 1.2rem; border: 1px solid #dacdb9; border-radius: 16px; background: #faf7f1; }
.partner-status-icon { width: 2rem; height: 2rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 999px; background: #dfddd5; color: #6c716b; font-weight: 800; }
.partner-status.matched { border-color: #8fae95; background: #f1f7f1; }
.partner-status.matched .partner-status-icon { background: #2f6b45; color: #fff; }
.partner-status div { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.partner-status small { color: #6e756f; }
.partner-status strong { color: #173b2a; overflow-wrap: anywhere; }
.partner-badge { margin-left: auto; white-space: nowrap; border-radius: 999px; padding: .36rem .68rem; border: 1px solid #d5c6b2; color: #5b625d; background: #fff; font-size: .78rem; font-weight: 700; }
.partner-status.matched .partner-badge { border-color: #8fae95; color: #285d3d; background: #fff; }
.delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.delivery-field { display: flex; flex-direction: column; gap: .42rem; font-weight: 700; color: #173b2a; }
.delivery-field span { font-size: .9rem; }
.delivery-field input { width: 100%; min-height: 52px; border: 1px solid #d7c8b5; border-radius: 13px; padding: 0 .9rem; background: #fff; color: #17231d; font: inherit; font-weight: 500; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.delivery-field input:focus { border-color: #3c7650; box-shadow: 0 0 0 3px rgba(60,118,80,.12); }
.delivery-field-wide { grid-column: 1 / -1; }
.delivery-field-postal { max-width: 220px; }
.delivery-routing { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.15rem 0 .85rem; }
.delivery-routing > div { padding: .9rem 1rem; border: 1px solid #ded3c5; border-radius: 14px; background: #faf8f4; min-width: 0; }
.routing-label { display: block; margin-bottom: .25rem; font-size: .77rem; text-transform: uppercase; letter-spacing: .08em; color: #6d756f; font-weight: 800; }
.delivery-routing strong { display: block; overflow-wrap: anywhere; color: #173b2a; }
.email-grid { margin-bottom: 1rem; }
.token-note { margin-top: 1rem; padding: .9rem 1rem; border-radius: 14px; background: #f4f0e9; color: #56605a; line-height: 1.5; font-size: .87rem; }
.token-note code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #fff; border: 1px solid #ded4c8; border-radius: 6px; padding: .08rem .3rem; color: #214f35; }
.delivery-order-preview { margin-top: 1rem; }
.progress [data-progress].complete { background: #6f9379; color: #fff; }
@media (max-width: 760px) {
  .step-3-active .configurator { display: block; max-width: none; }
  .delivery-grid, .delivery-routing { grid-template-columns: 1fr; }
  .delivery-field-wide { grid-column: auto; }
  .delivery-field-postal { max-width: none; }
  .partner-status { align-items: flex-start; flex-wrap: wrap; }
  .partner-badge { margin-left: 2.8rem; }
  .delivery-section { padding-left: 0; padding-right: 0; }
  .delivery-field input { min-height: 50px; font-size: 16px; }
  .token-note { font-size: .82rem; }
}
\n\n/* v116: customer identification + partner test registry */\n.customer-order-block { margin: 1.2rem 0 1.35rem; padding: 1rem; border: 1px solid #ddd0bd; border-radius: 16px; background: #fffdf9; }\n.section-subhead { display: flex; justify-content: space-between; gap: 1.2rem; align-items: flex-start; margin-bottom: .9rem; }\n.section-subhead h3 { margin: .12rem 0 0; color: #173b2a; font-size: 1.08rem; }\n.section-subhead p { margin: 0; max-width: 34rem; color: #68716b; font-size: .9rem; line-height: 1.45; }\n.delivery-field span small { color: #7d817d; font-weight: 500; }\n.customer-data-note { margin: .8rem 0 0; color: #657068; font-size: .86rem; line-height: 1.45; }\n.delivery-customer-summary { display: block; margin-top: .25rem; color: #46554b; }\n.test-partner-registry { margin-top: 1rem; padding: 1rem; border: 1px dashed #8fae95; border-radius: 16px; background: #f3f8f3; }\n.partner-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n.partner-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: .84rem; }\n.partner-table th, .partner-table td { padding: .6rem .55rem; border-bottom: 1px solid #d7e2d7; text-align: left; vertical-align: middle; }\n.partner-table th { color: #285d3d; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }\n.test-partner-button { border: 1px solid #2f6b45; border-radius: 999px; background: #fff; color: #285d3d; font-weight: 700; padding: .38rem .7rem; cursor: pointer; }\n.test-partner-button:hover { background: #2f6b45; color: #fff; }\n@media (max-width: 760px) {\n  .section-subhead { flex-direction: column; gap: .35rem; }\n  .customer-order-block { padding: .85rem; }\n  .customer-grid { grid-template-columns: 1fr; }\n  .partner-table { min-width: 700px; }\n}\n
/* v117: two simplified customer flows */
.partner-order-mode[hidden], .direct-order-mode[hidden] { display: none !important; }
.compact-customer-block { max-width: 650px; }
.partner-routing-summary { display: flex; flex-direction: column; gap: .3rem; margin: .85rem 0 1rem; padding: 1rem 1.05rem; border: 1px solid #c9d9cb; border-radius: 15px; background: #f2f7f2; color: #31533d; line-height: 1.45; }
.partner-routing-summary strong { color: #173b2a; }
.partner-routing-summary span { color: #647168; font-size: .9rem; }
.direct-order-mode .customer-order-block { margin-top: 1rem; }
@media (max-width: 760px) {
  .compact-customer-block { max-width: none; }
  .partner-routing-summary { padding: .9rem; }
}
/* v118: simplified direct delivery + review step */
body.step-4-active .viewer-card-desktop { display: block; }
.review-section { display: grid; gap: 18px; }
.review-section h2 { margin: 0; }
.review-intro { margin: -8px 0 2px; color: var(--muted, #66736b); line-height: 1.5; }
.review-card { border: 1px solid #dfd1bf; border-radius: 20px; padding: 18px 20px; background: rgba(255,255,255,.48); }
.review-card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:10px; border-bottom:1px solid #e8ded1; }
.review-card-head h3 { margin:0; font-size:18px; }
.review-edit { border:0; background:transparent; color:#2f6848; font:inherit; font-weight:700; cursor:pointer; padding:6px 0; }
.review-row { display:grid; grid-template-columns:minmax(130px,.75fr) 1.6fr; gap:18px; padding:12px 0; border-bottom:1px solid #eee6dc; align-items:start; }
.review-row:last-child { border-bottom:0; padding-bottom:0; }
.review-row span { color:#6a746d; }
.review-row strong { text-align:right; overflow-wrap:anywhere; white-space:pre-line; }
.review-routing-note { border-radius:18px; padding:16px 18px; background:#eef4ef; display:grid; gap:4px; color:#254c37; }
.review-routing-note[hidden] { display:none; }
.review-total { margin-top:18px; }
.submit-order { background:#2f6b49; }
.direct-customer-block { padding-top:0; }
body:not(.partner-order) #partnerStatus,
body:not(.partner-order) #deliveryIntro { display:none; }
body:not(.partner-order) #deliveryHeading { margin-bottom:18px; }
@media (max-width: 700px) {
  .review-card { padding:16px; border-radius:16px; }
  .review-row { grid-template-columns:1fr; gap:4px; }
  .review-row strong { text-align:left; }
  .review-card-head h3 { font-size:17px; }
}


/* v119: three-step flow – design and quantity share step 1 */
.progress { grid-template-columns: auto 1fr auto 1fr auto; }
.merged-quantity-section { margin-top: 18px; }
.merged-quantity-section h2 { margin: 4px 0 8px; font-size: clamp(20px, 2vw, 28px); }
.merged-quantity-section .quantity-intro { margin-top: 0; }
#step1 > .order-preview { margin-top: 14px; }
#step1 > #continueToDetails { margin-top: 16px; width: 100%; }
@media (max-width: 760px) {
  .merged-quantity-section { margin-top: 14px; }
  .merged-quantity-section h2 { font-size: 20px; }
  #step1 > .order-preview { margin-top: 10px; }
}

/* v120: compact three-step desktop layout, with preview kept beside step 2 */
@media (min-width: 1101px) {
  /* Step 2 should use the same two-column working layout as the design step. */
  body.step-3-active .configurator {
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    gap: 18px;
    max-width: none;
    margin-inline: 0;
    align-items: stretch;
  }
  body.step-3-active .viewer-card-desktop {
    display: grid !important;
    grid-template-rows: 54px minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
  }
  body.step-3-active .controls-card {
    overflow: hidden;
  }
  body.step-3-active .delivery-section {
    margin-top: 8px;
    padding-top: 8px;
  }
  body.step-3-active .delivery-section h2 {
    margin: 2px 0 4px;
    font-size: 24px;
    line-height: 1.08;
  }
  body.step-3-active .delivery-intro {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.35;
  }
  body.step-3-active .partner-status {
    min-height: 56px;
    margin: 0 0 9px;
    padding: 8px 10px;
    border-radius: 13px;
  }
  body.step-3-active .partner-status-icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
  body.step-3-active .partner-status small { font-size: 11px; }
  body.step-3-active .partner-status strong { font-size: 14px; }
  body.step-3-active .partner-badge { padding: 4px 8px; font-size: 11px; }
  body.step-3-active .customer-order-block {
    margin: 8px 0;
    padding: 9px 10px;
    border-radius: 13px;
  }
  body.step-3-active .section-subhead {
    margin-bottom: 6px;
  }
  body.step-3-active .section-subhead h3 {
    font-size: 15px;
  }
  body.step-3-active .delivery-field {
    gap: 4px;
  }
  body.step-3-active .delivery-field span { font-size: 12px; }
  body.step-3-active .delivery-field input {
    min-height: 42px;
    height: 42px;
    border-radius: 11px;
    padding-inline: 11px;
    font-size: 14px;
  }
  body.step-3-active .partner-routing-summary {
    margin: 8px 0;
    padding: 9px 10px;
    gap: 2px;
    border-radius: 13px;
    font-size: 12px;
    line-height: 1.3;
  }
  body.step-3-active .partner-routing-summary span { font-size: 11px; }
  body.step-3-active .delivery-grid {
    gap: 8px 10px;
  }
  body.step-3-active .delivery-order-preview {
    margin-top: 8px;
    padding: 10px 12px;
  }
  body.step-3-active .delivery-order-preview .order-total-row {
    margin: 3px 0 1px;
  }
  body.step-3-active .delivery-order-preview > span,
  body.step-3-active .delivery-order-preview small { font-size: 11px; }
  body.step-3-active .delivery-order-preview strong { font-size: 18px; }
  body.step-3-active .step-actions {
    margin-top: 8px;
    gap: 10px;
  }
  body.step-3-active .step-actions .continue,
  body.step-3-active .step-actions .back-button {
    min-height: 40px;
    height: 40px;
    margin-top: 0;
    font-size: 13px;
  }

  /* The standalone design summary repeats what is already visible in the
     preview and order summary. Removing it on desktop buys useful vertical
     room without shrinking type. */
  #step1 > .summary { display: none !important; }

  /* Compact the merged quantity area rather than reducing readable type. */
  #step1 .merged-quantity-section {
    margin-top: 8px;
    padding-top: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title picker"
      "intro picker";
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
  }
  #step1 .merged-quantity-section h2 {
    grid-area: title;
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
  }
  #step1 .merged-quantity-section .field-label { display: none; }
  #step1 .merged-quantity-section .quantity-intro {
    grid-area: intro;
    margin: 0;
    font-size: 10.5px;
    line-height: 1.25;
  }
  #step1 .merged-quantity-section .quantity-picker {
    grid-area: picker;
    margin: 0;
    width: 160px;
    height: 38px;
  }
  #step1 .merged-quantity-section .quantity-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }
  #step1 .merged-quantity-section #quantityInput {
    height: 38px;
    min-height: 38px;
    font-size: 16px;
  }
  #step1 > .order-preview {
    margin-top: 8px;
    padding: 8px 11px;
  }
  #step1 > .order-preview .order-total-row { margin: 2px 0 1px; }
  #step1 > .order-preview > span,
  #step1 > .order-preview small { font-size: 10.5px; }
  #step1 > .order-preview strong { font-size: 17px; }
  #step1 > #continueToDetails {
    margin-top: 8px;
    height: 38px;
    min-height: 38px;
  }
}

/* Typical 13-inch laptop heights: tighten spacing, not legibility. */
@media (min-width: 1101px) and (max-height: 850px) {
  .topbar-inner { min-height: 52px; }
  .page {
    height: calc(100vh - 53px);
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .controls-card { padding: 9px 12px; }
  .progress { margin-bottom: 5px; }
  .progress span { width: 23px; height: 23px; font-size: 11px; }
  fieldset.control-section,
  .control-section { margin-top: 6px; padding-top: 6px; }
  .control-section-first { margin-top: 0; }
  .field-help { margin: 3px 0 0; font-size: 10.5px; }
  .editor-wrap,
  .engraving-editor { height: 50px; min-height: 50px; max-height: 50px; }
  .font-option { height: 42px; min-height: 42px; }
  .symbol { height: 38px; min-height: 38px; }
  .symbol-size-option { height: 28px; min-height: 28px; }
  .viewer-card-desktop { grid-template-rows: 50px minmax(0, 1fr) auto; }
  .viewer-head { height: 50px; }
  .preview-note { font-size: 9px; line-height: 1.2; }
}

/* Keep the two columns only where there is enough horizontal room. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.step-3-active .configurator {
    grid-template-columns: minmax(0, 1fr);
    max-width: 820px;
    margin-inline: auto;
  }
  body.step-3-active .viewer-card-desktop { display: none !important; }
}
/* end v120 */

/* v121: outlined five-point star, cross, and robust quantity control. */
#step1 .star-icon svg,
#step1 .cross-icon svg,
.engraving-star-icon,
.engraving-cross-icon {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
#step1 .star-icon,
#step1 .cross-icon {
  width: 38px !important;
  height: 38px !important;
}
.engraving-star-icon,
.engraving-cross-icon { width: 1em; height: 1em; }

@media (min-width: 1101px) {
  #step1 .merged-quantity-section .quantity-picker {
    width: 168px !important;
    min-width: 168px !important;
    display: grid !important;
    grid-template-columns: 42px 84px 42px !important;
    overflow: hidden;
  }
  #step1 .merged-quantity-section .quantity-button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
  }
  #step1 .merged-quantity-section #quantityInput {
    width: 84px !important;
    min-width: 0 !important;
    max-width: 84px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}
@media (max-width: 760px) {
  #step1 .star-icon,
  #step1 .cross-icon { width: 36px !important; height: 36px !important; }
}
/* end v121 */

/* v122: quantity selector — keep all three controls fully inside the card on laptop widths. */
@media (min-width: 761px) {
  #step1 .merged-quantity-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 176px !important;
    grid-template-areas:
      "title picker"
      "intro picker" !important;
    column-gap: 18px !important;
    row-gap: 3px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  #step1 .merged-quantity-section h2 {
    grid-area: title !important;
    min-width: 0 !important;
  }
  #step1 .merged-quantity-section .field-label { display: none !important; }
  #step1 .merged-quantity-section .quantity-intro {
    grid-area: intro !important;
    min-width: 0 !important;
  }
  #step1 .merged-quantity-section .quantity-picker {
    grid-area: picker !important;
    justify-self: end !important;
    display: grid !important;
    grid-template-columns: 44px 72px 44px !important;
    gap: 8px !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  #step1 .merged-quantity-section .quantity-button {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  #step1 .merged-quantity-section #quantityInput {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

@media (min-width: 761px) and (max-width: 950px) {
  #step1 .merged-quantity-section {
    grid-template-columns: minmax(0, 1fr) 160px !important;
    column-gap: 10px !important;
  }
  #step1 .merged-quantity-section .quantity-picker {
    grid-template-columns: 40px 64px 40px !important;
    gap: 8px !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
  }
  #step1 .merged-quantity-section .quantity-button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
  #step1 .merged-quantity-section #quantityInput {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }
}
/* end v122 */

/* v123: center the selected quantity optically inside the white number field. */
#step1 .merged-quantity-section #quantityInput {
  -webkit-appearance: none !important;
  appearance: none !important;
  -moz-appearance: textfield !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
  text-align-last: center !important;
  line-height: 44px !important;
  font-variant-numeric: tabular-nums;
}
#step1 .merged-quantity-section #quantityInput::-webkit-outer-spin-button,
#step1 .merged-quantity-section #quantityInput::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/* end v123 */

/* v124: mobile quantity/order area — stack content cleanly and keep it readable. */
@media (max-width: 760px) {
  #step1 .merged-quantity-section {
    display: block !important;
    margin-top: 12px !important;
    padding-top: 14px !important;
  }

  #step1 .merged-quantity-section h2 {
    margin: 0 0 6px !important;
    font-size: 25px !important;
    line-height: 1.08 !important;
    max-width: none !important;
  }

  #step1 .merged-quantity-section .field-label {
    display: none !important;
  }

  #step1 .merged-quantity-section .quantity-intro {
    margin: 0 0 14px !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
    max-width: none !important;
  }

  #step1 .merged-quantity-section .quantity-picker {
    display: grid !important;
    grid-template-columns: 58px 82px 58px !important;
    justify-content: start !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  #step1 .merged-quantity-section .quantity-button {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    font-size: 31px !important;
    line-height: 1 !important;
  }

  #step1 .merged-quantity-section #quantityInput {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    font-size: 28px !important;
    line-height: 58px !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  #step1 > .order-preview {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 14px 0 0 !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
  }

  #step1 > .order-preview > span {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  #step1 > .order-preview .order-total-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 !important;
  }

  #step1 > .order-preview .quantity-line,
  #step1 > .order-preview #totalPriceSummary {
    white-space: nowrap !important;
  }

  #step1 > .order-preview .quantity-line strong,
  #step1 > .order-preview #totalPriceSummary {
    font-size: 25px !important;
    line-height: 1.1 !important;
  }

  #step1 > .order-preview .quantity-unit {
    font-size: 17px !important;
  }

  #step1 > .order-preview .order-meta-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 5px !important;
  }

  #step1 > .order-preview .unit-price,
  #step1 > .order-preview .vat-note,
  #step1 > .order-preview #designSummary {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #step1 > .order-preview #designSummary {
    display: block !important;
    margin-top: 7px !important;
  }

  #step1 > #continueToDetails {
    margin-top: 16px !important;
  }
}
/* end v124 */

/* v125: mobile quantity block rebuilt from the base layout.
   These are the default rules, so phones do not depend on a max-width media query. */
#step1 .merged-quantity-section {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#step1 .merged-quantity-section h2 {
  max-width: none !important;
}
#step1 .merged-quantity-section .field-label {
  display: none !important;
}
#step1 .merged-quantity-section .quantity-intro {
  max-width: none !important;
}
#step1 .merged-quantity-section .quantity-picker {
  display: grid !important;
  grid-template-columns: 58px 82px 58px !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 12px !important;
  width: 222px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 14px 0 0 !important;
}
#step1 .merged-quantity-section .quantity-button {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
}
#step1 .merged-quantity-section #quantityInput {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  line-height: 58px !important;
  text-align: center !important;
  text-align-last: center !important;
}
#step1 > .order-preview {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 14px 0 0 !important;
  padding: 14px 16px !important;
}
#step1 > .order-preview .order-total-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
#step1 > .order-preview .quantity-line,
#step1 > .order-preview .price-group,
#step1 > .order-preview #totalPriceSummary {
  white-space: nowrap !important;
}
#step1 > .order-preview .order-meta-row {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Restore the compact laptop layout only when the CSS viewport is genuinely wider. */
@media (min-width: 761px) {
  #step1 .merged-quantity-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 176px !important;
    grid-template-areas: "title picker" "intro picker" !important;
    column-gap: 18px !important;
    row-gap: 3px !important;
    align-items: center !important;
  }
  #step1 .merged-quantity-section h2 { grid-area: title !important; }
  #step1 .merged-quantity-section .quantity-intro { grid-area: intro !important; }
  #step1 .merged-quantity-section .quantity-picker {
    grid-area: picker !important;
    justify-self: end !important;
    grid-template-columns: 44px 72px 44px !important;
    gap: 8px !important;
    width: 176px !important;
    margin: 0 !important;
  }
  #step1 .merged-quantity-section .quantity-button {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  #step1 .merged-quantity-section #quantityInput {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
  }
}
/* end v125 */

/* v126: actual iPhone fix for the quantity/order area.
   Step 1 intentionally becomes a two-column grid on mobile for font + symbol choices.
   The quantity section and order summary are later siblings and therefore inherited
   one column each. Force both to span the full mobile grid width. */
@media (max-width: 760px) {
  #step1 > .merged-quantity-section,
  #step1 > .order-preview,
  #step1 > #continueToDetails {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #step1 > .merged-quantity-section {
    display: block !important;
    margin-top: 10px !important;
  }

  #step1 > .merged-quantity-section h2 {
    margin: 0 0 6px !important;
    max-width: none !important;
  }

  #step1 > .merged-quantity-section .quantity-intro {
    margin: 0 0 14px !important;
    max-width: none !important;
  }

  #step1 > .merged-quantity-section .quantity-picker {
    display: grid !important;
    grid-template-columns: 64px 92px 64px !important;
    gap: 12px !important;
    width: 244px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  #step1 > .merged-quantity-section .quantity-button {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
  }

  #step1 > .merged-quantity-section #quantityInput {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 64px !important;
    min-height: 64px !important;
    line-height: 64px !important;
    padding: 0 !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  #step1 > .order-preview {
    margin: 12px 0 0 !important;
    padding: 14px 16px !important;
  }

  #step1 > .order-preview .order-total-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
  }

  #step1 > .order-preview .quantity-line,
  #step1 > .order-preview .price-group,
  #step1 > .order-preview #totalPriceSummary {
    white-space: nowrap !important;
  }

  #step1 > .order-preview .order-meta-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }
}
/* end v126 */

/* v127: compact step 3 (review) on laptop without sacrificing readability. */
@media (min-width: 1101px) {
  body.step-4-active .configurator {
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    gap: 18px;
    max-width: none;
    margin-inline: 0;
    align-items: stretch;
  }
  body.step-4-active .viewer-card-desktop {
    display: grid !important;
    grid-template-rows: 50px minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
  }
  body.step-4-active .controls-card { overflow: hidden; }
  body.step-4-active .review-section { gap: 8px; margin-top: 5px; padding-top: 5px; }
  body.step-4-active .review-section h2 { font-size: 22px; line-height: 1.1; }
  body.step-4-active .review-intro { margin: -3px 0 1px; font-size: 12px; line-height: 1.3; }
  body.step-4-active .review-card { padding: 9px 12px; border-radius: 13px; }
  body.step-4-active .review-card-head { gap: 10px; padding-bottom: 5px; }
  body.step-4-active .review-card-head h3 { font-size: 14px; }
  body.step-4-active .review-edit { padding: 2px 0; font-size: 12px; }
  body.step-4-active .review-row {
    grid-template-columns: minmax(110px,.72fr) 1.6fr;
    gap: 12px;
    padding: 5px 0;
    font-size: 12px;
    line-height: 1.25;
  }
  body.step-4-active .review-routing-note { padding: 8px 11px; border-radius: 12px; gap: 1px; font-size: 11px; line-height: 1.3; }
  body.step-4-active .review-total { margin-top: 8px; padding: 9px 12px; }
  body.step-4-active .review-total .order-total-row { margin: 2px 0 0; }
  body.step-4-active .review-total > span,
  body.step-4-active .review-total small { font-size: 10.5px; }
  body.step-4-active .review-total strong { font-size: 17px; }
  body.step-4-active .step-actions { margin-top: 8px; gap: 10px; }
  body.step-4-active .step-actions .continue,
  body.step-4-active .step-actions .back-button { min-height: 40px; height: 40px; margin-top: 0; font-size: 13px; }
}
@media (min-width: 1101px) and (max-height: 850px) {
  body.step-4-active .review-section { gap: 6px; }
  body.step-4-active .review-card { padding: 7px 11px; }
  body.step-4-active .review-row { padding: 4px 0; }
  body.step-4-active .review-total { margin-top: 6px; padding: 7px 11px; }
  body.step-4-active .step-actions { margin-top: 6px; }
}

/* v128: laptop-first compact layout for all three steps + readable preview disclaimer. */
.preview-note {
  font-size: 13px !important;
  line-height: 1.42 !important;
}

@media (max-width: 760px) {
  .preview-note,
  .viewer-card-mobile .preview-note {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

/* Typical 13-inch laptop viewport. Keep all three steps visible without vertical scrolling. */
@media (min-width: 1101px) and (max-height: 900px) {
  .topbar-inner { min-height: 48px !important; }
  .brand { font-size: 29px !important; }
  .prototype { font-size: 11px !important; }
  .page { padding-top: 8px !important; padding-bottom: 8px !important; }
  .configurator { gap: 14px !important; align-items: start !important; }
  .controls-card { padding: 10px 12px !important; }
  .progress { margin: 0 0 7px !important; }
  .progress span { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  .control-section { padding-top: 5px !important; padding-bottom: 5px !important; margin-top: 0 !important; }
  .control-section-first { padding-top: 2px !important; }
  .step-label { font-size: 10.5px !important; letter-spacing: .14em !important; }
  .field-help { margin: 3px 0 0 !important; font-size: 11.5px !important; line-height: 1.25 !important; }

  /* Step 1 */
  #step1 .editor-wrap { margin-top: 5px !important; }
  #step1 .engraving-editor { min-height: 56px !important; height: 56px !important; padding-top: 8px !important; padding-bottom: 8px !important; font-size: 17px !important; }
  #step1 fieldset.control-section { margin-top: 4px !important; }
  #step1 fieldset legend { margin-bottom: 4px !important; font-size: 12.5px !important; }
  #step1 .font-options { gap: 7px !important; }
  #step1 .font-option { min-height: 47px !important; padding: 6px 8px !important; border-radius: 13px !important; }
  #step1 .font-sample { width: 34px !important; height: 34px !important; font-size: 21px !important; }
  #step1 .font-option strong { font-size: 12.5px !important; }
  #step1 .font-option small { font-size: 10px !important; }
  #step1 .symbols { gap: 7px !important; }
  #step1 .symbol { min-height: 46px !important; height: 46px !important; border-radius: 13px !important; }
  #step1 .symbol > span:not(.symbol-icon) { font-size: 27px !important; }
  #step1 .symbol-icon { width: 31px !important; height: 31px !important; }
  #step1 .symbol-size-options { gap: 7px !important; }
  #step1 .symbol-size-option { min-height: 34px !important; height: 34px !important; font-size: 12px !important; }
  #step1 .summary { margin-top: 4px !important; padding: 7px 9px !important; min-height: 44px !important; }
  #step1 .summary span { font-size: 10px !important; }
  #step1 .summary strong { font-size: 12px !important; }
  #step1 .merged-quantity-section { margin-top: 5px !important; padding-top: 5px !important; }
  #step1 .merged-quantity-section h2 { font-size: 19px !important; margin: 0 0 2px !important; line-height: 1.08 !important; }
  #step1 .merged-quantity-section .field-label { display: none !important; }
  #step1 .merged-quantity-section .quantity-intro { font-size: 11px !important; line-height: 1.25 !important; margin: 0 !important; }
  #step1 .merged-quantity-section .quantity-picker { grid-template-columns: 40px 68px 40px !important; width: 164px !important; gap: 8px !important; }
  #step1 .merged-quantity-section .quantity-button,
  #step1 .merged-quantity-section #quantityInput { height: 38px !important; min-height: 38px !important; }
  #step1 .merged-quantity-section .quantity-button { width: 40px !important; min-width: 40px !important; max-width: 40px !important; font-size: 20px !important; }
  #step1 .merged-quantity-section #quantityInput { width: 68px !important; min-width: 68px !important; max-width: 68px !important; line-height: 38px !important; font-size: 17px !important; }
  #step1 > .order-preview { margin-top: 5px !important; padding: 7px 10px !important; border-radius: 14px !important; }
  #step1 > .order-preview > span:first-child { font-size: 10.5px !important; }
  #step1 > .order-preview .order-total-row { margin: 2px 0 0 !important; }
  #step1 > .order-preview .quantity-line,
  #step1 > .order-preview #totalPriceSummary { font-size: 15px !important; }
  #step1 > .order-preview .order-meta-row { margin: 1px 0 2px !important; }
  #step1 > .order-preview .unit-price,
  #step1 > .order-preview .vat-note,
  #step1 > .order-preview #designSummary { font-size: 10px !important; line-height: 1.25 !important; }
  #step1 > #continueToDetails { min-height: 39px !important; height: 39px !important; margin-top: 6px !important; font-size: 12.5px !important; }

  /* Step 2 / details */
  body.step-3-active .delivery-section { padding-top: 3px !important; }
  body.step-3-active #deliveryHeading { font-size: 21px !important; line-height: 1.08 !important; margin: 4px 0 3px !important; }
  body.step-3-active .delivery-intro { font-size: 11.5px !important; line-height: 1.28 !important; margin: 0 0 6px !important; }
  body.step-3-active .partner-status { padding: 7px 10px !important; min-height: 48px !important; border-radius: 13px !important; }
  body.step-3-active .partner-status-icon { width: 29px !important; height: 29px !important; font-size: 17px !important; }
  body.step-3-active .partner-status small { font-size: 10px !important; }
  body.step-3-active .partner-status strong { font-size: 12px !important; }
  body.step-3-active .partner-badge { font-size: 10px !important; padding: 5px 8px !important; }
  body.step-3-active .customer-order-block { margin-top: 6px !important; padding-top: 4px !important; }
  body.step-3-active .section-subhead { margin-bottom: 4px !important; }
  body.step-3-active .section-subhead h3 { font-size: 15px !important; margin-top: 2px !important; }
  body.step-3-active .delivery-field > span { font-size: 11px !important; margin-bottom: 3px !important; }
  body.step-3-active .delivery-field input { min-height: 38px !important; height: 38px !important; padding: 0 11px !important; font-size: 12.5px !important; border-radius: 12px !important; }
  body.step-3-active .delivery-grid { gap: 7px 9px !important; }
  body.step-3-active .partner-routing-summary { margin-top: 7px !important; padding: 8px 10px !important; border-radius: 12px !important; }
  body.step-3-active .partner-routing-summary strong { font-size: 11.5px !important; }
  body.step-3-active .partner-routing-summary span { font-size: 10.5px !important; }
  body.step-3-active .delivery-order-preview { margin-top: 7px !important; padding: 8px 10px !important; }
  body.step-3-active .delivery-order-preview > span { font-size: 10.5px !important; }
  body.step-3-active .delivery-order-preview .order-total-row { margin: 2px 0 !important; }
  body.step-3-active .delivery-order-preview .quantity-line,
  body.step-3-active #deliveryTotalSummary { font-size: 15px !important; }
  body.step-3-active .delivery-order-preview small { font-size: 10px !important; line-height: 1.2 !important; }
  body.step-3-active .step-actions { margin-top: 6px !important; gap: 8px !important; }
  body.step-3-active .step-actions .back-button,
  body.step-3-active .step-actions .continue { min-height: 39px !important; height: 39px !important; font-size: 12px !important; }
  body.step-3-active .token-note { display: none !important; }

  /* Step 3 / review */
  body.step-4-active .review-section { gap: 5px !important; margin-top: 2px !important; padding-top: 2px !important; }
  body.step-4-active .review-section h2 { font-size: 20px !important; margin: 3px 0 1px !important; }
  body.step-4-active .review-intro { font-size: 11.5px !important; line-height: 1.25 !important; margin: 0 0 2px !important; }
  body.step-4-active .review-card { padding: 7px 10px !important; }
  body.step-4-active .review-card-head { padding-bottom: 3px !important; }
  body.step-4-active .review-card-head h3 { font-size: 13px !important; }
  body.step-4-active .review-row { padding: 3px 0 !important; font-size: 11.5px !important; }
  body.step-4-active .review-routing-note { padding: 6px 9px !important; font-size: 10.5px !important; }
  body.step-4-active .review-total { margin-top: 5px !important; padding: 7px 10px !important; }
  body.step-4-active .step-actions { margin-top: 5px !important; }

  /* Preview: slightly smaller image, larger explanatory text. */
  .viewer-card-desktop .viewer-head { padding: 9px 12px 7px !important; }
  .viewer-card-desktop .viewer-head strong { font-size: 17px !important; }
  .viewer-card-desktop .stone-stage { padding: 4px 8px 2px !important; }
  .viewer-card-desktop .stone-figure { width: min(410px, 72%) !important; }
  .viewer-card-desktop .preview-note {
    padding: 7px 11px 9px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

@media (min-width: 1101px) and (max-height: 760px) {
  .topbar-inner { min-height: 42px !important; }
  .page { padding-top: 5px !important; padding-bottom: 5px !important; }
  .controls-card { padding-top: 7px !important; padding-bottom: 7px !important; }
  #step1 .font-option { min-height: 43px !important; }
  #step1 .symbol { height: 42px !important; min-height: 42px !important; }
  #step1 .summary { min-height: 40px !important; }
  .viewer-card-desktop .stone-figure { width: min(380px, 68%) !important; }
}
/* end v128 */
/* v130: VAT placement fixes. Keep VAT directly below the primary total only. */
.delivery-order-preview .order-total-row,
.review-total .order-total-row {
  align-items: flex-start !important;
}
.delivery-order-preview .price-group,
.review-total .price-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  min-width: max-content !important;
  overflow: visible !important;
}
.delivery-order-preview .price-group .vat-note,
.review-total .price-group .vat-note {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  text-align: right !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
}
.delivery-order-preview {
  overflow: visible !important;
}
@media (min-width: 1101px) and (max-height: 900px) {
  body.step-3-active .delivery-order-preview {
    padding-bottom: 10px !important;
  }
  body.step-3-active .delivery-order-preview .price-group .vat-note,
  body.step-4-active .review-total .price-group .vat-note {
    font-size: 10.5px !important;
    margin-top: 2px !important;
  }
}
/* end v130 */


/* v131: explicit VAT placement on steps 2 and 3. */
.delivery-order-preview .order-total-row,
.review-total .order-total-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  column-gap: 14px !important;
  overflow: visible !important;
}
.delivery-order-preview .delivery-price-stack,
.review-total .price-group {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: end !important;
  align-content: start !important;
  row-gap: 2px !important;
  min-width: max-content !important;
  overflow: visible !important;
}
.delivery-order-preview .delivery-vat-note,
.review-total .price-group .vat-note {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  text-align: right !important;
  white-space: nowrap !important;
}
/* VAT belongs only to the final total on step 3, not to the intermediate Price row. */
.review-price-stack .vat-note { display: none !important; }
@media (min-width: 1101px) and (max-height: 900px) {
  body.step-3-active .delivery-order-preview .delivery-vat-note,
  body.step-4-active .review-total .price-group .vat-note {
    font-size: 10.5px !important;
  }
}
/* end v131 */


/* v132: consistent price metadata and lean order summaries on steps 1–2 */
#step2 .price-meta-row,
#step3 .price-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 0;
}
#step2 .price-meta-row .unit-price,
#step2 .price-meta-row .vat-note,
#step3 .price-meta-row .unit-price,
#step3 .price-meta-row .vat-note {
  display: inline;
  margin: 0;
  line-height: 1.25;
}
#step2 #designSummary,
#step3 #deliveryDesignSummary { display: none !important; }
#step3 .delivery-customer-summary { margin-top: 5px; }
@media (max-width:760px) {
  #step2 .price-meta-row, #step3 .price-meta-row { font-size: 13px; }
}


/* v134: engraving recap mirrors the stone's line breaks exactly. */
#summaryText,
#reviewText {
  white-space: pre-line !important;
}
#summaryText {
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center !important;
}

/* v149: final polish before production regression */
/* Partner is already confirmed by the green check. Hide the redundant badge. */
.partner-status.matched .partner-badge{display:none!important}

/* Quantity text should use the same typography as unit price and freight. */
#quantitySummary,
#deliveryQuantitySummary,
#reviewQuantity{
  font-size:inherit!important;
  font-weight:400!important;
  color:inherit!important;
}

/* Center Cancel between Back and Continue on steps 2 and 3. */
@media(min-width:761px){
  .step-actions-with-cancel{
    display:grid!important;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:12px;
  }
  .step-actions-with-cancel .step-actions-left{display:contents}
  .step-actions-with-cancel .back-button{justify-self:start}
  .step-actions-with-cancel .cancel-order-button{justify-self:center}
  .step-actions-with-cancel > .continue{justify-self:end}
}

/* Custom cancel confirmation instead of the browser confirm dialog. */
.order-cancel-modal[hidden]{display:none}
.order-cancel-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px}
.order-cancel-backdrop{position:absolute;inset:0;background:rgba(20,35,29,.48);backdrop-filter:blur(2px)}
.order-cancel-dialog{
  position:relative;z-index:1;width:min(470px,100%);box-sizing:border-box;
  background:#fffdf9;border:1px solid #ddcfbc;border-radius:22px;padding:30px;
  box-shadow:0 24px 70px rgba(23,63,50,.20);text-align:center;
}
.order-cancel-close{
  position:absolute;top:12px;right:14px;border:0;background:transparent;color:#68756c;
  font-size:28px;line-height:1;cursor:pointer;padding:4px 8px
}
.order-cancel-icon{
  width:48px;height:48px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:#fff2eb;color:#8a4d3a;border:1px solid #d7a28f;font-size:26px;font-weight:700
}
.order-cancel-dialog h2{margin:0 0 10px;color:#173f32;font-size:28px}
.order-cancel-dialog p{margin:0 auto;color:#657068;line-height:1.5;max-width:360px}
.order-cancel-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.order-cancel-actions .back-button,.order-cancel-actions .cancel-order-button{min-height:44px}
body.cancel-modal-open{overflow:hidden}

/* v150: keep the step-2 stone preview beside the form on normal desktop/laptop widths.
   Previous breakpoint forced the preview below the form already at 1100px. */
@media (min-width: 850px) and (max-width: 1100px) {
  body.step-3-active .configurator {
    display: grid !important;
    grid-template-columns: minmax(0, 570px) minmax(260px, 1fr) !important;
    gap: 16px !important;
    max-width: none !important;
    margin-inline: 0 !important;
    align-items: start !important;
  }

  body.step-3-active .viewer-card-desktop {
    display: grid !important;
    grid-template-rows: 50px minmax(0, 1fr) auto !important;
    min-width: 0 !important;
  }

  body.step-3-active .mobile-preview-wrap,
  body.step-3-active .viewer-card-mobile,
  body.step-3-active .step2-inline-preview {
    display: none !important;
  }
}

/* v151: restore the pre-regression two-column flow on desktop/laptop for ALL 3 steps.
   The old <=1100px rule stacked the stone preview below the form. */
@media (min-width: 761px) and (max-width: 1100px) {
  .configurator,
  body.step-3-active .configurator,
  body.step-4-active .configurator {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    gap: 16px !important;
    max-width: none !important;
    margin-inline: 0 !important;
    align-items: start !important;
  }

  .viewer-card-desktop,
  body.step-3-active .viewer-card-desktop,
  body.step-4-active .viewer-card-desktop {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    min-width: 0 !important;
  }

  .viewer-card-mobile,
  .mobile-preview-wrap,
  .step2-inline-preview {
    display: none !important;
  }

  /* Three action positions must be equally spaced:
     Back | Cancel | Continue. */
  .step-actions-with-cancel {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    column-gap: 12px !important;
  }
  .step-actions-with-cancel .step-actions-left {
    display: contents !important;
  }
  .step-actions-with-cancel .back-button {
    grid-column: 1 !important;
    justify-self: start !important;
  }
  .step-actions-with-cancel .cancel-order-button {
    grid-column: 2 !important;
    justify-self: center !important;
  }
  .step-actions-with-cancel > .continue {
    grid-column: 3 !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Keep cancel visually centered whenever three action buttons are present,
   also on larger desktop widths. */
@media (min-width: 1101px) {
  .step-actions-with-cancel {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    column-gap: 12px !important;
  }
  .step-actions-with-cancel .step-actions-left {
    display: contents !important;
  }
  .step-actions-with-cancel .back-button {
    grid-column: 1 !important;
    justify-self: start !important;
  }
  .step-actions-with-cancel .cancel-order-button {
    grid-column: 2 !important;
    justify-self: center !important;
  }
  .step-actions-with-cancel > .continue {
    grid-column: 3 !important;
    justify-self: end !important;
    width: auto !important;
  }
}

/* v156: compact summaries and deterministic action-button layout. */
.price-summary-card{
  padding:8px 12px!important;
}
.price-summary-label{
  margin-bottom:2px!important;
  line-height:1.2!important;
}
.price-summary-row{
  min-height:0!important;
  padding:5px 0!important;
  line-height:1.25!important;
  gap:14px!important;
}
.price-summary-total{
  padding-top:6px!important;
}
.review-price-summary{
  padding:0!important;
}
.review-price-summary .price-summary-row{
  padding:4px 0!important;
}
#step1 > .order-preview,
#step3 > .delivery-order-preview{
  margin-top:8px!important;
}
.delivery-customer-summary{
  margin-top:3px!important;
}

@media (min-width:761px){
  /* One stable geometry on all three steps:
     empty/back | cancel exactly centered | continue/send. */
  #step1 .step-actions,
  .step-actions-with-cancel{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 188px minmax(0,1fr)!important;
    column-gap:10px!important;
    align-items:center!important;
    position:static!important;
  }
  .step-actions-with-cancel .step-actions-left{
    display:contents!important;
  }
  #step1 .step-actions .cancel-order-button,
  .step-actions-with-cancel .cancel-order-button{
    grid-column:2!important;
    justify-self:center!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:188px!important;
    max-width:188px!important;
    min-width:0!important;
    min-height:40px!important;
    height:40px!important;
    padding:0 12px!important;
    font-size:13px!important;
    line-height:1!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
  .step-actions-with-cancel .back-button{
    grid-column:1!important;
    justify-self:start!important;
    min-height:40px!important;
    height:40px!important;
    padding:0 14px!important;
    font-size:13px!important;
  }
  #step1 .step-actions > .continue,
  .step-actions-with-cancel > .continue{
    grid-column:3!important;
    justify-self:end!important;
    position:static!important;
    transform:none!important;
    width:180px!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    height:40px!important;
    padding:0 12px!important;
    font-size:12.5px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
}

/* v157: compact price rows and correct step-1 action balance. */
/* Historical .order-preview strong rules added block display, large font and margins.
   Neutralise those inside the current price-summary component so the rows size to content. */
.price-summary-card strong{
  display:inline!important;
  margin:0!important;
  font-size:inherit!important;
  line-height:1.15!important;
}
.price-summary-card{
  padding:7px 14px!important;
}
.price-summary-card .price-summary-label{
  display:block!important;
  margin:0 0 3px!important;
  line-height:1.15!important;
}
.price-summary-card .price-summary-row{
  min-height:0!important;
  padding:7px 0!important;
  line-height:1.15!important;
  align-items:center!important;
}
.price-summary-card .price-summary-desc,
.price-summary-card .price-summary-value{
  line-height:1.15!important;
}
/* Only the final total is bold. */
.price-summary-card .price-summary-row:not(.price-summary-total) .price-summary-value{
  font-weight:400!important;
}
.price-summary-card .price-summary-total,
.price-summary-card .price-summary-total .price-summary-value{
  font-weight:700!important;
}
/* Keep a clear visual gap below the quantity controls. */
#step1 > .order-preview{
  margin-top:10px!important;
}

@media (min-width:761px){
  /* Step 1 has only two actions: equal-size Cancel left, Continue right. */
  #step1 .step-actions{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:18px!important;
  }
  #step1 .step-actions .cancel-order-button,
  #step1 .step-actions > .continue{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:212px!important;
    min-width:212px!important;
    max-width:212px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 16px!important;
    box-sizing:border-box!important;
    justify-content:center!important;
    white-space:nowrap!important;
  }
}

/* v158: match the approved step-1 reference by tightening only the outer
   top/bottom breathing room of the price card. Row spacing stays unchanged. */
#step1 > .price-summary-card{
  padding-top:2px!important;
  padding-bottom:2px!important;
}


/* v159: final step-1 top-spacing polish from approved reference.
   Move the whole price card slightly down from the quantity controls, while
   pulling the small heading closer to the first price row. */
#step1 > .price-summary-card{
  margin-top:14px!important;
  padding-top:5px!important;
}
#step1 > .price-summary-card .price-summary-label{
  margin-bottom:0!important;
}
#step1 > .price-summary-card .price-summary-row:first-of-type{
  padding-top:4px!important;
}

/* v160: Step 2 now mirrors the approved Step 1 visual rhythm. */
body.step-3-active .compact-partner-status{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:0!important;
  margin:0 0 10px!important;
  padding:7px 10px!important;
  border-radius:13px!important;
  border:1px solid #8fae95!important;
  background:#f1f7f1!important;
}
body.step-3-active .compact-partner-status .partner-status-icon{
  width:29px!important;
  height:29px!important;
  min-width:29px!important;
  background:#2f6b45!important;
  color:#fff!important;
  font-size:17px!important;
}
body.step-3-active .compact-partner-status .partner-status-copy{
  display:flex!important;
  flex-direction:row!important;
  align-items:baseline!important;
  gap:4px!important;
  min-width:0!important;
}
body.step-3-active .compact-partner-status small,
body.step-3-active .compact-partner-status strong{
  margin:0!important;
  line-height:1.2!important;
}
body.step-3-active .compact-partner-status small{
  font-size:12px!important;
  color:#5f6f67!important;
}
body.step-3-active .compact-partner-status strong{
  font-size:13px!important;
  font-weight:700!important;
  color:#173b2a!important;
}
body.step-3-active .compact-partner-status .partner-badge{display:none!important;}

/* Copy the approved Step 1 summary card spacing exactly onto Step 2. */
#step3 > .delivery-order-preview.price-summary-card{
  margin-top:14px!important;
  padding:5px 14px 2px!important;
  border-radius:18px!important;
}
#step3 > .delivery-order-preview .price-summary-label{
  margin:0!important;
  line-height:1.15!important;
}
#step3 > .delivery-order-preview .price-summary-row:first-of-type{
  padding-top:4px!important;
}
#step3 > .delivery-order-preview .price-summary-row{
  min-height:0!important;
  padding:7px 0!important;
  line-height:1.15!important;
  align-items:center!important;
}
#step3 > .delivery-order-preview .price-summary-row:not(.price-summary-total) .price-summary-value{
  font-weight:400!important;
}
#step3 > .delivery-order-preview .price-summary-total,
#step3 > .delivery-order-preview .price-summary-total .price-summary-value{
  font-weight:700!important;
}
#step3 > .delivery-order-preview .delivery-customer-summary:empty{display:none!important;}

/* Step 2 actions: three independent columns, no overlap. */
@media (min-width:761px){
  #step3 .step-actions-with-cancel{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:10px!important;
    align-items:center!important;
  }
  #step3 .step-actions-with-cancel .step-actions-left{display:contents!important;}
  #step3 .step-actions-with-cancel .back-button{
    grid-column:1!important;
    justify-self:start!important;
    width:auto!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
  }
  #step3 .step-actions-with-cancel .cancel-order-button{
    grid-column:2!important;
    justify-self:center!important;
    width:min(174px,100%)!important;
    max-width:174px!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 12px!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
  #step3 .step-actions-with-cancel > .continue{
    grid-column:3!important;
    justify-self:end!important;
    width:min(174px,100%)!important;
    max-width:174px!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 12px!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
}


/* v161: focused step-2 cleanup. Step 1 remains untouched. */
/* Partner orders only need the customer-name label once. Keep direct-customer headings intact. */
body.partner-order.step-3-active #deliveryHeading,
body.partner-order.step-3-active #deliveryIntro,
body.partner-order.step-3-active .compact-customer-block .section-subhead{
  display:none!important;
}
body.partner-order.step-3-active .compact-customer-block{
  margin-top:0!important;
  padding-top:0!important;
}

/* The empty delivery-customer-summary follows the total row in the DOM, so the generic
   last-child rule cannot remove the total row border. Remove it explicitly to avoid
   the double line at the bottom of the price card. */
#step3 > .delivery-order-preview .price-summary-total{
  border-bottom:0!important;
}

/* Stable three-position action row with clear separation and no overlap. */
@media (min-width:761px){
  #step3 .step-actions-with-cancel{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;
    gap:16px!important;
    align-items:center!important;
  }
  #step3 .step-actions-with-cancel .step-actions-left{display:contents!important;}
  #step3 .step-actions-with-cancel .back-button{
    grid-column:1!important;
    justify-self:start!important;
    max-width:100%!important;
  }
  #step3 .step-actions-with-cancel .cancel-order-button{
    grid-column:2!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 10px!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
  #step3 .step-actions-with-cancel > .continue{
    grid-column:3!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 10px!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
}

/* v163: final step-2 spacing and action alignment. Step 1 remains untouched. */
body.step-3-active .compact-partner-status{
  margin-top:9px!important;
  margin-bottom:11px!important;
}

/* Three genuinely equal action buttons create equal visual gaps on step 2. */
@media (min-width:761px){
  #step3 .step-actions-with-cancel{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
    align-items:center!important;
  }
  #step3 .step-actions-with-cancel .step-actions-left{display:contents!important;}
  #step3 .step-actions-with-cancel .back-button,
  #step3 .step-actions-with-cancel .cancel-order-button,
  #step3 .step-actions-with-cancel > .continue{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 10px!important;
    box-sizing:border-box!important;
    justify-self:stretch!important;
    white-space:nowrap!important;
  }
  #step3 .step-actions-with-cancel .back-button{grid-column:1!important;}
  #step3 .step-actions-with-cancel .cancel-order-button{grid-column:2!important;}
  #step3 .step-actions-with-cancel > .continue{grid-column:3!important;}
}

/* v164: two-step bureau flow: 1 Utforma -> 2 Kontrollera och skicka. */
/* Two progress dots only. */
.progress{
  grid-template-columns:auto 1fr auto!important;
}

/* Customer input now belongs at the top of the review step. */
body.step-4-active #step4 .review-customer-input{
  margin-top:8px!important;
  margin-bottom:4px!important;
}
body.step-4-active #step4 .review-customer-input .delivery-section{
  margin:0!important;
  padding:0!important;
  border-top:0!important;
}
body.step-4-active #step4 .compact-partner-status{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:0!important;
  margin:0 0 10px!important;
  padding:7px 10px!important;
  border-radius:13px!important;
  border:1px solid #8fae95!important;
  background:#f1f7f1!important;
}
body.step-4-active #step4 .compact-partner-status .partner-status-icon{
  width:29px!important;
  height:29px!important;
  min-width:29px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#2f6b45!important;
  color:#fff!important;
  font-size:17px!important;
}
body.step-4-active #step4 .compact-partner-status .partner-status-copy{
  display:flex!important;
  flex-direction:row!important;
  align-items:baseline!important;
  gap:4px!important;
  min-width:0!important;
}
body.step-4-active #step4 .compact-partner-status small,
body.step-4-active #step4 .compact-partner-status strong{
  margin:0!important;
  line-height:1.2!important;
}
body.step-4-active #step4 .compact-partner-status small{
  font-size:12px!important;
  color:#5f6f67!important;
}
body.step-4-active #step4 .compact-partner-status strong{
  font-size:13px!important;
  font-weight:700!important;
  color:#173b2a!important;
}
body.step-4-active #step4 .compact-partner-status .partner-badge{display:none!important;}
body.step-4-active #step4 .compact-customer-block{
  margin:0!important;
  padding:0!important;
}
body.step-4-active #step4 .compact-customer-block .delivery-field{
  margin:0!important;
}
body.step-4-active #step4 .review-customer-input + h2{
  margin-top:8px!important;
}

/* The bureau already knows the routing/fakturering setup; keep the review concise. */
body.partner-order.step-4-active #reviewRoutingNote{display:none!important;}

/* Final action row: three equal, separated positions. */
@media (min-width:761px){
  body.step-4-active #step4 .step-actions-with-cancel{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
    align-items:center!important;
  }
  body.step-4-active #step4 .step-actions-with-cancel .step-actions-left{display:contents!important;}
  body.step-4-active #step4 .step-actions-with-cancel .back-button,
  body.step-4-active #step4 .step-actions-with-cancel .cancel-order-button,
  body.step-4-active #step4 .step-actions-with-cancel > .continue{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 10px!important;
    box-sizing:border-box!important;
    justify-self:stretch!important;
    white-space:nowrap!important;
  }
  body.step-4-active #step4 .step-actions-with-cancel .back-button{grid-column:1!important;}
  body.step-4-active #step4 .step-actions-with-cancel .cancel-order-button{grid-column:2!important;}
  body.step-4-active #step4 .step-actions-with-cancel > .continue{grid-column:3!important;}
}

/* v166: step 2 uses the exact same desktop column proportions as step 1. */
@media (min-width: 1101px) {
  body.step-4-active .configurator {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    max-width: none !important;
    margin-inline: 0 !important;
    align-items: stretch !important;
  }
}


/* v167: review cleanup and consistent typography. */
/* Gravyr and Beställning should read as one visual system. */
body.step-4-active .review-card-head h3{
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:700!important;
}
body.step-4-active .review-price-summary .price-summary-row{
  padding:3px 0!important;
  font-size:11.5px!important;
  line-height:1.25!important;
}
body.step-4-active .review-price-summary .price-summary-desc,
body.step-4-active .review-price-summary .price-summary-value{
  font-size:inherit!important;
  line-height:inherit!important;
}
body.step-4-active .review-price-summary .price-summary-row:not(.price-summary-total) .price-summary-value{
  font-weight:400!important;
}
body.step-4-active .review-price-summary .price-summary-total,
body.step-4-active .review-price-summary .price-summary-total .price-summary-value{
  font-weight:700!important;
}

/* v168: lock review alignment and compact bureau/customer identity fields. */
body.step-4-active .review-price-summary{
  padding:0!important;
  margin:0!important;
}
body.step-4-active .review-price-summary .price-summary-row{
  padding:3px 0!important;
  font-size:11.5px!important;
  line-height:1.25!important;
}
body.step-4-active .review-price-summary .price-summary-desc{
  margin:0!important;
  padding:0!important;
}
body.step-4-active .review-price-summary .price-summary-value{
  margin:0!important;
  padding:0!important;
  text-align:right!important;
}
body.step-4-active .review-price-summary .price-summary-desc strong{
  font-size:inherit!important;
  line-height:inherit!important;
  font-weight:400!important;
  color:inherit!important;
}
body.step-4-active .review-price-summary .price-summary-total,
body.step-4-active .review-price-summary .price-summary-total .price-summary-value{
  font-weight:700!important;
}

/* Bureau identity and customer name are short values; keep both fields compact and equal-width. */
body.partner-order.step-4-active #step4 .compact-partner-status,
body.partner-order.step-4-active #step4 .compact-customer-block{
  width:min(100%,380px)!important;
  max-width:380px!important;
  box-sizing:border-box!important;
}
body.partner-order.step-4-active #step4 .compact-partner-status{
  min-height:52px!important;
  padding:7px 10px!important;
}
body.partner-order.step-4-active #step4 .compact-partner-status .partner-status-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:1px!important;
}
body.partner-order.step-4-active #step4 .compact-partner-status small,
body.partner-order.step-4-active #step4 .compact-partner-status strong{
  display:block!important;
  line-height:1.15!important;
}
body.partner-order.step-4-active #step4 .compact-customer-block .delivery-field,
body.partner-order.step-4-active #step4 .compact-customer-block input{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
@media(max-width:760px){
  body.partner-order.step-4-active #step4 .compact-partner-status,
  body.partner-order.step-4-active #step4 .compact-customer-block{
    width:100%!important;
    max-width:none!important;
  }
}


/* v153: public funeral-home chooser */
.public-partner-chooser{margin-bottom:18px;padding:16px;border:1px solid #dfcfb8;border-radius:16px;background:#f7f2ea}
.public-partner-chooser h3{font-family:var(--font-serif);font-size:24px;margin:5px 0 6px;color:var(--text)}
.partner-chooser-intro{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.45}
.partner-search-row{display:block}
.partner-search-row input,.partner-missing-form input{width:100%;min-height:44px;border:1px solid #d4c8b8;border-radius:12px;background:#fff;color:var(--text);padding:0 12px}
.partner-search-row input:focus,.partner-missing-form input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(55,101,68,.10)}
.partner-search-button,.partner-use-requested{min-height:44px;border:0;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;padding:0 18px}
.partner-search-results{display:grid;gap:8px;margin-top:10px}
.partner-result{display:flex;justify-content:space-between;gap:12px;align-items:center;width:100%;text-align:left;border:1px solid #d8cdbc;background:#fff;border-radius:12px;padding:10px 12px;color:var(--text)}
.partner-result strong{display:block;font-size:13px}.partner-result small{display:block;color:var(--muted);margin-top:2px;font-size:11px}.partner-result span:last-child{font-weight:700;color:var(--accent);white-space:nowrap}
.partner-search-empty{margin:0;padding:10px 12px;border-radius:12px;background:#fff;color:var(--muted);font-size:12px}
.partner-missing-toggle{margin-top:10px;padding:0;border:0;background:transparent;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.partner-missing-form{margin-top:12px;padding-top:12px;border-top:1px solid #dfcfb8}.partner-missing-form .delivery-grid{margin-bottom:10px}
.public-partner-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
body.public-partner-flow .direct-order-mode{display:none!important}
@media(max-width:760px){.partner-search-row{grid-template-columns:1fr}.partner-search-button{width:100%}.public-partner-contact{grid-template-columns:1fr}.public-partner-chooser{padding:14px}}


/* v162: public funeral-home route starts with bureau choice before the stone builder. */
.public-partner-entry{
  width:min(760px,100%);
  margin:28px auto 0;
}
.public-partner-entry .public-partner-chooser{
  margin:0;
  padding:24px;
  background:var(--panel-2);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}
body.public-partner-entry-active .page{
  display:block;
  height:auto;
  min-height:calc(100vh - 82px);
  overflow:auto;
}
body.public-partner-entry-active .configurator{display:none!important}
@media (min-width:1101px){
  html:has(body.public-partner-entry-active),
  body.public-partner-entry-active{height:auto;overflow:auto}
}
@media(max-width:760px){
  .public-partner-entry{margin-top:14px}
  .public-partner-entry .public-partner-chooser{padding:18px}
}


/* v156: separera kundens kontaktuppgifter fran ny/vald begravningsbyra */
.public-partner-contact-head{grid-column:1/-1;display:grid;gap:3px;padding:9px 11px;border-radius:12px;background:#f3f7f3;border:1px solid #d8e5d9}
.public-partner-contact-head strong{font-size:13px;color:var(--text)}
.public-partner-contact-head small{font-size:12px;line-height:1.35;color:var(--muted)}
.partner-request-help{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.4}


/* v158: SCB company verification for missing funeral homes */
.partner-request-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.partner-use-manual{min-height:44px;border:1px solid #d4c8b8;border-radius:999px;background:#fff;color:var(--text);font-weight:700;padding:0 18px}
.company-lookup-status{margin:10px 0;padding:10px 12px;border-radius:12px;font-size:12px;line-height:1.4;border:1px solid #d8cdbc;background:#fff}
.company-lookup-status.loading{color:var(--muted)}
.company-lookup-status.success{background:#f3f7f3;border-color:#cddfce;color:#315f3d}
.company-lookup-status.warning{background:#fff8ea;border-color:#ead7aa;color:#72531f}
.company-lookup-results{display:grid;gap:8px;margin:10px 0}
.company-lookup-result{display:flex;justify-content:space-between;gap:12px;align-items:center;width:100%;text-align:left;border:1px solid #c9d8ca;background:#f8fbf8;border-radius:12px;padding:10px 12px;color:var(--text)}
.company-lookup-result strong{display:block;font-size:13px}.company-lookup-result small{display:block;color:var(--muted);margin-top:2px;font-size:11px}.company-lookup-result>span:last-child{font-weight:700;color:var(--accent);white-space:nowrap}
.company-lookup-result:hover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(55,101,68,.08)}
.partner-result{justify-content:flex-start}
@media(max-width:760px){.partner-request-actions{display:grid}.partner-request-actions button{width:100%}}


/* v189: ceremoni-datum + gemensamt centrerat X */
.ceremony-date-block-v189{margin:12px 0 6px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#f6f7f2}
.ceremony-date-block-v189 .delivery-field{margin:0}.ceremony-date-block-v189 input{min-height:48px}
.ceremony-date-block-v189 p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.35}
.review-ceremony-v189{margin-top:8px;padding-top:10px;border-top:1px solid #e6dac8}
.order-cancel-close{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border:1px solid #ddcfbc!important;border-radius:50%!important;background:#fffdf9!important;color:transparent!important;font-size:0!important;padding:0!important;display:block!important}
.order-cancel-close::before,.order-cancel-close::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.8px;border-radius:2px;background:#173f32;transform-origin:center}
.order-cancel-close::before{transform:translate(-50%,-50%) rotate(45deg)}.order-cancel-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.order-cancel-close:hover{background:#f5f1ea!important}


/* v191: ceremonidatum i samma kolumnbredd + kort-varsel-varningar */
.ceremony-date-block-v191{margin-top:18px;max-width:560px}
.ceremony-date-block-v191>.delivery-field{max-width:100%}
.ceremony-date-block-v191>p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.4}
.ceremony-urgency-v191{margin-top:12px;border:1px solid #d9c7a8;border-radius:16px;padding:13px 15px;background:#fff8e8;display:grid;gap:4px}
.ceremony-urgency-v191 strong{font-size:16px;line-height:1.25}
.ceremony-urgency-v191 span{font-size:13px;line-height:1.45}
.ceremony-urgency-v191.soon{background:#fff8e8;border-color:#d8bb78;color:#704d19}
.ceremony-urgency-v191.urgent{background:#fff0dc;border-color:#d88d42;color:#7d4210}
.ceremony-urgency-v191.critical{background:#fde9e5;border-color:#c95643;color:#842f22}
.ceremony-urgency-v191.overdue{background:#7f241d;border-color:#7f241d;color:#fff}
.ceremony-urgency-actions-v191{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.ceremony-call-v191,.ceremony-change-v191{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:999px;padding:0 16px;font:inherit;font-weight:700;text-decoration:none}
.ceremony-call-v191{background:#842f22;color:#fff;border:1px solid #842f22}
.ceremony-change-v191{background:#fffdf9;color:inherit;border:1px solid currentColor}
@media(max-width:760px){.ceremony-date-block-v191{max-width:none}.ceremony-urgency-actions-v191>*{flex:1 1 180px}}

/* v192: urgency panel must stay hidden until a triggering ceremony date exists */
.ceremony-urgency-v191[hidden]{display:none!important}


/* v193: explicit short-notice acceptance */
.ceremony-accept-v193{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.52);display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-weight:700;line-height:1.4}
.ceremony-accept-v193[hidden]{display:none!important}
.ceremony-accept-v193 input{width:20px;height:20px;margin:1px 0 0;accent-color:#842f22}
.ceremony-accept-v193 span{font-size:13px!important;color:inherit}
@media(max-width:760px){.ceremony-accept-v193{padding:10px}.ceremony-accept-v193 span{font-size:12.5px!important}}

/* v195: same-width ceremony field + manual override code for overdue public orders */
.ceremony-date-block-v191{width:min(100%,560px)!important;max-width:560px!important;justify-self:start!important}
.ceremony-date-block-v191>.delivery-field,.ceremony-date-block-v191>.delivery-field input{width:100%!important;max-width:100%!important}
.ceremony-urgency-v191.overdue .ceremony-change-v191{background:#fffdf9!important;color:#7f241d!important;border-color:#fffdf9!important}
.ceremony-code-v195{margin-top:10px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.9);color:#7f241d;display:grid;gap:7px}
.ceremony-code-v195[hidden]{display:none!important}
.ceremony-code-v195>strong{font-size:14px}.ceremony-code-v195>span{font-size:12.5px;line-height:1.35}
.ceremony-code-row-v195{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}
.ceremony-code-row-v195 input{min-height:42px;border:1px solid #d9b2aa;border-radius:12px;background:#fffdf9;color:#173f32;padding:8px 12px;font-weight:700;letter-spacing:.12em}
.ceremony-code-verify-v195{min-height:42px;border:1px solid #7f241d;border-radius:999px;background:#7f241d;color:#fff;padding:0 16px;font-weight:700}
.ceremony-code-status-v195.ok{color:#2f7654;font-weight:700}.ceremony-code-status-v195.error{color:#9a2d22;font-weight:700}
@media(max-width:760px){.ceremony-date-block-v191{width:100%!important;max-width:none!important}.ceremony-code-row-v195{grid-template-columns:1fr}.ceremony-code-verify-v195{width:100%}}