/* ==========================================================================
   LABEL BUILDER
   Loaded only by builder.html. Everything here is scoped under .lb so it
   cannot leak into the other fourteen pages.

   The preview is real CSS 3D: six faces assembled into a slab at the plate's
   true 1/16" proportion, so tilting it shows the white core through the cut
   edge exactly the way the material does. No 3D library, no extra requests.
   ========================================================================== */

.lb {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}

/* On mobile the wrapper dissolves so preview / controls / estimate become
   grid items in their own right and can be reordered. */
.lb-side { display: contents; }
.lb-preview  { order: 1; }
.lb-controls { order: 2; }
.lb-estimate { order: 3; }


@media (min-width: 1080px) {
  .lb {
    grid-template-columns: minmax(420px, 1fr) minmax(0, 1.05fr);
    gap: var(--s-7);
    align-items: start;
  }
  .lb-side {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
  }
  .lb-estimate { margin-top: var(--s-5); }
}

/* --------------------------------------------------------------------------
   The stage
   -------------------------------------------------------------------------- */
.lb-stage-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(224, 27, 36, .07), transparent 60%),
    linear-gradient(180deg, var(--ink-800), var(--ink-900));
  overflow: hidden;
}

.lb-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: var(--s-7) var(--s-5) var(--s-6);
  perspective: 1500px;
  perspective-origin: 50% 44%;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
  /* Dragging to turn the plate must not sweep a selection through the
     engraved text. Nothing in the stage is text anyone needs to select. */
  -webkit-user-select: none;
  user-select: none;
  /* Faint machinist's grid so the plate reads as sitting in a space. */
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 28px 28px;
}
.lb-stage:active { cursor: grabbing; }
.lb-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }

@media (min-width: 1080px) { .lb-stage { min-height: 420px; } }

/* --------------------------------------------------------------------------
   The slab. --pw/--ph/--pt are written by JS in px; --cap/--core are the
   material colours; --rx/--ry are the current rotation.
   -------------------------------------------------------------------------- */
.lb-plate {
  --pw: 320px;
  --ph: 160px;
  --pt: 9px;
  --cap: #1C1C1C;
  --core: #F4F4F1;
  --corner: 2px;
  position: relative;
  width: var(--pw);
  height: var(--ph);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, -14deg)) rotateY(var(--ry, -26deg));
  will-change: transform;
}
.lb-plate.is-eased { transition: transform var(--t-slow) var(--ease); }

.lb-face,
.lb-edge {
  position: absolute;
  left: 50%;
  top: 50%;
  backface-visibility: hidden;
}

/* --- the two big faces --- */
.lb-face {
  width: var(--pw);
  height: var(--ph);
  border-radius: var(--corner);
}
.lb-face--front {
  background:
    linear-gradient(148deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .015) 42%,
                    transparent 68%),
    radial-gradient(120% 140% at 18% 8%, rgba(255, 255, 255, .05), transparent 55%),
    var(--cap);
  transform: translate(-50%, -50%) translateZ(calc(var(--pt) / 2));
  overflow: hidden;
  /* A cut edge on two-ply catches light — a hairline of core all round. */
  box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .09);
}
.lb-face--back {
  background: var(--core);
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--pt) / 2));
  filter: brightness(.62);
}

/* --- the four cut edges ---------------------------------------------------
   The material is a coloured cap bonded over a contrasting core, so a cut
   edge is mostly core with a thin band of cap on the FRONT side. Each edge
   is rotated differently, so "the front side" is a different local direction
   on each one — hence four gradients rather than one.
   -------------------------------------------------------------------------- */
.lb-edge { background: var(--core); filter: brightness(.88) saturate(.9); }

.lb-edge--top,
.lb-edge--bottom { width: var(--pw); height: var(--pt); }
.lb-edge--left,
.lb-edge--right { width: var(--pt); height: var(--ph); }

.lb-edge--top {
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--ph) / 2));
  background: linear-gradient(to bottom, var(--core) 0 78%, var(--cap) 78% 100%);
  filter: brightness(.94) saturate(.9);
}
.lb-edge--bottom {
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--ph) / 2));
  background: linear-gradient(to top, var(--core) 0 78%, var(--cap) 78% 100%);
  filter: brightness(.72);
}
.lb-edge--left {
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--pw) / 2));
  background: linear-gradient(to right, var(--core) 0 78%, var(--cap) 78% 100%);
  filter: brightness(.84);
}
.lb-edge--right {
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--pw) / 2));
  background: linear-gradient(to left, var(--core) 0 78%, var(--cap) 78% 100%);
  filter: brightness(.84);
}

/* --- engraving + specular ------------------------------------------------- */
.lb-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Matte acrylic: a broad, low, soft highlight rather than a hard glint.
   --sheen-x tracks rotation so the highlight travels as the plate turns. */
.lb-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 22%,
    rgba(255, 255, 255, var(--sheen-a, .05)) 44%,
    rgba(255, 255, 255, calc(var(--sheen-a, .05) * 1.5)) 50%,
    rgba(255, 255, 255, var(--sheen-a, .05)) 56%,
    transparent 78%);
  transform: translateX(var(--sheen-x, 0%));
  mix-blend-mode: screen;
}

.lb-shadow {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: var(--sw, 300px);
  height: 22px;
  transform: translateX(-50%) scaleX(var(--ssx, 1));
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 70%);
  filter: blur(9px);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Stage furniture
   -------------------------------------------------------------------------- */
.lb-viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, .25);
}
.lb-views { display: flex; gap: 2px; }
.lb-view {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-3);
  font: 500 .78rem/1 var(--f-body);
  letter-spacing: .01em;
  padding: 9px 13px;
  min-height: 36px;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.lb-view:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.lb-view:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.lb-view + .lb-view { margin-left: -1px; }
.lb-view:hover { color: var(--fg); background: rgba(255, 255, 255, .04); }
.lb-view.is-on {
  color: var(--fg);
  background: rgba(224, 27, 36, .12);
  border-color: var(--laser-deep);
  position: relative;
  z-index: 1;
}
.lb-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--fg-4);
  font: 400 .74rem/1 var(--f-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lb-hint svg { width: 14px; height: 14px; }

.lb-readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 560px) { .lb-readout { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lb-readout > div { background: var(--ink-850); padding: var(--s-4) var(--s-4); }
.lb-readout dt {
  font: 400 .66rem/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 6px;
}
.lb-readout dd { margin: 0; font-size: .82rem; color: var(--fg-2); }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.lb-group { padding-bottom: var(--s-6); }
.lb-group + .lb-group {
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s-6);
}
.lb-legend {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-2);
  font-family: var(--f-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fg);
}
.lb-step {
  font: 500 .7rem/1 var(--f-mono);
  color: var(--laser-lit);
  letter-spacing: .08em;
}
.lb-note {
  margin: 0 0 var(--s-4);
  color: var(--fg-3);
  font-size: .84rem;
  line-height: 1.6;
}
.lb-inline-note {
  margin: var(--s-3) 0 0;
  color: var(--fg-3);
  font-size: .8rem;
  line-height: 1.55;
  min-height: 1.2em;
}

/* --- text lines --- */
.lb-lines { display: flex; flex-direction: column; gap: var(--s-2); }
.lb-line { display: flex; align-items: center; gap: var(--s-2); }
.lb-line-n {
  flex: none;
  width: 22px;
  font: 400 .7rem/1 var(--f-mono);
  color: var(--fg-4);
  text-align: right;
}
.lb-line input { flex: 1 1 auto; min-width: 0; }
.lb-line-x {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-4);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.lb-line-x:hover { color: var(--laser-lit); border-color: var(--laser-deep); }
.lb-line-x svg { width: 14px; height: 14px; }

/* --- generic fields --- */
.lb-fields[hidden] { display: none; }
.lb-fields {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}
.lb-field { display: block; min-width: 0; }
.lb-field--wide { grid-column: span 2; }
@media (max-width: 520px) { .lb-field--wide { grid-column: span 1; } }
.lb-field > span {
  display: block;
  margin-bottom: 6px;
  font: 400 .68rem/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.lb .lb-field select,
.lb .lb-field input,
.lb .lb-line input { width: 100%; }

.lb-check {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  color: var(--fg-2);
  font-size: .86rem;
  cursor: pointer;
}
.lb-check input { flex: none; width: 18px; height: 18px; accent-color: var(--laser); }

/* --- size chips --- */
.lb-sizes {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.lb-size {
  appearance: none;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-850);
  color: var(--fg-2);
  padding: 11px 13px;
  min-height: 58px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.lb-size:hover { border-color: var(--line-hard); color: var(--fg); }
.lb-size.is-on {
  border-color: var(--laser);
  background: rgba(224, 27, 36, .1);
  color: var(--fg);
}
.lb-size b {
  display: block;
  font: 600 .92rem/1.2 var(--f-display);
  letter-spacing: -.01em;
}
.lb-size span {
  display: block;
  margin-top: 4px;
  font: 400 .68rem/1 var(--f-mono);
  color: var(--fg-4);
}
.lb-size.is-on span { color: var(--laser-lit); }

/* --- material swatches --- */
.lb-swatches {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.lb-mat {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-850);
  color: var(--fg-2);
  padding: 9px 11px;
  min-height: 54px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.lb-mat:hover { border-color: var(--line-hard); }
.lb-mat.is-on { border-color: var(--laser); background: rgba(224, 27, 36, .1); color: var(--fg); }
.lb-chip {
  flex: none;
  width: 34px;
  height: 24px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  font: 700 8px/1 var(--f-mono);
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.lb-mat-t { min-width: 0; }
.lb-mat-t b { display: block; font-size: .78rem; font-weight: 600; }
.lb-mat-t span {
  display: block;
  margin-top: 3px;
  font: 400 .62rem/1 var(--f-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.lb-mat.is-stock .lb-mat-t span { color: var(--sig-safety); }

/* --- quantity tier strip --- */
.lb-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--s-4);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.lb-tier {
  background: var(--ink-850);
  padding: 9px 6px;
  text-align: center;
  font: 400 .68rem/1.4 var(--f-mono);
  color: var(--fg-4);
}
.lb-tier b { display: block; color: var(--fg-3); font-weight: 500; }
.lb-tier.is-on { background: rgba(224, 27, 36, .12); }
.lb-tier.is-on b, .lb-tier.is-on { color: var(--laser-lit); }

/* --------------------------------------------------------------------------
   Estimate
   -------------------------------------------------------------------------- */
.lb-est-rows { display: flex; flex-direction: column; gap: 10px; }
.lb-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: .84rem;
}
.lb-row span { color: var(--fg-3); min-width: 0; }
.lb-row b { color: var(--fg); font-weight: 500; font-family: var(--f-mono); font-size: .82rem; }
.lb-row--sub span, .lb-row--sub b { color: var(--fg-4); font-size: .78rem; }
.lb-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.lb-total span { color: var(--fg-2); font-size: .88rem; }
.lb-total strong {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--laser-lit);
}
.lb-per {
  margin: 6px 0 0;
  font: 400 .72rem/1.5 var(--f-mono);
  color: var(--fg-4);
}
.lb-status {
  margin: var(--s-3) 0 0;
  min-height: 1.2em;
  font-size: .78rem;
  color: var(--sig-safety);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Local utilities — small enough not to be worth putting in the global sheet
   -------------------------------------------------------------------------- */
.lb .btn--sm { padding: 8px 14px; font-size: .78rem; min-height: 38px; }
.lb .row--tight { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* No-JS: the builder cannot work without it, so say so plainly. */
.lb-nojs {
  margin: 0 0 var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--laser-deep);
  border-radius: var(--r-lg);
  background: rgba(224, 27, 36, .07);
  color: var(--fg-2);
  font-size: .88rem;
}
html:not(.no-js) .lb-nojs { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lb-plate.is-eased { transition: none; }
}

/* Below the two-column breakpoint the preview rides along at the top of the
   screen, because watching the plate change while you type is the entire
   point of the page. The stage shrinks and the spec strip is dropped so the
   pinned block stays about a quarter of a phone screen — those four figures
   are all repeated in the material section and the estimate. */
@media (max-width: 1079.98px) {
  .lb-preview {
    position: sticky;
    top: calc(var(--header-h) - 1px);
    z-index: 3;
  }
  .lb-stage { min-height: 210px; padding: var(--s-5) var(--s-4); }
  .lb-readout { display: none; }
  .lb-stage-wrap { box-shadow: 0 12px 28px rgba(0, 0, 0, .55); }
}

/* ==========================================================================
   THE ORDER
   The list of built items, its totals, and the summary the quote page shows.
   ========================================================================== */
.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.lb-order-count {
  margin: 0;
  font: 400 .78rem/1 var(--f-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--laser-lit);
  white-space: nowrap;
}

.lb-empty {
  padding: var(--s-6);
  border: 1px dashed var(--line-hard);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .015);
}
.lb-empty p { margin: 0; color: var(--fg-3); font-size: .9rem; line-height: 1.65; }
.lb-empty strong { color: var(--fg); }
.lb-empty em { color: var(--fg-2); font-style: normal; }

.lb-order-list { display: flex; flex-direction: column; gap: var(--s-3); }

.lb-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  grid-template-areas: "thumb main price" "thumb acts acts";
  gap: var(--s-2) var(--s-5);
  align-items: center;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-850);
  transition: border-color var(--t-fast);
}
.lb-item:hover { border-color: var(--line-hard); }
.lb-item.is-editing {
  border-color: var(--laser);
  background: rgba(224, 27, 36, .07);
}

.lb-item-thumb {
  grid-area: thumb;
  position: relative;
  width: 104px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), var(--e-1);
  overflow: hidden;
}
.lb-item-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.lb-item-main { grid-area: main; min-width: 0; }
.lb-item-main b {
  display: block;
  font: 600 .95rem/1.3 var(--f-display);
  letter-spacing: -.01em;
  color: var(--fg);
}
.lb-item-main span {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
  color: var(--fg-3);
}
.lb-item-lines {
  font-family: var(--f-mono);
  font-size: .72rem !important;
  color: var(--fg-4) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-item-price { grid-area: price; text-align: right; white-space: nowrap; }
.lb-item-price b {
  display: block;
  font-family: var(--f-mono);
  font-size: .95rem;
  font-weight: 500;
  color: var(--fg);
}
.lb-item-price small {
  display: block;
  margin-top: 3px;
  font: 400 .68rem/1 var(--f-mono);
  color: var(--fg-4);
}

.lb-item-acts { grid-area: acts; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.lb-item-act {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-3);
  font: 500 .74rem/1 var(--f-body);
  padding: 8px 11px;
  min-height: 34px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.lb-item-act:hover { color: var(--fg); border-color: var(--line-hard); background: rgba(255, 255, 255, .04); }
.lb-item-act.is-danger:hover { color: var(--laser-lit); border-color: var(--laser-deep); }

@media (max-width: 620px) {
  .lb-item {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "thumb main" "price price" "acts acts";
    gap: var(--s-3) var(--s-4);
    align-items: start;
  }
  .lb-item-thumb { width: 76px; }
  .lb-item-price { text-align: left; display: flex; align-items: baseline; gap: var(--s-3); }
  .lb-item-price small { margin-top: 0; }
}

.lb-order-foot {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .lb-order-foot { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
}
.lb-order-opts .tiny { margin: var(--s-2) 0 0; }
.lb-order-sum { align-self: start; }

/* ==========================================================================
   THE ORDER SUMMARY ON THE QUOTE PAGE
   ========================================================================== */
.oq {
  margin: 0 0 var(--s-6);
  border: 1px solid var(--laser-deep);
  border-radius: var(--r-lg);
  background: rgba(224, 27, 36, .06);
  overflow: hidden;
}
.oq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid rgba(224, 27, 36, .25);
}
.oq-head .eyebrow { margin: 0 0 4px; }
.oq-title {
  margin: 0;
  font: 600 1.02rem/1.2 var(--f-display);
  letter-spacing: -.01em;
  color: var(--fg);
}
.oq-list { margin: 0; padding: 0; list-style: none; }
.oq-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-soft);
}
.oq-item-main { min-width: 0; }
.oq-item-main b { display: block; font-size: .88rem; font-weight: 600; color: var(--fg); }
.oq-item-main span { display: block; margin-top: 3px; font-size: .76rem; color: var(--fg-3); }
.oq-item-lines {
  font-family: var(--f-mono);
  font-size: .7rem !important;
  color: var(--fg-4) !important;
}
.oq-item-price {
  font-family: var(--f-mono);
  font-size: .84rem;
  color: var(--fg-2);
  white-space: nowrap;
}
.oq-foot { padding: var(--s-4) var(--s-5); }
.oq-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.oq-total span { font-size: .84rem; color: var(--fg-2); }
.oq-total strong {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--laser-lit);
}
.oq-caveat { margin: 6px 0 0; font-size: .74rem; color: var(--fg-4); }