/* Final desktop visual layer. It intentionally loads after the legacy prototype stylesheet. */

@media (min-width: 901px) {
  .site-header {
    position: relative;
    height: 98px;
    border: 0;
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
    box-shadow: 0 1px 0 #dce1e6, 0 8px 22px rgb(22 31 42 / 4%);
  }

  .site-header::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--amber) 0 22%, #20252b 22% 24%, #e5e8ec 24% 100%);
  }

  .header-inner {
    grid-template-columns: 188px 320px minmax(168px, 1fr) 218px;
    gap: 16px;
  }

  .brand {
    position: relative;
    width: 166px;
    max-width: 166px;
    height: 72px;
    padding: 5px 16px 5px 0;
    overflow: visible;
  }

  .brand::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 0;
    width: 3px;
    height: 48px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--amber) 0 48%, #252a30 48% 100%);
  }

  .brand img { width: 150px; height: 62px; }

  .city-nav {
    height: 44px;
    gap: 3px;
    padding: 4px;
    border: 1px solid #dde2e7;
    border-radius: 8px;
    background: #f3f5f7;
  }

  .city-nav a {
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 5px;
    font-size: 12px;
  }

  .city-nav a:hover { background: rgb(255 255 255 / 68%); }
  .city-nav a.active { background: #fff; box-shadow: 0 1px 4px rgb(22 31 42 / 10%); }
  .city-nav a.active::after { right: 12px; bottom: 2px; left: 12px; }

  .certificates {
    height: 66px;
    justify-content: center;
    gap: 8px;
    padding: 4px 8px;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    background: rgb(255 255 255 / 80%);
  }

  .certificate { width: 51px; height: 56px; grid-template-rows: 39px 13px; }
  .certificate img { width: 37px; height: 37px; }
  .certificate span { font-size: 8px; }

  .phone-cluster {
    gap: 3px;
    padding: 8px 10px 8px 13px;
    border: 1px solid #e0e4e8;
    border-left: 3px solid var(--amber);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(22 31 42 / 4%);
  }

  .phone-cluster a { grid-template-columns: 51px minmax(0, 1fr); gap: 6px; }
  .phone-cluster span { font-size: 12px; }

  .filter-bar { overflow: visible; }

  .status-filter { position: relative; width: 205px; height: 42px; }
  .status-filter-toggle {
    position: relative;
    width: 100%;
    height: 42px;
    display: grid;
    grid-template-rows: 11px minmax(0, 1fr);
    align-content: center;
    gap: 1px;
    padding: 5px 34px 5px 11px;
    border: 1px solid #cbd2da;
    border-radius: 6px;
    background: #fff;
    text-align: left;
    cursor: pointer;
  }

  .status-filter-toggle:hover { border-color: #aeb6bf; }
  .status-filter-toggle[aria-expanded="true"] { border-color: var(--amber); box-shadow: 0 0 0 3px rgb(255 176 0 / 11%); }
  .status-filter-toggle > span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
  }

  .status-filter-toggle > strong { align-self: end; color: #37414c; font-size: 11px; font-weight: 700; line-height: 1.15; }
  .status-filter-toggle > i {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #59636f;
    border-bottom: 1.5px solid #59636f;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 160ms ease;
  }

  .status-filter-toggle[aria-expanded="true"] > i { transform: translateY(-25%) rotate(225deg); }
  .status-filter-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 7px);
    left: 0;
    width: 220px;
    padding: 6px;
    border: 1px solid #cfd5dc;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 16px 34px rgb(22 31 42 / 14%);
  }

  .status-filter-menu::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 12px;
    left: 12px;
    height: 2px;
    background: var(--amber);
  }

  .status-filter-menu button {
    width: 100%;
    height: 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 0 9px 0 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #3c4651;
    font-size: 11px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
  }

  .status-filter-menu button:hover { background: #f4f6f8; }
  .status-filter-menu button.active { background: var(--amber-soft); color: var(--ink); font-weight: 750; }
  .status-filter-menu button i {
    width: 16px;
    height: 16px;
    border: 1px solid #c7ced6;
    border-radius: 50%;
    background: #fff;
  }

  .status-filter-menu button.active i { border-color: var(--amber); box-shadow: inset 0 0 0 4px #fff; background: var(--amber); }

  .filter-reset {
    position: relative;
    height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px 0 31px;
    border: 1px solid #d3d9df;
    border-radius: 5px;
    background: #fff;
    color: #525c67;
    box-shadow: 0 1px 2px rgb(22 31 42 / 3%);
  }

  .filter-reset::before,
  .reset-filter > i { width: 13px; height: 13px; border: 1.5px solid #69737e; border-left-color: transparent; border-radius: 50%; }
  .filter-reset::before { content: ""; position: absolute; left: 10px; }
  .filter-reset::after,
  .reset-filter > i::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-right: 4px solid #69737e;
    border-bottom: 3px solid transparent;
    transform: translate(-2px, -1px) rotate(18deg);
  }

  .filter-reset:hover { border-color: #adb6bf; background: #f7f8fa; }

  .active-filter-row {
    min-height: 48px;
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
    padding: 7px 8px;
    border: 1px solid #dfe3e8;
    border-radius: 7px;
    background: #fafbfc;
  }

  .active-filter-set { min-width: 0; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; }
  .active-chip {
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 5px 0 10px;
    border: 1px solid #cfd5dc;
    border-radius: 16px;
    background: #fff;
    color: #303943;
    box-shadow: 0 1px 2px rgb(22 31 42 / 3%);
    cursor: pointer;
  }

  .active-chip:hover { border-color: #b9a85f; background: #fffdf8; }
  .active-chip > i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--amber); }
  .active-chip .active-chip-label { margin: 0; color: #303943; font-size: 10px; font-weight: 700; line-height: 1; }
  .active-chip .active-chip-remove {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    margin: 0;
    border-radius: 50%;
    background: #f0f2f4;
    color: #4f5964;
    font: 15px/1 Arial, sans-serif;
  }

  .active-chip:hover .active-chip-remove { background: #e5e8eb; color: var(--ink); }
  .active-filter-row .reset-filter {
    position: relative;
    min-width: max-content;
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 0 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #59636e;
    font-size: 10px;
    font-weight: 700;
  }

  .active-filter-row .reset-filter:hover { background: #eef1f3; color: var(--ink); }
  .reset-filter > i { position: relative; flex: 0 0 auto; }

  .product-entry.selected-entry {
    z-index: 3;
    isolation: isolate;
    overflow: hidden;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 10px 24px rgb(22 31 42 / 7%);
  }

  .product-entry.selected-entry::after {
    content: "";
    position: absolute;
    z-index: 12;
    inset: 0;
    border: 1px solid rgb(255 176 0 / 72%);
    border-radius: 7px;
    opacity: 1;
    pointer-events: none;
    animation: selected-outline-in 300ms cubic-bezier(.22, .8, .28, 1) both;
  }

  .catalog-layout.is-collapsing .product-entry.selected-entry::after { animation: selected-outline-out 280ms cubic-bezier(.4, 0, .2, 1) both; }
  .product-card.price-row.selected { background: linear-gradient(90deg, #fffdf8 0, #fff 52%); box-shadow: none; }
  .selected-row-toolbar {
    max-height: var(--selected-row-expanded-height, none);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    overflow: hidden;
    padding: 9px 10px 10px;
    border: 0;
    border-top: 1px solid #e3e7eb;
    background: #fff;
    box-shadow: inset 0 8px 18px -22px rgb(22 31 42 / 45%);
    animation: refined-row-expand 300ms cubic-bezier(.22, .8, .28, 1) both;
  }

  .catalog-layout.is-collapsing .selected-row-toolbar { animation: refined-row-collapse 280ms cubic-bezier(.4, 0, .2, 1) both; }
  .selected-row-summary { position: relative; gap: 2px; padding-left: 12px; }
  .selected-row-summary::before { content: ""; position: absolute; top: 5px; left: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
  .selected-row-summary small { color: #68727d; letter-spacing: .075em; }
  .selected-row-summary strong { font-size: 11.5px; }
  .selected-row-actions button { min-height: 31px; border-radius: 5px; box-shadow: 0 1px 2px rgb(22 31 42 / 4%); }
  .selected-row-actions .row-primary { border-color: var(--amber); background: var(--amber); color: #211900; }

  .analogue-offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .analogue-intro,
  .analogue-stock-card,
  .analogue-manufacture-card {
    min-height: 78px;
    align-content: start;
    gap: 4px;
    padding: 9px 10px;
    border: 1px solid #d7dce2;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(22 31 42 / 4%);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  }

  .analogue-intro { border: 1px solid #d7dce2; background: #fff; }
  .analogue-intro.is-empty,
  .analogue-stock-card.is-unavailable { border-color: #e0e4e8; background: #fafbfc; box-shadow: none; }
  button.analogue-intro:hover,
  .analogue-stock-card:not(.is-unavailable):hover,
  .analogue-manufacture-card:hover { border-color: #c8a52c; box-shadow: 0 5px 13px rgb(22 31 42 / 8%); transform: translateY(-1px); }

  .analogue-eyebrow,
  .analogue-status { display: inline-flex; align-items: center; gap: 6px; color: #67717c; font-size: 7.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
  .analogue-eyebrow > i,
  .analogue-status > i { width: 8px; height: 8px; flex: 0 0 auto; border: 2px solid var(--amber); border-radius: 50%; background: #fff; }
  .analogue-status.in-stock > i { border-color: var(--green); box-shadow: inset 0 0 0 2px #fff; background: var(--green); }
  .analogue-status.make-ready > i { box-shadow: inset 0 0 0 2px #fff; background: var(--amber); }
  .analogue-intro strong,
  .analogue-stock-card strong,
  .analogue-manufacture-card strong { font-size: 11px; font-weight: 760; line-height: 1.2; }
  .analogue-intro span:not(.analogue-eyebrow),
  .analogue-stock-card small,
  .analogue-manufacture-card small { font-size: 8.5px; line-height: 1.28; }
  .analogue-stock-card b,
  .analogue-manufacture-card b { margin-top: auto; color: #5c4b0d; font-size: 8.5px; }

  .details-panel {
    border-color: #cbd2da;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 18px 42px rgb(22 31 42 / 12%), 0 2px 6px rgb(22 31 42 / 5%);
  }

  .details-inner { padding: 0 18px 18px; }
  .details-product-hero {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 13px;
    margin: 0 -18px;
    padding: 18px 48px 17px 18px;
    border-bottom: 1px solid #dfe3e8;
    background: linear-gradient(122deg, #f7f8fa 0%, #fff 68%, var(--amber-soft) 100%);
  }

  .details-product-hero::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--amber) 0 34%, #23282e 34% 39%, transparent 39%); }
  .details-product-visual { width: 72px; height: 72px; border-color: #cfd5dc; border-radius: 8px; box-shadow: 0 4px 12px rgb(22 31 42 / 7%); }
  .details-product-visual img { width: 68px; height: 68px; }
  .details-product-copy .panel-kicker { width: max-content; max-width: 100%; padding: 3px 6px; border: 1px solid #d9dee4; border-radius: 4px; background: rgb(255 255 255 / 82%); color: #69737e; }
  .details-product-copy h2 { font-size: 24px; letter-spacing: -.25px; }
  .details-product-copy p { color: #4d5762; }
  .details-product-copy .availability { width: max-content; max-width: 100%; display: inline-flex; align-items: center; padding: 4px 7px; border: 1px solid #b8decf; border-radius: 4px; background: #edf9f4; color: #08734e; font-size: 10.5px; font-weight: 700; }
  .details-product-hero .details-close { top: 14px; right: 14px; width: 30px; height: 30px; border: 1px solid #d7dce2; border-radius: 50%; background: rgb(255 255 255 / 86%); font-size: 21px; }
  .details-product-hero .details-close:hover { border-color: #aeb6bf; background: #fff; }
  .details-section { padding: 17px 3px; }
  .details-section h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 17px; letter-spacing: -.12px; }
  .details-section h3::before { content: ""; width: 3px; height: 15px; flex: 0 0 auto; border-radius: 2px; background: var(--amber); }
  .position-section .detail-grid { grid-template-columns: 112px minmax(0, 1fr); border: 0; border-top: 1px solid #dfe3e8; border-bottom: 1px solid #dfe3e8; border-radius: 0; background: #fff; }
  .position-section .detail-grid dt,
  .position-section .detail-grid dd { padding: 8px 5px; border-bottom: 1px solid #e6e9ed; }
  .position-section .detail-grid dt { border-right: 0; background: transparent; color: #76808b; }
}

/* 2026-08-27: catalogue groups, multi-grade selection and request feedback */
@media (min-width: 901px) {
  .shape-strip {
    height: 164px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .shape-button {
    display: grid;
    grid-template-rows: 104px auto;
    align-content: start;
    justify-items: center;
    gap: 2px;
    padding: 4px 12px 10px;
  }

  .shape-button img {
    width: 112px;
    height: 104px;
    margin: 0 auto;
    object-fit: contain;
    mix-blend-mode: normal;
  }

  .shape-button strong {
    max-width: 250px;
    font-size: clamp(13px, .92vw, 16px);
    line-height: 1.16;
    text-wrap: balance;
  }

  .shape-button small {
    position: absolute;
    top: 91px;
    color: #7a838e;
    font-size: 11px;
    font-weight: 650;
  }

  .shape-button:has(> small) strong {
    padding-top: 12px;
  }
}

.remelt-filter {
  width: 100%;
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 8px;
  padding: 8px 10px;
  border: 1px solid #d7dce2;
  border-radius: 7px;
  background: #fff;
  color: #202732;
  text-align: left;
  cursor: pointer;
}

.remelt-filter span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.remelt-filter strong {
  font-size: 13px;
  letter-spacing: .02em;
}

.remelt-filter small {
  color: #7a838e;
  font-size: 10px;
  line-height: 1.2;
}

.remelt-filter > i,
.grade-check {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid #bdc5ce;
  border-radius: 4px;
  background: #fff;
}

.remelt-filter.active {
  border-color: var(--amber);
  background: var(--amber-soft);
}

.remelt-filter.active > i,
.grade-row.active .grade-check {
  border-color: var(--amber);
  background: var(--amber);
}

.remelt-filter.active > i::after,
.grade-row.active .grade-check::after {
  content: "";
  display: block;
  width: 7px;
  height: 4px;
  margin: 5px 0 0 4px;
  border: solid #17202a;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.grade-row {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.grade-row .grade-check {
  margin-right: 5px;
  opacity: 0;
  transform: scale(.8);
  transition: opacity 140ms ease, transform 140ms ease;
}

.grade-row.active .grade-check {
  opacity: 1;
  transform: scale(1);
}

.analogue-target {
  position: relative;
  scroll-margin-block: 160px;
  border: 1px solid var(--amber);
  border-radius: 7px;
  background: #fffaf0;
}

.analogue-target-label {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid #ecd49a;
  color: #654600;
  font-size: 12px;
  font-weight: 800;
}

.analogue-target-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgb(245 169 0 / 14%);
}

.request-flight {
  position: fixed;
  z-index: 9999;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #d59000;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 10px 24px rgb(25 30 36 / 22%);
  pointer-events: none;
}

.request-flight i,
.request-flight i::after {
  width: 11px;
  height: 2px;
  display: block;
  border-radius: 2px;
  background: #17202a;
}

.request-flight i::after {
  content: "";
  transform: rotate(90deg);
}

.request-button.request-arrived,
.m-request-shortcut.request-arrived,
.mobile-marketplace-nav [data-m-tab="request"].request-arrived {
  animation: request-arrived 420ms cubic-bezier(.2,.8,.2,1);
}

@keyframes request-arrived {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.09); }
}

.forge-glyph::before {
  content: "";
  width: 18px;
  height: 10px;
  display: block;
  margin: 9px auto 0;
  border: 2px solid currentColor;
  border-top-width: 5px;
  border-radius: 2px 2px 5px 5px;
}

/* Match the compact desktop panel's sticky edge to the wheel handoff safe
   viewport so the panel never sits under the catalogue header or oscillates. */
@media (min-width: 901px) and (max-width: 1424px) {
  .catalog-layout.with-details > .details-panel {
    top: 80px;
  }
}

@media (max-width: 900px) {
  .m-category-tile {
    width: 124px;
  }

  .m-category-tile img,
  .m-category-grid-image img {
    object-fit: contain;
    mix-blend-mode: normal;
  }

  .m-category-tile strong {
    min-height: 32px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.16;
  }

  .m-remelt-row,
  .remelt-mobile-option {
    background: #f7f8fa;
  }

  .m-remelt-row.active,
  .remelt-mobile-option.active {
    background: #fff8e8;
  }
}

/* 2026-08-27: one coordinated category-card system for all six form groups. */
@media (min-width: 901px) {
  .shape-strip {
    height: 178px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    overflow: hidden !important;
    border: 1px solid #d9dee4 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgb(21 29 38 / 3%) !important;
  }

  .shape-strip > .shape-button,
  .shape-strip > .shape-button:first-child,
  .shape-strip > .shape-button:last-child {
    position: relative;
    display: grid !important;
    grid-template-rows: 108px minmax(43px, auto) !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 6px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 8px 10px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    isolation: isolate;
    transition: border-color 140ms ease, background-color 140ms ease;
  }

  .shape-strip > .shape-button + .shape-button {
    border-left-color: #e1e5e9 !important;
  }

  .shape-strip > .shape-button img {
    position: relative;
    z-index: 1;
    display: block;
    width: 112px !important;
    height: 108px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    mix-blend-mode: normal !important;
    transform: translateZ(0);
    transition: transform 160ms cubic-bezier(.22, .72, .24, 1);
  }

  .shape-strip > .shape-button strong {
    display: -webkit-box !important;
    align-self: center;
    overflow: hidden;
    width: 100%;
    max-width: 205px !important;
    min-height: 34px;
    color: #252c34;
    font-size: clamp(12px, .82vw, 14px) !important;
    font-weight: 690 !important;
    line-height: 1.2 !important;
    letter-spacing: -.1px;
    text-align: center;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .shape-strip > .shape-button:is([data-shape="round"], [data-shape="ingot"]) > strong {
    display: block !important;
    -webkit-line-clamp: unset;
  }

  .shape-strip > .shape-button[data-shape="round"] > strong {
    font-size: clamp(9px, .82vw, 14px) !important;
    letter-spacing: -.16px;
  }

  .shape-strip > .shape-button:is([data-shape="round"], [data-shape="ingot"]) > strong > span {
    display: block;
    white-space: nowrap;
  }

  .shape-strip > .shape-button.active,
  .shape-strip > .shape-button:first-child.active,
  .shape-strip > .shape-button:last-child.active {
    z-index: 2;
    border-color: #c9901e !important;
    background: #fffbf2 !important;
    box-shadow: none !important;
  }

  .shape-strip > .shape-button.active + .shape-button:not(.active) {
    border-left-color: transparent !important;
  }

  .shape-strip > .shape-button:focus-visible {
    z-index: 3;
    outline: 1px solid #3f4852 !important;
    outline-offset: -3px !important;
    box-shadow: none !important;
  }

  @media (hover: hover) {
    .shape-strip > .shape-button:hover:not(.active) {
      background: #f8f9fa !important;
    }

    .shape-strip > .shape-button:hover img {
      transform: translate3d(0, -1px, 0) scale(1.018);
    }
  }
}

@media (max-width: 900px) {
  .mobile-marketplace .m-category-rail {
    gap: 9px;
    padding-bottom: 16px;
  }

  .mobile-marketplace .m-category-tile {
    flex: 0 0 126px;
    width: 126px;
    grid-template-rows: 82px minmax(34px, auto);
    gap: 7px;
  }

  .mobile-marketplace .m-category-tile > span {
    width: 82px;
    height: 82px;
    border-color: #dfe3e7;
    border-radius: 10px;
    background: #f5f6f7;
  }

  .mobile-marketplace .m-category-tile img {
    width: 74px;
    height: 74px;
  }

  .mobile-marketplace .m-category-tile strong {
    min-height: 30px;
    color: #4d5660;
    font-size: 10.5px;
    font-weight: 690;
    line-height: 14px;
    letter-spacing: -.04px;
    text-align: left;
    -webkit-line-clamp: 2;
  }

  .mobile-marketplace .m-category-tile.active > span {
    border-color: #c9901e;
    background: #fffbf2;
    box-shadow: none !important;
  }

  .mobile-marketplace .m-category-grid {
    grid-auto-rows: 190px;
    gap: 10px;
  }

  .mobile-marketplace .m-category-grid > button {
    grid-template-rows: 108px minmax(62px, auto);
    min-height: 190px;
    padding: 8px;
    overflow: hidden;
    border-color: #dfe3e7;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(21 29 38 / 3%);
  }

  .mobile-marketplace .m-category-grid-image {
    border-radius: 8px;
    background: #f5f6f7;
  }

  .mobile-marketplace .m-category-grid-image img {
    width: 98px;
    height: 98px;
  }

  .mobile-marketplace .m-category-grid > button > span:nth-child(2) {
    align-content: start;
    padding: 7px 19px 0 2px;
  }

  .mobile-marketplace .m-category-grid strong {
    min-height: 32px;
    font-size: 11.5px;
    font-weight: 720;
    line-height: 14px;
    letter-spacing: -.08px;
    -webkit-line-clamp: 3;
  }

  .mobile-marketplace .m-category-grid small {
    margin-top: 3px;
    font-size: 9.5px;
    line-height: 12px;
  }

  .mobile-marketplace .m-category-grid > button > .m-icon {
    right: 9px;
    bottom: 13px;
    width: 16px;
    height: 16px;
  }

  .mobile-marketplace .m-category-grid > button.active {
    border-color: #c9901e;
    background: #fffbf2;
    box-shadow: none !important;
  }
}

@media (max-width: 350px) {
  .mobile-marketplace .m-category-grid {
    grid-auto-rows: 184px;
    gap: 8px;
  }

  .mobile-marketplace .m-category-grid > button {
    grid-template-rows: 100px minmax(64px, auto);
    min-height: 184px;
  }

  .mobile-marketplace .m-category-grid-image img {
    width: 90px;
    height: 90px;
  }
}

/* Keep only the catalogue filter row available under the existing sticky
   search header. Product forms and catalogue modes continue to scroll away. */
@media (min-width: 901px) {
  .filter-bar {
    position: sticky;
    z-index: 11;
    top: 86px;
  }
}

/* Large desktop monitors need the same readable density users approved at
   125% browser zoom. Scale the established 1392px composition as one layout
   so typography, controls, spacing and all grid proportions stay in sync. */
@media (min-width: 1800px) {
  body {
    zoom: 1.25;
  }

  .grade-sidebar {
    height: calc(80dvh - 116px);
  }

  .details-panel {
    max-height: calc(80dvh - 100px);
  }
}

/* Final interaction states: complete internal contours with no clipped edge,
   and one integrated control for multi-grade selection. */
@media (min-width: 901px) {
  #shapeStrip > .shape-button {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    align-self: stretch;
  }

  #shapeStrip > .shape-button:first-child {
    border-radius: 9px 0 0 9px !important;
  }

  #shapeStrip > .shape-button:last-child {
    border-radius: 0 9px 9px 0 !important;
  }

  #shapeStrip > .shape-button.active,
  #shapeStrip > .shape-button:first-child.active,
  #shapeStrip > .shape-button:last-child.active {
    border-color: transparent !important;
    background: #fffbf2 !important;
  }

  #shapeStrip > .shape-button.active::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    border: 1px solid #d79200;
    border-radius: inherit;
    pointer-events: none;
  }

  #gradeList .grade-block-list {
    gap: 4px;
  }

  #gradeList .grade-row {
    min-height: 40px;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    isolation: isolate;
  }

  #gradeList .grade-number {
    padding-left: 2px;
    color: #7b8490;
    font-size: 12px;
  }

  #gradeList .grade-entry {
    min-height: 38px !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    padding: 0 28px 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: #fff;
    box-shadow: none !important;
    transition: none;
  }

  #gradeList .grade-row:hover .grade-entry {
    border-color: #d9dee4 !important;
    background: #f7f8f9 !important;
  }

  #gradeList .grade-row.active .grade-entry,
  #gradeList .grade-row.active:hover .grade-entry {
    border-color: #d79200 !important;
    background: linear-gradient(90deg, #fff8e8 0%, #fffbf3 100%) !important;
    box-shadow: none !important;
  }

  #gradeList .grade-row.active .grade-name,
  #gradeList .grade-row.active .grade-count {
    color: #222a33;
    font-weight: 720;
  }

  #gradeList .grade-row .grade-check {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 10px;
    width: 13px;
    height: 13px;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: none;
  }

  #gradeList .grade-row.active .grade-check {
    opacity: 1;
    transform: translateY(-50%);
  }

  #gradeList .grade-row.active .grade-check::after {
    position: absolute;
    top: 1px;
    left: 0;
    width: 13px;
    height: 11px;
    margin: 0;
    border: 0 !important;
    background: #b77700;
    clip-path: polygon(8% 47%, 0 58%, 38% 92%, 100% 17%, 86% 5%, 36% 68%);
    transform: none !important;
  }

  #gradeList .grade-row:focus-visible {
    outline: none !important;
  }

  #gradeList .grade-row:focus-visible .grade-entry {
    border-color: #b97c00 !important;
    box-shadow: 0 0 0 2px rgb(243 173 22 / 18%) !important;
  }
}

/* The desktop shell begins at 901px. In its narrowest part the full warehouse
   column cannot coexist with both product actions, so collapse only that
   secondary column and redistribute the saved width to readable core data. */
@media (min-width: 901px) and (max-width: 1023px) {
  .column-heads,
  .product-card.price-row {
    grid-template-columns: minmax(144px, 1.15fr) minmax(104px, .82fr) 68px 0 72px 0 108px !important;
  }

  #columnHeads .head-warehouse,
  .product-card.price-row .warehouse-cell {
    display: flex !important;
    overflow: hidden !important;
    padding-inline: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .product-card.price-row .product-main {
    grid-template-columns: 38px minmax(0, 1fr);
    padding-inline: 6px;
  }

  .product-card.price-row .product-main img {
    width: 34px;
    height: 34px;
  }

  .product-dimensions,
  .product-card.price-row .product-stock,
  .product-card.price-row .product-price {
    padding-inline: 5px;
  }

  .product-card.price-row .product-actions {
    padding-inline: 4px;
  }
}

.grade-row {
  grid-template-columns: 35px minmax(0, 1fr) 24px !important;
}

.grade-row.active .grade-entry {
  border-color: var(--amber) !important;
  background: var(--amber-soft) !important;
  box-shadow: none !important;
}

/* Mobile marketplace application. This tree is isolated from the desktop catalogue. */
.mobile-marketplace {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --m-ink: #171a1f;
    --m-muted: #69717c;
    --m-line: #dfe3e8;
    --m-line-strong: #cbd1d8;
    --m-canvas: #f1f3f5;
    --m-surface: #ffffff;
    --m-soft: #f7f8f9;
    --m-amber: #f3ad16;
    --m-amber-dark: #d99100;
    --m-safe-top: env(safe-area-inset-top, 0px);
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  html:has(body.mobile-marketplace-ready),
  body.mobile-marketplace-ready {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    background: var(--m-canvas);
  }

  body.mobile-marketplace-ready {
    position: fixed;
    inset: 0;
    padding: 0 !important;
  }

  body.mobile-marketplace-ready > .site-header,
  body.mobile-marketplace-ready > .catalog-page,
  body.mobile-marketplace-ready > .site-footer,
  body.mobile-marketplace-ready > .request-backdrop,
  body.mobile-marketplace-ready > .request-drawer,
  body.mobile-marketplace-ready > .toast,
  body.mobile-marketplace-ready > .back-to-top,
  body.mobile-marketplace-ready > .mobile-sheet-backdrop,
  body.mobile-marketplace-ready > .mobile-sheet,
  body.mobile-marketplace-ready > .mobile-app-nav {
    display: none !important;
  }

  .mobile-marketplace,
  .mobile-marketplace *,
  .mobile-marketplace *::before,
  .mobile-marketplace *::after {
    box-sizing: border-box;
  }

  .mobile-marketplace {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: block;
    overflow: hidden;
    background: var(--m-canvas);
    color: var(--m-ink);
    font-family: Inter, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    isolation: isolate;
  }

  .mobile-marketplace button,
  .mobile-marketplace input,
  .mobile-marketplace textarea,
  .mobile-marketplace select {
    font: inherit;
  }

  .mobile-marketplace button,
  .mobile-marketplace a {
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-marketplace button {
    color: inherit;
  }

  .mobile-marketplace button:focus-visible,
  .mobile-marketplace a:focus-visible {
    outline: 2px solid var(--m-amber-dark);
    outline-offset: 2px;
  }

  .m-icon {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
  }

  .mobile-marketplace-view {
    position: absolute;
    inset: 0 0 calc(66px + var(--m-safe-bottom));
    overflow: hidden;
    background: var(--m-canvas);
    transform: translate3d(0, 0, 0);
    transition: transform 230ms cubic-bezier(.22, .76, .24, 1), opacity 180ms ease;
    will-change: transform;
  }

  .mobile-marketplace-nav[hidden],
  .mobile-marketplace-overlay[hidden] {
    display: none !important;
  }

  .m-marketplace-page {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    background: var(--m-canvas);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 230ms cubic-bezier(.22, .76, .24, 1), opacity 180ms ease;
    will-change: transform, opacity;
  }

  .m-marketplace-page.is-entering.from-forward {
    z-index: 2;
    opacity: .7;
    transform: translate3d(22%, 0, 0);
  }

  .m-marketplace-page.is-entering.from-back {
    z-index: 2;
    opacity: .7;
    transform: translate3d(-12%, 0, 0);
  }

  .m-marketplace-page.is-entering.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .m-marketplace-page.is-leaving-forward {
    opacity: .76;
    transform: translate3d(-7%, 0, 0);
  }

  .m-marketplace-page.is-leaving-back {
    opacity: .76;
    transform: translate3d(9%, 0, 0);
  }

  .m-app-header {
    position: relative;
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: end;
    gap: 10px;
    min-height: calc(64px + var(--m-safe-top));
    padding: calc(10px + var(--m-safe-top)) 14px 10px;
    border-bottom: 1px solid var(--m-line);
    background: rgba(255, 255, 255, .98);
  }

  .m-app-header-leading {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .m-brand-mark {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 1px solid #d6dbe1;
    border-radius: 8px;
    background: #fff;
  }

  .m-brand-mark img {
    position: absolute;
    top: 2px;
    left: 5px;
    width: 104px;
    max-width: none;
    height: 40px;
    object-fit: fill;
    object-position: left center;
    filter: none;
  }

  .m-app-title {
    display: grid;
    min-width: 0;
    line-height: 1;
  }

  .m-app-title strong {
    overflow: hidden;
    margin: 0;
    color: var(--m-ink);
    font-size: 16px;
    font-weight: 760;
    line-height: 20px;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-app-title small {
    overflow: hidden;
    margin-top: 3px;
    color: var(--m-muted);
    font-size: 11px;
    font-weight: 550;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-icon-button {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--m-line-strong);
    border-radius: 8px;
    background: var(--m-surface);
    cursor: pointer;
  }

  .m-back-button {
    background: var(--m-soft);
  }

  .m-back-button .m-icon {
    width: 24px;
    height: 24px;
  }

  .m-request-shortcut {
    align-self: center;
  }

  .m-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 5px;
    background: var(--m-amber);
    color: #171a1f;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
  }

  .m-marketplace-scroll,
  .m-overlay-scroll {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .m-marketplace-scroll::-webkit-scrollbar,
  .m-overlay-scroll::-webkit-scrollbar,
  .m-category-rail::-webkit-scrollbar,
  .m-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .mobile-marketplace-nav {
    position: absolute;
    inset: auto 0 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: calc(66px + var(--m-safe-bottom));
    padding: 0 5px var(--m-safe-bottom);
    border-top: 1px solid var(--m-line-strong);
    background: rgba(255, 255, 255, .99);
  }

  .mobile-marketplace-nav > button {
    position: relative;
    display: grid;
    grid-template-rows: 28px 16px;
    align-content: center;
    justify-items: center;
    gap: 1px;
    min-width: 0;
    padding: 3px 2px 1px;
    border: 0;
    background: transparent;
    color: #6d7580;
    cursor: pointer;
  }

  .mobile-marketplace-nav > button::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: transparent;
    content: "";
    transform: translateX(-50%);
  }

  .mobile-marketplace-nav > button.active {
    color: var(--m-ink);
  }

  .mobile-marketplace-nav > button.active::before {
    background: var(--m-amber);
  }

  .mobile-marketplace-nav > button > span:last-child {
    overflow: hidden;
    max-width: 100%;
    font-size: 10px;
    font-weight: 650;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-nav-icon {
    position: relative;
    display: grid;
    place-items: center;
  }

  .m-nav-icon .m-icon {
    width: 23px;
    height: 23px;
  }

  .m-nav-icon .m-count-badge {
    top: -6px;
    right: -10px;
  }

  .m-search-section {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--m-line);
    background: var(--m-surface);
  }

  .m-search-field {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 12px;
    border: 1px solid var(--m-line-strong);
    border-radius: 9px;
    background: var(--m-soft);
    color: var(--m-muted);
  }

  .m-search-field:focus-within {
    border-color: #9fa7b1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(243, 173, 22, .16);
  }

  .m-search-field input {
    min-width: 0;
    height: 48px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--m-ink);
    font-size: 14px;
    font-weight: 550;
  }

  .m-search-field input::placeholder {
    color: #818995;
  }

  .m-search-field > button {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--m-muted);
  }

  .m-search-field > button .m-icon {
    width: 18px;
    height: 18px;
  }

  .m-search-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
  }

  .m-search-actions button {
    display: grid;
    grid-template-columns: 18px minmax(0, auto);
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    height: 40px;
    padding: 0 8px;
    border: 1px solid var(--m-line);
    border-radius: 7px;
    background: #fff;
    color: #444b54;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
  }

  .m-search-actions button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-search-actions .m-icon {
    width: 18px;
    height: 18px;
  }

  .m-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 10px 12px 0;
    padding: 4px;
    border: 1px solid var(--m-line);
    border-radius: 9px;
    background: #e7eaed;
  }

  .m-mode-switch button {
    display: flex;
    min-width: 0;
    height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #656d77;
    cursor: pointer;
  }

  .m-mode-switch button span,
  .m-mode-switch button b {
    overflow: hidden;
    font-size: 11px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-mode-switch button span {
    font-weight: 720;
  }

  .m-mode-switch button b {
    font-weight: 650;
  }

  .m-mode-switch button.active {
    border-color: #d0d5db;
    background: #fff;
    color: var(--m-ink);
    box-shadow: 0 1px 2px rgba(18, 23, 29, .06);
  }

  .m-mode-switch button.active b {
    color: #8a5c00;
  }

  .m-catalog-section {
    margin-top: 10px;
    border-top: 1px solid var(--m-line);
    border-bottom: 1px solid var(--m-line);
    background: var(--m-surface);
  }

  .m-catalog-section > header,
  .m-results-header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 12px 10px;
  }

  .m-catalog-section header > div,
  .m-page-intro,
  .m-filter-section header,
  .m-request-section > header,
  .m-detail-section > header {
    min-width: 0;
  }

  .m-catalog-section header small,
  .m-page-intro > small,
  .m-filter-section header small,
  .m-request-section > header small,
  .m-detail-section > header small,
  .m-recommendation > small {
    display: block;
    margin: 0 0 3px;
    color: #777f89;
    font-size: 9px;
    font-weight: 760;
    line-height: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .m-catalog-section h2,
  .m-page-intro h1,
  .m-filter-section h2,
  .m-request-section h1,
  .m-request-section h2,
  .m-detail-section h2 {
    margin: 0;
    color: var(--m-ink);
    font-size: 18px;
    font-weight: 760;
    line-height: 22px;
    letter-spacing: -.025em;
  }

  .m-catalog-section > header > button {
    display: flex;
    min-width: 0;
    height: 36px;
    align-items: center;
    gap: 2px;
    padding: 0 0 0 8px;
    border: 0;
    background: transparent;
    color: #525a65;
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
  }

  .m-catalog-section > header > button .m-icon {
    width: 18px;
    height: 18px;
  }

  .m-category-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 12px 14px;
    scroll-padding-inline: 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .m-category-tile {
    display: grid;
    flex: 0 0 82px;
    grid-template-rows: 70px minmax(28px, auto);
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    scroll-snap-align: start;
  }

  .m-category-tile > span {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--m-line);
    border-radius: 8px;
    background: var(--m-soft);
  }

  .m-category-tile img {
    display: block;
    width: 62px;
    height: 62px;
    object-fit: contain;
  }

  .m-category-tile strong {
    display: -webkit-box;
    overflow: hidden;
    color: #565e68;
    font-size: 10px;
    font-weight: 650;
    line-height: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .m-category-tile.active > span {
    border-color: var(--m-amber-dark);
    background: #fffbf2;
  }

  .m-category-tile.active strong {
    color: var(--m-ink);
  }

  .m-results-section {
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .m-filter-button {
    position: relative;
    display: grid;
    grid-template-columns: 18px auto;
    align-items: center;
    gap: 6px;
    min-width: 94px;
    height: 40px;
    justify-content: center;
    padding: 0 11px;
    border: 1px solid var(--m-line-strong);
    border-radius: 7px;
    background: #fff;
    color: #454c55;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  .m-filter-button .m-icon {
    width: 18px;
    height: 18px;
  }

  .m-filter-button b {
    position: absolute;
    top: -6px;
    right: -5px;
    display: grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 5px;
    background: var(--m-amber);
    color: var(--m-ink);
    font-size: 9px;
    line-height: 1;
  }

  .m-filter-button.active {
    border-color: #c89428;
    background: #fffaf0;
  }

  .m-filter-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 12px 10px;
    scrollbar-width: none;
  }

  .m-filter-chips button {
    display: flex;
    flex: 0 0 auto;
    height: 32px;
    align-items: center;
    gap: 5px;
    max-width: 190px;
    padding: 0 8px 0 10px;
    border: 1px solid #d4a33f;
    border-radius: 6px;
    background: #fffaf0;
    color: #4d4535;
    font-size: 10px;
    font-weight: 650;
  }

  .m-filter-chips button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-filter-chips .m-icon {
    width: 14px;
    height: 14px;
  }

  .m-product-feed {
    display: grid;
    gap: 10px;
    padding: 0 10px;
  }

  .m-product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d9dde2;
    border-radius: 10px;
    background: var(--m-surface);
    box-shadow: 0 2px 7px rgba(25, 30, 36, .055);
  }

  .m-product-card-main {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 84px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 10px;
    min-height: 116px;
    padding: 10px;
    border: 0;
    background: #fff;
    text-align: left;
    cursor: pointer;
  }

  .m-product-thumb {
    display: grid;
    width: 84px;
    height: 94px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e3e6ea;
    border-radius: 7px;
    background: var(--m-soft);
  }

  .m-product-thumb img {
    display: block;
    width: 78px;
    height: 78px;
    object-fit: contain;
  }

  .m-product-copy {
    display: grid;
    min-width: 0;
    align-content: center;
  }

  .m-product-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 6px;
  }

  .m-product-meta small {
    overflow: hidden;
    color: #767e88;
    font-size: 9px;
    font-weight: 650;
    line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-product-meta b {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    color: #2d6e45;
    font-size: 9px;
    font-style: normal;
    font-weight: 720;
    line-height: 12px;
    white-space: nowrap;
  }

  .m-product-meta b i,
  .m-detail-status span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3c9b61;
  }

  .m-product-meta b.make {
    color: #8a5c00;
  }

  .m-product-meta b.make i,
  .m-detail-status.make span i {
    background: var(--m-amber-dark);
  }

  .m-product-copy > strong {
    overflow: hidden;
    color: var(--m-ink);
    font-size: 16px;
    font-weight: 790;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-product-copy > span:not(.m-product-meta) {
    overflow: hidden;
    margin-top: 2px;
    color: #5e6670;
    font-size: 11px;
    font-weight: 580;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-product-copy > em {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 4px;
    color: #30363d;
    font-size: 12px;
    font-style: normal;
    font-weight: 680;
    line-height: 16px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .m-card-chevron {
    color: #949ca6;
  }

  .m-card-chevron .m-icon {
    width: 20px;
    height: 20px;
  }

  .m-product-facts {
    display: grid;
    grid-template-columns: 1.2fr 1fr .9fr;
    border-top: 1px solid #eceef1;
    border-bottom: 1px solid #eceef1;
    background: #fafbfc;
  }

  .m-product-facts > span {
    display: grid;
    min-width: 0;
    align-content: center;
    min-height: 52px;
    padding: 7px 8px;
    border-right: 1px solid #eceef1;
  }

  .m-product-facts > span:last-child {
    border-right: 0;
  }

  .m-product-facts small {
    overflow: hidden;
    color: #7b838d;
    font-size: 8px;
    font-weight: 650;
    line-height: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-product-facts strong {
    overflow: hidden;
    margin-top: 2px;
    color: #282d33;
    font-size: 10px;
    font-weight: 740;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-product-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    padding: 8px;
  }

  .m-product-card-actions button {
    display: flex;
    min-width: 0;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid #bfc6ce;
    border-radius: 7px;
    background: #fff;
    color: #2f353c;
    font-size: 11px;
    font-weight: 720;
  }

  .m-product-card-actions button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-product-card-actions button .m-icon {
    width: 18px;
    height: 18px;
  }

  .m-product-card-actions .m-card-add {
    width: 44px;
    padding: 0;
    border-color: var(--m-amber-dark);
    background: var(--m-amber);
    color: #171a1f;
  }

  .m-product-card-actions .m-card-add.added {
    border-color: #267546;
    background: #edf8f1;
    color: #267546;
  }

  .m-load-more {
    display: grid;
    width: calc(100% - 20px);
    grid-template-columns: minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    margin: 10px 10px 0;
    padding: 0 12px;
    border: 1px solid var(--m-line-strong);
    border-radius: 8px;
    background: #fff;
    color: #343a41;
    text-align: left;
  }

  .m-load-more span {
    font-size: 11px;
    font-weight: 720;
  }

  .m-load-more small {
    color: var(--m-muted);
    font-size: 9px;
  }

  .m-load-more .m-icon {
    width: 17px;
    height: 17px;
    transform: rotate(180deg);
  }

  .m-empty-state,
  .m-request-empty,
  .m-success-page {
    display: grid;
    justify-items: center;
    margin: 0 10px;
    padding: 30px 18px;
    border: 1px solid var(--m-line);
    border-radius: 9px;
    background: var(--m-soft);
    text-align: center;
  }

  .m-empty-state > .m-icon,
  .m-request-empty > .m-icon,
  .m-success-page > .m-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    color: #525a64;
  }

  .m-empty-state strong,
  .m-request-empty h1,
  .m-success-page h1 {
    margin: 0;
    color: var(--m-ink);
    font-size: 17px;
    font-weight: 760;
    line-height: 22px;
  }

  .m-empty-state p,
  .m-request-empty p,
  .m-success-page p {
    max-width: 310px;
    margin: 7px 0 15px;
    color: var(--m-muted);
    font-size: 12px;
    line-height: 18px;
  }

  .m-empty-state button,
  .m-request-empty button,
  .m-success-page button {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--m-line-strong);
    border-radius: 7px;
    background: #fff;
    font-size: 11px;
    font-weight: 720;
  }

  .m-empty-state > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .mobile-marketplace .primary {
    border-color: var(--m-amber-dark) !important;
    background: var(--m-amber) !important;
    color: #171a1f !important;
  }

  .m-section-page,
  .m-form-page,
  .m-request-page {
    padding: 12px 12px 18px;
  }

  .m-page-intro {
    padding: 10px 2px 16px;
  }

  .m-page-intro h1 {
    font-size: 22px;
    line-height: 27px;
  }

  .m-page-intro p {
    margin: 7px 0 0;
    color: var(--m-muted);
    font-size: 12px;
    line-height: 18px;
  }

  .m-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .m-category-grid > button {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-rows: 102px minmax(47px, auto);
    min-height: 159px;
    padding: 8px;
    border: 1px solid var(--m-line);
    border-radius: 9px;
    background: #fff;
    text-align: left;
  }

  .m-category-grid > button.active {
    border-color: var(--m-amber-dark);
  }

  .m-category-grid-image {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    background: var(--m-soft);
  }

  .m-category-grid-image img {
    display: block;
    width: 92px;
    height: 92px;
    object-fit: contain;
  }

  .m-category-grid > button > span:nth-child(2) {
    display: grid;
    min-width: 0;
    align-content: center;
    padding: 5px 20px 0 2px;
  }

  .m-category-grid strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    font-weight: 720;
    line-height: 16px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .m-category-grid small {
    overflow: hidden;
    margin-top: 2px;
    color: var(--m-muted);
    font-size: 9px;
    line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-category-grid > button > .m-icon {
    position: absolute;
    right: 9px;
    bottom: 14px;
    width: 17px;
    height: 17px;
    color: #777f89;
  }

  .m-grade-search {
    position: sticky;
    top: 0;
    z-index: 4;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 0 0 8px var(--m-canvas);
  }

  .m-grade-list {
    overflow: hidden;
    border: 1px solid var(--m-line);
    border-radius: 9px;
    background: #fff;
  }

  .m-grade-row,
  .m-choice-list > button,
  .m-link-list > button,
  .m-request-tools > button,
  .m-service-list > button {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 9px;
    min-height: 60px;
    padding: 9px 11px;
    border: 0;
    border-bottom: 1px solid #e7e9ec;
    background: #fff;
    text-align: left;
  }

  .m-grade-row:last-child,
  .m-choice-list > button:last-child,
  .m-link-list > button:last-child,
  .m-request-tools > button:last-child,
  .m-service-list > button:last-child {
    border-bottom: 0;
  }

  .m-grade-row > span,
  .m-choice-list > button > span,
  .m-link-list > button > span,
  .m-request-tools > button > span,
  .m-service-list > button > span {
    display: grid;
    min-width: 0;
  }

  .m-grade-row strong,
  .m-choice-list strong,
  .m-link-list strong,
  .m-request-tools strong,
  .m-service-list strong {
    overflow: hidden;
    color: #292f36;
    font-size: 12px;
    font-weight: 720;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-grade-row small,
  .m-choice-list small,
  .m-link-list small,
  .m-request-tools small,
  .m-service-list small {
    overflow: hidden;
    margin-top: 2px;
    color: var(--m-muted);
    font-size: 9px;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-grade-row > b {
    color: #555d67;
    font-size: 10px;
    font-weight: 650;
  }

  .m-grade-row > .m-icon,
  .m-choice-list > button > .m-icon,
  .m-link-list > button > .m-icon,
  .m-request-tools > button > .m-icon:last-child,
  .m-service-list > button > .m-icon {
    width: 18px;
    height: 18px;
    color: #828a94;
  }

  .m-grade-row.active,
  .m-choice-list > button.active,
  .m-service-list > button.active {
    background: #fffaf0;
  }

  .m-grade-row.active > .m-icon,
  .m-choice-list > button.active > .m-icon,
  .m-service-list > button.active > .m-icon {
    color: #946100;
  }

  .m-grade-row.disabled {
    opacity: .45;
  }

  .m-filter-section,
  .m-request-section,
  .m-mobile-form,
  .m-contact-form,
  .m-bulk-field,
  .m-recommendation {
    margin-bottom: 11px;
    overflow: hidden;
    border: 1px solid var(--m-line);
    border-radius: 9px;
    background: #fff;
  }

  .m-filter-section > header,
  .m-request-section > header,
  .m-contact-form > header,
  .m-detail-section > header {
    padding: 13px 12px 10px;
    border-bottom: 1px solid #eceef1;
  }

  .m-choice-list > button {
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  .m-link-list > button {
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  .m-reset-button {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 3px 0 12px;
    border: 1px solid #d7b0aa;
    border-radius: 8px;
    background: #fff;
    color: #90443b;
    font-size: 11px;
    font-weight: 700;
  }

  .m-reset-button .m-icon {
    width: 18px;
    height: 18px;
  }

  .m-page-action-bar,
  .m-overlay-action-bar {
    position: relative;
    z-index: 14;
    display: grid;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: calc(66px + var(--m-safe-bottom));
    padding: 10px 12px calc(10px + var(--m-safe-bottom));
    border-top: 1px solid var(--m-line-strong);
    background: rgba(255, 255, 255, .99);
  }

  .m-page-action-bar button,
  .m-overlay-action-bar button,
  .m-overlay-action-bar a {
    display: flex;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--m-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--m-ink);
    font-size: 12px;
    font-weight: 760;
    line-height: 16px;
    text-decoration: none;
  }

  .m-page-action-bar button span,
  .m-overlay-action-bar button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-page-action-bar .m-icon,
  .m-overlay-action-bar .m-icon {
    width: 20px;
    height: 20px;
  }

  .m-mobile-form,
  .m-contact-form,
  .m-bulk-field {
    display: grid;
    gap: 0;
    padding: 12px;
  }

  .m-mobile-form label,
  .m-contact-form label,
  .m-bulk-field {
    display: grid;
    gap: 6px;
    margin-bottom: 11px;
  }

  .m-mobile-form label:last-child,
  .m-contact-form label:last-of-type {
    margin-bottom: 0;
  }

  .m-mobile-form label > span,
  .m-contact-form label > span,
  .m-bulk-field > span {
    color: #555d67;
    font-size: 10px;
    font-weight: 680;
    line-height: 14px;
  }

  .m-mobile-form input,
  .m-mobile-form select,
  .m-mobile-form textarea,
  .m-contact-form input,
  .m-contact-form textarea,
  .m-bulk-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 11px;
    border: 1px solid var(--m-line-strong);
    border-radius: 7px;
    outline: 0;
    background: #fff;
    color: var(--m-ink);
    font-size: 13px;
    line-height: 19px;
  }

  .m-mobile-form textarea,
  .m-contact-form textarea,
  .m-bulk-field textarea {
    min-height: 94px;
    padding-top: 11px;
    padding-bottom: 11px;
    resize: vertical;
  }

  .m-bulk-field textarea {
    min-height: 190px;
  }

  .m-mobile-form input:focus,
  .m-mobile-form select:focus,
  .m-mobile-form textarea:focus,
  .m-contact-form input:focus,
  .m-contact-form textarea:focus,
  .m-bulk-field textarea:focus {
    border-color: #a77514;
    box-shadow: 0 0 0 3px rgba(243, 173, 22, .14);
  }

  .m-bulk-field > small {
    color: var(--m-muted);
    font-size: 9px;
    line-height: 13px;
  }

  .m-phone-error {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-left: 3px solid #b95044;
    background: #fff5f3;
    color: #8e3a31;
    font-size: 10px;
    line-height: 15px;
  }

  .m-request-list {
    display: grid;
    gap: 8px;
    padding: 10px;
  }

  .m-request-item {
    display: grid;
    min-width: 0;
    grid-template-columns: 40px minmax(0, 1fr) 38px;
    grid-template-rows: auto auto;
    gap: 8px 9px;
    padding: 10px;
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    background: #fafbfc;
  }

  .m-request-item-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    grid-row: 1;
    border: 1px solid var(--m-line);
    border-radius: 7px;
    background: #fff;
    color: #515964;
  }

  .m-request-item-icon .m-icon {
    width: 20px;
    height: 20px;
  }

  .m-request-item-copy {
    display: grid;
    min-width: 0;
    align-content: center;
    grid-column: 2;
    grid-row: 1;
  }

  .m-request-item-copy small,
  .m-request-item-copy span,
  .m-request-quantity small {
    overflow: hidden;
    color: var(--m-muted);
    font-size: 9px;
    line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-request-item-copy strong {
    display: -webkit-box;
    overflow: hidden;
    margin: 2px 0;
    color: #252b31;
    font-size: 11px;
    font-weight: 720;
    line-height: 14px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .m-request-item > button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    grid-column: 3;
    grid-row: 1;
    padding: 0;
    border: 1px solid #e0c4c0;
    border-radius: 7px;
    background: #fff;
    color: #9a4b41;
  }

  .m-request-item > button .m-icon {
    width: 18px;
    height: 18px;
  }

  .m-request-item > label,
  .m-request-quantity {
    display: grid;
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: center;
    min-height: 40px;
    padding-top: 8px;
    border-top: 1px solid #e3e6ea;
  }

  .m-request-item > label > span,
  .m-request-quantity small {
    color: #555d67;
    font-size: 10px;
    font-weight: 650;
  }

  .m-request-item > label input {
    width: 104px;
    height: 38px;
    padding: 0 9px;
    border: 1px solid var(--m-line-strong);
    border-radius: 6px;
    background: #fff;
    text-align: right;
  }

  .m-request-quantity strong {
    overflow: hidden;
    font-size: 11px;
    line-height: 15px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-request-tools {
    overflow: hidden;
    margin-bottom: 11px;
    border: 1px solid var(--m-line);
    border-radius: 9px;
    background: #fff;
  }

  .m-request-tools > button {
    grid-template-columns: 22px minmax(0, 1fr) 20px;
  }

  .m-request-tools > button > .m-icon:first-child {
    width: 21px;
    height: 21px;
    color: #555d67;
  }

  .m-recommendation {
    padding: 14px;
  }

  .m-recommendation h2 {
    margin: 0;
    font-size: 18px;
    line-height: 23px;
  }

  .m-recommendation p {
    margin: 7px 0 12px;
    color: var(--m-muted);
    font-size: 11px;
    line-height: 17px;
  }

  .m-recommendation button {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    padding: 0 11px;
    border: 1px solid var(--m-line-strong);
    border-radius: 7px;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
  }

  /* Product is a native slide-over screen; the catalogue remains mounted below it. */
  .mobile-marketplace-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: var(--m-canvas);
    box-shadow: -14px 0 36px rgba(18, 22, 27, .22);
    opacity: .98;
    transform: translate3d(100%, 0, 0);
    transition: transform 235ms cubic-bezier(.2, .76, .22, 1), opacity 180ms ease;
    touch-action: pan-y;
    will-change: transform;
  }

  .mobile-marketplace-overlay.is-open {
    opacity: 1;
    transform: translate3d(var(--m-swipe-x, 0px), 0, 0);
  }

  .mobile-marketplace-overlay.is-closing {
    opacity: .96;
    transform: translate3d(100%, 0, 0);
  }

  .mobile-marketplace-overlay.is-swiping {
    transition: none;
  }

  .mobile-marketplace.has-overlay .mobile-marketplace-view {
    opacity: .78;
    transform: translate3d(-7%, 0, 0) scale(.985);
  }

  .mobile-marketplace.has-overlay .mobile-marketplace-nav {
    pointer-events: none;
    opacity: .35;
  }

  .m-overlay-scroll {
    background: var(--m-canvas);
  }

  .m-detail-hero {
    display: grid;
    justify-items: center;
    padding: 18px 16px 19px;
    border-bottom: 1px solid var(--m-line);
    background: #fff;
    text-align: center;
  }

  .m-detail-image {
    display: grid;
    width: 142px;
    height: 142px;
    place-items: center;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    background: var(--m-soft);
  }

  .m-detail-image img {
    display: block;
    width: 132px;
    height: 132px;
    object-fit: contain;
  }

  .m-detail-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 9px;
  }

  .m-detail-status span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #2c6e44;
    font-size: 10px;
    font-weight: 730;
    white-space: nowrap;
  }

  .m-detail-status small {
    color: var(--m-muted);
    font-size: 9px;
    line-height: 13px;
  }

  .m-detail-status.make span {
    color: #885b00;
  }

  .m-detail-hero h1 {
    max-width: 100%;
    margin: 0;
    color: var(--m-ink);
    font-size: 24px;
    font-weight: 820;
    line-height: 29px;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
  }

  .m-detail-hero > p {
    margin: 3px 0 0;
    color: #626a75;
    font-size: 12px;
    font-weight: 600;
    line-height: 17px;
  }

  .m-detail-hero > strong {
    max-width: 100%;
    margin-top: 7px;
    color: #30363d;
    font-size: 14px;
    font-weight: 730;
    line-height: 20px;
    overflow-wrap: anywhere;
  }

  .m-detail-commerce {
    display: grid;
    grid-template-columns: 1.25fr 1fr .9fr;
    border-bottom: 1px solid var(--m-line);
    background: #fff;
  }

  .m-detail-commerce > div {
    display: grid;
    min-width: 0;
    align-content: center;
    min-height: 65px;
    padding: 10px 9px;
    border-right: 1px solid var(--m-line);
  }

  .m-detail-commerce > div:last-child {
    border-right: 0;
  }

  .m-detail-commerce small {
    overflow: hidden;
    color: var(--m-muted);
    font-size: 8px;
    font-weight: 650;
    line-height: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-detail-commerce strong {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    color: var(--m-ink);
    font-size: 11px;
    font-weight: 760;
    line-height: 14px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .m-detail-tabs {
    position: sticky;
    top: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: 1.3fr .9fr .8fr;
    border-bottom: 1px solid var(--m-line-strong);
    background: rgba(255, 255, 255, .98);
  }

  .m-detail-tabs button {
    position: relative;
    overflow: hidden;
    height: 46px;
    padding: 0 5px;
    border: 0;
    background: transparent;
    color: #6c7480;
    font-size: 9px;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-detail-tabs button::after {
    position: absolute;
    right: 7px;
    bottom: 0;
    left: 7px;
    height: 3px;
    background: transparent;
    content: "";
  }

  .m-detail-tabs button.active {
    color: var(--m-ink);
  }

  .m-detail-tabs button.active::after {
    display: none;
  }

  .m-detail-section {
    margin-top: 10px;
    border-top: 1px solid var(--m-line);
    border-bottom: 1px solid var(--m-line);
    background: #fff;
  }

  .m-spec-list {
    margin: 0;
  }

  .m-spec-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, 44%);
    gap: 12px;
    min-height: 47px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid #eceef1;
  }

  .m-spec-list > div:last-child {
    border-bottom: 0;
  }

  .m-spec-list dt,
  .m-spec-list dd {
    min-width: 0;
    margin: 0;
    font-size: 10px;
    line-height: 14px;
  }

  .m-spec-list dt {
    color: var(--m-muted);
  }

  .m-spec-list dd {
    color: #282e35;
    font-weight: 680;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .m-service-list > button {
    grid-template-columns: minmax(0, 1fr) 22px;
  }

  .m-order-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 12px;
  }

  .m-order-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--m-line);
    border-radius: 7px;
    background: var(--m-soft);
  }

  .m-order-icon .m-icon {
    width: 20px;
    height: 20px;
  }

  .m-order-card > div {
    min-width: 0;
  }

  .m-order-card h2 {
    margin-top: 2px;
    font-size: 16px;
    line-height: 20px;
  }

  .m-order-card p,
  .m-reference-note p {
    margin: 6px 0 0;
    color: var(--m-muted);
    font-size: 10px;
    line-height: 15px;
  }

  .m-order-card > button {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    grid-column: 1 / -1;
    margin-top: 2px;
    padding: 0 11px;
    border: 1px solid #c69024;
    border-radius: 7px;
    background: #fffaf0;
    color: #3a3429;
    font-size: 11px;
    font-weight: 720;
  }

  .m-order-card > button .m-icon {
    width: 18px;
    height: 18px;
  }

  .m-reference-note {
    margin-bottom: 14px;
    padding: 13px 12px;
    border-left: 3px solid #9aa2ac;
  }

  .m-reference-note > small {
    color: #565e68;
    font-size: 9px;
    font-weight: 720;
    text-transform: uppercase;
  }

  .m-capability-summary > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .m-capability-summary > div > span {
    display: grid;
    min-width: 0;
    align-content: center;
    min-height: 62px;
    padding: 9px;
    border-right: 1px solid #eceef1;
  }

  .m-capability-summary > div > span:last-child {
    border-right: 0;
  }

  .m-capability-summary strong {
    overflow: hidden;
    font-size: 11px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-capability-summary small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 2px;
    color: var(--m-muted);
    font-size: 8px;
    line-height: 11px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .m-overlay-action-bar {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .m-overlay-action-bar > a {
    width: 48px;
    padding: 0;
  }

  .m-overlay-action-bar .added {
    border-color: #307b4c !important;
    background: #edf8f1 !important;
    color: #25653d !important;
  }

  .m-success-page {
    align-content: center;
    margin: 12px;
  }

  .mobile-marketplace-loading {
    display: grid;
    height: 100%;
    place-content: center;
    justify-items: center;
    gap: 11px;
    color: var(--m-muted);
    font-size: 11px;
  }

  .mobile-marketplace-loading span {
    width: 28px;
    height: 28px;
    border: 2px solid var(--m-line-strong);
    border-top-color: var(--m-amber-dark);
    border-radius: 50%;
    animation: m-loading .75s linear infinite;
  }

  @keyframes m-loading {
    to { transform: rotate(360deg); }
  }
}

@media (max-width: 340px) {
  .m-app-header {
    padding-right: 10px;
    padding-left: 10px;
  }

  .m-app-header-leading {
    gap: 8px;
  }

  .m-app-title strong {
    font-size: 14px;
  }

  .m-app-title small {
    font-size: 10px;
  }

  .m-search-section,
  .m-catalog-section > header,
  .m-results-header {
    padding-right: 10px;
    padding-left: 10px;
  }

  .m-mode-switch {
    margin-right: 10px;
    margin-left: 10px;
  }

  .m-mode-switch button {
    padding: 0 7px;
  }

  .m-mode-switch button b {
    display: none;
  }

  .m-category-rail {
    padding-right: 10px;
    padding-left: 10px;
  }

  .m-product-feed {
    padding-right: 8px;
    padding-left: 8px;
  }

  .m-product-card-main {
    grid-template-columns: 76px minmax(0, 1fr) 18px;
    gap: 8px;
    padding: 8px;
  }

  .m-product-thumb {
    width: 76px;
    height: 88px;
  }

  .m-product-thumb img {
    width: 70px;
    height: 70px;
  }

  .m-product-copy > strong {
    font-size: 14px;
  }

  .m-product-facts > span {
    padding-right: 6px;
    padding-left: 6px;
  }

  .m-product-facts strong {
    font-size: 9px;
  }

  .m-section-page,
  .m-form-page,
  .m-request-page {
    padding-right: 10px;
    padding-left: 10px;
  }

  .m-category-grid > button {
    grid-template-rows: 88px minmax(49px, auto);
    min-height: 147px;
  }

  .m-category-grid-image img {
    width: 80px;
    height: 80px;
  }

  .m-detail-hero h1 {
    font-size: 22px;
    line-height: 27px;
  }

  .m-detail-tabs button {
    font-size: 8px;
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  .m-marketplace-page > .m-marketplace-scroll {
    padding-right: max(18px, calc((100vw - 760px) / 2));
    padding-left: max(18px, calc((100vw - 760px) / 2));
  }

  .m-marketplace-page[data-mobile-page="catalog"] > .m-marketplace-scroll {
    padding-right: max(0px, calc((100vw - 760px) / 2));
    padding-left: max(0px, calc((100vw - 760px) / 2));
  }

  .m-product-feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .m-product-card-main {
    grid-template-columns: 78px minmax(0, 1fr) 18px;
  }

  .m-product-thumb {
    width: 78px;
  }

  .m-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-marketplace-overlay {
    right: 0;
    left: auto;
    width: min(560px, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-marketplace-view,
  .m-marketplace-page,
  .mobile-marketplace-overlay {
    transition-duration: .01ms !important;
  }

  .mobile-marketplace-loading span {
    animation: none !important;
  }
}

/* Mobile application mode. Desktop keeps the approved catalogue untouched;
   phones and compact tablets get their own navigation and interaction model. */
.mobile-catalog-controls,
.mobile-sheet-backdrop,
.mobile-filter-sheet,
.mobile-app-nav,
.mobile-product-tabs {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --mobile-header: calc(64px + env(safe-area-inset-top));
    --mobile-nav: 68px;
  }

  html {
    min-width: 0;
    scroll-padding-top: 168px;
    scrollbar-gutter: auto;
    background: #f4f5f7;
  }

  body {
    min-width: 0;
    padding-bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom));
    background: #f4f5f7;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
  }

  body.mobile-sheet-open,
  body.mobile-panel-open,
  body.request-open {
    overflow: hidden;
  }

  button,
  a,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  .shell {
    width: 100%;
    max-width: none;
  }

  .site-header {
    position: sticky;
    z-index: 90;
    top: 0;
    height: var(--mobile-header);
    border: 0;
    border-bottom: 1px solid #d9dee4;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 3px 12px rgb(22 31 42 / 6%);
    backdrop-filter: blur(14px);
  }

  .site-header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--amber);
  }

  .header-inner {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: center;
    gap: 10px;
    padding: calc(3px + env(safe-area-inset-top)) 10px 1px 12px;
  }

  .brand {
    width: 148px;
    max-width: 148px;
    height: 56px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .brand img {
    width: 146px;
    height: 55px;
    object-fit: contain;
    object-position: left center;
  }

  .city-nav,
  .certificates,
  .phone-cluster {
    display: none;
  }

  .catalog-page {
    width: 100%;
    padding: 12px 10px 26px;
  }

  .catalog-head {
    position: relative;
    z-index: auto;
    isolation: auto;
    top: auto;
    display: block;
    margin: 0;
    padding: 0;
  }

  .catalog-head::before {
    display: none;
  }

  .catalog-title-line {
    min-height: 46px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: start;
    margin-bottom: 10px;
    white-space: normal;
  }

  .catalog-title-line h1 {
    max-width: 260px;
    margin: 0;
    font-size: 18px;
    font-weight: 780;
    line-height: 1.12;
    letter-spacing: -.25px;
  }

  .catalog-title-line > strong {
    align-self: start;
    margin: 1px 0 0;
    padding: 4px 6px;
    border: 1px solid #dce1e6;
    border-radius: 4px;
    background: #fff;
    color: #515b66;
    font-size: 9px;
    font-weight: 750;
    white-space: nowrap;
  }

  .catalog-title-line > span {
    grid-column: 1 / -1;
    color: #7a838d;
    font-size: 9px;
    line-height: 1.2;
  }

  .search-stack {
    position: relative;
    display: block;
  }

  .search-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 8px;
  }

  .global-search {
    min-width: 0;
  }

  .search-tools .global-search input {
    width: 100%;
    height: 50px;
    padding: 0 12px 0 42px;
    border: 1px solid #bdc5ce;
    border-radius: 7px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
  }

  .search-tools .global-search input:focus {
    border-color: var(--amber);
    outline: 0;
    box-shadow: 0 0 0 3px rgb(255 176 0 / 12%) !important;
  }

  .global-search .search-icon {
    left: 15px;
  }

  .city-filter {
    position: relative;
    min-width: 0;
  }

  .city-filter-toggle {
    width: 100%;
    height: 50px;
    padding: 5px 27px 5px 10px;
    border-color: #cbd2da;
    border-radius: 7px;
    background: #fff;
  }

  .city-filter-toggle small {
    font-size: 7.5px;
  }

  .city-filter-toggle strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .city-filter-menu {
    position: absolute;
    z-index: 95;
    top: calc(100% + 7px);
    right: 0;
    width: min(310px, calc(100vw - 20px));
    padding: 7px;
    border: 1px solid #cbd2da;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 18px 38px rgb(22 31 42 / 16%);
  }

  .city-filter-menu button {
    min-height: 42px;
    font-size: 11px;
  }

  .search-shortcuts {
    grid-column: 1 / -1;
    height: 42px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
  }

  .search-shortcuts button {
    min-width: 0;
    height: 42px;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d3d9df;
    border-radius: 6px;
    background: #fff;
    color: #414b56;
    font-size: 10px;
    font-weight: 750;
  }

  .search-shortcuts button:active {
    border-color: var(--amber);
    background: var(--amber-soft);
  }

  .search-tolerance {
    display: none;
  }

  .request-button {
    position: fixed;
    z-index: 92;
    top: calc(10px + env(safe-area-inset-top));
    right: 10px;
    width: 98px;
    height: 44px;
    grid-column: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 9px;
    border: 1px solid #c8cfd7;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    font-size: 10px;
    font-weight: 780;
  }

  .request-button .request-button-label {
    overflow: visible;
    max-width: none;
  }

  .request-button #requestCount {
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: 4px;
    font-size: 10px;
  }

  .search-suggestions {
    z-index: 96;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    width: auto;
    max-height: min(62dvh, 460px);
    overflow-y: auto;
    border-radius: 7px;
    box-shadow: 0 20px 40px rgb(22 31 42 / 17%);
  }

  .search-suggestions button {
    min-height: 57px;
    padding: 9px 11px;
  }

  .shape-strip {
    display: none;
  }

  .catalog-modes {
    min-height: 52px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 10px 0 8px;
    overflow: visible;
  }

  .catalog-mode,
  .catalog-mode:hover {
    min-width: 0;
    min-height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid #cbd2da;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    text-align: left;
  }

  .catalog-mode.active {
    border-color: var(--amber);
    background: var(--amber-soft);
    box-shadow: inset 0 0 0 1px var(--amber);
  }

  .catalog-mode .mode-mark,
  .catalog-mode .mode-copy small {
    display: none;
  }

  .catalog-mode .mode-copy strong {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalog-mode b {
    align-self: center;
    color: #68727d;
    font-size: 8.5px;
    white-space: nowrap;
  }

  .mode-explanation,
  .filter-bar {
    display: none;
  }

  .mobile-catalog-controls {
    position: sticky;
    z-index: 42;
    top: var(--mobile-header);
    display: block;
    margin: 0 -10px;
    padding: 6px 10px 8px;
    border-top: 1px solid #e1e5e9;
    border-bottom: 1px solid #d7dce2;
    background: rgb(248 249 250 / 97%);
    box-shadow: 0 5px 12px rgb(22 31 42 / 5%);
    backdrop-filter: blur(12px);
  }

  .mobile-results-summary {
    height: 27px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 2px 5px;
    color: #747d87;
    font-size: 9px;
  }

  .mobile-results-summary strong {
    color: #343d47;
    font-size: 10px;
  }

  .mobile-results-summary button {
    height: 25px;
    margin-left: auto;
    padding: 0 7px;
    border: 0;
    border-bottom: 1px solid #9fa8b2;
    background: transparent;
    color: #535d68;
    font-size: 9px;
    font-weight: 750;
  }

  .mobile-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .mobile-filter-grid > button {
    position: relative;
    min-width: 0;
    height: 50px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 7px;
    gap: 6px;
    align-items: center;
    padding: 5px 7px;
    border: 1px solid #d0d6dc;
    border-radius: 6px;
    background: #fff;
    text-align: left;
  }

  .mobile-filter-grid > button.has-selection {
    border-color: var(--amber);
    background: var(--amber-soft);
  }

  .mobile-filter-grid > button > span {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .mobile-filter-grid small {
    color: #7a838d;
    font-size: 7.5px;
    font-weight: 760;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
  }

  .mobile-filter-grid strong {
    overflow: hidden;
    font-size: 9.5px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-filter-grid > button > b {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #626c76;
    border-bottom: 1.5px solid #626c76;
    transform: rotate(45deg) translateY(-2px);
  }

  .mobile-filter-icon {
    position: relative;
    width: 18px;
    height: 18px;
    display: block;
    border: 1px solid #8d97a1;
    border-radius: 3px;
  }

  .shape-filter-icon::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1.5px solid #555f69;
  }

  .grade-filter-icon::before {
    content: "M";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #555f69;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
  }

  .status-filter-icon::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 6px;
    height: 3px;
    border-bottom: 1.5px solid #08734e;
    border-left: 1.5px solid #08734e;
    transform: rotate(-45deg);
  }

  .catalog-layout,
  .catalog-layout.with-details {
    display: block;
    padding: 12px 0 0;
  }

  .catalog-layout > .grade-sidebar,
  .column-heads {
    display: none;
  }

  .results {
    width: 100%;
    min-width: 0;
  }

  .product-group {
    margin: 0 0 20px;
  }

  .group-title {
    min-height: 44px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    padding: 2px 2px 6px;
    font-size: 14px;
    line-height: 1.16;
  }

  .group-title img {
    width: 36px;
    height: 36px;
    margin: 0;
  }

  .group-title b {
    min-width: 0;
    font-weight: 780;
  }

  .group-title span {
    color: #737d87;
    font-size: 8.5px;
    white-space: nowrap;
  }

  .group-title span::before {
    display: none;
  }

  .product-list {
    display: grid;
    gap: 8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .product-entry,
  .product-entry:first-child,
  .product-entry:last-child,
  .product-entry.selected-entry {
    overflow: visible;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    outline: 0;
  }

  .product-entry.selected-entry::after {
    display: none;
  }

  .product-card.price-row,
  .catalog-layout.with-details .product-card.price-row {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(112px, .72fr);
    grid-template-rows: auto;
    grid-template-areas:
      "main dimensions"
      "stock warehouse"
      "price services"
      "actions actions";
    gap: 0;
    padding: 11px 11px 10px;
    overflow: hidden;
    border: 1px solid #d9dee4;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(22 31 42 / 4%);
    contain: layout style;
  }

  .product-card.price-row:hover {
    background: #fff;
  }

  .product-card.price-row.selected,
  .catalog-layout.with-details .product-card.price-row.selected {
    border-color: var(--amber);
    background: #fffdf8;
    box-shadow: inset 0 0 0 1px var(--amber);
  }

  .product-card.price-row .product-main,
  .catalog-layout.with-details .product-card.price-row .product-main {
    grid-area: main;
    min-width: 0;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-column: 1;
    grid-row: 1;
    gap: 10px;
    align-items: center;
    padding: 0 10px 10px 0;
    border-right: 1px solid #edf0f3;
    border-bottom: 1px solid #edf0f3;
  }

  .product-card.price-row .product-main img,
  .catalog-layout.with-details .product-card.price-row .product-main img {
    width: 56px;
    height: 56px;
    border: 1px solid #e0e4e8;
    border-radius: 5px;
    background: #f8f9fa;
    object-fit: cover;
  }

  .product-card.price-row .position-copy {
    display: grid;
    gap: 2px;
  }

  .product-card.price-row .position-copy small {
    color: #7a838d;
    font-size: 8.5px;
    line-height: 1.2;
  }

  .product-card.price-row .position-copy strong {
    overflow: visible;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.14;
    text-overflow: clip;
    white-space: normal;
  }

  .product-card.price-row .position-copy > span {
    color: #4f5964;
    font-size: 10.5px;
    line-height: 1.25;
  }

  .product-dimensions,
  .catalog-layout.with-details .product-dimensions {
    grid-area: dimensions;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    gap: 3px;
    padding: 9px 0 9px 10px;
    border-bottom: 1px solid #edf0f3;
  }

  .product-dimensions::before {
    content: "Размер / состояние";
    color: #818a94;
    font-size: 7.5px;
    font-weight: 760;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
  }

  .product-dimensions strong {
    overflow: visible;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    white-space: normal;
  }

  .product-dimensions span {
    display: -webkit-box;
    overflow: hidden;
    color: #68727c;
    font-size: 9px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .product-card.price-row .product-stock,
  .catalog-layout.with-details .product-stock,
  .product-card.price-row .product-price,
  .catalog-layout.with-details .product-price {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 9px 7px 8px 0;
    border-bottom: 1px solid #edf0f3;
  }

  .product-card.price-row .product-stock {
    grid-area: stock;
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid #edf0f3;
  }

  .product-card.price-row .product-price {
    grid-area: price;
    grid-column: 1;
    grid-row: 3;
    padding-left: 0;
    border-right: 1px solid #edf0f3;
  }

  .product-card.price-row .product-stock::before,
  .product-card.price-row .product-price::before {
    color: #818a94;
    font-size: 7.5px;
    font-weight: 760;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
  }

  .product-card.price-row .product-stock::before { content: "Остаток"; }
  .product-card.price-row .product-price::before { content: "Цена с НДС"; }

  .product-card.price-row .product-stock strong,
  .product-card.price-row .product-price strong {
    overflow: hidden;
    margin: 0;
    font-size: 12px;
    font-weight: 780;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-card.price-row .product-stock span,
  .product-card.price-row .product-price small {
    margin: 0;
    color: #68727c;
    font-size: 8.5px;
    line-height: 1.2;
  }

  .product-card.price-row .availability {
    color: #08734e;
    white-space: nowrap;
  }

  .product-card.price-row .availability::before {
    width: 5px;
    height: 5px;
    margin-right: 4px;
  }

  .warehouse-cell,
  .catalog-layout.with-details .warehouse-cell {
    grid-area: warehouse;
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 1px;
    padding: 7px 0 7px 10px;
    border-bottom: 1px solid #edf0f3;
  }

  .warehouse-cell::before {
    content: "Склад";
    color: #818a94;
    font-size: 7.5px;
    font-weight: 760;
    letter-spacing: .055em;
    text-transform: uppercase;
  }

  .warehouse-cell strong {
    overflow: hidden;
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .warehouse-cell span {
    display: none;
  }

  .services-cell,
  .catalog-layout.with-details .services-cell {
    grid-area: services;
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 0 7px 10px;
    overflow: hidden;
    border-bottom: 1px solid #edf0f3;
    opacity: 1;
  }

  .services-cell span {
    overflow: hidden;
    padding: 3px 4px;
    border: 1px solid #d8dde3;
    border-radius: 3px;
    background: #fafbfc;
    color: #606a74;
    font-size: 7.5px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-actions,
  .catalog-layout.with-details .product-actions {
    grid-area: actions;
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 7px;
    padding: 9px 0 0;
  }

  .details-trigger,
  .catalog-layout.with-details .details-trigger {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 42px;
    max-height: none;
    justify-content: center;
    border: 1px solid #bdc5cd;
    border-radius: 5px;
    background: #fff;
    font-size: 10.5px;
    font-weight: 780;
  }

  .product-card.price-row .add-button,
  .catalog-layout.with-details .product-card.price-row .add-button {
    width: 44px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--amber);
    border-radius: 5px;
    color: #7a5800;
    font-size: 22px;
  }

  .add-button::after {
    display: none;
  }

  .group-more {
    width: 100%;
    min-height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 12px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #cbd2da;
    border-radius: 6px;
    background: #fff;
    text-align: left;
  }

  .group-more span {
    font-size: 10.5px;
    font-weight: 780;
  }

  .group-more small {
    font-size: 8.5px;
  }

  .decision-strip,
  .instant-manufacture-head,
  .transit-state {
    margin-bottom: 10px;
    border-radius: 6px;
    background: #fff;
  }

  .decision-strip {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 12px;
  }

  .decision-strip dl {
    justify-content: space-between;
  }

  .decision-strip button,
  .transit-state button {
    width: 100%;
    min-height: 42px;
  }

  .selected-row-toolbar {
    display: none;
  }

  .site-footer,
  .back-to-top {
    display: none;
  }

  .mobile-app-nav {
    position: fixed;
    z-index: 105;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--mobile-nav) + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 5px 5px env(safe-area-inset-bottom);
    border-top: 1px solid #cfd5dc;
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 -6px 18px rgb(22 31 42 / 8%);
    backdrop-filter: blur(16px);
  }

  .mobile-app-nav > button {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-rows: 29px 16px;
    place-items: center;
    padding: 2px 3px;
    border: 0;
    border-top: 2px solid transparent;
    background: transparent;
    color: #69737e;
    font-size: 8.5px;
    font-weight: 720;
  }

  .mobile-app-nav > button.active {
    border-top-color: var(--amber);
    color: var(--ink);
  }

  .mobile-app-nav > button.has-items {
    color: var(--ink);
  }

  .mobile-app-nav > button > b {
    position: absolute;
    top: 0;
    left: calc(50% + 7px);
    min-width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 1px solid #d29200;
    border-radius: 4px;
    background: var(--amber);
    color: #201800;
    font-size: 8px;
  }

  .mobile-nav-icon {
    position: relative;
    width: 22px;
    height: 22px;
    display: block;
    font-style: normal;
  }

  .catalog-nav-icon::before,
  .catalog-nav-icon::after {
    content: "";
    position: absolute;
    top: 4px;
    width: 7px;
    height: 6px;
    border: 1.5px solid currentColor;
    box-shadow: 0 9px 0 -1.5px #fff, 0 9px 0 0 currentColor;
  }

  .catalog-nav-icon::before { left: 2px; }
  .catalog-nav-icon::after { right: 2px; }

  .shape-nav-icon::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1.5px solid currentColor;
  }

  .shape-nav-icon::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1.5px solid currentColor;
  }

  .grade-nav-icon::before {
    content: "M";
    position: absolute;
    inset: 2px;
    display: grid;
    place-items: center;
    border: 1.5px solid currentColor;
    font-size: 10px;
    font-weight: 800;
  }

  .request-nav-icon::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 2px;
    left: 3px;
    border: 1.5px solid currentColor;
    border-top-width: 4px;
  }

  .request-nav-icon::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 7px;
    width: 8px;
    height: 1.5px;
    background: currentColor;
    box-shadow: 0 4px 0 currentColor;
  }

  .mobile-sheet-open .mobile-app-nav,
  .mobile-panel-open .mobile-app-nav,
  .request-open .mobile-app-nav {
    visibility: hidden;
    pointer-events: none;
  }

  .mobile-sheet-backdrop {
    position: fixed;
    z-index: 130;
    inset: 0;
    display: block;
    background: rgb(18 23 29 / 46%);
  }

  .mobile-filter-sheet {
    position: fixed;
    z-index: 140;
    right: 0;
    bottom: 0;
    left: 0;
    width: min(100%, 640px);
    max-height: min(84dvh, 760px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #cbd2da;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: #fff;
    box-shadow: 0 -16px 42px rgb(20 27 34 / 20%);
  }

  .mobile-sheet-head {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 9px 14px;
    border-top: 3px solid var(--amber);
    border-bottom: 1px solid #e0e4e8;
    background: #fff;
  }

  .mobile-sheet-head > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .mobile-sheet-head span {
    color: #76601f;
    font-size: 8px;
    font-weight: 780;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .mobile-sheet-head h2 {
    overflow: hidden;
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-sheet-head > button {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid #cbd2da;
    border-radius: 5px;
    background: #fff;
    color: #4f5963;
    font-size: 24px;
    line-height: 1;
  }

  .mobile-sheet-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 10px calc(16px + env(safe-area-inset-bottom));
    background: #f7f8fa;
  }

  .mobile-sheet-intro {
    margin: 0 2px 10px;
    color: #626c77;
    font-size: 10px;
    line-height: 1.45;
  }

  .mobile-shape-options,
  .mobile-grade-options,
  .mobile-status-options {
    display: grid;
    gap: 6px;
  }

  .mobile-shape-options > button,
  .mobile-grade-options > button,
  .mobile-status-options > button {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid #d7dce2;
    border-radius: 6px;
    background: #fff;
    text-align: left;
  }

  .mobile-shape-options > button {
    grid-template-columns: 54px minmax(0, 1fr) 20px;
  }

  .mobile-grade-options > button {
    grid-template-columns: minmax(0, 1fr) auto 20px;
  }

  .mobile-status-options > button {
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  .mobile-shape-options > button.active,
  .mobile-grade-options > button.active,
  .mobile-status-options > button.active {
    border-color: var(--amber);
    background: var(--amber-soft);
    box-shadow: inset 0 0 0 1px var(--amber);
  }

  .mobile-grade-options > button.empty {
    opacity: .48;
  }

  .mobile-shape-options img {
    width: 52px;
    height: 52px;
    border: 1px solid #e3e7eb;
    border-radius: 4px;
    background: #f8f9fa;
    object-fit: cover;
    mix-blend-mode: multiply;
  }

  .mobile-shape-options span,
  .mobile-grade-options span,
  .mobile-status-options span {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .mobile-shape-options strong,
  .mobile-grade-options strong,
  .mobile-status-options strong {
    font-size: 12px;
    font-weight: 780;
    line-height: 1.2;
  }

  .mobile-shape-options small,
  .mobile-grade-options small,
  .mobile-status-options small {
    color: #6e7882;
    font-size: 9px;
    line-height: 1.3;
  }

  .mobile-grade-options > button > b {
    color: #5c6670;
    font-size: 9px;
  }

  .mobile-shape-options > button > i,
  .mobile-grade-options > button > i,
  .mobile-status-options > button > i {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1px solid #bcc4cc;
    border-radius: 4px;
    background: #fff;
  }

  .mobile-shape-options > button.active > i,
  .mobile-grade-options > button.active > i,
  .mobile-status-options > button.active > i {
    border-color: var(--amber);
    background: var(--amber);
  }

  .mobile-shape-options > button.active > i::after,
  .mobile-grade-options > button.active > i::after,
  .mobile-status-options > button.active > i::after {
    content: "";
    width: 7px;
    height: 4px;
    border-bottom: 1.5px solid #2c240f;
    border-left: 1.5px solid #2c240f;
    transform: translateY(-1px) rotate(-45deg);
  }

  .mobile-sheet-search {
    position: sticky;
    z-index: 2;
    top: -10px;
    display: block;
    margin: -2px 0 8px;
    padding: 8px 0;
    background: #f7f8fa;
  }

  .mobile-sheet-search input {
    width: 100%;
    height: 46px;
    padding: 0 12px 0 40px;
    border: 1px solid #bdc5ce;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    outline: 0;
  }

  .mobile-sheet-search input:focus {
    border-color: var(--amber);
  }

  .mobile-sheet-search .search-icon {
    z-index: 1;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
  }

  .mobile-sheet-apply {
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 48px;
    margin-top: 10px;
    border: 1px solid #d79a08;
    border-radius: 5px;
    background: var(--amber);
    color: #241b00;
    font-size: 11px;
    font-weight: 800;
  }

  .mobile-status-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 11px;
    border-left: 3px solid var(--amber);
    background: #fff;
    color: #65707a;
    font-size: 9px;
  }

  .mobile-status-note strong {
    color: var(--ink);
    font-size: 10px;
  }

  .catalog-layout > .details-panel,
  .catalog-layout.with-details > .details-panel,
  .details-panel {
    position: fixed;
    z-index: 150;
    inset: 0;
    width: 100%;
    min-width: 0;
    height: 100dvh;
    max-height: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    contain: none;
  }

  .details-panel:not([hidden]),
  .details-panel.is-closing {
    animation: none !important;
  }

  .details-inner,
  .catalog-layout.with-details .details-inner {
    width: 100%;
    min-width: 0;
    max-width: 620px;
    margin: 0 auto;
    padding: 0 14px calc(100px + env(safe-area-inset-bottom));
  }

  .details-top {
    position: sticky;
    z-index: 12;
    top: 0;
    margin: 0 -14px;
    padding: calc(18px + env(safe-area-inset-top)) 54px 16px 14px;
    border-top: 3px solid var(--amber);
    border-bottom: 1px solid #dfe3e8;
    background: rgb(255 255 255 / 97%);
    backdrop-filter: blur(14px);
  }

  .details-top .details-close,
  .details-product-hero .details-close {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top));
    right: 10px;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #cbd2da;
    border-radius: 5px;
    background: #fff;
    color: #4f5963;
    font-size: 25px;
    line-height: 1;
  }

  .details-top h2 {
    margin: 3px 0 4px;
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: -.25px;
  }

  .details-top p {
    margin: 0;
    color: #59636e;
    font-size: 11px;
    line-height: 1.4;
  }

  .details-product-hero {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 11px;
    padding: calc(14px + env(safe-area-inset-top)) 55px 14px 14px;
    background: #f6f7f8;
  }

  .details-product-visual {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d6dce2;
    border-radius: 5px;
    background: #fff;
  }

  .details-product-visual img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    mix-blend-mode: multiply;
  }

  .details-product-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 2px;
  }

  .details-product-copy .panel-kicker,
  .panel-kicker {
    color: #707a85;
    font-size: 7.5px;
    font-weight: 780;
    letter-spacing: .055em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .details-product-copy h2 {
    overflow-wrap: anywhere;
    font-size: 19px;
  }

  .details-product-copy p {
    font-size: 10px;
  }

  .details-product-copy .availability {
    width: max-content;
    max-width: 100%;
    margin-top: 3px;
    color: #08734e;
    font-size: 8.5px;
    font-weight: 730;
  }

  .details-top .details-close {
    font-size: 0;
  }

  .details-top .details-close::before {
    content: "←";
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
  }

  .mobile-product-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 -14px;
    padding: 0 10px;
    border-bottom: 1px solid #dfe3e8;
    background: #fff;
  }

  .mobile-product-tabs button {
    min-width: 0;
    height: 44px;
    padding: 0 5px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #68727d;
    font-size: 9px;
    font-weight: 760;
    white-space: nowrap;
  }

  .mobile-product-tabs button.active {
    border-bottom-color: transparent;
    background: #f4f6f8;
    color: var(--ink);
  }

  .details-section {
    padding: 16px 0;
    border-top: 0;
    border-bottom: 1px solid #e3e7eb;
  }

  .details-section h3 {
    margin: 0 0 11px;
    font-size: 15px;
    line-height: 1.2;
  }

  .detail-grid,
  .position-section .detail-grid {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid #dce1e6;
    border-radius: 5px;
    background: #fff;
    font-size: 10.5px;
  }

  .detail-grid dt,
  .detail-grid dd,
  .position-section .detail-grid dt,
  .position-section .detail-grid dd {
    min-width: 0;
    margin: 0;
    padding: 9px 8px;
    border-bottom: 1px solid #e5e8ec;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .detail-grid dt,
  .position-section .detail-grid dt {
    border-right: 1px solid #e5e8ec;
    background: #f7f8fa;
    color: #707a84;
  }

  .panel-form,
  .panel-form.two-columns,
  .compact-manufacture-form .manufacture-form,
  .assistant-form {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .panel-form .wide,
  .compact-manufacture-form .wide {
    grid-column: 1;
  }

  .panel-form label > span {
    font-size: 8px;
  }

  .panel-form input,
  .panel-form select,
  .panel-form textarea {
    min-height: 46px;
    border-radius: 5px;
    background: #fff;
    font-size: 12px;
  }

  .panel-form textarea {
    min-height: 96px;
  }

  .details-panel .service-options {
    grid-auto-rows: auto;
    max-height: none;
    gap: 6px;
    overflow: visible;
    border: 0;
  }

  .details-panel .service-choice {
    min-height: 58px;
    height: auto;
    max-height: none;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 9px;
    padding: 9px 10px;
    overflow: visible;
    border: 1px solid #d8dde3;
    border-radius: 5px;
  }

  .details-panel .service-choice .service-glyph {
    display: none;
  }

  .details-panel .service-choice > span:nth-child(2) {
    grid-column: 1;
  }

  .details-panel .service-choice strong {
    font-size: 11px;
  }

  .details-panel .service-choice small {
    overflow: visible;
    font-size: 9px;
    line-height: 1.3;
    white-space: normal;
  }

  .details-panel .service-choice > i {
    grid-column: 2;
    width: 28px;
    height: 28px;
  }

  .service-fields {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e0e4e8;
    border-radius: 5px;
  }

  .service-fields input,
  .service-fields output {
    min-height: 42px;
  }

  .capability-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .capability-facts span {
    padding: 7px 5px;
  }

  .capability-facts strong {
    font-size: 10.5px;
  }

  .capability-table {
    font-size: 8.5px;
  }

  .assistant-evaluate,
  .assistant-result button {
    width: 100%;
    min-height: 44px;
  }

  .assistant-result {
    padding: 13px;
    border: 1px solid #e1c574;
    border-left: 3px solid var(--amber);
    border-radius: 5px;
    background: #fffaf0;
  }

  .panel-actions {
    position: sticky;
    z-index: 11;
    bottom: 0;
    display: grid;
    gap: 7px;
    margin: 0 -14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #d6dce2;
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 -7px 18px rgb(22 31 42 / 7%);
    backdrop-filter: blur(14px);
  }

  .details-panel button {
    max-height: none;
  }

  .panel-actions .manager-action,
  .panel-actions .manager-secondary {
    min-height: 46px;
    height: 46px;
    max-height: none;
  }

  .panel-actions .manager-action {
    border: 1px solid #d79a08;
    border-radius: 5px;
    background: var(--amber);
    font-size: 11px;
  }

  .panel-actions .manager-secondary {
    border-radius: 5px;
    font-size: 10px;
  }

  .panel-actions .document-actions {
    display: none;
  }

  .request-backdrop {
    z-index: 149;
  }

  .request-drawer {
    position: fixed;
    z-index: 150;
    inset: 0;
    width: 100%;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  .request-drawer-head {
    min-height: 64px;
    padding: calc(9px + env(safe-area-inset-top)) 10px 8px 14px;
    border-top: 3px solid var(--amber);
    border-bottom: 1px solid #dce1e6;
    background: #fff;
  }

  .request-drawer-head h2 {
    font-size: 17px;
  }

  .request-drawer-head > button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border: 1px solid #cbd2da;
    border-radius: 5px;
    background: #fff;
  }

  .request-drawer-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 12px calc(28px + env(safe-area-inset-bottom));
    background: #f7f8fa;
  }

  .bulk-entry,
  .request-lines-section,
  .request-contact-section {
    padding: 13px;
    border: 1px solid #dce1e6;
    border-radius: 6px;
    background: #fff;
  }

  .bulk-entry {
    grid-template-columns: 1fr auto;
    margin-bottom: 10px;
  }

  .bulk-entry textarea {
    min-height: 100px;
    font-size: 11px;
  }

  .bulk-entry button {
    min-height: 42px;
  }

  .request-lines-section {
    margin-bottom: 10px;
  }

  .request-lines-section h3,
  .request-contact-section h3 {
    font-size: 14px;
  }

  .request-line {
    grid-template-columns: 50px minmax(0, 1fr) 36px;
    gap: 7px;
    padding: 11px 0;
  }

  .request-line label,
  .request-line-value {
    grid-column: 2;
  }

  .request-line > button {
    grid-column: 3;
    grid-row: 1;
    width: 36px;
    height: 36px;
    border: 1px solid #d5dbe1;
    border-radius: 4px;
  }

  .request-line-copy strong,
  .request-line-copy span,
  .request-line-copy small {
    white-space: normal;
  }

  .request-empty {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dfe3e8;
    border-radius: 5px;
    background: #f9fafb;
    text-align: left;
  }

  .request-empty p {
    text-align: left;
  }

  .request-empty-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .request-empty-actions button {
    min-width: 0;
    min-height: 42px;
  }

  .request-contact-grid,
  .minimal-contact-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .request-contact-grid input,
  .request-contact-grid select {
    height: 46px;
    font-size: 12px;
  }

  .request-document-actions {
    height: 42px;
    min-height: 42px;
    max-height: none;
  }

  .request-document-actions button {
    height: 42px;
    min-height: 42px;
    max-height: none;
  }

  .request-submit {
    min-height: 50px;
    font-size: 11px;
  }

  .toast {
    z-index: 180;
    right: 10px;
    bottom: calc(var(--mobile-nav) + 10px + env(safe-area-inset-bottom));
    left: 10px;
    max-width: none;
    border-radius: 5px;
    font-size: 10px;
  }

  .mobile-panel-open .toast,
  .request-open .toast {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .branch-view .mobile-catalog-controls {
    display: none;
  }
}

@media (min-width: 620px) and (max-width: 900px) {
  .catalog-page {
    padding-inline: 16px;
  }

  .mobile-catalog-controls {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .product-list > .group-more,
  .product-list > .selected-row-toolbar {
    grid-column: 1 / -1;
  }

  .request-drawer-body {
    padding-inline: max(16px, calc((100vw - 620px) / 2));
  }
}

@media (max-width: 380px) {
  .catalog-page {
    padding-inline: 8px;
  }

  .mobile-catalog-controls {
    margin-inline: -8px;
    padding-inline: 8px;
  }

  .catalog-title-line h1 {
    font-size: 16px;
  }

  .search-tools {
    grid-template-columns: minmax(0, 1fr) 106px;
    gap: 6px;
  }

  .mobile-filter-grid {
    gap: 4px;
  }

  .mobile-filter-grid > button {
    grid-template-columns: 16px minmax(0, 1fr) 6px;
    gap: 4px;
    padding-inline: 5px;
  }

  .mobile-filter-icon {
    width: 16px;
    height: 16px;
  }

  .group-title span {
    display: none;
  }

  .product-card.price-row,
  .catalog-layout.with-details .product-card.price-row {
    grid-template-columns: minmax(0, 1fr) 104px;
    padding-inline: 9px;
  }

  .request-empty-actions,
  .request-document-actions {
    grid-template-columns: 1fr;
    height: auto;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .header-inner { grid-template-columns: 158px 228px minmax(150px, 1fr) 185px; gap: 10px; }
  .brand { width: 150px; max-width: 150px; }
  .brand img { width: 134px; }
  .city-nav a { padding-inline: 9px; font-size: 11px; }
  .certificates { gap: 4px; padding-inline: 4px; }
  .certificate { width: 42px; }
  .phone-cluster { padding-inline: 8px; }
}

@keyframes selected-outline-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes selected-outline-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes refined-row-expand {
  from { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(-4px); }
  to { max-height: var(--selected-row-expanded-height, none); opacity: 1; transform: translateY(0); }
}

@keyframes refined-row-collapse {
  from { max-height: var(--selected-row-expanded-height, none); opacity: 1; transform: translateY(0); }
  to { max-height: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; opacity: 0; transform: translateY(-4px); }
}

/* Keep the approved restrained corporate header unchanged. */
@media (min-width: 901px) {
  .site-header {
    position: static;
    height: 96px;
    border-bottom: 1px solid #dfe3e8;
    background: rgb(255 255 255 / 96%);
    box-shadow: none;
  }

  .site-header::before,
  .brand::after,
  .details-product-hero::before {
    content: none;
  }

  .header-inner {
    grid-template-columns: 188px 320px minmax(168px, 1fr) 218px;
    gap: 14px;
  }

  .brand {
    width: 166px;
    max-width: 166px;
    height: 72px;
    padding: 0;
    overflow: hidden;
  }

  .brand img {
    width: 166px;
    height: 64px;
    object-fit: contain;
    object-position: left center;
  }

  .city-nav {
    height: 100%;
    gap: 25px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .city-nav a {
    height: auto;
    padding: 11px 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
  }

  .city-nav a:hover,
  .city-nav a.active {
    background: transparent;
    box-shadow: none;
  }

  .city-nav a.active::after {
    right: 0;
    bottom: 3px;
    left: 0;
  }

  .certificates {
    height: 64px;
    justify-content: flex-end;
    gap: 13px;
    padding: 0 0 0 13px;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }

  .certificate {
    width: 54px;
    height: 62px;
    grid-template-rows: 43px 15px;
  }

  .certificate img { width: 40px; height: 40px; }
  .certificate span { font-size: 9px; }

  .phone-cluster {
    gap: 4px;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .phone-cluster a { grid-template-columns: 55px minmax(0, 1fr); gap: 7px; }
  .phone-cluster span { font-size: 13px; }
}

@media (min-width: 1101px) and (max-width: 1250px) {
  .header-inner { grid-template-columns: 164px 280px minmax(132px, 1fr) 202px; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .header-inner { grid-template-columns: 154px 220px minmax(150px, 1fr) 185px; gap: 7px; }
  .brand { width: 154px; max-width: 154px; }
  .brand img { width: 154px; }
  .city-nav { gap: 16px; }
  .city-nav a { font-size: 12px; }
  .certificates { gap: 6px; padding-left: 7px; }
  .certificate { width: 42px; }
  .phone-cluster { padding-left: 8px; }
}

/* Strict industrial treatment: flat controls, restrained hierarchy, no decorative pills. */
@media (min-width: 901px) {
  /* Desktop vertical rhythm: catalogue regions are independent blocks and
     must never share or visually merge their borders. */
  .results {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .column-heads,
  #productGroups,
  #productGroups > *,
  .instant-manufacture-results > .product-group {
    margin-top: 0;
    margin-bottom: 0;
  }

  #productGroups,
  .instant-manufacture-results {
    display: grid;
    gap: 16px;
  }

  .status-filter-toggle {
    border-radius: 4px;
    box-shadow: none;
  }

  .status-filter-toggle[aria-expanded="true"] {
    box-shadow: inset 0 0 0 1px var(--amber);
  }

  .status-filter-menu {
    width: 205px;
    border-radius: 4px;
    box-shadow: 0 10px 24px rgb(22 31 42 / 11%);
  }

  .status-filter-menu::before { content: none; }
  .status-filter-menu button { border-radius: 2px; }
  .status-filter-menu button i {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 2px;
  }

  .status-filter-menu button.active i {
    border-color: var(--amber);
    background: var(--amber);
    box-shadow: none;
  }

  .status-filter-menu button.active i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 4px;
    width: 3px;
    height: 6px;
    border-right: 1.5px solid #211900;
    border-bottom: 1.5px solid #211900;
    transform: rotate(45deg);
  }

  .filter-reset {
    padding: 0 11px;
    border-radius: 3px;
    box-shadow: none;
  }

  .filter-reset::before,
  .filter-reset::after,
  .reset-filter > i { display: none; content: none; }

  .active-filter-row {
    min-height: 46px;
    margin-top: 4px;
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid #dfe3e8;
    border-radius: 0;
    background: #fff;
  }

  .active-chip {
    height: 31px;
    gap: 0;
    padding: 0;
    border-color: #cbd2da;
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
  }

  .active-chip:hover {
    border-color: #9ea8b2;
    background: #f7f8fa;
  }

  .active-chip > i { display: none; }
  .active-chip .active-chip-label {
    padding: 0 10px;
    font-size: 10px;
    font-weight: 700;
  }

  .active-chip .active-chip-remove {
    width: 29px;
    height: 29px;
    border-left: 1px solid #d8dde3;
    border-radius: 0;
    background: transparent;
    font-size: 16px;
  }

  .active-chip:hover .active-chip-remove { background: #eef1f3; }
  .active-filter-row .reset-filter {
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 2px;
    background: transparent;
  }

  .active-filter-row .reset-filter:hover { background: #f0f2f4; }

  .product-entry.selected-entry {
    border-radius: 4px;
    box-shadow: none;
  }

  .product-entry.selected-entry::after {
    border-color: rgb(255 176 0 / 78%);
    border-radius: 4px;
  }

  .product-card.price-row.selected {
    background: #fffdf8;
  }

  .selected-row-toolbar {
    border-top-color: #dfe3e8;
    background: #fafbfc;
    box-shadow: none;
  }

  .selected-row-actions button {
    border-radius: 3px;
    box-shadow: none;
  }

  .selected-row-summary::before {
    width: 3px;
    height: 12px;
    top: 3px;
    border-radius: 0;
  }

  .analogue-intro,
  .analogue-stock-card,
  .analogue-manufacture-card {
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
    transition: border-color 120ms ease, background-color 120ms ease;
  }

  .analogue-intro.is-empty,
  .analogue-stock-card.is-unavailable {
    background: #f7f8fa;
  }

  button.analogue-intro:hover,
  .analogue-stock-card:not(.is-unavailable):hover,
  .analogue-manufacture-card:hover {
    border-color: #9ea8b2;
    background: #fafbfc;
    box-shadow: none;
    transform: none;
  }

  .analogue-eyebrow,
  .analogue-status {
    gap: 0;
    padding-left: 7px;
    border-left: 2px solid #aeb6bf;
    color: #5d6772;
  }

  .analogue-eyebrow { border-left-color: #9ea8b2; }
  .analogue-status.in-stock { border-left-color: var(--green); }
  .analogue-status.make-ready { border-left-color: var(--amber); }
  .analogue-eyebrow > i,
  .analogue-status > i { display: none; }

  .details-panel {
    border-radius: 4px;
    box-shadow: 0 10px 26px rgb(22 31 42 / 9%);
  }

  .details-product-hero {
    background: #f7f8fa;
  }

  .details-product-visual {
    border-radius: 3px;
    box-shadow: none;
  }

  .details-product-copy .panel-kicker {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .details-product-copy .availability {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 11px;
  }

  .details-product-copy .availability::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--green);
  }

  .details-product-hero .details-close {
    border-color: transparent;
    border-radius: 3px;
    background: transparent;
  }

  .details-product-hero .details-close:hover {
    border-color: #cbd2da;
    background: #fff;
  }

  .details-section h3 {
    display: block;
    padding-bottom: 8px;
    border-bottom: 1px solid #e1e5e9;
  }

  .details-section h3::before { content: none; }

  .add-button::after {
    top: auto;
    right: 0;
    bottom: calc(100% + 7px);
    border-radius: 2px;
    box-shadow: 0 6px 14px rgb(22 31 42 / 16%);
    transform: translateY(3px);
  }

  .add-button:hover::after,
  .add-button:focus-visible::after {
    transform: translateY(0);
  }

  /* The tooltip must be able to leave the row. Paint containment used for the
     long catalogue clipped it at the row boundary regardless of z-index. */
  .product-card.price-row {
    contain: layout style;
    overflow: visible;
  }

  .product-entry:has(.add-button:hover),
  .product-entry:has(.add-button:focus-visible) {
    position: relative;
    z-index: 60;
    overflow: visible;
    content-visibility: visible;
  }

  /* One contour per component: no clipped inner frame at rounded corners. */
  .details-panel {
    border-radius: 0;
  }

  .details-product-hero {
    border-radius: 0;
  }

  .catalog-mode,
  .catalog-mode:hover,
  .catalog-mode.active {
    box-shadow: none !important;
  }

  .shape-button.active,
  .shape-button:first-child.active,
  .shape-button:last-child.active {
    box-shadow: none !important;
  }

  .shape-button:focus-visible {
    outline: none;
  }

  .status-filter-toggle[aria-expanded="true"] {
    box-shadow: none;
  }

  .product-card.price-row.selected {
    background: #fff;
  }

  .selected-row-toolbar {
    background: #f4f5f7;
  }

  /* One border-radius system. Bordered children are flatter than their outer
     shell, so no second arc can escape or disagree with the parent contour. */
  :where(
    .shape-strip,
    .filter-bar,
    .grade-sidebar,
    .column-heads,
    .product-list,
    .details-panel,
    .status-filter-menu,
    .service-options,
    .property-table,
    .request-drawer
  ) {
    border-radius: 4px;
    background-clip: padding-box;
  }

  :where(
    .status-filter-toggle,
    .filter-reset,
    .active-chip,
    .catalog-mode,
    .details-trigger,
    .add-button,
    .grade-search input,
    .service-choice,
    .manager-action,
    .manager-secondary,
    .document-actions button,
    .selected-row-actions button,
    .details-product-visual
  ) {
    border-radius: 3px;
    background-clip: padding-box;
  }

  :where(button, input, select, textarea):focus-visible {
    outline: none !important;
    border-color: var(--amber) !important;
  }

  a:focus-visible {
    outline: none !important;
    text-decoration: underline;
    text-decoration-color: var(--amber);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  .details-panel {
    overflow-x: hidden;
    border-radius: 4px;
  }

  .details-product-hero,
  .service-choice,
  .product-card.price-row {
    border-radius: 0;
  }

  .product-entry:first-child,
  .product-entry:first-child > .price-row {
    border-radius: 3px 3px 0 0;
  }

  .product-entry:last-child,
  .product-entry:last-child > .price-row,
  .product-entry:last-child > :last-child {
    border-radius: 0 0 3px 3px;
  }

  .product-entry.selected-entry {
    box-sizing: border-box;
    border: 1px solid rgb(255 176 0 / 78%);
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
    animation: selected-contour-in 300ms cubic-bezier(.22, .8, .28, 1) both;
  }

  .product-entry.selected-entry::after { content: none; }

  .catalog-layout.is-collapsing .product-entry.selected-entry {
    animation: selected-contour-out 280ms cubic-bezier(.4, 0, .2, 1) both;
  }

  @keyframes selected-contour-in {
    from { border-color: transparent; }
    to { border-color: rgb(255 176 0 / 78%); }
  }

  @keyframes selected-contour-out {
    from { border-color: rgb(255 176 0 / 78%); }
    to { border-color: transparent; }
  }

  /* Selected parameters now live inside the filter panel and use exactly the
     same height and strict rectangular geometry as the status selector. */
  .filter-bar {
    flex-wrap: wrap;
    gap: 7px;
    padding: 5px 8px;
  }

  .status-filter { flex: 0 0 205px; }

  .filter-reset {
    order: 3;
    height: 42px;
    min-width: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 13px;
    border: 1px solid #cbd2da;
    background: #fff;
    color: #46515c;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }

  .filter-reset:hover {
    border-color: #9fa9b3;
    background: #f5f7f8;
    color: var(--ink);
  }

  .filter-bar > .active-filter-row {
    order: 2;
    min-width: 0;
    min-height: 42px;
    flex: 1 1 360px;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .filter-bar > .active-filter-row .active-filter-set {
    align-items: center;
    gap: 6px;
  }

  .filter-bar > .active-filter-row .active-chip {
    height: 42px;
    min-width: 0;
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1px solid #cbd2da;
    background: #fff;
    color: #303943;
  }

  .filter-bar > .active-filter-row .active-chip:hover {
    border-color: #9fa9b3;
    background: #fff;
  }

  .filter-bar > .active-filter-row .active-chip-label {
    min-width: 0;
    display: grid;
    grid-template-rows: 9px 14px;
    align-content: center;
    gap: 2px;
    padding: 5px 10px;
  }

  .filter-bar > .active-filter-row .active-chip-label small {
    overflow: hidden;
    color: #76808b;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .filter-bar > .active-filter-row .active-chip-label strong {
    overflow: hidden;
    color: #37414c;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .filter-bar > .active-filter-row .active-chip-remove {
    width: 30px;
    height: 40px;
    border-left: 1px solid #d8dde3;
    border-radius: 0;
    background: #f7f8fa;
    color: #59636e;
  }

  .filter-bar > .active-filter-row .active-chip:hover .active-chip-remove {
    background: #eef1f3;
    color: var(--ink);
  }

  .filter-bar > .filter-spacer { order: 4; }
  .filter-bar > .result-count { order: 5; }

  /* Minimal information hierarchy: spacing separates sections; decorative
     rails and repeated divider lines do not. */
  .site-header {
    border-bottom: 0;
  }

  .catalog-head {
    border-bottom: 0;
    box-shadow: none;
  }

  .selected-row-toolbar {
    border-top: 0;
    box-shadow: none;
  }

  .selected-row-summary {
    padding-left: 0;
  }

  .selected-row-summary::before {
    content: none;
  }

  .analogue-eyebrow,
  .analogue-status {
    padding-left: 0;
    border-left: 0;
  }

  .analogue-intro,
  .analogue-stock-card,
  .analogue-manufacture-card {
    min-height: 62px;
    padding: 6px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .analogue-offer-grid { gap: 14px; }

  button.analogue-intro:hover,
  button.analogue-intro:focus-visible,
  .analogue-stock-card:not(.is-unavailable):hover,
  .analogue-manufacture-card:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .details-product-hero {
    border-bottom: 0;
    background: #f7f8fa;
  }

  .details-section {
    padding-block: 16px;
    border-top: 0;
  }

  .details-section h3 {
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .position-section .detail-grid {
    border-top: 0;
    border-bottom: 0;
  }

  .details-panel .service-options {
    gap: 4px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .details-panel .service-choice,
  .details-panel .service-choice:hover,
  .details-panel .service-choice:focus-visible {
    border: 0 !important;
    border-radius: 3px;
    background: #f6f7f8;
    box-shadow: none;
  }

  .details-panel .service-choice:hover,
  .details-panel .service-choice:focus-visible {
    background: #eef1f3;
  }

  .details-product-hero .details-close,
  .details-product-hero .details-close:hover,
  .details-product-hero .details-close:focus-visible {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Final contour pass. These selectors intentionally keep normal class
     specificity so they override the legacy layers; :where() was too weak and
     left several old square-looking shadows active. */
  .shape-strip,
  .filter-bar,
  .grade-sidebar,
  .column-heads,
  .product-list,
  .details-panel,
  .status-filter-menu,
  .request-drawer {
    border-radius: 8px;
    background-clip: padding-box;
    box-shadow: none !important;
  }

  .status-filter-toggle,
  .filter-reset,
  .active-chip,
  .catalog-mode,
  .details-trigger,
  .add-button,
  .grade-search input,
  .service-choice,
  .manager-action,
  .manager-secondary,
  .document-actions button,
  .selected-row-actions button,
  .details-product-visual {
    border-radius: 6px;
    background-clip: padding-box;
    box-shadow: none !important;
  }

  input,
  select,
  textarea {
    box-shadow: none !important;
  }

  .shape-button:first-child { border-radius: 7px 0 0 7px; }
  .shape-button:last-child { border-radius: 0 7px 7px 0; }

  .product-entry:first-child,
  .product-entry:first-child > .price-row {
    border-radius: 7px 7px 0 0;
  }

  .product-entry:last-child,
  .product-entry:last-child > .price-row,
  .product-entry:last-child > :last-child {
    border-radius: 0 0 7px 7px;
  }

  .product-entry.selected-entry {
    border-radius: 6px;
    box-shadow: none !important;
  }

  .details-product-hero,
  .product-card.price-row {
    border-radius: 0;
  }

  /* Selection is always a thin, complete perimeter. Never use a thick rail on
     one side of a selected control. */
  .shape-button {
    box-sizing: border-box;
    border: 1px solid transparent;
  }

  .shape-button + .shape-button {
    margin-left: -1px;
  }

  .shape-button:not(:last-child) {
    border-right-color: #e0e4e8;
  }

  .shape-button.active,
  .shape-button:first-child.active,
  .shape-button:last-child.active {
    border-color: var(--amber) !important;
    background: var(--amber-soft);
    box-shadow: none !important;
  }

  .service-choice.selected {
    border: 1px solid var(--amber) !important;
    background: var(--amber-soft);
    box-shadow: none !important;
  }

  .inline-manufacture-entry .product-main {
    box-shadow: none !important;
  }

  .decision-strip,
  .delivery-status,
  .assistant-result,
  .request-assurance,
  .match-summary,
  .instant-manufacture-head,
  .selected-row-toolbar,
  .branch-hero {
    border: 1px solid #dfe3e8;
    border-radius: 6px;
  }

  .selected-row-toolbar {
    border: 0;
    border-radius: 0;
  }

  .search-suggestions {
    border: 1px solid #cbd2da;
  }

  .search-suggestions .manufacture-suggestion {
    border-left: 0;
  }

  .toast {
    border: 1px solid #4f5963;
    border-radius: 6px;
  }

  .filter-bar > .active-filter-row {
    flex: 0 1 auto;
  }

  .filter-bar > .active-filter-row .active-filter-set {
    flex: 0 1 auto;
  }

  /* Rounded borders must paint over the component background. Padding-box
     clipping made the antialiased arc fade out while straight edges remained
     dark, which looked like a cut corner. */
  .shape-strip,
  .shape-button,
  .catalog-mode,
  .filter-bar,
  .status-filter-toggle,
  .status-filter-menu,
  .filter-reset,
  .active-chip,
  .grade-sidebar,
  .grade-entry,
  .column-heads,
  .product-list,
  .product-entry,
  .product-card,
  .details-trigger,
  .add-button,
  .details-panel,
  .details-product-visual,
  .property-table,
  .service-options,
  .service-choice,
  .manager-action,
  .manager-secondary,
  .document-actions button,
  .selected-row-actions button,
  .decision-strip,
  .delivery-status,
  .assistant-result,
  .request-assurance,
  .match-summary,
  .instant-manufacture-head,
  .branch-hero,
  .search-suggestions,
  .request-drawer,
  .toast,
  button,
  input,
  select,
  textarea {
    background-clip: border-box !important;
  }

  .grade-row.active .grade-entry {
    border: 1px solid var(--amber);
    box-shadow: none !important;
  }

  /* Readable without visual noise: keep the three commercial paths as quiet
     information blocks instead of an undifferentiated text row. */
  .selected-row-toolbar {
    gap: 9px 12px;
    padding: 10px;
    background: #f4f5f7;
  }

  .analogue-offer-grid {
    gap: 8px;
  }

  .analogue-intro,
  .analogue-stock-card,
  .analogue-manufacture-card {
    min-height: 82px;
    padding: 9px 10px;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
  }

  button.analogue-intro:hover,
  button.analogue-intro:focus-visible,
  .analogue-stock-card:not(.is-unavailable):hover,
  .analogue-manufacture-card:hover {
    border-color: #bfc7d0;
    background: #fff;
    box-shadow: none;
    transform: none;
  }

  .analogue-eyebrow,
  .analogue-status {
    margin-bottom: 1px;
    font-size: 9px;
    line-height: 1.15;
  }

  .analogue-intro strong,
  .analogue-stock-card strong,
  .analogue-manufacture-card strong {
    font-size: 13px;
    line-height: 1.25;
  }

  .analogue-intro span:not(.analogue-eyebrow),
  .analogue-stock-card small,
  .analogue-manufacture-card small {
    font-size: 10px;
    line-height: 1.4;
  }

  .analogue-stock-card b,
  .analogue-manufacture-card b {
    margin-top: 5px;
    font-size: 10px;
  }

  /* Clip inner fills to the same contour as their compound control. */
  .active-chip {
    overflow: hidden !important;
  }

  .active-chip-remove {
    border-radius: 0 5px 5px 0;
  }

  .status-filter-toggle {
    border-radius: inherit;
  }

  .service-options {
    overflow: hidden !important;
  }

  .service-options > .service-choice:first-child {
    border-radius: 5px 5px 0 0;
  }

  .service-options > .service-choice:last-child {
    border-radius: 0 0 5px 5px;
  }

  .product-list > .product-entry:first-child,
  .product-list > .product-entry:first-child > .product-card {
    border-radius: 7px 7px 0 0;
  }

  .product-list > .product-entry:last-child,
  .product-list > .product-entry:last-child > .product-card {
    border-radius: 0 0 7px 7px;
  }

  .shape-button {
    border-right-color: transparent !important;
  }

  .shape-button + .shape-button {
    margin-left: 0 !important;
    border-left: 1px solid #c2c9d1 !important;
  }

  .shape-button.active {
    position: relative;
    z-index: 2;
    border: 1px solid var(--amber) !important;
  }

  .shape-button.active + .shape-button:not(.active) {
    border-left-color: transparent !important;
  }

  /* The two search routes are compact controls, not loose utility text. */
  .search-shortcuts button {
    justify-items: start;
    padding-inline: 10px;
    text-align: left;
  }

  .search-shortcuts [data-open-assistant] {
    background: #f7f8fa;
    color: var(--ink);
    font-weight: 800;
  }

  .search-shortcuts [data-open-assistant]:hover,
  .search-shortcuts [data-open-assistant]:focus-visible {
    background: #f1f3f5;
    outline: none;
  }

  /* Unknown-grade assistant: one structured form surface with clear fields. */
  .assistant-panel-inner {
    padding: 16px 12px 18px;
  }

  .assistant-panel-inner .details-top {
    margin: 0 4px 12px;
    padding: 0 32px 0 0;
  }

  .assistant-panel-inner .details-top h2 {
    margin-bottom: 5px;
    font-size: 22px;
    line-height: 1.2;
  }

  .assistant-panel-inner .details-top p {
    margin: 0;
    color: #66717c;
    font-size: 11px;
    line-height: 1.5;
  }

  .assistant-form-section {
    padding: 13px;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #f7f8fa;
    background-clip: border-box;
  }

  .assistant-form {
    gap: 10px;
  }

  .assistant-form label {
    gap: 4px;
  }

  .assistant-form label > span {
    color: #68737f;
    font-size: 8.5px;
  }

  .assistant-form input,
  .assistant-form select,
  .assistant-form textarea {
    height: 40px;
    border-color: #cbd2da;
    border-radius: 4px;
    background: #fff;
    font-size: 11px;
  }

  .assistant-form textarea {
    min-height: 72px;
  }

  .assistant-evaluate {
    height: 40px;
    margin-top: 12px;
    border-radius: 4px;
    background: #20252b;
    line-height: 1;
  }

  .assistant-result {
    margin-top: 10px;
    padding: 13px;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #fff;
  }

  /* Selection drawer: separate the logical areas without decorative noise. */
  .request-drawer {
    background: #f5f6f8;
  }

  .request-drawer-head {
    min-height: 76px;
    padding: 14px 20px;
    background: #fff;
  }

  .request-drawer-head > div {
    gap: 2px;
  }

  .request-drawer-head span {
    color: #69747f;
  }

  .request-drawer-head h2 {
    font-size: 20px;
  }

  .request-drawer-body {
    min-height: calc(100% - 76px);
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px 16px 24px;
    background: #f5f6f8;
  }

  .bulk-entry,
  .request-lines-section,
  .request-contact-section {
    padding: 15px;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #fff;
    background-clip: border-box;
  }

  .bulk-entry {
    border-bottom: 1px solid #dfe3e8;
  }

  .request-lines-section {
    border-bottom: 1px solid #dfe3e8;
  }

  .request-contact-section {
    gap: 12px;
    padding-top: 15px;
  }

  .request-lines-section h3,
  .request-contact-section h3 {
    font-size: 15px;
  }

  .request-empty {
    padding: 18px;
    border: 1px solid #dfe3e8;
    border-radius: 5px;
    background: #fafbfc;
    text-align: left;
  }

  .request-contact-grid {
    gap: 10px;
  }

  .request-contact-grid input,
  .request-contact-grid select {
    height: 40px;
    border-color: #cbd2da;
    background: #fff;
    font-size: 11px;
  }

  .request-document-actions {
    gap: 8px;
  }

  .request-document-actions button {
    border-color: #cbd2da;
    background: #fff;
  }

  .request-submit {
    min-height: 42px;
  }

  /* Catalog status without rows: a complete, restrained empty state. */
  .transit-state {
    margin-top: 8px;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 32px;
    padding: 24px 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fafbfc;
    background-clip: border-box;
    overflow: hidden;
  }

  .transit-state > span {
    grid-column: 1;
    grid-row: 1;
    color: #6e7884;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .transit-state h2 {
    grid-column: 1;
    grid-row: 2;
    margin: 5px 0 0;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.18;
  }

  .transit-state p {
    grid-column: 1;
    grid-row: 3;
    max-width: 760px;
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
  }

  .transit-state button {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid var(--amber);
    border-radius: 5px;
    background: var(--amber);
    color: var(--ink);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
  }

  .transit-state button:hover,
  .transit-state button:focus-visible {
    border-color: #d99500;
    background: var(--amber);
    outline: none;
  }

  /* Completion pass: strict, consistent entry points and request workflow. */
  .shape-button + .shape-button {
    border-left-color: #aeb6bf !important;
  }

  .search-shortcuts button {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 7px;
    padding: 0 8px;
  }

  .search-shortcuts i {
    position: relative;
    width: 16px;
    height: 16px;
    display: block;
    border: 1px solid #b7bec6;
    border-radius: 2px;
    background: #fff;
  }

  .search-shortcuts .shortcut-list-icon::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 3px;
    left: 3px;
    height: 1px;
    background: #5f6974;
    box-shadow: 0 3px 0 #5f6974, 0 6px 0 #5f6974;
  }

  .search-shortcuts .shortcut-assistant-icon {
    border-color: #d99a0b;
  }

  .search-shortcuts .shortcut-assistant-icon::before,
  .search-shortcuts .shortcut-assistant-icon::after {
    content: "";
    position: absolute;
    background: #7a5a12;
  }

  .search-shortcuts .shortcut-assistant-icon::before {
    top: 3px;
    bottom: 3px;
    left: 7px;
    width: 1px;
  }

  .search-shortcuts .shortcut-assistant-icon::after {
    top: 7px;
    right: 3px;
    left: 3px;
    height: 1px;
  }

  .search-shortcuts [data-open-assistant] {
    background: #fbf8f0;
  }

  .assistant-panel-inner {
    padding: 15px 12px 18px;
  }

  .assistant-panel-inner .details-top {
    margin: 0 4px 13px;
  }

  .assistant-panel-inner .details-top h2 {
    font-size: 20px;
  }

  .assistant-form-section {
    padding: 0;
    overflow: hidden;
    border-color: #d5dbe1;
    background: #fff;
  }

  .assistant-form-head {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border-bottom: 1px solid #dfe3e8;
    background: #f7f8fa;
  }

  .assistant-form-head strong {
    font-size: 12px;
  }

  .assistant-form-head span {
    color: #737d87;
    font-size: 8.5px;
  }

  .assistant-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
    padding: 12px;
  }

  .assistant-form .wide {
    grid-column: 1 / -1;
  }

  .assistant-form label > span {
    min-height: 10px;
    color: #5f6974;
  }

  .assistant-form input,
  .assistant-form select,
  .assistant-form textarea {
    height: 39px;
    border-color: #c7ced6;
  }

  .assistant-form textarea {
    min-height: 66px;
  }

  .assistant-evaluate {
    width: calc(100% - 24px);
    height: 41px;
    margin: 0 12px 12px;
    border: 1px solid #20252b;
    background: #20252b;
  }

  .assistant-evaluate:hover,
  .assistant-evaluate:focus-visible {
    background: #30363d;
    outline: none;
  }

  .request-drawer {
    border-radius: 8px 0 0 8px;
  }

  .request-drawer-head {
    border-bottom: 1px solid #d9dee4;
  }

  .request-drawer-head > button {
    border: 1px solid transparent;
    border-radius: 4px;
  }

  .request-drawer-head > button:hover,
  .request-drawer-head > button:focus-visible {
    border-color: #cbd2da;
    background: #f5f6f8;
    outline: none;
  }

  .request-lines-section,
  .request-contact-section,
  .bulk-entry {
    border-color: #d5dbe1;
    box-shadow: none;
  }

  .request-lines-section > header {
    min-height: 28px;
    align-items: center;
    margin-bottom: 9px;
  }

  .request-lines-section > header span {
    font-variant-numeric: tabular-nums;
  }

  .request-empty {
    min-height: 94px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 15px;
    border-style: solid;
    background: #fafbfc;
  }

  .request-empty > div:first-child {
    min-width: 0;
  }

  .request-empty strong {
    color: var(--ink);
    font-size: 12px;
  }

  .request-empty p {
    max-width: 330px;
    margin-top: 5px;
    line-height: 1.45;
    text-align: left;
  }

  .request-empty-actions {
    display: grid;
    gap: 6px;
  }

  .request-empty-actions button {
    min-width: 130px;
    height: 31px;
    padding: 0 10px;
    border: 1px solid #c7ced6;
    border-radius: 4px;
    background: #fff;
    color: #3f4852;
    font: inherit;
    font-size: 9.5px;
    font-weight: 750;
    cursor: pointer;
  }

  .request-empty-actions button:last-child {
    border-color: var(--amber);
    color: var(--ink);
  }

  .request-empty-actions button:hover,
  .request-empty-actions button:focus-visible {
    border-color: #9ea7b1;
    background: #f4f6f8;
    outline: none;
  }

  .request-empty-actions button:last-child:hover,
  .request-empty-actions button:last-child:focus-visible {
    border-color: #d99500;
    background: #fff9eb;
  }

  .request-contact-section h3,
  .request-lines-section h3 {
    color: var(--ink);
  }

  .request-document-actions button,
  .request-submit {
    border-radius: 4px;
  }

  .transit-state {
    margin-top: 12px;
  }
}

/* Interaction QA overrides: stable background, single focus contour, no heavy active edge. */
@media (max-width: 900px) {
  .mobile-marketplace-view,
  .mobile-marketplace.has-overlay .mobile-marketplace-view {
    opacity: 1;
    transform: none;
  }

  .mobile-marketplace.navless-page .mobile-marketplace-view {
    bottom: 0;
  }

  .mobile-marketplace input:focus-visible,
  .mobile-marketplace textarea:focus-visible,
  .mobile-marketplace select:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
  }

  .m-search-field:focus-within {
    border-color: #aeb5bd;
    box-shadow: 0 0 0 2px rgb(243 173 22 / 13%);
  }

  .m-category-tile.active > span,
  .m-category-grid > button.active {
    box-shadow: none !important;
  }

  .m-category-tile.active > span,
  .m-category-grid > button.active {
    border-color: #c9901e;
    background: #fffbf2;
  }

  .m-detail-tabs button::after,
  .mobile-marketplace-nav > button::before {
    display: none !important;
  }

  .m-detail-tabs button.active {
    background: #f4f6f8;
    color: var(--m-ink);
    font-weight: 760;
  }

  .mobile-marketplace-nav > button.active .m-nav-icon {
    color: #8c5d00;
  }

  .m-marketplace-page[data-mobile-page="catalog"] .m-results-section {
    transition: opacity 105ms ease, transform 105ms ease;
  }

  .m-marketplace-page[data-mobile-page="catalog"].is-mode-changing .m-results-section {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
  }

  .m-marketplace-page[data-mobile-page="catalog"].is-mode-entering .m-results-section {
    animation: m-mode-content-in 180ms cubic-bezier(.22, .72, .24, 1) both;
  }

  @keyframes m-mode-content-in {
    from {
      opacity: 0;
      transform: translate3d(0, -3px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}

@media (min-width: 901px) {
  .shape-button.active,
  .shape-button:first-child.active,
  .shape-button:last-child.active {
    border-color: #c9901e !important;
    background: #fffbf2 !important;
    box-shadow: none !important;
  }

  .city-nav a.active::after,
  .catalog-mode.active::after {
    display: none !important;
  }

  /* Desktop rows are already rendered in small batches. Keeping them under
     content-visibility made a scrolled, newly revealed row retain the closed
     catalogue's old width when the details column opened. Render desktop rows
     normally and bind every layer of the row to the current results track. */
  #productGroups,
  .product-group,
  .product-list,
  .product-entry,
  .product-card.price-row,
  .selected-row-toolbar {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .product-entry {
    width: 100%;
    content-visibility: visible;
    contain-intrinsic-size: none;
  }

  .product-card.price-row,
  .selected-row-toolbar {
    width: 100%;
  }

}

/* Keep the approved compact 1392px composition on ultra-wide screens while
   allowing the shared desktop grid, row columns and panel to animate together.
   Desktop row virtualization is disabled above, so no clipping guard is needed. */
@media (min-width: 1800px) {
  .details-inner {
    width: 100%;
    min-width: 0;
  }

  .catalog-layout.with-details > .details-panel {
    z-index: 20;
    isolation: isolate;
  }

  .catalog-layout.with-details .selected-row-toolbar {
    max-height: var(--selected-row-expanded-height, none);
    animation: wide-selected-row-expand 260ms cubic-bezier(.22, .8, .28, 1) 40ms both;
  }

  .catalog-layout.is-collapsing .selected-row-toolbar {
    animation: wide-selected-row-collapse 260ms cubic-bezier(.4, 0, .2, 1) both;
  }
}

@keyframes wide-selected-row-expand {
  from {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    max-height: var(--selected-row-expanded-height, none);
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wide-selected-row-collapse {
  from {
    max-height: var(--selected-row-expanded-height, none);
    opacity: 1;
    transform: translateY(0);
  }
  to {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* Keep the new catalogue structure authoritative after all legacy layers. */
@media (min-width: 901px) {
  .shape-strip {
    height: 164px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .shape-strip > .shape-button {
    display: grid !important;
    grid-template-rows: 104px auto !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 2px !important;
    padding: 4px 12px 10px !important;
  }

  .shape-strip > .shape-button img {
    width: 112px !important;
    height: 104px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    mix-blend-mode: normal !important;
  }

  .shape-strip > .shape-button strong {
    max-width: 250px;
    font-size: clamp(13px, .92vw, 16px) !important;
    line-height: 1.16 !important;
    text-wrap: balance;
  }
}

@media (max-width: 900px) {
  .mobile-marketplace .m-category-tile {
    width: 124px;
  }

  .mobile-marketplace .m-category-tile img,
  .mobile-marketplace .m-category-grid-image img {
    object-fit: contain !important;
    mix-blend-mode: normal !important;
  }
}

/* Final category-card authority: keep the six tiles optically aligned after
   the legacy desktop and mobile compatibility layers above. */
@media (min-width: 901px) {
  .shape-strip {
    height: 178px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    overflow: hidden !important;
    border: 1px solid #d9dee4 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgb(21 29 38 / 3%) !important;
  }

  .shape-strip > .shape-button,
  .shape-strip > .shape-button:first-child,
  .shape-strip > .shape-button:last-child {
    display: grid !important;
    grid-template-rows: 108px minmax(43px, auto) !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 6px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 8px 10px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .shape-strip > .shape-button + .shape-button {
    margin-left: 0 !important;
    border-left-color: #e1e5e9 !important;
  }

  .shape-strip > .shape-button img {
    width: 112px !important;
    height: 108px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    mix-blend-mode: normal !important;
  }

  .shape-strip > .shape-button strong {
    display: -webkit-box !important;
    align-self: center;
    overflow: hidden;
    width: 100%;
    max-width: 205px !important;
    min-height: 34px;
    color: #252c34;
    font-size: clamp(12px, .82vw, 14px) !important;
    font-weight: 690 !important;
    line-height: 1.2 !important;
    letter-spacing: -.1px;
    text-align: center;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .shape-strip > .shape-button.active,
  .shape-strip > .shape-button:first-child.active,
  .shape-strip > .shape-button:last-child.active {
    z-index: 2;
    border-color: #c9901e !important;
    background: #fffbf2 !important;
    box-shadow: none !important;
  }

  .shape-strip > .shape-button.active + .shape-button:not(.active) {
    border-left-color: transparent !important;
  }
}

/* The existing sticky grade and details columns must start below the newly
   sticky filter row. Preserve their previous bottom edge so no content is
   clipped on short or zoomed desktop viewports. */
@media (min-width: 901px) and (max-width: 1799px) {
  .grade-sidebar {
    top: 154px;
    height: calc(100dvh - 170px);
  }

  .catalog-layout.with-details > .details-panel,
  .details-panel {
    top: 154px;
    max-height: calc(100dvh - 170px);
  }
}

@media (min-width: 1800px) {
  .grade-sidebar {
    top: 154px;
    height: calc(80dvh - 170px);
  }

  .catalog-layout.with-details > .details-panel,
  .details-panel {
    top: 154px;
    max-height: calc(80dvh - 170px);
  }
}

@media (max-width: 900px) {
  .mobile-marketplace .m-category-rail {
    gap: 9px;
    padding-bottom: 16px;
  }

  .mobile-marketplace .m-category-tile {
    flex: 0 0 126px !important;
    width: 126px !important;
    grid-template-rows: 82px minmax(34px, auto);
    gap: 7px;
  }

  .mobile-marketplace .m-category-tile > span {
    width: 82px;
    height: 82px;
    border-color: #dfe3e7;
    border-radius: 10px;
    background: #f5f6f7;
  }

  .mobile-marketplace .m-category-tile img {
    width: 74px;
    height: 74px;
  }

  .mobile-marketplace .m-category-tile strong {
    min-height: 30px;
    color: #4d5660;
    font-size: 10.5px;
    font-weight: 690;
    line-height: 14px;
    letter-spacing: -.04px;
    -webkit-line-clamp: 2;
  }

  .mobile-marketplace .m-category-tile.active > span {
    border-color: #c9901e;
    background: #fffbf2;
    box-shadow: none !important;
  }

  .mobile-marketplace .m-category-grid {
    grid-auto-rows: 190px;
    gap: 10px;
  }

  .mobile-marketplace .m-category-grid > button {
    grid-template-rows: 108px minmax(62px, auto);
    min-height: 190px;
    padding: 8px;
    overflow: hidden;
    border-color: #dfe3e7;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(21 29 38 / 3%);
  }

  .mobile-marketplace .m-category-grid-image {
    border-radius: 8px;
    background: #f5f6f7;
  }

  .mobile-marketplace .m-category-grid-image img {
    width: 98px;
    height: 98px;
  }

  .mobile-marketplace .m-category-grid > button > span:nth-child(2) {
    align-content: start;
    padding: 7px 19px 0 2px;
  }

  .mobile-marketplace .m-category-grid strong {
    min-height: 32px;
    font-size: 11.5px;
    font-weight: 720;
    line-height: 14px;
    letter-spacing: -.08px;
    -webkit-line-clamp: 3;
  }

  .mobile-marketplace .m-category-grid small {
    margin-top: 3px;
    font-size: 9.5px;
    line-height: 12px;
  }

  .mobile-marketplace .m-category-grid > button > .m-icon {
    right: 9px;
    bottom: 13px;
    width: 16px;
    height: 16px;
  }

  .mobile-marketplace .m-category-grid > button.active {
    border-color: #c9901e;
    background: #fffbf2;
    box-shadow: none !important;
  }
}

@media (max-width: 350px) {
  .mobile-marketplace .m-category-grid {
    grid-auto-rows: 184px;
    gap: 8px;
  }

  .mobile-marketplace .m-category-grid > button {
    grid-template-rows: 100px minmax(64px, auto);
    min-height: 184px;
  }

  .mobile-marketplace .m-category-grid-image img {
    width: 90px;
    height: 90px;
  }
}