/*
 * Mobile shell
 *
 * The desktop header remains its own component. At tablet and phone widths,
 * JavaScript supplies this smaller navigation shell so the two systems never
 * compete for the same space. The layout accounts for notches, browser UI,
 * 320 px phones, touch targets, and iOS form-zoom behavior.
 */

@media (max-width: 980px) {
  :root {
    --biem-mobile-header-content-height: 68px;
    --biem-mobile-header-height: calc(
      var(--biem-mobile-header-content-height) + env(safe-area-inset-top, 0px)
    );
  }

  html {
    scroll-padding-top: var(--biem-mobile-header-height);
  }

  body.mobile-shell-ready {
    --biem-mobile-header-content-height: 90px;
    min-width: 0;
    padding-top: var(--biem-mobile-header-height) !important;
    overflow-x: clip;
    transition: padding-top 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.mobile-shell-ready.scrolled-header {
    --biem-mobile-header-content-height: 68px;
  }

  /* The mobile shell replaces—not compresses—the desktop header. Keeping the
     original header in the DOM preserves the desktop fallback if JS is absent. */
  body.mobile-shell-ready > header.mock-header {
    display: none !important;
  }

  body.mobile-shell-ready .floating-contact-bubble {
    display: none !important;
  }

  body.mobile-shell-ready .mobile-site-header,
  body.mobile-shell-ready.scrolled-header .mobile-site-header,
  body.mobile-shell-ready:not(.scrolled-header) .mobile-site-header {
    position: fixed;
    z-index: 2200;
    inset: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px;
    align-items: center;
    column-gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--biem-mobile-header-height) !important;
    min-height: var(--biem-mobile-header-height) !important;
    max-height: var(--biem-mobile-header-height) !important;
    padding:
      env(safe-area-inset-top, 0px)
      max(20px, env(safe-area-inset-right, 0px))
      0
      max(20px, env(safe-area-inset-left, 0px));
    background: #08090a !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    transition:
      height 260ms cubic-bezier(0.22, 1, 0.36, 1),
      min-height 260ms cubic-bezier(0.22, 1, 0.36, 1),
      max-height 260ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 180ms ease !important;
  }

  .mobile-site-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: #fff;
    text-decoration: none;
  }

  .mobile-site-brand img {
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 64px;
    object-fit: contain;
    transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1), height 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-site-brand > span {
    display: grid;
    min-width: 0;
    margin-left: 12px;
    line-height: 1;
    text-transform: uppercase;
  }

  .mobile-site-brand strong {
    overflow: hidden;
    color: #fff;
    font-family: var(--biem-display-font, Arial, sans-serif);
    font-size: clamp(1.02rem, 4.65vw, 1.34rem);
    font-weight: 800;
    letter-spacing: 0.065em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-site-brand small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.76);
    font-family: var(--biem-display-font, Arial, sans-serif);
    font-size: clamp(0.6rem, 2.8vw, 0.76rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }

  .mobile-menu-trigger {
    display: inline-flex !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-items: center;
    justify-content: center;
    gap: 7px !important;
    width: 78px !important;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    color: #fff;
    font: 800 0.72rem/1 var(--biem-display-font, Arial, sans-serif) !important;
    letter-spacing: 0.09em;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    text-transform: uppercase;
    background: transparent;
    border: 0 !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  body.mobile-shell-ready.scrolled-header .mobile-site-brand img {
    width: 36px;
    height: 48px;
  }

  body.mobile-shell-ready.scrolled-header .mobile-site-brand > span {
    margin-left: 9px;
  }

  body.mobile-shell-ready.scrolled-header .mobile-site-brand strong {
    font-size: clamp(0.94rem, 4.2vw, 1.16rem);
  }

  body.mobile-shell-ready.scrolled-header .mobile-site-brand small {
    font-size: clamp(0.54rem, 2.4vw, 0.68rem);
  }

  .mobile-menu-trigger span {
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
  }

  .mobile-menu-trigger i,
  .mobile-menu-trigger i::before,
  .mobile-menu-trigger i::after {
    display: block;
    width: 15px;
    height: 1px;
    background: currentColor;
    content: "";
    transition: transform 180ms ease;
  }

  .mobile-menu-trigger i {
    position: relative;
  }

  .mobile-menu-trigger i::before,
  .mobile-menu-trigger i::after {
    position: absolute;
    left: 0;
  }

  .mobile-menu-trigger i::before {
    top: -5px;
  }

  .mobile-menu-trigger i::after {
    top: 5px;
  }

  .mobile-menu-trigger.is-open i {
    background: transparent;
    transform: none !important;
  }

  .mobile-menu-trigger.is-open i::before {
    top: 0;
    transform: rotate(45deg);
  }

  .mobile-menu-trigger.is-open i::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .mobile-menu-trigger:focus-visible,
  .mobile-site-menu a:focus-visible {
    outline: 2px solid #e1493a;
    outline-offset: -2px;
  }

  .mobile-site-menu {
    position: fixed;
    z-index: 2100;
    inset: var(--biem-mobile-header-height) 0 0;
    display: grid;
    align-content: start;
    gap: 22px;
    box-sizing: border-box;
    min-width: 0;
    padding:
      24px
      max(20px, env(safe-area-inset-right, 0px))
      max(32px, env(safe-area-inset-bottom, 0px))
      max(20px, env(safe-area-inset-left, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #fff;
    background: #101214;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.44);
    -webkit-overflow-scrolling: touch;
  }

  .mobile-site-menu[hidden] {
    display: none !important;
  }

  .mobile-site-menu-section {
    display: grid;
    gap: 2px;
  }

  .mobile-site-menu-section + .mobile-site-menu-section {
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mobile-site-menu-section p {
    margin: 0 0 5px;
    color: #e1493a;
    font: 800 0.72rem/1.2 var(--biem-display-font, Arial, sans-serif);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mobile-site-menu a {
    display: flex;
    align-items: center;
    min-height: 46px;
    color: #fff;
    font: 800 1.02rem/1.2 var(--biem-display-font, Arial, sans-serif);
    letter-spacing: 0.015em;
    text-decoration: none;
  }

  .mobile-site-menu-section--company {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-site-menu-section--company a {
    justify-content: center;
    min-height: 44px;
    font-size: 0.74rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .mobile-site-menu .mobile-site-menu-order {
    justify-content: center;
    min-height: 56px;
    padding: 0 20px;
    background: #bd241c;
    font-size: 0.92rem;
    text-transform: uppercase;
  }

  .mobile-site-menu .mobile-site-menu-phone {
    justify-content: center;
    min-height: 28px;
    color: rgba(255, 255, 255, 0.72);
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  body.mobile-menu-open {
    position: fixed;
    top: var(--biem-mobile-menu-scroll-y, 0px);
    width: 100%;
    overflow: hidden !important;
  }

  /* Mobile actions stay out of the header. They share the desktop contact
     control's scroll state: readable pills near the top, icon-only circles
     while the customer is moving through the page. */
  body.mobile-shell-ready .floating-contact-bubble,
  body.mobile-shell-ready .mobile-floating-cart {
    position: fixed;
    z-index: 2050;
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    min-height: 56px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
  }

  body.mobile-shell-ready .floating-contact-bubble {
    left: max(16px, env(safe-area-inset-left, 0px));
    display: inline-flex !important;
    width: min(236px, calc(100vw - 148px));
    min-width: 0;
    padding: 7px 14px 7px 8px;
  }

  body.mobile-shell-ready .floating-contact-bubble .floating-contact-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  body.mobile-shell-ready .floating-contact-bubble .floating-contact-copy strong {
    font-size: 0.82rem;
  }

  body.mobile-shell-ready .floating-contact-bubble .floating-contact-copy span {
    font-size: 0.64rem;
  }

  body.mobile-shell-ready .mobile-floating-cart {
    right: max(16px, env(safe-area-inset-right, 0px));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 108px;
    padding: 8px 14px;
    overflow: hidden;
    color: #fff;
    font: 800 0.78rem/1 var(--biem-display-font, Arial, sans-serif);
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    background: #17191a;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    transition:
      right 280ms cubic-bezier(0.22, 1, 0.36, 1),
      bottom 280ms cubic-bezier(0.22, 1, 0.36, 1),
      width 280ms cubic-bezier(0.22, 1, 0.36, 1),
      min-height 280ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 280ms cubic-bezier(0.22, 1, 0.36, 1),
      border-radius 280ms cubic-bezier(0.22, 1, 0.36, 1),
      background 180ms ease;
  }

  body.mobile-shell-ready .mobile-floating-cart img {
    display: block;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    filter: invert(1);
    object-fit: contain;
  }

  body.mobile-shell-ready .mobile-floating-cart span {
    overflow-wrap: normal;
    white-space: nowrap;
  }

  body.mobile-shell-ready .floating-contact-bubble.is-minimized,
  body.mobile-shell-ready .mobile-floating-cart.is-minimized {
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    width: 52px;
    min-height: 52px;
    padding: 6px;
    border-radius: 50%;
  }

  body.mobile-shell-ready .floating-contact-bubble.is-minimized {
    left: max(10px, env(safe-area-inset-left, 0px));
  }

  body.mobile-shell-ready .mobile-floating-cart.is-minimized {
    right: max(10px, env(safe-area-inset-right, 0px));
  }

  body.mobile-shell-ready .mobile-floating-cart.is-minimized img {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
  }

  body.mobile-shell-ready .mobile-floating-cart.is-minimized span {
    width: 0;
    opacity: 0;
    transform: translateX(12px);
  }

  /* The home headline keeps the same paired lockup as desktop, scaled for a
     narrow viewport instead of dropping the supplied brand mark entirely. */
  .hero .hero-brand-lockup {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(112px, 0.9fr) !important;
    align-items: center !important;
    gap: clamp(12px, 4vw, 22px) !important;
  }

  .hero .hero-logo-mark {
    display: block !important;
    width: min(100%, 178px) !important;
    max-height: 260px !important;
    margin: 0 !important;
    justify-self: center;
    object-fit: contain;
  }

  .hero .hero-content h1.split-hero-headline {
    max-width: 6.8ch !important;
    margin-bottom: 0 !important;
    font-size: clamp(2.65rem, 13.2vw, 4.3rem) !important;
  }

  /* Builder: preserve the desktop visual language without asking a phone to
     fit two fields side by side. Inputs keep a 16px font to stop iOS zoom. */
  body.products-builder-page .product-mode-workspace {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 16px;
  }

  body.products-builder-page .product-mode-surface {
    min-height: 0;
    padding: 24px 18px 34px;
    background: rgba(16, 18, 20, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  body.products-builder-page .product-mode-switch {
    width: 100%;
    margin-bottom: 26px;
  }

  body.products-builder-page .product-mode-switch__link {
    min-height: 54px;
    padding-inline: 8px;
    font-size: clamp(0.78rem, 3.75vw, 0.98rem);
  }

  body.products-builder-page .order-workspace-surface > h1 {
    margin-bottom: 26px;
    font-size: clamp(1.9rem, 9vw, 2.65rem);
    line-height: 1.04;
  }

  body.products-builder-page .order-workspace-surface .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
  }

  body.products-builder-page .order-workspace-surface .field {
    min-width: 0;
  }

  body.products-builder-page .order-workspace-surface .field label {
    margin-bottom: 8px;
    font-size: 0.95rem;
  }

  body.products-builder-page .order-workspace-surface .field input,
  body.products-builder-page .order-workspace-surface .field select,
  body.products-builder-page .order-workspace-surface .field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    font-size: 16px;
  }

  body.products-builder-page .order-workspace-surface .field-note {
    margin-top: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  body.products-builder-page .builder-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.products-builder-page .builder-actions .big-btn {
    width: 100%;
    min-height: 54px;
    margin: 0;
  }

  /* Steel Spec Tool: a mobile-only shape directory follows the site's dark
     language. It replaces the cramped native control without changing the
     desktop selector or the underlying standard select used by the data code. */
  .steel-shape-reference-page .shape-library-shape-picker {
    display: grid;
    min-width: 0;
  }

  .steel-shape-reference-page .shape-library-family-native {
    display: none !important;
  }

  .steel-shape-reference-page .shape-library-family-trigger {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 0 16px;
    overflow: hidden;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.012em;
    line-height: 1.25;
    text-align: left;
    background: #17191a;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .steel-shape-reference-page .shape-library-family-trigger > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .steel-shape-reference-page .shape-library-family-trigger-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: #f05349;
    font-family: var(--biem-display-font, Arial, sans-serif);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .steel-shape-reference-page .shape-library-family-trigger-action::after {
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    content: "";
    transform: rotate(45deg) translateY(-2px);
    transition: transform 180ms ease;
  }

  .steel-shape-reference-page .shape-library-family-trigger[aria-expanded="true"] .shape-library-family-trigger-action::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  .steel-shape-reference-page .shape-library-family-trigger:focus-visible {
    outline: 3px solid rgba(226, 53, 43, 0.78);
    outline-offset: 3px;
    border-color: #e2352b;
  }

  .steel-shape-reference-page .shape-library-family-directory[hidden] {
    display: none !important;
  }

  .steel-shape-reference-page .shape-library-workspace {
    overflow: visible !important;
  }

  .steel-shape-reference-page .shape-library-family-directory:not([hidden]) {
    position: relative;
    z-index: 4;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100vw;
    max-width: 100vw;
    margin: 16px calc(50% - 50vw) 0;
    padding: 0;
    overflow: hidden;
    background: #101213;
    border-top: 3px solid #d93429;
    border-radius: 0;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.4);
  }

  .steel-shape-reference-page .shape-library-family-directory-intro {
    grid-column: 1 / -1;
    padding: 24px max(20px, env(safe-area-inset-left, 0px));
    background:
      linear-gradient(105deg, rgba(208, 42, 32, 0.16), transparent 52%),
      #16191a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .steel-shape-reference-page .shape-library-family-directory-intro p {
    margin: 0 0 7px;
    color: #ef554a;
    font-family: var(--biem-display-font, Arial, sans-serif);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .steel-shape-reference-page .shape-library-family-directory-intro h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.7rem, 8vw, 2.25rem);
    line-height: 1;
  }

  .steel-shape-reference-page .shape-library-family-group {
    min-width: 0;
    padding: 20px max(16px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .steel-shape-reference-page .shape-library-family-group:nth-of-type(odd) {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .steel-shape-reference-page .shape-library-family-group h3 {
    margin: 0 0 9px;
    color: #ed5147;
    font-family: var(--biem-display-font, Arial, sans-serif);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .steel-shape-reference-page .shape-library-family-options {
    display: grid;
    gap: 6px;
  }

  .steel-shape-reference-page .shape-library-family-option {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.84);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .steel-shape-reference-page .shape-library-family-option[aria-current="true"] {
    color: #ffffff;
    background: rgba(208, 42, 32, 0.2);
    border-color: rgba(240, 83, 73, 0.62);
  }

  .steel-shape-reference-page .shape-library-family-option:focus-visible {
    outline: 2px solid #f05349;
    outline-offset: 2px;
  }

  /* The first column is the shape designation. Every following column is a
     measurement or a weight, so align its value with the centered heading. */
  .steel-shape-reference-page .shape-library-table th:not(:first-child),
  .steel-shape-reference-page .shape-library-table td:not(:first-child) {
    text-align: center;
  }

  .steel-shape-reference-page .shape-library-table th:first-child,
  .steel-shape-reference-page .shape-library-table td:first-child {
    text-align: left;
  }
}

@media (min-width: 981px) {
  .mobile-site-header,
  .mobile-site-menu,
  .mobile-menu-trigger {
    display: none !important;
  }
}

@media (max-width: 360px) {
  body.mobile-shell-ready {
    --biem-mobile-header-content-height: 78px;
  }

  body.mobile-shell-ready.scrolled-header {
    --biem-mobile-header-content-height: 64px;
  }

  .mobile-site-header {
    grid-template-columns: minmax(0, 1fr) 56px;
    column-gap: 5px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .mobile-site-brand img {
    width: 32px;
    height: 44px;
  }

  .mobile-site-brand > span {
    margin-left: 7px;
  }

  .mobile-menu-trigger {
    gap: 4px !important;
    width: 56px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.055em;
  }

  .hero .hero-brand-lockup {
    grid-template-columns: minmax(0, 1.08fr) minmax(88px, 0.78fr) !important;
    gap: 9px !important;
  }

  .hero .hero-logo-mark {
    width: min(100%, 128px) !important;
    max-height: 200px !important;
  }

  .hero .hero-content h1.split-hero-headline {
    font-size: clamp(2.28rem, 12.5vw, 3.3rem) !important;
  }

  .steel-shape-reference-page .shape-library-family-directory:not([hidden]) {
    grid-template-columns: 1fr;
  }

  .steel-shape-reference-page .shape-library-family-group:nth-of-type(odd) {
    border-left: 0;
  }
}