.mf-public-header,
.mf-public,
.mf-public-footer {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 640px;
  padding: 16px 20px;
}

.mf-public-header img {
  height: 48px;
  max-width: 220px;
  object-fit: contain;
}

.mf-public-header--home {
  background: color-mix(in srgb, var(--mf-primary) 7%, var(--mf-surface));
  border-bottom: 1px solid color-mix(in srgb, var(--mf-primary) 12%, transparent);
  padding-block: 12px;
}

.mf-public-header--home a {
  width: fit-content;
}

.mf-public-header--home img {
  height: 64px;
  max-width: min(280px, 72vw);
  object-fit: contain;
  object-position: left center;
  width: auto;
}

.mf-public-header a,
.mf-public-footer a {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

.mf-public {
  padding-bottom: 96px;
}

.mf-hero {
  padding: 32px 0;
}

.mf-home {
  background: var(--mf-surface-soft);
  overflow: clip;
  padding: 18px 16px 104px;
}

.mf-home .mf-hero {
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--mf-secondary) 38%, transparent) 0 15%, transparent 16%),
    linear-gradient(135deg, var(--mf-primary), color-mix(in srgb, var(--mf-primary) 76%, var(--mf-text)));
  border-radius: 24px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--mf-primary) 22%, transparent);
  color: var(--mf-surface);
  min-height: 320px;
  overflow: hidden;
  padding: 30px 24px;
  position: relative;
}

.mf-hero__content {
  max-width: 470px;
  position: relative;
  z-index: 1;
}

.mf-hero__eyebrow {
  align-items: center;
  background: color-mix(in srgb, var(--mf-surface) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--mf-surface) 30%, transparent);
  border-radius: 999px;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.mf-home .mf-hero h1 {
  color: inherit;
  font-size: clamp(2.125rem, 9vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 18px 0 12px;
  max-width: 12ch;
}

.mf-home .mf-hero p {
  color: color-mix(in srgb, var(--mf-surface) 90%, transparent);
  font-size: 1.0625rem;
  line-height: 1.55;
  margin: 0;
  max-width: 42ch;
}

.mf-home .mf-hero .mf-actions {
  gap: 10px;
  margin-top: 24px;
}

.mf-home .mf-hero .mf-button {
  border-color: var(--mf-surface);
  border-radius: 12px;
  font-weight: 700;
  min-height: 48px;
  padding-inline: 18px;
}

.mf-home .mf-hero .mf-button--primary {
  background: var(--mf-surface);
  color: var(--mf-primary);
}

.mf-home .mf-hero .mf-button--light {
  background: color-mix(in srgb, var(--mf-surface) 12%, transparent);
  color: var(--mf-surface);
}

.mf-hero__decoration {
  bottom: -34px;
  color: color-mix(in srgb, var(--mf-surface) 12%, transparent);
  position: absolute;
  right: -22px;
  rotate: -8deg;
}

.mf-hero__decoration .mf-icon {
  height: 190px;
  stroke-width: 1.2;
  width: 190px;
}

.mf-home-section {
  margin-top: 46px;
}

.mf-section-heading {
  margin-bottom: 18px;
}

.mf-section-heading > span {
  color: var(--mf-primary);
  display: block;
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.mf-section-heading h2 {
  font-size: clamp(1.625rem, 7vw, 1.875rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}

.mf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.mf-button {
  align-items: center;
  border: 1px solid var(--mf-primary);
  border-radius: 13px;
  box-sizing: border-box;
  color: var(--mf-primary);
  display: inline-flex;
  justify-content: center;
  min-height: 48px;
  padding: 10px 16px;
  text-decoration: none;
}

.mf-button--primary {
  background: var(--mf-primary);
  color: #fff;
}

.mf-featured__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.mf-home .mf-featured__track {
  gap: 14px;
  margin-inline: -16px;
  padding: 2px 16px 16px;
  scrollbar-width: none;
}

.mf-home .mf-featured__track::-webkit-scrollbar {
  display: none;
}

.mf-material-card {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  color: inherit;
  display: grid;
  gap: 6px;
  min-height: 44px;
  padding: 10px;
  position: relative;
  text-align: left;
}

.mf-material-card--featured {
  flex: 0 0 180px;
  scroll-snap-align: start;
}

.mf-home .mf-material-card--featured {
  background: var(--mf-surface);
  border: 0;
  border-radius: 18px;
  box-shadow: var(--mf-shadow);
  flex-basis: min(72vw, 230px);
  gap: 10px;
  overflow: hidden;
  padding: 0 0 16px;
  transition: box-shadow 180ms ease, translate 180ms ease;
}

.mf-home .mf-material-card--featured img,
.mf-home .mf-material-card--featured .mf-image-placeholder {
  aspect-ratio: 16 / 10;
}

.mf-home .mf-material-card--featured strong {
  font-size: 1.0625rem;
  line-height: 1.25;
  padding-inline: 16px;
}

.mf-home .mf-material-card--featured .mf-material-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  left: 12px;
  top: 12px;
}

.mf-material-card img,
.mf-image-placeholder {
  aspect-ratio: 1;
  background: #f3f4f6;
  display: block;
  object-fit: cover;
  width: 100%;
}

.mf-image-placeholder svg {
  fill: #6b7280;
  height: 100%;
  width: 100%;
}

.mf-material-card__label {
  background: var(--mf-secondary);
  border-radius: 12px;
  left: 16px;
  padding: 3px 8px;
  position: absolute;
  top: 16px;
}

.mf-how ol {
  list-style: none;
  padding: 0;
}

.mf-how li {
  counter-increment: steps;
  padding-left: 44px;
  position: relative;
}

.mf-home .mf-how ol {
  display: grid;
  gap: 12px;
  margin: 0;
}

.mf-home .mf-how li {
  align-items: flex-start;
  background: var(--mf-surface);
  border: 1px solid var(--mf-border);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgb(15 23 42 / 5%);
  display: grid;
  gap: 12px;
  grid-template-columns: 44px 1fr;
  min-height: 118px;
  padding: 18px;
  position: relative;
}

.mf-home .mf-how li::before {
  content: none;
}

.mf-how__number {
  background: var(--mf-primary);
  border: 3px solid var(--mf-surface);
  border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mf-primary) 22%, transparent);
  color: var(--mf-surface);
  font-size: 0.75rem;
  font-weight: 800;
  height: 24px;
  left: 8px;
  line-height: 24px;
  position: absolute;
  text-align: center;
  top: 8px;
  width: 24px;
}

.mf-how__icon,
.mf-why__icon {
  align-items: center;
  background: color-mix(in srgb, var(--mf-primary) 10%, var(--mf-surface));
  border-radius: 13px;
  color: var(--mf-primary);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.mf-home .mf-how h3,
.mf-home .mf-why h3 {
  font-size: 1.125rem;
  line-height: 1.25;
  margin: 0 0 6px;
}

.mf-home .mf-how p,
.mf-home .mf-why p {
  color: var(--mf-muted);
  line-height: 1.55;
  margin: 0;
}

.mf-how__actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin-top: 16px;
}

.mf-how__actions .mf-button {
  border-radius: 13px;
  font-weight: 750;
  gap: 9px;
  min-height: 52px;
  padding: 10px 12px;
}

.mf-button--secondary {
  background: var(--mf-secondary);
  border-color: var(--mf-secondary);
  color: color-mix(in srgb, var(--mf-text) 88%, black);
}

.mf-how ol {
  counter-reset: steps;
}

.mf-how li::before {
  background: var(--mf-primary);
  border-radius: 50%;
  color: #fff;
  content: counter(steps);
  height: 32px;
  left: 0;
  line-height: 32px;
  position: absolute;
  text-align: center;
  width: 32px;
}

.mf-why {
  display: grid;
  gap: 12px;
}

.mf-home .mf-why {
  grid-template-columns: 1fr;
}

.mf-home .mf-why .mf-section-heading {
  grid-column: 1 / -1;
}

.mf-home .mf-why article {
  align-items: flex-start;
  background: var(--mf-surface);
  border: 1px solid var(--mf-border);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgb(15 23 42 / 5%);
  display: grid;
  gap: 14px;
  grid-template-columns: 52px 1fr;
  padding: 18px;
}

.mf-home .mf-why .mf-why__icon {
  height: 52px;
  width: 52px;
}

.mf-home .mf-why .mf-icon {
  height: 26px;
  width: 26px;
}

.mf-why h2 {
  grid-column: 1 / -1;
}

.mf-quote-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mf-search {
  display: grid;
  gap: 6px;
}

.mf-search input {
  font-size: 16px;
  min-height: 44px;
}

.mf-category-chips {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  overflow-x: auto;
}

.mf-category-chips button {
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
}

.mf-category-chips button[aria-pressed="true"] {
  background: var(--mf-primary);
  color: #fff;
}

.mf-public-nav {
  background: #fff;
  bottom: 0;
  box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  left: 50%;
  max-width: 640px;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  transform: translateX(-50%);
  width: 100%;
  z-index: 50;
}

.mf-public-nav a,
.mf-public-nav button {
  align-items: center;
  background: #fff;
  border: 0;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  position: relative;
  text-decoration: none;
}

.mf-public-nav [aria-current="page"] {
  color: var(--mf-primary);
  font-weight: 700;
}

.mf-icon {
  fill: none;
  height: 22px;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 22px;
}

.mf-public-nav b {
  background: var(--mf-danger);
  border-radius: 10px;
  color: #fff;
  font-size: 11px;
  padding: 1px 5px;
  position: absolute;
  right: 20%;
  top: 4px;
}

.mf-public-nav--home {
  background: var(--mf-surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgb(15 23 42 / 12%);
  min-height: 68px;
}

.mf-public-nav--home a,
.mf-public-nav--home button {
  background: var(--mf-surface);
  font-size: 0.75rem;
  gap: 3px;
  min-height: 68px;
  padding: 6px 2px;
}

.mf-public-nav--home .mf-icon {
  height: 24px;
  width: 24px;
}

.mf-public-nav--home [aria-current="page"]::after {
  background: var(--mf-primary);
  border-radius: 999px;
  content: "";
  height: 3px;
  left: 30%;
  position: absolute;
  right: 30%;
  top: 0;
}

.mf-public-footer {
  background: color-mix(in srgb, var(--mf-primary) 8%, var(--mf-surface));
  border-radius: 24px 24px 0 0;
  margin-top: 48px;
  padding: 28px 20px 112px;
}

.mf-public-footer__brand img {
  display: block;
  height: 56px;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  width: auto;
}

.mf-public-footer__brand strong {
  display: block;
  font-size: 1.25rem;
}

.mf-public-footer__quick {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 22px;
}

.mf-public-footer .mf-public-footer__quick a {
  background: var(--mf-surface);
  border: 1px solid color-mix(in srgb, var(--mf-primary) 14%, transparent);
  border-radius: 13px;
  color: var(--mf-primary);
  flex-direction: column;
  font-size: 0.8125rem;
  font-weight: 700;
  gap: 4px;
  justify-content: center;
  min-height: 64px;
  padding: 8px;
  text-decoration: none;
}

.mf-public-footer__details {
  border-block: 1px solid color-mix(in srgb, var(--mf-primary) 14%, transparent);
  margin-top: 22px;
  padding-block: 14px;
}

.mf-public-footer__details p {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  line-height: 1.5;
  margin: 8px 0;
}

.mf-public-footer__details .mf-icon {
  color: var(--mf-primary);
  flex: 0 0 22px;
  margin-top: 2px;
}

.mf-public-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
}

.mf-public-footer .mf-public-footer__legal a {
  color: var(--mf-muted);
  font-size: 0.8125rem;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mf-home .mf-material-card--featured:active,
.mf-home .mf-button:active {
  scale: 0.98;
}

@media (hover: hover) {
  .mf-home .mf-material-card--featured:hover {
    box-shadow: 0 16px 38px rgb(15 23 42 / 13%);
    translate: 0 -2px;
  }
}

@media (min-width: 480px) {
  .mf-how__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 601px) {
  .mf-home {
    padding-inline: 20px;
  }

  .mf-home .mf-hero {
    min-height: 300px;
    padding: 36px 40px;
  }

  .mf-home .mf-how ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mf-home .mf-how li {
    grid-template-columns: 1fr;
  }

  .mf-home .mf-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mf-home .mf-why article {
    grid-template-columns: 1fr;
  }

  .mf-public-footer__quick {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* MetalFlow 1.0.2 — shared public application surfaces. */
.mf-public-header:not(.mf-public-header--home) {
  background: color-mix(in srgb, var(--mf-primary) 7%, var(--mf-surface));
  border-bottom: 1px solid color-mix(in srgb, var(--mf-primary) 14%, transparent);
  min-height: 72px;
  padding-block: 12px;
}

.mf-public-header:not(.mf-public-header--home) a {
  color: var(--mf-primary);
  font-size: 1.1rem;
  font-weight: 800;
  text-decoration: none;
}

.mf-public:not(.mf-home) {
  background: var(--mf-bg);
  min-height: calc(100vh - 72px);
  padding: 24px 16px 112px;
}

.mf-public:not(.mf-home) > h1 {
  font-size: clamp(1.85rem, 8vw, 2.35rem);
  margin: 4px 0 24px;
}

.mf-quotes .mf-search,
.mf-materials__search,
.mf-prices__search {
  color: var(--mf-muted);
  font-size: 0.875rem;
}

.mf-quotes .mf-search input {
  background: var(--mf-surface) no-repeat 14px center;
  border-color: var(--mf-border);
  box-shadow: var(--mf-shadow-sm);
  min-height: 52px;
  padding-left: 16px;
}

.mf-category-chips {
  gap: 9px;
  margin: 16px -16px 20px;
  padding: 2px 16px 8px;
  scrollbar-width: none;
}

.mf-category-chips::-webkit-scrollbar { display: none; }

.mf-category-chips button {
  background: var(--mf-surface);
  border: 1px solid var(--mf-border);
  border-radius: 999px;
  color: var(--mf-muted);
  font: inherit;
  font-weight: 700;
  padding: 8px 15px;
}

.mf-category-chips button[aria-pressed="true"] {
  border-color: var(--mf-primary);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--mf-primary) 18%, transparent);
}

.mf-quote-grid {
  gap: 14px;
}

.mf-quotes .mf-material-card {
  background: var(--mf-surface);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  box-shadow: var(--mf-shadow-sm);
  gap: 8px;
  overflow: hidden;
  padding: 0 0 14px;
}

.mf-quotes .mf-material-card img,
.mf-quotes .mf-image-placeholder {
  aspect-ratio: 4 / 3;
  height: auto;
}

.mf-quotes .mf-material-card strong,
.mf-quotes .mf-material-card > span:not(.mf-material-card__label) {
  padding-inline: 13px;
}

.mf-quotes .mf-material-card strong {
  font-size: 1rem;
  line-height: 1.25;
}

.mf-quotes .mf-material-card > span:not(.mf-material-card__label) {
  color: var(--mf-primary);
  font-size: 1rem;
  font-weight: 800;
}

.mf-dialog {
  background: var(--mf-surface);
  color: var(--mf-text);
  padding: 22px;
}

.mf-dialog__close {
  background: var(--mf-surface-soft);
  border: 0;
  border-radius: 999px;
  color: var(--mf-text);
}

.mf-dialog [data-mf-material-dialog-content] > img {
  aspect-ratio: 4 / 3;
  border-radius: var(--mf-radius);
  object-fit: cover;
}

.mf-dialog [data-mf-material-dialog-content] > h2 {
  font-size: 1.7rem;
  margin-bottom: 8px;
}

.mf-dialog [data-mf-material-dialog-content] > strong {
  color: var(--mf-primary);
  font-size: 1.35rem;
}

.mf-dialog--sheet a,
.mf-contact {
  background: var(--mf-surface-soft);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  color: inherit;
  padding: 15px;
  text-decoration: none;
}

.mf-calculator__rows,
.mf-pickup form,
.mf-container form {
  display: grid;
  gap: 16px;
}

.mf-calc-row,
.mf-pickup-item {
  border-color: var(--mf-border);
  border-radius: var(--mf-radius);
  box-shadow: var(--mf-shadow-sm);
  padding: 16px;
}

.mf-calc-options {
  border-color: var(--mf-border);
  border-radius: 12px;
  box-shadow: var(--mf-shadow);
}

.mf-calculator__summary {
  align-items: center;
  background: color-mix(in srgb, var(--mf-primary) 9%, var(--mf-surface));
  border: 1px solid color-mix(in srgb, var(--mf-primary) 18%, var(--mf-border));
  border-radius: var(--mf-radius);
  margin-block: 18px;
  padding: 18px;
}

.mf-calculator__summary strong {
  color: var(--mf-primary);
  font-size: 1.55rem;
  white-space: nowrap;
}

.mf-calculator__disclaimer,
.mf-pickup form section > p:not(.mf-field-error),
.mf-container form section > p:not(.mf-field-error) {
  color: var(--mf-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.mf-calculator__pickup { width: 100%; }

.mf-stepper {
  background: var(--mf-surface);
  border: 1px solid var(--mf-border);
  border-radius: 14px;
  box-shadow: var(--mf-shadow-sm);
  gap: 0;
  margin-bottom: 20px;
  overflow: hidden;
}

.mf-stepper li {
  border: 0;
  color: var(--mf-muted);
  min-width: 0;
  padding: 12px 5px;
}

.mf-stepper li[aria-current="step"] {
  background: color-mix(in srgb, var(--mf-primary) 10%, var(--mf-surface));
  box-shadow: inset 0 -3px var(--mf-primary);
}

.mf-pickup form section,
.mf-container form section {
  background: var(--mf-surface);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-lg);
  box-shadow: var(--mf-shadow-sm);
  padding: 18px;
}

.mf-pickup fieldset {
  border: 1px solid var(--mf-border);
  border-radius: 12px;
  padding: 12px;
}

.mf-photo-previews img { border-radius: 12px; }

.mf-upload-progress {
  background: var(--mf-border);
  border-radius: 999px;
  height: 10px;
}

.mf-pickup__review {
  background: var(--mf-surface-soft);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  padding: 16px;
}

.mf-pickup__success,
.mf-container__success {
  background: var(--mf-success-soft);
  border: 1px solid color-mix(in srgb, var(--mf-success) 25%, var(--mf-border));
  border-radius: var(--mf-radius-lg);
  padding: 24px;
  text-align: center;
}

.mf-privacy {
  line-height: 1.65;
}

.mf-privacy > *:not(h1) {
  background: var(--mf-surface);
  border-radius: var(--mf-radius);
  padding: 16px;
}

.mf-privacy__content {
  box-shadow: var(--mf-shadow-sm);
  overflow-wrap: anywhere;
}

.mf-privacy__content > :first-child { margin-top: 0; }
.mf-privacy__content > :last-child { margin-bottom: 0; }
.mf-privacy__content a { color: var(--mf-primary); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.mf-privacy__content img, .mf-privacy__content table { max-width: 100%; height: auto; }
.mf-privacy__content table { display: block; overflow-x: auto; }
.mf-privacy__version { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--mf-border); color: var(--mf-muted); font-size: .9rem; }
.mf-privacy-consent { gap: 10px; }
.mf-privacy-consent > span { min-width: 0; line-height: 1.45; }

.mf-public-nav:not(.mf-public-nav--home) {
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 28px rgb(15 23 42 / 11%);
  min-height: 68px;
}

.mf-public-nav:not(.mf-public-nav--home) a,
.mf-public-nav:not(.mf-public-nav--home) button {
  font-size: 0.75rem;
  gap: 3px;
  min-height: 68px;
  padding: 6px 2px;
}

@media (min-width: 601px) {
  .mf-public:not(.mf-home) { padding-inline: 24px; }
  .mf-quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mf-dialog { border-radius: var(--mf-radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .mf-home *,
  .mf-home *::before,
  .mf-home *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.mf-dialog {
  border: 0;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  max-height: none;
  max-width: 480px;
  padding: 24px;
  width: 100%;
}

.mf-dialog::backdrop {
  background: rgb(0 0 0 / 50%);
}

.mf-dialog__close {
  float: right;
  font-size: 28px;
  min-height: 44px;
  min-width: 44px;
}

.mf-dialog img {
  height: auto;
  max-width: 100%;
}

.mf-dialog--sheet a,
.mf-contact {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  min-height: 44px;
}

.mf-contact-logo {
  max-height: 90px;
  object-fit: contain;
}

.mf-toast {
  background: #111827;
  bottom: 90px;
  color: #fff;
  left: 50%;
  padding: 10px 16px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 100;
}

.mf-update-banner {
  background: #e0f2fe;
  padding: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

*:focus-visible {
  outline: 3px solid var(--mf-primary);
  outline-offset: 2px;
}

.mf-calculator__rows { display: grid; gap: 1rem; margin-bottom: 1rem; min-height: 350px; }
.mf-calc-row { position: relative; display: grid; gap: .8rem; padding: 1rem; border: 1px solid #d9e0e6; border-radius: 14px; background: #fff; }
.mf-calc-row label { position: relative; display: grid; gap: .35rem; font-weight: 700; }
.mf-calc-row label > span { position: absolute; right: .8rem; bottom: .8rem; color: #46515a; }
.mf-calc-row input { min-height: 44px; padding: .65rem 3rem .65rem .7rem; font-size: 16px; border: 1px solid #89949e; border-radius: 8px; }
.mf-calc-options { position: absolute; z-index: 4; top: 100%; right: 0; left: 0; max-height: 260px; overflow-y: auto; padding: .25rem; border: 1px solid #89949e; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px #0003; }
.mf-calc-option { display: flex; width: 100%; min-height: 48px; align-items: center; gap: .6rem; padding: .4rem; border: 0; background: #fff; text-align: left; }
.mf-calc-option:hover, .mf-calc-option:focus { background: #eef5fa; }
.mf-calc-option img, .mf-calc-option__placeholder { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 6px; object-fit: cover; background: #d9e0e6; }
.mf-calc-row__values { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mf-calc-row__values span { display: grid; gap: .2rem; }
.mf-calc-row__remove { justify-self: start; min-height: 44px; border: 0; background: transparent; color: #a52222; text-decoration: underline; }
.mf-calc-row__unavailable, .mf-field-error { margin: 0; color: #a52222; font-weight: 700; }
.mf-calculator__summary { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem 0; border-top: 2px solid var(--mf-primary); font-size: 1.15rem; }
.mf-calculator__pickup[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.mf-stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; padding: 0; list-style: none; font-size: .8rem; }
.mf-stepper li { padding: .55rem .25rem; border-bottom: 3px solid #c9d1d8; text-align: center; }
.mf-stepper li[aria-current="step"] { border-color: var(--mf-primary); color: var(--mf-primary); font-weight: 700; }
.mf-pickup form section, .mf-container form section { display: grid; gap: .75rem; min-width: 0; }
.mf-pickup form section[hidden], .mf-pickup [hidden], .mf-container form section[hidden], .mf-container [hidden] { display: none; }
.mf-pickup label, .mf-pickup fieldset, .mf-container label { display: grid; gap: .35rem; }
.mf-pickup fieldset label { display: flex; min-height: 44px; align-items: center; }
.mf-pickup input, .mf-pickup select, .mf-pickup textarea, .mf-container input, .mf-container select, .mf-container textarea { box-sizing: border-box; max-width: 100%; min-height: 44px; min-width: 0; padding: .65rem; border: 1px solid #89949e; border-radius: 8px; font: inherit; font-size: 16px; }
.mf-pickup textarea, .mf-container textarea { min-height: 92px; resize: vertical; }
.mf-pickup-item { box-sizing: border-box; position: relative; display: grid; gap: .7rem; min-width: 0; margin-bottom: 1rem; padding: 1rem; border: 1px solid #d9e0e6; border-radius: 14px; background: #fff; }
.mf-pickup [data-mf-pickup-items] { min-height: 480px; }
.mf-pickup-item label { position: relative; font-weight: 700; }
.mf-pickup-item label > span { position: absolute; right: .8rem; bottom: .8rem; }
.mf-pickup-item__value { margin: 0; }
.mf-photo-previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mf-photo-previews figure { position: relative; margin: 0; }
.mf-photo-previews img { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; }
.mf-photo-previews button { min-height: 44px; width: 100%; border: 0; background: #fff; color: #a52222; }
.mf-step-actions { display: flex; justify-content: space-between; gap: 1rem; }
.mf-privacy-consent { grid-template-columns: auto 1fr auto; align-items: start; }
.mf-privacy-consent input { min-width: 24px; }
.mf-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; }
.mf-upload-progress { height: 8px; overflow: hidden; border-radius: 4px; background: #d9e0e6; }
.mf-upload-progress span { display: block; width: 0; height: 100%; background: var(--mf-primary); transition: width .15s; }
.mf-pickup__review { padding: 1rem; border-radius: 12px; background: #eef5fa; }
.mf-pickup__code { display: block; margin: 1rem 0; color: var(--mf-primary); font-size: 2rem; }
.mf-pickup [type="submit"]:disabled::before, .mf-container [type="submit"]:disabled::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.15em; animation: mf-spin .8s linear infinite; }
@keyframes mf-spin { to { transform: rotate(360deg); } }

@media (min-width: 601px) {
  .mf-dialog {
    border-radius: 12px;
    height: auto;
    margin: auto;
    max-height: 90vh;
  }

  .mf-why {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Final 1.0.2 overrides after legacy component declarations. */
.mf-calc-row,.mf-pickup-item{border-color:var(--mf-border);border-radius:var(--mf-radius);box-shadow:var(--mf-shadow-sm);padding:16px}.mf-calculator__summary{align-items:center;background:color-mix(in srgb,var(--mf-primary) 9%,var(--mf-surface));border:1px solid color-mix(in srgb,var(--mf-primary) 18%,var(--mf-border));border-radius:var(--mf-radius);margin-block:18px;padding:18px}.mf-pickup form section,.mf-container form section{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);box-shadow:var(--mf-shadow-sm);padding:18px}.mf-stepper{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:14px;box-shadow:var(--mf-shadow-sm);gap:0;margin-bottom:20px;overflow:hidden}.mf-stepper li{border:0;color:var(--mf-muted);padding:12px 5px}.mf-stepper li[aria-current="step"]{background:color-mix(in srgb,var(--mf-primary) 10%,var(--mf-surface));box-shadow:inset 0 -3px var(--mf-primary)}

/* MetalFlow 1.0.3: quotations, material dialog and searchable material list. */
.mf-quotes .mf-quote-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%;overflow:hidden}
.mf-quotes .mf-material-card{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:row;align-content:start;width:100%;max-width:100%;min-width:0;overflow:hidden;text-align:left}
.mf-quotes .mf-material-card img,.mf-quotes .mf-material-card .mf-image-placeholder{grid-column:1;width:100%;max-width:100%;min-width:0}
.mf-quotes .mf-material-card strong{display:-webkit-box;grid-column:1;min-width:0;max-width:100%;margin:0;padding:12px 12px 3px;overflow:hidden;overflow-wrap:anywhere;word-break:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.18;white-space:normal}
.mf-quotes .mf-material-card>span:not(.mf-material-card__label){display:block;grid-column:1;min-width:0;max-width:100%;padding:2px 12px 12px;overflow:hidden;color:var(--mf-primary);font-weight:800;line-height:1.2;white-space:nowrap;text-overflow:ellipsis}
.mf-quotes .mf-material-card__label{box-sizing:border-box;max-width:calc(100% - 24px);padding:6px 10px;overflow:hidden;font-size:clamp(.68rem,2.8vw,.82rem);line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
.mf-dialog[data-mf-material-dialog]{box-sizing:border-box;width:min(calc(100% - 24px),560px);height:auto;max-height:calc(100dvh - 24px);margin:auto;padding:18px;border:0;border-radius:var(--mf-radius-lg);overflow-y:auto;background:var(--mf-surface);box-shadow:var(--mf-shadow)}
.mf-dialog[data-mf-material-dialog] .mf-dialog__close{position:sticky;z-index:3;top:0;float:right;display:grid;place-items:center;width:46px;min-width:46px;height:46px;min-height:46px;margin:0 0 -46px auto;padding:0;border:1px solid color-mix(in srgb,var(--mf-primary) 18%,var(--mf-border));border-radius:999px;background:color-mix(in srgb,var(--mf-surface) 92%,transparent);color:var(--mf-primary);font-size:1.45rem;line-height:1;box-shadow:var(--mf-shadow-sm)}
.mf-dialog[data-mf-material-dialog] [data-mf-material-dialog-content]{display:grid;gap:10px;clear:both;min-width:0}
.mf-material-dialog__image{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/10;border-radius:16px;object-fit:cover}.mf-material-dialog__title{margin:4px 0 0;font-size:clamp(1.55rem,6vw,2rem);line-height:1.12;overflow-wrap:anywhere}.mf-material-dialog__price{color:var(--mf-primary);font-size:clamp(1.45rem,6vw,1.9rem);line-height:1.1}.mf-material-dialog__label{justify-self:start;max-width:100%;padding:5px 10px;border-radius:999px;background:var(--mf-success-soft);color:var(--mf-success);font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-material-dialog__description{margin:0;color:var(--mf-text);line-height:1.5}.mf-material-dialog__warning{margin:2px 0 0;padding:12px;border-radius:12px;background:var(--mf-warning-soft);color:color-mix(in srgb,var(--mf-warning) 72%,#000);line-height:1.45}.mf-material-dialog__actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:4px}.mf-material-dialog__actions .mf-button{box-sizing:border-box;width:100%;min-height:48px;margin:0;border-radius:var(--mf-radius-sm);text-align:center}.mf-button--tertiary{background:transparent;border:1px solid var(--mf-border);color:var(--mf-text)}
.mf-calc-row>label:first-child,.mf-pickup-item>label:first-child{position:relative;z-index:5;min-width:0}.mf-calc-options{position:absolute!important;z-index:100!important;top:calc(100% + 6px)!important;right:0!important;left:0!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;width:100%!important;max-width:100%!important;max-height:360px!important;margin:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;border:1px solid var(--mf-border)!important;border-radius:14px!important;background:var(--mf-surface)!important;box-shadow:var(--mf-shadow)!important;overscroll-behavior:contain}.mf-calc-options[hidden]{display:none!important}.mf-calc-option{box-sizing:border-box!important;display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;align-items:center!important;flex:none!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:64px!important;margin:0!important;padding:6px 10px!important;gap:10px!important;border:0!important;border-bottom:1px solid var(--mf-border)!important;border-radius:0!important;background:var(--mf-surface)!important;color:var(--mf-text)!important;text-align:left!important;box-shadow:none!important}.mf-calc-option:last-child{border-bottom:0!important}.mf-calc-option:hover,.mf-calc-option:focus-visible{background:var(--mf-surface-soft)!important;outline:3px solid var(--mf-focus);outline-offset:-3px}.mf-calc-option img,.mf-calc-option__placeholder{box-sizing:border-box;width:52px!important;height:52px!important;min-width:52px!important;border-radius:10px!important;object-fit:cover}.mf-calc-option__details{display:grid;gap:3px;min-width:0;max-width:100%;overflow:hidden}.mf-calc-option__details strong,.mf-calc-option__details small{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-calc-option__details strong{font-size:.96rem}.mf-calc-option__details small{color:var(--mf-muted);font-size:.78rem;font-weight:500}
.mf-calculator:has(.mf-calc-options:not([hidden])) [data-mf-calc-add],.mf-pickup:has(.mf-calc-options:not([hidden])) [data-mf-pickup-add]{visibility:hidden}
@media(max-width:430px){.mf-quotes .mf-quote-grid{gap:10px}.mf-quotes .mf-material-card strong{font-size:.93rem;padding-inline:9px}.mf-quotes .mf-material-card>span:not(.mf-material-card__label){font-size:.9rem;padding-inline:9px}.mf-dialog[data-mf-material-dialog]{width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:12px}.mf-material-dialog__image{aspect-ratio:16/9}}

/* MetalFlow 1.0.5.2: shared public button refinement. */
.mf-public .mf-button,.mf-dialog .mf-button{border-radius:var(--mf-button-radius);font-weight:750;line-height:1.2;min-height:var(--mf-button-height);padding:10px 17px}
.mf-public .mf-button--danger,.mf-dialog .mf-button--danger{background:var(--mf-danger);border-color:var(--mf-danger);color:var(--mf-surface)}
.mf-step-actions{align-items:center;flex-wrap:wrap;gap:10px}
.mf-step-actions .mf-button{flex:1 1 132px;max-width:100%}
.mf-category-chips button{border-radius:10px;cursor:pointer;flex:0 0 auto;line-height:1.2;transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,color 160ms ease,transform 160ms ease}
.mf-public-nav button{cursor:pointer;transition:background-color 160ms ease,color 160ms ease}
.mf-dialog__close{align-items:center;border:1px solid var(--mf-border);box-shadow:var(--mf-button-shadow);cursor:pointer;display:inline-flex;justify-content:center;padding:0;transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,color 160ms ease,transform 160ms ease}
.mf-photo-previews button,.mf-calc-row__remove{align-items:center;background:var(--mf-danger-soft);border:1px solid color-mix(in srgb,var(--mf-danger) 18%,var(--mf-border));border-radius:10px;color:var(--mf-danger);cursor:pointer;display:inline-flex;font:inherit;font-weight:700;justify-content:center;line-height:1.2;min-height:44px;padding:8px 12px;text-decoration:none;transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease}
.mf-photo-previews button{width:100%}
@media(hover:hover){.mf-category-chips button:hover:not(:disabled){border-color:color-mix(in srgb,var(--mf-primary) 45%,var(--mf-border));box-shadow:var(--mf-button-shadow);transform:translateY(-1px)}.mf-public-nav button:hover{background:color-mix(in srgb,var(--mf-primary) 6%,var(--mf-surface))}.mf-dialog__close:hover{background:color-mix(in srgb,var(--mf-primary) 8%,var(--mf-surface));border-color:color-mix(in srgb,var(--mf-primary) 34%,var(--mf-border));color:var(--mf-primary)}.mf-photo-previews button:hover,.mf-calc-row__remove:hover{background:color-mix(in srgb,var(--mf-danger) 10%,var(--mf-surface));border-color:color-mix(in srgb,var(--mf-danger) 34%,var(--mf-border))}}

/* MetalFlow 1.0.5.6: balanced six-action public mobile navigation. */
.mf-public-nav__share{display:none}
@media(max-width:767px){
  .mf-public-nav{border-radius:18px 18px 0 0;box-shadow:0 -8px 28px rgb(15 23 42 / 11%);grid-template-columns:.92fr 1.13fr .95fr .95fr 1.13fr .92fr;min-height:72px;overflow:visible}
  .mf-public-nav.mf-public-nav a,.mf-public-nav.mf-public-nav button{background:var(--mf-surface);box-sizing:border-box;color:var(--mf-muted);display:grid;font:inherit;font-size:.7rem;font-weight:650;gap:4px;grid-template-rows:28px auto;letter-spacing:0;line-height:1.1;min-height:72px;min-width:0;padding:7px 1px 6px;place-items:center;text-align:center}
  .mf-public-nav .mf-public-nav__share{display:grid}
  .mf-public-nav .mf-icon{height:24px;transition:background-color 150ms ease,color 150ms ease,transform 100ms ease;width:24px}
  .mf-public-nav a>span,.mf-public-nav button>span{max-width:100%;overflow:visible;white-space:nowrap}
  .mf-public-nav [aria-current="page"]{color:var(--mf-primary);font-weight:800}
  .mf-public-nav [aria-current="page"]::after{background:var(--mf-primary);border-radius:999px;content:"";height:3px;left:27%;position:absolute;right:27%;top:0}
  .mf-public-nav a:active,.mf-public-nav button:active{background:color-mix(in srgb,var(--mf-primary) 8%,var(--mf-surface))}
  .mf-public-nav a:active .mf-icon,.mf-public-nav button:active .mf-icon{transform:scale(.9)}
  .mf-public-nav b{right:12%;top:5px}
}