/*////////////////////////////////////////////////////////////////////////////////////////////////////
//  Custom Gear Builder (#customContent) *new
//  Responsive layout for the builder window in partSearch.php.
//  Loaded after partSearch.css; every rule is scoped to #customContent so it wins over the old
//  absolute-positioned layout without touching the rest of the page.
//
//  Desktop  (> 760px): floating window, draggable by the header, part tabs in a left sidebar.
//  Phone    (<= 760px): full-screen sheet, sticky header, part tabs in a swipeable strip.
////////////////////////////////////////////////////////////////////////////////////////////////////*/

#customContent {
    --cc-navy: #1a304d;
    --cc-navy-2: #243f63;
    --cc-red: #cc0033;
    --cc-red-dark: #a3002a;
    --cc-blue: #7db9e8;
    --cc-bg: #eef2f6;
    --cc-card: #ffffff;
    --cc-text: #1d2733;
    --cc-muted: #5b6776;
    --cc-border: #cfd8e3;
    --cc-focus: #2f80ed;
    --cc-radius: 10px;
    --cc-input-h: 36px;
    --cc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    position: absolute;
    top: 50px;
    left: 0;
    z-index: 21;
    display: none;
    width: min(1200px, calc(100vw - 32px));
    color: var(--cc-text);
    font-family: var(--cc-font);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

#customContent *,
#customContent *::before,
#customContent *::after {
    box-sizing: border-box;
}

/* old decorative pieces from the fixed-size layout */
#customContent #partTabsContainerBackground,
#customContent #closeBoxV,
#customContent #closeBoxH,
#customContent #customGearBuilderImageDiv {
    display: none !important;
}

#customContent #container {
    position: relative;
    width: 100%;
    height: auto;
    background: var(--cc-bg);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    overflow: visible;
}

/*////////////////////////////////////////// header //////////////////////////////////////////*/
#customContent #topControls {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    white-space: normal;
    background: var(--cc-navy);
    color: #fff;
    border-radius: 14px 14px 0 0;
    border-bottom: 3px solid var(--cc-red);
    padding: 10px 14px 0;
    cursor: move;
    z-index: 5;
}

#customContent #ccTitleRow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#customContent #ccTitle {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    flex: 0 0 auto;
}

#customContent #topSearchDiv {
    position: static;
    height: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    cursor: default;
}

#customContent #topSearchLabel {
    font-size: 13px;
    color: #c9d6e6;
}

#customContent #topSearchInput {
    width: 170px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    color: var(--cc-text);
    background: #fff;
}

#customContent #topSearchButton,
#customContent #closeBox {
    cursor: pointer;
}

#customContent #topSearchButton {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--cc-red);
    color: #fff;
    font: 600 14px var(--cc-font);
}

#customContent #topSearchButton:hover {
    background: var(--cc-red-dark);
}

#customContent #closeBox {
    position: static;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    transition: background .15s, border-color .15s;
}

#customContent #closeBox:hover {
    background: var(--cc-red);
    border-color: #fff;
}

#customContent #closeX {
    position: static;
    font-size: 24px;
    line-height: 1;
    font-family: var(--cc-font);
    font-weight: 400;
    text-shadow: none;
}

/* nav links: pills; they stay direct children of #topLinks */
#customContent #topLinks {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0 0 10px;
    color: #fff;
}

#customContent #topLinks .ccNavLink {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--cc-navy-2);
    color: #fff;
    font: 600 13px var(--cc-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s;
}

#customContent #topLinks .ccNavLink:hover,
#customContent #topLinks .ccNavLink:focus-visible {
    background: #34557f;
}

#customContent #topLinks .ccNavPrimary {
    background: var(--cc-red);
}

#customContent #topLinks .ccNavPrimary:hover {
    background: var(--cc-red-dark);
}

/* hamburger for the secondary links; only displayed at <= 640px */
#customContent #ccMenuButton {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 44px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--cc-navy-2);
    cursor: pointer;
}

#customContent #ccMenuButton:hover,
#customContent #ccMenuButton:focus-visible {
    background: #34557f;
}

#customContent .ccMenuBar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .2s, opacity .2s;
}

/* bars turn into an X while the menu is open */
#customContent #topLinks.ccMenuOpen .ccMenuBar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

#customContent #topLinks.ccMenuOpen .ccMenuBar:nth-child(2) {
    opacity: 0;
}

#customContent #topLinks.ccMenuOpen .ccMenuBar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/*////////////////////////////////////////// body: tabs + main //////////////////////////////////////////*/
#customContent #ccBody {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    min-height: 520px;
}

#customContent #partTabsContainer {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: auto;
    padding: 12px 10px;
    background: #dde5ee;
    border-right: 1px solid var(--cc-border);
    border-bottom: 3px solid var(--cc-navy);
    border-bottom-left-radius: 14px;
    scrollbar-width: thin;
}

#customContent #partTabsContainer:has(#partTabs:empty) {
    display: none;
}

#customContent #ccBody:has(#partTabs:empty) {
    grid-template-columns: minmax(0, 1fr);
}

#customContent #partTabs {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#customContent #partTabs li,
#customContent #partTabs li.tab {
    list-style: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 10px;
    text-align: left;
    text-shadow: none;
    background: var(--cc-card);
    color: var(--cc-muted);
    border: 1px solid var(--cc-border);
    border-left: 4px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

#customContent #partTabs li:hover {
    border-color: #9fb3c8;
}

#customContent #partTabs li.active {
    background: var(--cc-card);
    color: var(--cc-text);
    border-color: var(--cc-border);
    border-left-color: var(--cc-red);
    box-shadow: 0 2px 8px rgba(26, 48, 77, .15);
}

/* tabs that aren't the current part are blurred and faded; they sharpen on hover/keyboard focus
   so the part number can still be read before switching to it */
#customContent #partTabs li:not(.active) {
    filter: blur(1.5px);
    opacity: .7;
    transition: filter .2s, opacity .2s, border-color .15s, box-shadow .15s;
}

#customContent #partTabs li:not(.active):hover,
#customContent #partTabs li:not(.active):focus-within {
    filter: none;
    opacity: 1;
}

#customContent .partNums,
#customContent .partnums {
    font: 700 13px var(--cc-font);
    color: inherit;
}

#customContent #partTabs li > div {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 0;
    background: none;
    font-size: 12px;
    text-shadow: none;
}

#customContent #partTabs li > div br {
    display: none;
}

#customContent a.psLink,
#customContent a.psLinkActive {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 8px;
    border-radius: 6px;
    font: 600 12px var(--cc-font);
    text-decoration: none;
    text-shadow: none;
}

#customContent a.psLinkActive {
    background: #e7eef6;
    color: var(--cc-navy);
}

#customContent a.psLinkActive:hover {
    background: var(--cc-navy);
    color: #fff;
    text-shadow: none;
}

#customContent a.psLink,
#customContent a.psLink:visited {
    background: transparent;
    color: #8994a3;
}

#customContent a.hasErrorsLink,
#customContent a.hasErrorsLink:visited {
    background: var(--cc-red);
    border: 0;
    color: #fff;
}

#customContent .tablock {
    float: none;
    margin-left: auto;
    width: 20px;
    height: 20px;
}

/* column so #specControls can fill the height and push the tooth disclaimer to the bottom */
#customContent #ccMain {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px;
}

/*////////////////////////////////////////// slide-down panels //////////////////////////////////////////*/
#customContent .ccPanel {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0 0 14px;
    padding: 14px 16px;
    overflow: hidden;
    text-align: left;
    background: var(--cc-card);
    color: var(--cc-text);
    border: 1px solid var(--cc-border);
    border-top: 4px solid var(--cc-red);
    border-radius: var(--cc-radius);
    box-shadow: 0 4px 14px rgba(26, 48, 77, .12);
    z-index: 4;
}

#customContent .ccPanel hr {
    display: none;
}

#customContent .ccPanelTitle {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cc-navy);
}

#customContent .ccPanelClose {
    position: absolute;
    top: 6px;
    right: 8px;
    bottom: auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font: 400 24px/1 var(--cc-font);
    color: var(--cc-muted);
    text-shadow: none;
    cursor: pointer;
}

#customContent .ccPanelClose:hover {
    background: #eef2f6;
    color: var(--cc-red);
}

#customContent #ccGearTypeGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

#customContent .gearTypeImg {
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border: 2px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: #f8fafc;
    color: var(--cc-navy);
    font: 700 14px var(--cc-font);
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

#customContent .gearTypeImg:hover,
#customContent .gearTypeImg:focus-visible {
    border-color: var(--cc-red);
    box-shadow: 0 4px 12px rgba(204, 0, 51, .18);
    transform: translateY(-2px);
}

#customContent .gearTypeImg img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 110px;
    object-fit: contain;
}

#customContent #feedback {
    display: block;
    width: 100%;
    min-height: 110px;
    padding: 8px 10px;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    font: inherit;
}

#customContent #feedbackInfo {
    width: auto;
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--cc-muted);
}

#customContent .ccFeedbackRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 8px;
}

#customContent .ccFeedbackRow #feedbackButton {
    margin-left: auto;
}

#customContent .ccSummaryLine {
    margin: 0 0 8px;
}

#customContent #newwinlink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}

#customContent #myPartsSummaryDiv a {
    color: var(--cc-navy);
    font-weight: 600;
}

#customContent #mpDisplay {
    width: auto; /* partSearch.css: width 420px, green background */
    background: none;
    font: inherit;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 14px;
    margin-top: 10px;
}

#customContent #mpLabels,
#customContent #mpResults {
    float: none;
    width: auto;
    display: grid;
    gap: 8px;
    align-content: start;
}

#customContent #mpLabels span,
#customContent #mpResults span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--cc-input-h);
    flex-wrap: wrap;
}

/*////////////////////////////////////////// empty state //////////////////////////////////////////*/
#customContent #clickToStartDiv {
    position: static;
    width: auto;
    padding: 0;
    text-align: left;
    color: var(--cc-muted);
}

#customContent .ccStartText {
    margin: 16px 0 0;
    font-size: 16px;
}

#customContent .ccStartText strong {
    font-weight: 700;
    color: var(--cc-navy);
}

/* #ccMain and #topControls share the same left padding, so this margin puts the
   arrow tip (~22px into the image) under the middle of the "+ Create New Part" pill */
#customContent #clickToStartImg {
    display: block;
    margin: 0 0 0 40px;
    max-width: calc(100% - 40px);
    height: auto;
}

/*////////////////////////////////////////// builder //////////////////////////////////////////*/
#customContent #specControls,
#customContent div.active#specControls {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--cc-text);
}

#customContent #lockedDiv {
    position: static;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid #f0c36d;
    border-left: 4px solid #e0a100;
    border-radius: 8px;
    background: #fff7e0;
    color: #6b4e00;
    font: 600 13px var(--cc-font);
}

#customContent .specsDiv {
    font-family: var(--cc-font);
}

#customContent #specsContainer {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    align-items: start;
    color: var(--cc-text);
    font-size: 14px;
    font-weight: 400;
}

#customContent .specGroup,
#customContent #specs1,
#customContent #specs2,
#customContent #specs3 {
    position: static;
    display: grid;
    grid-template-columns: minmax(7.5em, max-content) minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    padding: 12px 14px 14px;
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
}

#customContent .specGroup.ccEmpty {
    display: none !important;
}

#customContent .specGroupTitle {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    padding: 0 0 6px;
    border-bottom: 1px solid #e3e9f0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cc-muted);
}

#customContent div.customSpecHolder {
    height: auto;
    min-width: 0;
}

#customContent .specLabel {
    display: flex;
    align-items: center;
}

#customContent .specLabel label {
    position: static;
    float: none;
    font-size: 13px;
    font-weight: 600;
    color: #34414f;
    cursor: pointer;
}

#customContent .specInput {
    display: flex;
    align-items: center;
    gap: 6px;
}

#customContent .specSubhead {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed #d5dde6;
}

#customContent .mateInfoLabelClass {
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cc-muted);
}

#customContent #mateInfoBlankSpacePI {
    display: none;
}

/* every text box / select in the builder */
#customContent input[type="text"],
#customContent select {
    position: static;
    float: none;
    height: var(--cc-input-h);
    padding: 0 10px;
    border: 1px solid #b9c5d3;
    border-radius: 8px;
    background: #fff;
    color: var(--cc-text);
    font: 600 14px var(--cc-font);
    transition: border-color .15s, box-shadow .15s;
}

#customContent .specInput input[type="text"],
#customContent .specInput select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 200px;
}

#customContent input[type="text"]:focus,
#customContent select:focus {
    outline: none;
    border-color: var(--cc-focus);
    box-shadow: 0 0 0 3px rgba(47, 128, 237, .2);
}

#customContent input[type="text"][readonly],
#customContent select:disabled {
    background: #f1f4f8;
    color: #56606c;
}

/* a locked part disables its spec selects, and browsers send no clicks for disabled controls; let clicks
   pass through to the row so checkLock() in partSearchCAD2022.js can still show "The part is locked..." */
#customContent #specsContainer select.customSpec:disabled {
    pointer-events: none;
}

#customContent #customGearType,
#customContent #customGearType:read-only {
    text-transform: capitalize;
    background: #e7eef6;
    border-color: transparent;
    color: var(--cc-navy);
}

#customContent input[type="button"] {
    min-height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--cc-navy);
    color: #fff;
    font: 600 14px var(--cc-font);
    cursor: pointer;
}

#customContent input[type="button"]:hover {
    background: var(--cc-navy-2);
}

#customContent .gearHelp {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    cursor: help;
    opacity: .75;
}

#customContent .gearHelp:hover {
    opacity: 1;
}

/*////////////////////////////////////////// lower row: keyways/setscrews + calculated //////////////////////////////////////////*/
#customContent #ccLower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    margin-top: 14px;
    /* minimum space above #toothDisclaimerDiv (its margin-top:auto adds more when the builder is short) */
    margin-bottom: 14px;
    align-items: start;
}

#customContent #modifications {
    position: static;
    width: auto;
    height: auto;
    min-width: 0;
}

#customContent #modTabs {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    text-align: left;
}

#customContent #modTabs li,
#customContent #modTabs li.errorModTab {
    display: block;
    list-style: none;
    padding: 8px 16px;
    border: 1px solid var(--cc-border);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #dfe6ee;
    color: var(--cc-muted);
    font: 600 14px var(--cc-font);
    cursor: pointer;
}

#customContent #modTabs li.selectedModTab {
    background: var(--cc-card);
    color: var(--cc-navy);
    border-bottom: 0;
    box-shadow: inset 0 3px 0 var(--cc-red);
}

#customContent #modTabs li.errorModTab,
#customContent #modTabs li.selectedErrorModTab {
    background: var(--cc-red);
    color: #fff;
    border-bottom: 0;
}

#customContent #modTabs label {
    font: inherit;
    color: inherit;
}

#customContent #modTabsContent {
    width: auto;
    height: auto;
    margin: 0;
    padding: 14px;
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
    border-radius: 0 var(--cc-radius) var(--cc-radius) var(--cc-radius);
}

#customContent #modTab1Content,
#customContent #modTab2Content {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

#customContent #modTab3Content {
    display: none;
}

#customContent #keybackground,
#customContent #ssbackground {
    position: static;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    padding: 6px;
    border-radius: var(--cc-radius);
    background: var(--cc-blue); /* must match the #7db9e8 baked into keywaySSsprite.png */
}

#customContent #keySpriteHolder,
#customContent #sskeySpriteHolder {
    position: relative;
    width: 198px;
    height: 198px;
}

#customContent #keywayControls,
#customContent #ssControls {
    position: relative;
    top: auto;
    left: auto;
    flex: 1 1 220px;
    width: auto;
    height: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    font: 14px var(--cc-font);
}

#customContent #ssControlCover,
#customContent #keyControlCover {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    background: var(--cc-card); /* solid so the controls underneath don't show through */
    color: var(--cc-navy);
    font: 600 16px var(--cc-font);
    text-align: center;
    z-index: 3;
}

#customContent .ccField {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#customContent .ccField label {
    font-size: 13px;
    font-weight: 600;
    color: #34414f;
}

#customContent .ccFieldPair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#customContent #customKeyDepth,
#customContent #customKeyWidth {
    width: 100%;
}

#customContent .ccCheck {
    display: flex;
    align-items: center;
    gap: 8px;
}

#customContent .ccCheck input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

#customContent .ccCount {
    margin: 0;
    color: var(--cc-muted);
}

#customContent #keywayInstructions,
#customContent #ssInstructions {
    width: auto;
    height: auto;
    margin: 0;
    font-size: 13px;
    color: var(--cc-muted);
}

#customContent #ccSide {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

#customContent #dependentSpecsContainer {
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    background: var(--cc-navy);
    color: #fff;
    border: 0;
    border-radius: var(--cc-radius);
}

#customContent #dependentSpecsHeader {
    width: auto;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .06);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    color: #c9d6e6;
}

#customContent #dependentSpecsContent {
    width: auto;
    height: auto;
    margin: 0;
    padding: 6px 14px 10px;
    font-size: 14px;
}

#customContent .ccDep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

#customContent .ccDep:last-child {
    border-bottom: 0;
}

#customContent .ccDep dt,
#customContent .ccDep dd {
    margin: 0;
}

#customContent #customPDLabel,
#customContent #customODLabel,
#customContent #customOALlabel,
#customContent #customKeyCountLabel,
#customContent #customSetscrewCountLabel {
    position: static;
    float: none;
    color: #c9d6e6;
    font-size: 13px;
}

#customContent input.dependentInput,
#customContent #customPD,
#customContent #customOD,
#customContent #customOAL,
#customContent #customKeyCount,
#customContent #customSetscrewCount {
    position: static;
    float: none;
    width: 110px;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: 700 15px var(--cc-font);
    font-variant-numeric: tabular-nums;
    text-align: right;
    box-shadow: none;
}

#customContent #wormGearBetaNoteContainer {
    position: static;
    width: auto;
    height: auto;
    border: 1px solid #f0c36d;
    border-radius: var(--cc-radius);
    background: #fff7e0;
}

#customContent #wormGearBetaNoteContainer.ccNotApplicable {
    display: none !important;
}

#customContent #wormGearBetaNoteContent {
    width: auto;
    height: auto;
    padding: 10px 14px;
    font-size: 13px;
    color: #4d3b00;
}

#customContent #donotEmailText {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}

#customContent #previewContainer {
    display: none !important;
}

#customContent #toothDisclaimerDiv {
    position: static;
    width: auto;
    margin-top: auto; /* sits at the bottom of #ccMain */
    padding: 10px 14px;
    border-radius: 8px;
    background: #1a304d;
    color: #dbe5f0;
    font-size: 12px;
}

#customContent #toothDisclaimerDiv a {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}

/*////////////////////////////////////////// CAD download dialog (#cadDialog) //////////////////////////////////////////
  Opened from the builder tabs and the search results. The Downloader's .center() sets an inline absolute
  top/left; these !important rules replace that with a modal that is always centered in the viewport
  and never wider or taller than the screen. */
#cadDialog {
    --cc-navy: #1a304d;
    --cc-navy-2: #243f63;
    --cc-red: #cc0033;
    --cc-text: #1d2733;
    --cc-muted: #5b6776;
    --cc-border: #cfd8e3;
    --cc-focus: #2f80ed;
    --cc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    background: #eef2f6;
    color: var(--cc-text);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 0 100vmax var(--cc-dim, rgba(10, 18, 30, .82)); /* dims the page, the builder included */
    font: 14px/1.4 var(--cc-font);
    text-align: left;
}

#cadDialog *,
#cadDialog *::before,
#cadDialog *::after {
    box-sizing: border-box;
}

#cadDialog #cadDialogCloseBoxV,
#cadDialog #cadDialogCloseBoxH {
    display: none;
}

#cadDialog #cadDialogTopControls {
    position: sticky;
    top: 0;
    left: auto;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    height: auto;
    padding: 12px 14px;
    white-space: normal;
    background: var(--cc-navy);
    border-bottom: 3px solid var(--cc-red);
    border-radius: 14px 14px 0 0;
    color: #fff;
    font-size: 17px;
}

#cadDialog #cadDialogTopLinks {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

#cadDialog #cadDialogPN {
    font: inherit;
    color: #fff;
}

#cadDialog #cadDialogCloseBox {
    position: static;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

#cadDialog #cadDialogCloseBox:hover {
    background: var(--cc-red);
    border-color: #fff;
}

#cadDialog #cadDialogCloseX {
    position: static;
    font: 400 24px/1 var(--cc-font);
    text-shadow: none;
}

#cadDialog #cadDialogBody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    padding: 14px;
}

#cadDialog .cadCard,
#cadDialog #DDCADcontrols,
#cadDialog #DDDCADcontrols {
    position: relative;
    float: none;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    overflow: hidden;
}

#cadDialog #DDheader,
#cadDialog #DDDheader {
    text-align: left;
    padding-bottom: 8px;
    border-bottom: 1px solid #e3e9f0;
}

#cadDialog #DDlabel,
#cadDialog #DDDlabel {
    font-size: 20px;
    font-weight: 700;
    color: var(--cc-navy);
}

#cadDialog .cadBeta {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff3d6;
    color: #7a5600;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

#cadDialog .cadField {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#cadDialog .cadField label {
    font-size: 13px;
    font-weight: 600;
    color: #34414f;
}

#cadDialog select {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #b9c5d3;
    border-radius: 8px;
    background: #fff;
    color: var(--cc-text);
    font: 600 14px var(--cc-font);
}

#cadDialog select:focus {
    outline: none;
    border-color: var(--cc-focus);
    box-shadow: 0 0 0 3px rgba(47, 128, 237, .2);
}

#cadDialog #DDfooter,
#cadDialog #DDDfooter {
    margin-top: auto;
    text-align: left;
}

#cadDialog #DDdownloadBtn,
#cadDialog #DDDdownloadBtn {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: var(--cc-red);
    color: #fff;
    font: 700 15px var(--cc-font);
    cursor: pointer;
}

#cadDialog #DDdownloadBtn:hover,
#cadDialog #DDDdownloadBtn:hover {
    background: #a3002a;
}

#cadDialog #DDdownloadBtn:disabled,
#cadDialog #DDDdownloadBtn:disabled {
    background: #9aa6b4;
    cursor: progress;
}

/* shown by openDownloader() for gear types with no 2D drawings */
#cadDialog #DDcover {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #f1f4f8;
    border-radius: 10px;
    color: var(--cc-muted);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    z-index: 2;
}

/* jQuery .show() sets display:block; lay the message out centered either way */
#cadDialog #DDcover[style*="block"] {
    display: flex !important;
}

#cadDialog #cadDialogInfoDiv {
    position: static;
    float: none;
    width: auto;
    height: auto;
    padding: 0 14px 14px;
    text-align: left;
}

#cadDialog #cadDialogInfo {
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--cc-navy);
    color: #dbe5f0;
    font-size: 13px;
}

#cadDialog #cadDialogInfo p {
    margin: 0;
}

#cadDialog .cadElapsed {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px !important;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

#cadDialog #modelLoadingImg {
    max-height: 20px;
}

@media (max-width: 760px) {
    #cadDialog #cadDialogBody {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
        gap: 12px;
    }

    #cadDialog select {
        height: 44px;
        font-size: 16px; /* 16px stops iOS from zooming on focus */
    }

    #cadDialog #cadDialogInfoDiv {
        padding: 0 12px 12px;
    }
}

/*////////////////////////////////////////// horsepower & torque (#horsepower) //////////////////////////////////////////
  Desktop: a popover next to the HP link; positionHP() in partSearchHP.js sets left/top.
  Phones: a centered modal over #cadDialogOpaqBack (the !important rules override positionHP). */
#horsepower {
    --cc-navy: #1a304d;
    --cc-red: #cc0033;
    --cc-text: #1d2733;
    --cc-muted: #5b6776;
    --cc-border: #cfd8e3;
    --cc-focus: #2f80ed;
    --cc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    position: absolute;
    width: 380px;
    max-width: calc(100vw - 20px);
    /* never taller than the window; keepPopupsInView() in partSearch.php keeps it on screen, and the
       rest scrolls inside it under the sticky header */
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #eef2f6;
    color: var(--cc-text);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 100vmax var(--cc-dim, rgba(10, 18, 30, .82));
    font: 14px/1.4 var(--cc-font);
    text-align: left;
}

#horsepower *,
#horsepower *::before,
#horsepower *::after {
    box-sizing: border-box;
}

#horsepower #hpCloseBoxV,
#horsepower #hpCloseBoxH,
#horsepower .hpHeader,
#horsepower #stressMore {
    display: none;
}

#horsepower #hpTopControls {
    position: sticky;
    top: 0;
    left: auto;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    padding: 10px 12px 10px 14px;
    white-space: normal;
    background: var(--cc-navy);
    border-bottom: 3px solid var(--cc-red);
    border-radius: 14px 14px 0 0;
    color: #fff;
    font-size: 16px;
}

#horsepower #hpTopLinks {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

#horsepower .hpFor {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #c9d6e6;
}

#horsepower #hpPartno {
    font: inherit;
    color: #fff;
}

#horsepower #hpCloseBox {
    position: static;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

#horsepower #hpCloseBox:hover {
    background: var(--cc-red);
    border-color: #fff;
}

#horsepower #hpCloseX {
    position: static;
    font: 400 24px/1 var(--cc-font);
    text-shadow: none;
}

#horsepower #hpTableDiv {
    padding: 12px;
}

#horsepower #horsepowerTable {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 0;
}

#horsepower .hpSection {
    padding: 4px 12px;
    background: #fff;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
}

#horsepower .hpRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #edf1f5;
}

#horsepower .hpRow:last-child {
    border-bottom: 0;
}

#horsepower .hpCellLeft,
#horsepower .hpCellRight {
    padding: 0;
    color: inherit;
    text-align: left;
}

#horsepower .hpCellLeft {
    font-size: 13px;
    font-weight: 600;
    color: #34414f;
}

#horsepower .hpCellRight {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

#horsepower select,
#horsepower input.hpEditable {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #b9c5d3;
    border-radius: 8px;
    background: #fff;
    color: var(--cc-text);
    font: 600 14px var(--cc-font);
}

#horsepower input.hpEditable {
    flex: 0 1 110px;
    border-color: var(--cc-focus);
    background: #f3f8ff;
}

#horsepower select:focus,
#horsepower input.hpEditable:focus {
    outline: none;
    border-color: var(--cc-focus);
    box-shadow: 0 0 0 3px rgba(47, 128, 237, .2);
}

#horsepower .hpEditHint {
    font-size: 12px;
    color: var(--cc-muted);
    white-space: nowrap;
}

/* calculated values read as text, right-aligned numbers */
#horsepower .hpResults input.hpText {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cc-text);
    font: 600 15px var(--cc-font);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

#horsepower .hpResults .hpKey {
    margin: 0 -12px;
    padding: 8px 12px;
    background: #f1f5fa;
}

#horsepower .hpResults .hpKey input.hpText {
    color: var(--cc-navy);
    font-size: 17px;
    font-weight: 700;
}

#horsepower #stressLess {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

#horsepower .hpDisclaimer {
    margin: 0;
    padding: 0 2px;
    border: 0;
    font-size: 12px;
    color: var(--cc-muted);
    text-align: left;
}

#horsepower .hpDisclaimer .highlight {
    display: block;
    margin-top: 2px;
    font-weight: 700;
    color: var(--cc-red);
    background: none;
}

@media (max-width: 760px) {
    #horsepower {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: min(420px, calc(100vw - 24px));
        max-width: none;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #horsepower select,
    #horsepower input.hpEditable {
        height: 44px;
        font-size: 16px; /* 16px stops iOS from zooming on focus */
    }

    #horsepower #hpCloseBox {
        width: 40px;
        height: 40px;
    }
}

/*////////////////////////////////////////// quote form (#quoteContainerR tab + #quoteContainer drawer) //////////////////////////////////////////
  Quote() in partSearchCAD2022.js toggles .open on #quoteContainer and makes #quoteContainerR visible once a
  part is added. Desktop (> 810px): full-height drawer from the right with the tab riding on its edge.
  Phones (<= 810px, the breakpoint partSearch.css already uses): bar along the bottom + bottom sheet. */
#quoteContainerR,
#quoteContainer {
    --q-navy: #1a304d;
    --q-red: #cc0033;
    --q-red-dark: #a3002a;
    --q-text: #1d2733;
    --q-muted: #5b6776;
    --q-border: #cfd8e3;
    --q-focus: #2f80ed;
    --q-width: min(420px, 100vw);
    --q-bar-h: 52px;
    --q-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#quoteContainer *,
#quoteContainer *::before,
#quoteContainer *::after {
    box-sizing: border-box;
}

/* ----- the tab ----- */
#quoteContainerR {
    position: fixed;
    top: 130px;
    right: 0;
    height: auto;
    padding: 0;
    display: flex;
    align-items: stretch;
    background: var(--q-red);
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 4px 14px rgba(0, 0, 0, .3);
    cursor: pointer;
    z-index: 901;
    transition: transform .25s ease, opacity .25s ease, visibility 0s, background .15s;
}

#quoteContainerR:hover,
#quoteContainerR:focus-visible {
    background: var(--q-red-dark);
}

/* desktop: the tab hides while the drawer is open (the drawer has its own close button); it slides back out
   when the drawer closes. !important beats the inline visibility:visible set by addToQuote(). */
@media (min-width: 811px) {
    #quoteContainerR:has(~ #quoteContainer.open) {
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden !important;
        pointer-events: none;
        transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
    }
}

#quoteContainerR #quotePartCountDiv {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
}

#quoteContainerR #partsToQuoteText,
#quoteContainerR #quotePartCount {
    display: inline;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    color: #fff;
    font: 700 14px var(--q-font);
    white-space: nowrap;
}

#quoteContainerR #quotePartCount {
    min-width: 28px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ----- the drawer ----- */
#quoteContainer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: var(--q-width);
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0;
    background: #eef2f6;
    color: var(--q-text);
    border: 0;
    border-radius: 0;
    box-shadow: -10px 0 40px rgba(0, 0, 0, .35);
    font: 14px/1.4 var(--q-font);
    text-align: left;
    z-index: 900;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .35s ease, visibility 0s linear .35s, box-shadow .35s ease;
}

#quoteContainer.open {
    right: 0;
    transform: none;
    visibility: visible;
    box-shadow: -10px 0 40px rgba(0, 0, 0, .35), 0 0 0 100vmax var(--cc-dim, rgba(10, 18, 30, .82));
    transition: transform .35s ease, visibility 0s, box-shadow .35s ease;
}

#quoteContainer #quoteHeader {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    background: var(--q-navy);
    border-bottom: 3px solid var(--q-red);
    color: #fff;
}

#quoteContainer #quoteTitle {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    color: #fff;
    font: 700 18px var(--q-font);
}

#quoteContainer #quoteCloseX {
    position: static;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font: 400 24px/1 var(--q-font);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

#quoteContainer #quoteCloseX span {
    font: 400 24px/1 var(--q-font);
}

#quoteContainer #quoteCloseX:hover {
    background: var(--q-red);
    border-color: #fff;
}

#quoteContainer #quoteInfoWrapper {
    position: relative;
    flex: 1 1 auto;
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

#quoteContainer #quoteInfoDiv {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 14px;
    height: auto;
    padding: 14px;
}

#quoteContainer .quoteStep {
    padding: 14px;
    background: #fff;
    border: 1px solid var(--q-border);
    border-radius: 10px;
}

/* JS shows this with .show() after Next Step */
#quoteContainer #customerInfoDiv {
    padding-bottom: 16px;
}

#quoteContainer .quoteStepTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--q-navy);
    font: 700 15px var(--q-font);
}

#quoteContainer .quoteStepNum {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--q-red);
    color: #fff;
    font-size: 13px;
}

#quoteContainer .quoteSrOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* parts list: header + one .qPartDivs row per part (rows are built by addToQuote) */
#quoteContainer #quotePartInfoDiv {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

#quoteContainer #quotePartInfoHeader,
#quoteContainer .qPartDivs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

#quoteContainer #quotePartInfoHeader {
    padding-bottom: 6px;
    border-bottom: 1px solid #e3e9f0;
    color: var(--q-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#quoteContainer .qPartDivs br {
    display: none;
}

#quoteContainer .qPartCol1,
#quoteContainer .qPartCol2,
#quoteContainer .qPartCol3,
#quoteContainer #qQuantityHeader {
    position: static;
    float: none;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    text-align: left;
    font-size: 0; /* hides the &nbsp;s the row template puts after each input */
}

#quoteContainer #quotePartInfoHeader > div {
    font-size: 12px;
}

#quoteContainer input.blendedInput.qPartnumber {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0 !important;
    background: transparent;
    color: var(--q-text);
    font: 700 15px var(--q-font);
    text-align: left;
}

#quoteContainer input.qPartComment {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #b9c5d3;
    border-radius: 8px;
    font: 600 14px var(--q-font);
}

#quoteContainer input.qPartComment::placeholder {
    font: 400 13px var(--q-font);
    color: #8a96a5;
}

#quoteContainer .qPartRemoveButton {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    width: auto;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f1f4f8;
    color: var(--q-red);
    font: 600 13px var(--q-font) !important;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

#quoteContainer .qPartRemoveButton:hover {
    background: #fde7ec;
}

#quoteContainer #commentsDiv {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 14px;
}

#quoteContainer #qtyInstructions {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff7e0;
    color: #6b4e00;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

#quoteContainer #commentsLabel {
    padding: 4px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #34414f;
}

#quoteContainer #comments {
    width: 100%;
    min-height: 90px;
    padding: 8px 10px;
    border: 1px solid #b9c5d3;
    border-radius: 8px;
    font: 14px var(--q-font);
    resize: vertical;
}

#quoteContainer #quantityInstructions {
    align-self: flex-end;
    color: var(--q-muted);
    font-size: 12px;
}

#quoteContainer #quantityInstructions label {
    font: inherit;
}

/* primary buttons */
#quoteContainer .nextStep-row,
#quoteContainer .submit-row.show-centered-flex-row {
    padding: 0;
}

#quoteContainer #nextStepButton,
#quoteContainer #sendOTPButton,
#quoteContainer #qSendButton {
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--q-red);
    color: #fff;
    font: 700 15px var(--q-font);
    cursor: pointer;
}

#quoteContainer #sendOTPButton {
    background: var(--q-navy);
}

#quoteContainer #nextStepButton:hover,
#quoteContainer #qSendButton:hover {
    background: var(--q-red-dark);
}

#quoteContainer #sendOTPButton:hover {
    background: #243f63;
}

#quoteContainer input[type="button"]:disabled {
    background: #9aa6b4;
    cursor: progress;
}

/* customer info */
#quoteContainer .customerInfoContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: none;
}

#quoteContainer .customerContainerRow {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
}

/* State/Prov has three controls; the country handler shows just one, always in the input column */
#quoteContainer .customerContainerRow > :not(.customerLabel) {
    grid-column: 2;
}

#quoteContainer .customerContainerRow .customerLabel {
    flex: none;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #34414f;
}

#quoteContainer input.qInputLeft,
#quoteContainer select.qInputLeft,
#quoteContainer .qSelect,
#quoteContainer #state,
#quoteContainer #prov,
#quoteContainer #country {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #b9c5d3;
    border-radius: 8px;
    background: #fff;
    color: var(--q-text);
    font: 14px var(--q-font);
    user-select: auto;
}

#quoteContainer input:focus,
#quoteContainer select:focus,
#quoteContainer textarea:focus {
    outline: none;
    border-color: var(--q-focus);
    box-shadow: 0 0 0 3px rgba(47, 128, 237, .2);
}

#quoteContainer .quoteChecks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

#quoteContainer .quoteCheck {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    cursor: pointer;
}

#quoteContainer .quoteCheck input {
    width: 20px;
    height: 20px;
    margin: 0;
}

#quoteContainer #requiredFieldsRow {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--q-red);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

#quoteContainer #rfqInfoDiv {
    padding: 10px 12px;
    border: 1px solid #f0c36d;
    border-radius: 8px;
    background: #fff7e0;
    color: #4d3b00;
    font-size: 13px;
    text-align: left;
}

#quoteContainer #otpDiv {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    text-align: left;
}

#quoteContainer input[type="text"].passcodeInput {
    width: 100% !important;
    height: 48px !important;
    padding: 0 12px;
    border: 1px solid #b9c5d3;
    border-radius: 8px;
    font: 700 20px var(--q-font);
    letter-spacing: .15em;
    text-align: center;
}

#quoteContainer input[type="text"].passcodeInput::placeholder {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
}

/* ----- phones: bottom bar + bottom sheet ----- */
@media (max-width: 810px) {
    #quoteContainerR {
        top: auto;
        right: 0 !important;
        bottom: 0 !important;
        left: 0;
        width: 100%;
        height: var(--q-bar-h);
        justify-content: center;
        border-radius: 0;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .25);
    }

    #quoteContainerR #quotePartCountDiv {
        padding: 0 16px;
    }

    #quoteContainerR #partsToQuoteText,
    #quoteContainerR #quotePartCount {
        font-size: 16px;
    }

    /* the bar slides down out of sight while the sheet is open (the sheet has its own close button), and the
       sheet sits on the bottom edge in its place. !important beats the inline visibility:visible set by addToQuote(). */
    #quoteContainerR:has(~ #quoteContainer.open) {
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden !important;
        pointer-events: none;
        transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
    }

    #quoteContainer {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px);
        max-height: 720px;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
        transform: translateY(100%);
    }

    /* bottom: 0 overrides the old bottom: 45px in partSearch.css */
    #quoteContainer.open {
        bottom: 0;
        transform: none;
    }

    #quoteContainer #quoteHeader {
        border-radius: 16px 16px 0 0;
    }

    #quoteContainer input.qInputLeft,
    #quoteContainer select.qInputLeft,
    #quoteContainer input.qPartComment,
    #quoteContainer #comments,
    #quoteContainer .qSelect,
    #quoteContainer #state,
    #quoteContainer #prov,
    #quoteContainer #country {
        height: 44px;
        font-size: 16px; /* 16px stops iOS from zooming on focus */
    }

    #quoteContainer #comments {
        height: auto;
    }

    #quoteContainer .qPartRemoveButton {
        font-size: 14px !important;
        min-height: 40px;
    }

    /* keep the builder's last row clear of the quote bar once the bar is showing */
    html:has(#quoteContainerR[style*="visible"]) #customContent #ccMain {
        padding-bottom: calc(var(--q-bar-h, 52px) + 16px);
    }
}

@media (max-width: 400px) {
    #quoteContainer .customerContainerRow {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    #quoteContainer .customerContainerRow > :not(.customerLabel) {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #quoteContainer,
    #quoteContainer.open,
    #quoteContainerR {
        transition: none;
    }
}

/*////////////////////////////////////////// email prompt (#portableEmailDiv) //////////////////////////////////////////
  PortableEmail in /scripts/mainFuncs2.js (shared with other pages, so left alone) animates this div into a
  full-width 110px band and sets inline top/left/width/height. On this page the !important rules turn it into a
  centered card instead. setBackgroundColor() still sets the card color inline (navy, gray or red), so the
  text and controls are designed to sit on any dark background. */
#portableEmailDiv {
    --pe-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    position: fixed !important;
    top: 50% !important;
    right: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: min(380px, calc(100vw - 24px)) !important;
    height: auto !important;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    display: none; /* PortableEmail shows it with .show() */
    padding: 0;
    background-color: #1a304d;
    color: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 100vmax var(--cc-dim, rgba(10, 18, 30, .82));
    font: 14px/1.4 var(--pe-font);
    text-align: left;
}

#portableEmailDiv *,
#portableEmailDiv *::before,
#portableEmailDiv *::after {
    box-sizing: border-box;
}

/* close() fades the contents out, then spends 500ms "animating" the width to 0 (a no-op here because the
   width is fixed) before hiding the div; fade the card with its contents so an empty card doesn't linger */
#portableEmailDiv {
    transition: opacity .3s;
}

#portableEmailDiv:has(> #portableEmailControls[style*="none"]) {
    opacity: 0;
}

#portableEmailDiv #portableEmailControls {
    position: static;
    float: none;
    width: auto;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 20px;
}

/* PortableEmail fades the children in with display:block; lay them out as a column either way */
#portableEmailDiv #portableEmailControls[style*="block"],
#portableEmailDiv #portableEmailControls:not([style*="none"]) {
    display: flex !important;
}

#portableEmailDiv #portableEmailTitle {
    margin: 0 44px 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

#portableEmailDiv .portableEmailLabel {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

#portableEmailDiv .portableEmailInput {
    position: static;
    float: none;
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fff;
    color: #1d2733;
    font: 15px var(--pe-font);
}

#portableEmailDiv .portableEmailInput:focus {
    outline: none;
    border-color: #2f80ed;
    box-shadow: 0 0 0 3px rgba(47, 128, 237, .35);
}

#portableEmailDiv #portableEmailButton {
    width: 100%;
    min-height: 44px;
    margin: 12px 0 0;
    padding: 0 16px;
    border: 2px solid #fff;
    border-radius: 8px;
    background: #fff;
    color: #1a304d;
    font: 700 15px var(--pe-font);
    cursor: pointer;
}

#portableEmailDiv #portableEmailButton:hover {
    background: rgba(255, 255, 255, .88);
}

#portableEmailDiv #portableEmailButton:disabled {
    opacity: .6;
    cursor: progress;
}

#portableEmailDiv #emailVerifyingLabel {
    align-self: center;
    font-size: 13px;
    font-weight: 600;
}

#portableEmailDiv #closePortableEmail {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    text-shadow: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

#portableEmailDiv #closePortableEmail:hover {
    background: rgba(255, 255, 255, .15);
    border-color: #fff;
}

#portableEmailDiv #closePortableEmail span {
    font: 400 24px/1 var(--pe-font);
}

@media (max-width: 760px) {
    #portableEmailDiv .portableEmailInput {
        height: 46px;
        font-size: 16px; /* 16px stops iOS from zooming on focus */
    }
}

/*////////////////////////////////////////// floating My Parts window (#myPartsSummaryContainer) //////////////////////////////////////////
  "Open in a new window" moves #myPartsSummaryDiv (built for the My Parts panel in the builder) in here.
  Desktop: fixed floating panel, top right by default, draggable by the header; placeMyPartsSummary() in
  partSearchCAD2022.js restores the saved position but keeps it on screen. Phones: centered window. */
#myPartsSummaryContainer {
    --ms-navy: #1a304d;
    --ms-red: #cc0033;
    --ms-text: #1d2733;
    --ms-muted: #5b6776;
    --ms-border: #cfd8e3;
    --ms-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    position: fixed !important;
    top: 90px;
    right: 16px;
    left: auto;
    width: min(440px, calc(100vw - 24px));
    height: auto;
    /* room below the default 90px top; the body scrolls inside */
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: #eef2f6;
    color: var(--ms-text);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    font: 14px/1.4 var(--ms-font);
    text-align: left;
}

/* fadeIn() sets display:block; a flex column lets the body scroll under the header */
#myPartsSummaryContainer[style*="block"] {
    display: flex !important;
}

#myPartsSummaryContainer *,
#myPartsSummaryContainer *::before,
#myPartsSummaryContainer *::after {
    box-sizing: border-box;
}

#myPartsSummaryContainer #mpSummaryCloseBoxV,
#myPartsSummaryContainer #mpSummaryCloseBoxH,
#myPartsSummaryContainer .ccPanelTitle,
#myPartsSummaryContainer #newwinlink {
    display: none !important;
}

#myPartsSummaryContainer #mpSummaryTopControls {
    position: static;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    padding: 10px 12px 10px 16px;
    white-space: normal;
    background: var(--ms-navy);
    border-bottom: 3px solid var(--ms-red);
    border-radius: 14px 14px 0 0;
    color: #fff;
    cursor: move;
}

#myPartsSummaryContainer #mpSummaryTopLinks {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
}

#myPartsSummaryContainer .mpSummaryFor {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #c9d6e6;
    overflow-wrap: anywhere;
}

#myPartsSummaryContainer #myPartsEmail {
    font: inherit;
    color: #fff;
}

#myPartsSummaryContainer #mpSummaryCloseBox {
    position: relative;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

#myPartsSummaryContainer #mpSummaryCloseBox:hover {
    background: var(--ms-red);
    border-color: #fff;
}

/* CSS-drawn X, same as the other close buttons */
#myPartsSummaryContainer #mpSummaryCloseBox > span {
    display: none;
}

#myPartsSummaryContainer #mpSummaryCloseBox::before,
#myPartsSummaryContainer #mpSummaryCloseBox::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}

#myPartsSummaryContainer #mpSummaryCloseBox::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ----- the moved summary ----- */
#myPartsSummaryContainer #myPartsSummaryDiv {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 14px 16px 16px;
    background: none;
    color: var(--ms-text);
}

#myPartsSummaryContainer .ccSummaryLine {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ms-border);
}

#myPartsSummaryContainer .ccField {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

#myPartsSummaryContainer label {
    font: inherit;
    color: inherit;
}

#myPartsSummaryContainer .ccField > label {
    font-size: 13px;
    font-weight: 600;
    color: #34414f;
}

#myPartsSummaryContainer select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #b9c5d3;
    border-radius: 8px;
    background: #fff;
    color: var(--ms-text);
    font: 600 14px var(--ms-font);
}

#myPartsSummaryContainer #mpDisplay {
    width: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 10px;
    font: inherit;
}

#myPartsSummaryContainer #mpLabels,
#myPartsSummaryContainer #mpResults {
    float: none;
    width: auto;
    display: grid;
    gap: 8px;
    align-content: start;
}

#myPartsSummaryContainer #mpLabels span,
#myPartsSummaryContainer #mpResults span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    flex-wrap: wrap;
}

#myPartsSummaryContainer #mpLabels span {
    font-size: 13px;
    color: #34414f;
}

#myPartsSummaryContainer #mpResults select {
    flex: 1 1 140px;
}

#myPartsSummaryContainer #myPartsSummaryDiv a,
#myPartsSummaryContainer #myPartsSummaryDiv a:visited {
    color: var(--ms-navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#myPartsSummaryContainer #myPartsSummaryDiv a:hover {
    color: var(--ms-red);
}

@media (max-width: 760px) {
    #myPartsSummaryContainer {
        top: 50% !important;
        right: auto !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: min(440px, calc(100vw - 24px));
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 100vmax var(--cc-dim, rgba(10, 18, 30, .82));
    }

    #myPartsSummaryContainer #mpSummaryTopControls {
        cursor: default;
    }

    #myPartsSummaryContainer select {
        height: 44px;
        font-size: 16px; /* 16px stops iOS from zooming on focus */
    }
}

/*////////////////////////////////////////// My Parts counts + part lists (in the builder panel and the floating window) //////////////////////////////////////////
  #mpLabels (counts, #mpspan1-6) and #mpResults (lists, #mpspan7-12) are separate columns that only lined up
  while every row had the same height. Flatten them into #mpDisplay's grid and pin each pair to one row. */
#customContent #mpLabels,
#customContent #mpResults,
#myPartsSummaryContainer #mpLabels,
#myPartsSummaryContainer #mpResults {
    display: contents;
}

#mpDisplay #mpspan1, #mpDisplay #mpspan7 { grid-row: 1; }
#mpDisplay #mpspan2, #mpDisplay #mpspan8 { grid-row: 2; }
#mpDisplay #mpspan3, #mpDisplay #mpspan9 { grid-row: 3; }
#mpDisplay #mpspan4, #mpDisplay #mpspan10 { grid-row: 4; }
#mpDisplay #mpspan5, #mpDisplay #mpspan11 { grid-row: 5; }
#mpDisplay #mpspan6, #mpDisplay #mpspan12 { grid-row: 6; }

#mpDisplay #mpLabels > span { grid-column: 1; }
#mpDisplay #mpResults > span { grid-column: 2; }

@media (max-width: 760px) {
    /* one column: each count directly above its part list */
    #customContent #mpDisplay,
    #myPartsSummaryContainer #mpDisplay {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4px;
    }

    #mpDisplay #mpLabels > span,
    #mpDisplay #mpResults > span {
        grid-column: 1;
    }

    #mpDisplay #mpspan1 { grid-row: 1; }  #mpDisplay #mpspan7 { grid-row: 2; }
    #mpDisplay #mpspan2 { grid-row: 3; }  #mpDisplay #mpspan8 { grid-row: 4; }
    #mpDisplay #mpspan3 { grid-row: 5; }  #mpDisplay #mpspan9 { grid-row: 6; }
    #mpDisplay #mpspan4 { grid-row: 7; }  #mpDisplay #mpspan10 { grid-row: 8; }
    #mpDisplay #mpspan5 { grid-row: 9; }  #mpDisplay #mpspan11 { grid-row: 10; }
    #mpDisplay #mpspan6 { grid-row: 11; } #mpDisplay #mpspan12 { grid-row: 12; }

    #mpDisplay #mpLabels > span {
        min-height: 0 !important;
        margin-top: 8px;
        font-weight: 600;
    }
}

/*////////////////////////////////////////// my saved parts table (#myPartsTableContainer) //////////////////////////////////////////
  getMyPartsData() in partSearchCAD2022.js builds #myPartsToolbar + #myPartsTable (columns depend on the gear
  type). Desktop: centered window, table scrolls inside with a sticky header. Phones: each row becomes a card
  using the data-label on every cell. */
#myPartsTableContainer {
    --mp-navy: #1a304d;
    --mp-red: #cc0033;
    --mp-text: #1d2733;
    --mp-muted: #5b6776;
    --mp-border: #cfd8e3;
    --mp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: min(1100px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: #eef2f6;
    color: var(--mp-text);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 100vmax var(--cc-dim, rgba(10, 18, 30, .82));
    font: 14px/1.4 var(--mp-font);
    text-align: left;
}

/* fadeIn() sets display:block; a flex column lets the table area scroll under a fixed header */
#myPartsTableContainer[style*="block"] {
    display: flex !important;
}

#myPartsTableContainer *,
#myPartsTableContainer *::before,
#myPartsTableContainer *::after {
    box-sizing: border-box;
}

#myPartsTableContainer #mpCloseBoxV,
#myPartsTableContainer #mpCloseBoxH {
    display: none;
}

#myPartsTableContainer #mpTopControls {
    position: static;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto !important;
    height: auto;
    padding: 12px 12px 12px 16px;
    white-space: normal;
    background: var(--mp-navy);
    border-bottom: 3px solid var(--mp-red);
    border-radius: 14px 14px 0 0;
    color: #fff;
    cursor: default;
}

#myPartsTableContainer #mpTopLinks {
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: 700;
}

#myPartsTableContainer #mpCloseBox {
    position: static;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

#myPartsTableContainer #mpCloseBox:hover {
    background: var(--mp-red);
    border-color: #fff;
}

#myPartsTableContainer #mpCloseX {
    position: static;
    font: 400 24px/1 var(--mp-font);
    text-shadow: none;
}

#myPartsTableContainer #myPartsTableDiv {
    flex: 1 1 auto;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0 14px 14px;
}

#myPartsTableContainer #myPartsToolbar {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 -14px;
    padding: 12px 14px;
    background: #eef2f6;
}

#myPartsTableContainer a.myPartsLink,
#myPartsTableContainer a.myPartsLink:visited {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--mp-navy);
    color: #fff;
    font: 600 14px var(--mp-font);
    text-decoration: none;
}

#myPartsTableContainer a.myPartsLink:hover {
    background: #243f63;
    color: #fff;
}

#myPartsTableContainer a.myPartsLink.mpDanger {
    background: #fff;
    color: var(--mp-red);
    box-shadow: inset 0 0 0 2px var(--mp-red);
}

#myPartsTableContainer a.myPartsLink.mpDanger:hover {
    background: var(--mp-red);
    color: #fff;
}

#myPartsTableContainer #myPartsTable {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    font: 14px var(--mp-font);
}

#myPartsTableContainer #myPartsTable th {
    position: sticky;
    top: 60px; /* below the sticky toolbar */
    z-index: 2;
    padding: 10px 12px;
    background: #dfe6ee;
    border: 0;
    border-bottom: 1px solid var(--mp-border);
    color: #34414f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
}

#myPartsTableContainer #myPartsTable td {
    padding: 9px 12px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    color: var(--mp-text);
    text-align: left;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#myPartsTableContainer #myPartsTable tr:last-child td {
    border-bottom: 0;
}

#myPartsTableContainer #myPartsTable tr:hover td {
    background: #f3f7fc;
    color: var(--mp-text);
}

#myPartsTableContainer #myPartsTable input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

#myPartsTableContainer a.myPartnoLink {
    color: var(--mp-navy);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 760px) {
    #myPartsTableContainer #myPartsTableDiv {
        padding: 0 12px 12px;
    }

    #myPartsTableContainer #myPartsToolbar {
        margin: 0 -12px;
        padding: 10px 12px;
    }

    #myPartsTableContainer a.myPartsLink {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 42px;
    }

    /* rows become cards: checkbox + part number on top, then label/value lines */
    #myPartsTableContainer #myPartsTable,
    #myPartsTableContainer #myPartsTable tbody {
        display: block;
        background: none;
        border: 0;
    }

    #myPartsTableContainer #myPartsTable tr:first-child:has(th) {
        display: none;
    }

    #myPartsTableContainer #myPartsTable tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        margin-bottom: 10px;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--mp-border);
        border-radius: 10px;
    }

    #myPartsTableContainer #myPartsTable td {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 12px;
        white-space: normal;
    }

    #myPartsTableContainer #myPartsTable td::before {
        content: attr(data-label);
        color: var(--mp-muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    #myPartsTableContainer #myPartsTable td.mpCheckCell,
    #myPartsTableContainer #myPartsTable td.mpPartnoCell {
        order: -1;
        grid-column: auto;
        align-items: center;
        padding: 12px;
        background: #f1f5fa;
        border-bottom: 1px solid var(--mp-border);
    }

    #myPartsTableContainer #myPartsTable td.mpCheckCell {
        order: -2;
        padding-right: 0;
    }

    #myPartsTableContainer #myPartsTable td.mpCheckCell::before,
    #myPartsTableContainer #myPartsTable td.mpPartnoCell::before {
        display: none;
    }

    #myPartsTableContainer #myPartsTable td.mpPartnoCell {
        font-size: 16px;
    }

    #myPartsTableContainer #myPartsTable input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
}

/*////////////////////////////////////////// desktop: line up the lower row's bottoms //////////////////////////////////////////
  #ccLower is two columns above 980px: #modifications (keyways/setscrews) and #ccSide. Both stretch to the row
  height; the calculated values (#dependentSpecsContainer) sit at the bottom of #ccSide, level with the bottom
  of the keyways/setscrews box, and the worm beta note (worms only) moves above them. */
@media (min-width: 981px) {
    #customContent #ccLower {
        align-items: stretch;
    }

    #customContent #modifications {
        display: flex;
        flex-direction: column;
    }

    #customContent #modTabsContent {
        flex: 1 1 auto;
    }

    #customContent #wormGearBetaNoteContainer {
        order: -1;
    }

    #customContent #dependentSpecsContainer {
        margin-top: auto;
    }
}

/*////////////////////////////////////////// medium screens //////////////////////////////////////////*/
@media (max-width: 980px) {
    #customContent #ccLower {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*////////////////////////////////////////// phones: full-screen sheet //////////////////////////////////////////*/
@media (max-width: 760px) {
    /* set by showWindow()/close in partSearchCAD2022.js */
    html.ccOpen,
    html.ccOpen body {
        overflow: hidden;
    }

    #customContent {
        --cc-input-h: 44px;
        position: fixed !important;
        inset: 0 !important;
        width: auto !important;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        font-size: 16px;
    }

    #customContent #container {
        min-height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    #customContent #topControls {
        position: sticky;
        top: 0;
        padding: 8px 12px 0;
        border-radius: 0;
        cursor: default;
        z-index: 20;
    }

    #customContent #ccTitleRow {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
    }

    #customContent #ccTitle {
        font-size: 17px;
    }

    #customContent #closeBox {
        grid-column: 2;
        grid-row: 1;
        width: 40px;
        height: 40px;
    }

    #customContent #topSearchDiv {
        grid-column: 1 / -1;
        margin: 0;
    }

    #customContent #topSearchLabel {
        display: none;
    }

    #customContent #topSearchInput {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 40px;
        font-size: 16px;
    }

    #customContent #topSearchButton {
        height: 40px;
    }

    /* nav scrolls sideways instead of wrapping into a tall header */
    #customContent #topLinks {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 8px -12px 0;
        padding: 0 12px 10px;
        scrollbar-width: none;
    }

    #customContent #topLinks::-webkit-scrollbar {
        display: none;
    }

    #customContent #topLinks .ccNavLink {
        min-height: 36px;
        font-size: 14px;
    }

    /* flex column so #ccMain fills the rest of the screen below the tabs strip */
    #customContent #container {
        display: flex;
        flex-direction: column;
    }

    #customContent #ccBody {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    #customContent #ccMain {
        flex: 1 1 auto;
    }

    /* part tabs become a swipeable strip pinned under the sticky header, so the current part and its
       buttons are always in view. --cc-header-h is kept up to date by partSearchCAD2022.js */
    #customContent #partTabsContainer {
        position: sticky;
        top: var(--cc-header-h, 150px);
        z-index: 15;
        box-shadow: 0 4px 10px rgba(26, 48, 77, .12);
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 3px solid var(--cc-navy);
        border-radius: 0;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 12px; /* snap tabs to the strip's padding, where scrollTabIntoView() puts them */
    }

    #customContent #partTabs {
        flex-direction: row;
    }

    /* gap after the last tab when the strip is scrolled to the end; a spacer flex item, because the
       strip's own right padding isn't counted in the scroll width by every browser. (It doesn't affect
       the #partTabs:empty check that hides the strip: pseudo-elements aren't child nodes.) */
    #customContent #partTabs::after {
        content: "";
        flex: 0 0 4px; /* + the 8px gap before it = 12px, matching the strip's left padding */
    }

    #customContent #partTabs li,
    #customContent #partTabs li.tab {
        flex: 0 0 auto;
        width: 230px;
        scroll-snap-align: start;
    }

    #customContent a.psLink,
    #customContent a.psLinkActive {
        min-height: 32px;
        padding: 4px 10px;
        font-size: 13px;
    }

    #customContent #ccMain {
        padding: 12px;
    }

    #customContent #ccGearTypeGrid {
        grid-template-columns: 1fr 1fr;
    }

    #customContent .gearTypeImg img {
        height: 84px;
    }

    #customContent #specsContainer {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    #customContent .specGroup,
    #customContent #specs1,
    #customContent #specs2,
    #customContent #specs3 {
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    #customContent .specLabel label {
        font-size: 15px;
    }

    #customContent input[type="text"],
    #customContent select {
        font-size: 16px; /* 16px stops iOS from zooming on focus */
    }

    #customContent .specInput input[type="text"],
    #customContent .specInput select {
        max-width: none;
    }

    #customContent .gearHelp {
        width: 28px;
        height: 28px;
        padding: 2px;
    }

    #customContent input[type="button"] {
        min-height: 44px;
        font-size: 16px;
    }

    #customContent #modTabs li {
        flex: 1 1 0;
        text-align: center;
        padding: 10px 8px;
        font-size: 15px;
    }

    #customContent #modTab1Content,
    #customContent #modTab2Content {
        flex-direction: column;
        align-items: stretch;
    }

    #customContent #keybackground,
    #customContent #ssbackground {
        align-self: center;
    }

    #customContent #keywayControls,
    #customContent #ssControls {
        flex: 0 0 auto;
    }

    /* the cover sits under the gear on phones, so the left-pointing arrow is wrong */
    #customContent #ssControlCover img,
    #customContent #keyControlCover img {
        display: none;
    }

    #customContent .ccCheck input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    #customContent #mpDisplay {
        grid-template-columns: minmax(0, 1fr);
    }

    #customContent .ccFeedbackRow #feedbackButton {
        width: 100%;
    }
}

/*////////////////////////////////////////// small phones: secondary links go in the hamburger //////////////////////////////////////////*/
@media (max-width: 640px) {
    /* the links stay direct children of #topLinks (sortZindex handler), so the menu is laid out with grid:
       row 1 = Create New Part + hamburger, then one full-width row per link when open */
    #customContent #topLinks {
        display: grid;
        grid-template-columns: max-content max-content 1fr;
        align-items: center;
        gap: 6px;
        overflow: visible;
    }

    #customContent #ccMenuButton {
        display: flex;
    }

    #customContent #topLinks .ccNavLink:not(.ccNavPrimary) {
        display: none;
        grid-column: 1 / -1;
        min-height: 44px;
        padding: 8px 14px;
        border-radius: 8px;
        font-size: 15px;
    }

    #customContent #topLinks.ccMenuOpen .ccNavLink:not(.ccNavPrimary) {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    #customContent *,
    #customContent *::before,
    #customContent *::after {
        transition: none !important;
    }
}

/*////////////////////////////////////////// close buttons: CSS-drawn X //////////////////////////////////////////
  The &times; glyph sat off-center (font metrics, plus old partSearch.css rules that still position the
  #closeX / #cadDialogCloseX / #hpCloseX / #mpCloseX spans), so every close button hides its text and draws
  the X with two bars centered on the button instead. Kept last so it wins over the per-window rules above. */
#customContent #closeBox,
#cadDialog #cadDialogCloseBox,
#horsepower #hpCloseBox,
#quoteContainer #quoteCloseX,
#myPartsTableContainer #mpCloseBox {
    position: relative;
    /* partSearch.css gives these boxes top/right: -15px, which only mattered while they were static */
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

#customContent #closeBox > span,
#cadDialog #cadDialogCloseBox > span,
#horsepower #hpCloseBox > span,
#quoteContainer #quoteCloseX > span,
#portableEmailDiv #closePortableEmail > span,
#myPartsTableContainer #mpCloseBox > span {
    display: none;
}

/* the panel close labels hold the &times; directly */
#customContent .ccPanelClose {
    font-size: 0;
}

#customContent #closeBox::before,
#customContent #closeBox::after,
#cadDialog #cadDialogCloseBox::before,
#cadDialog #cadDialogCloseBox::after,
#horsepower #hpCloseBox::before,
#horsepower #hpCloseBox::after,
#quoteContainer #quoteCloseX::before,
#quoteContainer #quoteCloseX::after,
#portableEmailDiv #closePortableEmail::before,
#portableEmailDiv #closePortableEmail::after,
#myPartsTableContainer #mpCloseBox::before,
#myPartsTableContainer #mpCloseBox::after,
#customContent .ccPanelClose::before,
#customContent .ccPanelClose::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}

#customContent #closeBox::after,
#cadDialog #cadDialogCloseBox::after,
#horsepower #hpCloseBox::after,
#quoteContainer #quoteCloseX::after,
#portableEmailDiv #closePortableEmail::after,
#myPartsTableContainer #mpCloseBox::after,
#customContent .ccPanelClose::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#customContent .ccPanelClose::before,
#customContent .ccPanelClose::after {
    width: 14px;
}

/*////////////////////////////////////////// add-to-quote fly-to-cart chip //////////////////////////////////////////
  Created by Quote.animateToCart() in partSearchCAD2022.js when a builder tab's "add to quote" is used. */
.ccCartFly {
    position: fixed;
    z-index: 1000; /* above every .zWindow (sortZindex caps them below 900) and the quote tab (901) */
    padding: 6px 12px;
    border-radius: 999px;
    background: #1a304d;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    font: 700 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: center;
}

/*////////////////////////////////////////// page dimming behind modal windows //////////////////////////////////////////
  #cadDialog, #horsepower, #quoteContainer.open, #myPartsTableContainer, #portableEmailDiv and (on phones)
  #myPartsSummaryContainer dim the page with a 100vmax box-shadow, which always sits directly under the window,
  so the builder is dimmed too. The old #cadDialogOpaqBack (fixed at z-index 30, i.e. behind the builder) stays
  as a click blocker but no longer adds its own black layer, so the page is not darkened twice. */
#cadDialogOpaqBack {
    background: transparent;
    opacity: 1;
    filter: none;
}

/*////////////////////////////////////////// status popups above every window //////////////////////////////////////////
  Message (/scripts/mainFuncs2.js) shows "Saving", "Saved using ...", "This part has errors", download and
  quote status, etc. as .messageConfirmation with an inline z-index of 136. Clicking in the builder runs
  sortZindex(), which lifts #customContent to ~898 (the quote drawer, a .zWindow at 900, always counts as
  visible), so these popups ended up hidden behind the builder and Save looked like it did nothing. */
.messageConfirmation,
#savedConfirmation {
    z-index: 1001 !important; /* above the builder, dialogs, quote tab (901) and the fly-to-cart chip (1000) */
    /* style-main.css caps them at 400px, wider than a phone; keepPopupsInView() in partSearch.php keeps them on screen */
    box-sizing: border-box;
    max-width: min(400px, calc(100vw - 20px));
    overflow-wrap: anywhere;
}

/*////////////////////////////////////////// help / error bubble (#bubbleBox) //////////////////////////////////////////
  ImageMessage (/scripts/mainFuncs2.js) fills #bubbleBox with a help image + text when a .gearHelp icon is hovered
  or tapped, and places it at the mouse; bubbleBox() uses it for the part tabs' "view errors" table. The colors
  are set inline (white for help, red for errors). Help images are up to 553px wide, so cap the bubble and scale
  them. Phones: a panel pinned to the top of the screen instead of at the tap point. */
#bubbleBox {
    box-sizing: border-box;
    width: max-content;
    max-width: min(440px, calc(100vw - 24px));
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    z-index: 1002;
    /* keepBubbleInView() in partSearch.php may slide it under the pointer; ignoring the mouse stops it
       from stealing the hover from the ? icon (which would close and reopen it in a loop) */
    pointer-events: none;
    /* always fits in the window; keepBubbleInView() handles the position */
    max-height: calc(100vh - 20px);
    overflow: hidden;
}

#bubbleBox img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    height: auto;
    margin: 0 auto 8px;
}

/* "view errors" table */
#bubbleBox table {
    width: 100%;
    border-collapse: collapse;
}

#bubbleBox td {
    padding: 2px 4px;
    vertical-align: top;
}

@media (max-width: 760px) {
    #bubbleBox {
        /* pinned to the top: a bottom panel ends up behind the on-screen keyboard when the
           "is required" hint appears for a field being typed in */
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        left: 12px !important;
        width: auto;
        max-width: none;
        max-height: 60vh;
        max-height: 60dvh;
        overflow-y: auto;
        padding: 16px 16px 12px;
        /* tapped to close (closeBubbleOnTap() in partSearch.php); cursor:pointer makes iOS send the click */
        pointer-events: auto;
        cursor: pointer;
        font-size: 15px;
    }

    #bubbleBox img {
        max-height: 40vh;
        max-height: 40dvh;
        width: auto;
    }

    #bubbleBox::after {
        content: "Tap this message to close";
        display: block;
        margin-top: 10px;
        font-size: 12px;
        opacity: .6;
        text-align: center;
    }
}

/*////////////////////////////////////////// part search (#mainContentPartSearch) //////////////////////////////////////////
  The search page under the site header, styled like the gear builder: a navy header bar holding the part number search
  and the builder / My Parts buttons, a white strip of filter selects, then the results table (a card per part at
  <= 980px). partSearch.php puts &nbsp; text and <br/>s between the controls; the flex rows set font-size:0 so that
  text takes no room and space the controls with margins instead of gap (the text runs would still get a gap). */
#mainContentPartSearch {
    --cc-navy: #1a304d;
    --cc-navy-2: #243f63;
    --cc-red: #cc0033;
    --cc-red-dark: #a3002a;
    --cc-bg: #eef2f6;
    --cc-text: #1d2733;
    --cc-muted: #5b6776;
    --cc-border: #cfd8e3;
    --cc-focus: #2f80ed;
    --cc-input-h: 36px;
    --cc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    box-sizing: border-box;
    width: auto;
    max-width: min(1100px, calc(100% - 32px));
    margin: 12px auto 24px;
    padding: 0 0 12px;
    background: var(--cc-bg);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(26, 48, 77, .18);
    color: var(--cc-text);
    font: 14px/1.4 var(--cc-font);
    text-align: left;
}

#mainContentPartSearch *,
#mainContentPartSearch *::before,
#mainContentPartSearch *::after {
    box-sizing: border-box;
}

/* spacer <br/>s between the sections */
#mainContentPartSearch > br,
#mainContentPartSearch #searchButtonDiv > br,
#mainContentPartSearch #controlSelects br {
    display: none;
}

/*---------- header bar: part number search + builder / My Parts ----------*/
#mainContentPartSearch #searchButtonDiv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    margin: 0;
    padding: 12px 16px 6px;
    background: var(--cc-navy);
    border-bottom: 3px solid var(--cc-red);
    border-radius: 14px 14px 0 0;
    font-size: 0;
    text-align: left;
}

#mainContentPartSearch #searchButtonDiv > * {
    margin: 0 8px 6px 0;
}

#mainContentPartSearch #searchTextMainLabel {
    color: #c9d6e6;
    font: 600 14px var(--cc-font);
}

#mainContentPartSearch #searchTextMain {
    width: 190px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fff;
    color: var(--cc-text);
    font: 600 14px var(--cc-font);
}

#mainContentPartSearch #searchTextMain:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(125, 185, 232, .6);
}

#mainContentPartSearch #searchButtonMain {
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--cc-red);
    color: #fff;
    font: 600 14px var(--cc-font);
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

#mainContentPartSearch #searchButtonMain:hover {
    background: var(--cc-red-dark);
}

/* pills, like the builder's nav links; "Build CAD Models" is the primary one */
#mainContentPartSearch #cadButtonMain {
    margin-left: auto;
}

#mainContentPartSearch #cadButtonMain,
#mainContentPartSearch #myPartsButtonMain {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--cc-navy-2);
    color: #fff;
    font: 600 13px var(--cc-font);
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background .15s;
}

#mainContentPartSearch #cadButtonMain {
    background: var(--cc-red);
}

#mainContentPartSearch #cadButtonMain:hover {
    background: var(--cc-red-dark);
}

#mainContentPartSearch #myPartsButtonMain:hover {
    background: #34557f;
}

/*---------- filter selects ----------*/
#mainContentPartSearch #controlSelects {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 14px 16px 4px;
    background: #fff;
    border-bottom: 1px solid var(--cc-border);
    font-size: 0;
    text-align: left;
}

/* the wrappers only group the fields in pairs; let each field sit in the row by itself */
#mainContentPartSearch #controlSelects > .partControlsDiv {
    display: contents;
}

#mainContentPartSearch #controlSelects .partControlsDiv .partControlsDiv {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 12px 10px 0;
    padding: 0;
    font-size: 14px;
}

#mainContentPartSearch .partSearchSelectLabels {
    color: #34414f;
    font: 600 13px var(--cc-font);
}

#mainContentPartSearch select {
    height: var(--cc-input-h);
    min-width: 80px;
    padding: 0 10px;
    border: 1px solid #b9c5d3;
    border-radius: 8px;
    background-color: #fff;
    color: var(--cc-text);
    font: 600 14px var(--cc-font);
    transition: border-color .15s, box-shadow .15s;
}

#mainContentPartSearch select:focus {
    outline: none;
    border-color: var(--cc-focus);
    box-shadow: 0 0 0 3px rgba(47, 128, 237, .2);
}

#mainContentPartSearch #style {
    margin-bottom: 0;
}

/* Get Parts + "auto get specs" */
#mainContentPartSearch #controlSelects #partSearchManualButtonDiv {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: var(--cc-input-h);
}

#mainContentPartSearch #getPartsButton {
    height: 34px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--cc-navy);
    color: #fff;
    font: 600 14px var(--cc-font);
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

#mainContentPartSearch #getPartsButton:hover {
    background: var(--cc-navy-2);
}

#mainContentPartSearch #autoCheckParts {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

#mainContentPartSearch #autoCheckPartsLabel {
    color: var(--cc-muted);
    font: 600 13px var(--cc-font);
    cursor: pointer;
}

/*---------- pagination ----------*/
#mainContentPartSearch .paginationTop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 12px;
    margin: 12px 16px;
}

#mainContentPartSearch .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    height: auto;
    margin: 0;
    padding: 0;
}

/* background-color only: the first / previous / next / last arrows are background images */
#mainContentPartSearch .pagination li {
    display: grid;
    place-items: center;
    width: auto;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    background-color: #fff;
    color: var(--cc-navy);
    font: 600 13px var(--cc-font);
    font-variant-numeric: tabular-nums;
    transition: border-color .15s, background-color .15s;
}

#mainContentPartSearch .pagination li:hover {
    border-color: #9fb3c8;
    background-color: #f3f7fc;
    color: var(--cc-navy);
}

#mainContentPartSearch .pagination li.selected {
    border-color: var(--cc-navy);
    background-color: var(--cc-navy);
    color: #fff;
}

#mainContentPartSearch #totalPageLabel {
    color: var(--cc-muted);
    font-size: 13px;
}

/*---------- results table ----------*/
#mainContentPartSearch #mainTable {
    width: calc(100% - 32px);
    max-width: none;
    margin: 0 16px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    overflow: hidden;
    font: 13px var(--cc-font);
}

#mainContentPartSearch #mainTable th {
    padding: 10px 8px;
    background: #dfe6ee;
    border: 0;
    border-bottom: 1px solid var(--cc-border);
    color: #34414f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

#mainContentPartSearch #mainTable th:hover {
    background: #d2dce7;
    color: var(--cc-navy);
}

#mainContentPartSearch #mainTable .sortByImg {
    width: 10px;
    height: auto;
    vertical-align: middle;
}

#mainContentPartSearch #mainTable td {
    padding: 8px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    color: var(--cc-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#mainContentPartSearch #mainTable tr:last-child td {
    border-bottom: 0;
}

#mainContentPartSearch #mainTable tr:hover td {
    background: #f3f7fc;
    color: var(--cc-text);
}

#mainContentPartSearch #mainTable td.tableLink {
    color: var(--cc-navy);
    font-weight: 700;
    text-underline-offset: 3px;
}

#mainContentPartSearch #mainTable td.tableLink:hover {
    color: var(--cc-red);
}

#mainContentPartSearch #mainTable td.partnoCell {
    font-weight: 700;
}

#mainContentPartSearch #mainTable input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

/*---------- "we found N part numbers" popup ----------
  .center() sets an inline absolute top/left; this keeps it centered in the viewport, dims the page behind it
  like the builder's dialogs, and caps it to the screen. */
#mainContentPartSearch #searchResults {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 0 20px 18px;
    background: #fff;
    border: 0;
    border-top: 4px solid var(--cc-red);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 100vmax rgba(0, 0, 0, .45);
    color: var(--cc-text);
    font: 14px/1.5 var(--cc-font);
    text-align: left;
    z-index: 1000;
}

#mainContentPartSearch #searchResults p {
    margin: 16px 0 0;
}

#mainContentPartSearch #searchResults #searchResultMatch,
#mainContentPartSearch #searchResults #searchResultNumber,
#mainContentPartSearch #searchResults #searchResultMatchSpecs {
    color: var(--cc-navy);
    font-weight: 700;
}

#mainContentPartSearch #searchResults label {
    color: #34414f;
    font-weight: 600;
}

#mainContentPartSearch #searchResults select {
    margin: 4px 0;
}

#mainContentPartSearch #searchResults #newSearchPartnos {
    width: 100%;
}

#mainContentPartSearch #searchResults #newSearchClose {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--cc-navy);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

#mainContentPartSearch #searchResults #newSearchClose:hover {
    background: var(--cc-navy-2);
}

/*---------- tablets and phones ----------*/
@media (max-width: 980px) {
    #mainContentPartSearch {
        max-width: calc(100% - 16px);
        margin-top: 8px;
    }

    #mainContentPartSearch #searchButtonDiv {
        padding: 10px 12px 4px;
    }

    #mainContentPartSearch #searchTextMain {
        flex: 1 1 140px;
        min-width: 0;
        font-size: 16px; /* 16px stops iOS from zooming on focus */
    }

    /* builder / My Parts share their own row */
    #mainContentPartSearch #cadButtonMain {
        margin-left: 0;
    }

    #mainContentPartSearch #cadButtonMain,
    #mainContentPartSearch #myPartsButtonMain {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* fields share each row evenly (flex, not grid: the &nbsp; text would take grid cells) */
    #mainContentPartSearch #controlSelects {
        padding: 12px 2px 2px 12px;
    }

    #mainContentPartSearch #controlSelects .partControlsDiv .partControlsDiv {
        flex: 1 1 130px;
        margin: 0 10px 10px 0;
    }

    #mainContentPartSearch #controlSelects #partSearchManualButtonDiv {
        flex-basis: 100%;
    }

    #mainContentPartSearch select {
        width: 100%;
        font-size: 16px;
    }

    /* a card per part: part number + quote box, then the CAD / HP / Customize links, then the specs in pairs */
    #mainContentPartSearch #mainTable {
        display: block;
        width: auto;
        margin: 0 12px;
        background: none;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    #mainContentPartSearch #mainTable tbody {
        display: block;
    }

    #mainContentPartSearch #mainTable th {
        display: none;
    }

    #mainContentPartSearch #mainTable tr {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        margin-bottom: 10px;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--cc-border);
        border-radius: 10px;
    }

    #mainContentPartSearch #mainTable td,
    #mainContentPartSearch #mainTable tr:nth-child(even) td,
    #mainContentPartSearch #mainTable tr:hover td {
        grid-column: span 3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 7px 12px;
        background: #fff;
        border-bottom: 1px solid #edf1f5;
        color: var(--cc-text);
        text-align: right;
        font-size: 14px;
        white-space: normal;
    }

    #mainContentPartSearch #mainTable td::before {
        content: attr(data-title);
        float: none;
        color: var(--cc-muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
    }

    #mainContentPartSearch #mainTable tr td.partnoCell,
    #mainContentPartSearch #mainTable tr td.item {
        order: -2;
        padding: 12px;
        background: #f1f5fa;
        border-bottom: 1px solid var(--cc-border);
    }

    #mainContentPartSearch #mainTable tr td.partnoCell {
        grid-column: span 4;
        justify-content: flex-start;
        font-size: 16px;
    }

    #mainContentPartSearch #mainTable tr td.partnoCell::before {
        display: none;
    }

    /* on the span, not the cell, so it sits right before the number */
    #mainContentPartSearch #mainTable td.partnoCell .cartPart::before {
        content: "Part#:\00a0\00a0"; /* two non-breaking spaces: plain spaces would collapse into one */
        color: var(--cc-muted);
        font-weight: 600;
    }

    #mainContentPartSearch #mainTable tr td.item {
        grid-column: span 2;
        justify-content: flex-end;
    }

    #mainContentPartSearch #mainTable tr td.tableLink {
        order: -1;
        grid-column: span 2;
        justify-content: center;
        padding: 10px 6px;
        border-bottom: 1px solid var(--cc-border);
        color: var(--cc-navy);
        text-align: center;
    }

    #mainContentPartSearch #mainTable tr td.tableLink + td.tableLink {
        border-left: 1px solid #edf1f5;
    }

    #mainContentPartSearch #mainTable tr td.tableLink::before {
        display: none;
    }

    #mainContentPartSearch #mainTable input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    #mainContentPartSearch .paginationTop {
        margin: 12px;
    }

    #mainContentPartSearch .pagination li {
        min-width: 36px;
        height: 36px;
    }
}

/* tablets: three specs per row in each part card (phones keep two); the divider keeps each value
   next to its own label */
@media (min-width: 761px) and (max-width: 980px) {
    #mainContentPartSearch #mainTable tr td.standardSpec {
        grid-column: span 2;
        border-right: 1px solid #edf1f5;
    }
}

/* phones: the builder / My Parts buttons wrap below the search box; give them a little more room */
@media (max-width: 760px) {
    #mainContentPartSearch #cadButtonMain {
        margin-top: 6px;
    }
}