/* ==========================================================================
   responsive-simple.css
   Loaded ONLY by SimpleLayout.master.
   Covers: Login, Register, RecoverPassword, ChangePassword, Sell, Terms,
           Customer-Service, Contacts, Contact, About, ReturnAuthorization,
           OrderDetail, PopularProducts, Product-Conditions, etc.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared form utilities (SimpleLayout only)
   -------------------------------------------------------------------------- */
.rsp-form-page { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
/* .rsp-form-input base defined in responsive.css */

@media (max-width: 640px) {
    .rsp-form-page { padding: 0 8px; }
    .rsp-form-input { max-width: 100% !important; }

    /* Outer nowrap td: allow wrapping */
    .rsp-form-page td[nowrap], .rsp-form-page TD[nowrap],
    .rsp-form-page td[nowrap="nowrap"], .rsp-form-page TD[nowrap="nowrap"] {
        white-space: normal !important;
        width: 100% !important;
    }

    /* Title row: stack "Create Account" and "Please complete..." vertically */
    .rsp-form-page tr[height="60px"] td,
    .rsp-form-page tr[height="60px"] TD {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .rsp-form-page tr[height="60px"]:first-child td:first-child,
    .rsp-form-page tr[height="60px"]:first-child TD:first-child {
        padding-top: 8px !important;
    }

    /* Kill padding-right:150px/180px on the form's outer centering td */
    .rsp-form-page td[align="center"],
    .rsp-form-page TD[align="center"] {
        padding-right: 0 !important;
        text-align: left !important;
    }

    /* Label column (165px): stack above input, add spacing + readable size */
    .rsp-form-page td[width="165px"], .rsp-form-page TD[width="165px"] {
        display: block !important;
        width: 100% !important;
        padding-top: 12px !important;
        padding-bottom: 2px !important;
        font-size: 13px !important;
    }
    /* Row: release fixed height so rows breathe */
    .rsp-form-page tr[height="38px"] { height: auto !important; }
    /* disabled: causes stacking on ReturnAuthorization form
    .rsp-form-page td[align="left"] + td[align="left"],
    .rsp-form-page TD[align="left"] + TD[align="left"] {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-top: 0 !important;
    } */

    /* Error summary: remove the 170px left indent */
    .rsp-form-page td.ErrorMessage[style*="padding-left:170px"],
    .rsp-form-page TD.ErrorMessage[style*="padding-left:170px"] {
        padding-left: 0 !important;
    }

    /* Cancel + Create buttons: side-by-side with gap, not stacked */
    .rsp-form-page td[width="95px"],
    .rsp-form-page td[width="140px"] {
        width: auto !important;
        padding: 4px 6px !important;
        text-align: center !important;
        vertical-align: middle;
    }

    /* DigiCert seal: hide on mobile */
    .rsp-form-page td[align="right"][style*="padding-right:16px"] {
        display: none !important;
    }

    /* Register inputs: visible border, prevent left/right clipping */
    .rsp-form-page .TextBox,
    .rsp-form-page input.rsp-form-input {
        border: 1px solid #999 !important;
        border-radius: 3px;
        padding: 4px 6px !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
    }

    /* Captcha input: 16px + border, keep narrow (3-char code) */
    .rsp-form-page input[size="3"] {
        font-size: 16px !important;
        border: 1px solid #999 !important;
        border-radius: 3px !important;
        padding: 3px 4px !important;
        width: 52px !important;
        box-sizing: border-box;
        display: inline !important;
    }

    /* "Account Information" bar gap: override margin-top:30px on inner form table */
    .rsp-form-page table[style*="margin-top:30px"] {
        margin-top: 6px !important;
    }

}

/* --------------------------------------------------------------------------
   Login.aspx — side-by-side Login + Register columns
   -------------------------------------------------------------------------- */
.rsp-login-wrap { width: 100%; }
.rsp-login-col  { width: 50%; vertical-align: top; padding: 0 20px; box-sizing: border-box; }
.rsp-login-form-wrap { width: 100%; max-width: 400px; box-sizing: border-box; padding-top: 5px; }
.rsp-login-form-wrap .TextBox { width: 100% !important; max-width: 235px; box-sizing: border-box; font-size: 16px !important; }
/* Captcha input on login.aspx — mobile overrides only */
@media (max-width: 640px) {
    body.User input[size="3"] {
        font-size: 16px !important;
        border: 1px solid #999 !important;
        border-radius: 3px !important;
        padding: 3px 4px !important;
        width: 52px !important;
        box-sizing: border-box;
    }
}
/* Login.aspx inputs are outside .rsp-login-form-wrap — prevent iOS zoom on mobile */
@media (max-width: 640px) {
    body.User .TextBox { font-size: 16px !important; }

    .rsp-login-wrap > tbody > tr,
    .rsp-login-wrap > tr { display: block !important; }
    .rsp-login-col { display: block !important; width: 100% !important; padding: 0 8px 8px 8px !important; }

    /* Unset hardcoded 400px container widths — cover both space variants */
    .rsp-login-col table[width="400px"],
    .rsp-login-col div[style*="width:400px"],
    .rsp-login-col div[style*="width: 400px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hard cap: nothing inside a login column may exceed the column width */
    .rsp-login-col { box-sizing: border-box !important; }
    .rsp-login-col > table { width: 100% !important; max-width: 100% !important; }
    .rsp-login-col table { max-width: 100% !important; box-sizing: border-box; }
    /* Kill the hardcoded width:400px div wrapping the login form */
    .rsp-login-col td > div[style] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
    .rsp-login-form-inner { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }

    /* DigiCert seal + CC logos inject content after load and cause overflow — hide on mobile */
    .rsp-login-col div.Category[style*="height:110px"],
    .rsp-login-col table[width="220"],
    .rsp-login-col table[title*="DigiCert"] { display: none !important; }

    /* Inner nowrap TDs: allow wrapping */
    .rsp-login-col td[nowrap], .rsp-login-col td[nowrap="nowrap"] {
        white-space: normal !important;
    }

    /* Inline paddings that cause overflow */
    #ctl00_ContentArea_UserForm td[style*="padding-left:190px"] { padding-left: 8px !important; text-align: left !important; }
    #ctl00_ContentArea_UserForm td[style*="padding-left:150px"] { padding-left: 0 !important; }
    #ctl00_ContentArea_UserForm td[style*="padding-left:35px"]  { padding-left: 4px !important; }

    /* Header bars: override nowrap, fill column width */
    #ctl00_ContentArea_Title1,
    #ctl00_ContentArea_Title2,
    .rsp-section-bar {
        white-space: normal !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        line-height: 22px !important;
        vertical-align: middle !important;

    }

    /* Space below "New Customer Registration" bar before content */
    #ctl00_ContentArea_Title2 { margin-bottom: 10px !important; }

    /* Inputs: full width, 16px */
    body.User .TextBox { font-size: 16px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
    .rsp-login-form-wrap .TextBox { max-width: 100% !important; font-size: 16px !important; }

    /* Login inputs: visible border, enough right room so outline isn't clipped */
    #ctl00_ContentArea_UserForm .TextBox {
        border: 1px solid #999 !important;
        border-radius: 3px;
        padding: 4px 6px !important;
        margin-right: 4px;
    }

    /* Login form inner table: reflow each row to label-above-input */
    #ctl00_ContentArea_UserForm table { width: 100% !important; }
    #ctl00_ContentArea_UserForm table tr { display: flex !important; flex-direction: column !important; }
    #ctl00_ContentArea_UserForm table tr td { display: block !important; width: 100% !important; padding-left: 4px !important; padding-right: 4px !important; box-sizing: border-box; }
    /* Hide spacer rows */
    #ctl00_ContentArea_UserForm table tr[height="10px"],
    #ctl00_ContentArea_UserForm table tr[height="40px"] { display: none !important; }
    /* Email / Password rows: compact height, space between them */
    #ctl00_ContentArea_UserForm table tr[height="39px"] { height: auto !important; padding-top: 10px !important; padding-bottom: 2px !important; }
    /* Label td: readable size, close to its input */
    #ctl00_ContentArea_UserForm table tr[height="39px"] td[width="85px"] {
        font-size: 13px !important;
        padding-bottom: 2px !important;
        padding-top: 0 !important;
    }
    /* Input td: no extra top gap — label provides the spacing */
    #ctl00_ContentArea_UserForm table tr[height="39px"] td[align="left"]:not([width="85px"]) {
        padding-top: 0 !important;
    }
    /* Forgot Password row: tighter, just enough breathing room */
    #ctl00_ContentArea_UserForm table tr[height="60px"] { height: auto !important; padding-top: 8px !important; padding-bottom: 4px !important; }
    /* Login button row */
    #ctl00_ContentArea_UserForm table tr[height="50px"] { height: auto !important; padding-top: 10px !important; padding-bottom: 10px !important; }
    #ctl00_ContentArea_UserForm table tr[height="50px"] td { padding-left: 0 !important; }

    /* Outer "Log in" header row + inner table: collapse the 62px heights */
    .rsp-login-col > table > tbody > tr[height="62px"],
    .rsp-login-col > table > tr[height="62px"] { height: auto !important; }
    .rsp-login-col > table > tbody > tr[height="62px"] td,
    .rsp-login-col > table > tr[height="62px"] td { padding-top: 5px !important; padding-bottom: 5px !important; }
    .rsp-login-col > table > tbody > tr[height="62px"] table[height="62px"],
    .rsp-login-col > table > tr[height="62px"] table[height="62px"] { height: auto !important; }

    /* "Secure Log In" / "New Customer Registration" header bars: stretch full width */
    .rsp-section-bar { white-space: normal !important; }

    /* Register benefits: remove big indents */
    .rsp-login-form-wrap table tr td[style*="padding-left:70px"] { padding-left: 4px !important; }
    .rsp-login-form-wrap table tr td[style*="padding-left:58px"] {
        padding-left: 4px !important;
        padding-top: 10px !important;
        padding-bottom: 6px !important;
    }
    /* Register benefits spacer row and "PLC Hardware account benefits" header row: collapse height */
    .rsp-login-form-wrap table tr[height="19px"] { display: none !important; }
    .rsp-login-form-wrap table tr[height="60px"] { height: auto !important; padding-top: 4px !important; padding-bottom: 4px !important; }
    /* Register button row: space above and below */
    .rsp-login-form-wrap table tr[height="78px"] { height: auto !important; }
    .rsp-login-form-wrap table tr[height="78px"] td { padding-left: 4px !important; text-align: left !important; padding-top: 14px !important; padding-bottom: 14px !important; }
    .rsp-login-form-wrap table tr[height="60px"] { height: auto !important; }
}

/* --------------------------------------------------------------------------
   Register.aspx — label-above-input reflow
   Scoped to .rsp-reg-form (inner CreateUserWizard form table).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Each label/input row: stack label above input
       Exclude the button row (td[colspan="2"]) — it holds a nested button table */
    .rsp-reg-form tr[height="38px"]:not(:has(td[colspan="2"])) {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }
    .rsp-reg-form tr[height="38px"]:not(:has(td[colspan="2"])) td {
        display: block !important;
        width: 100% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        box-sizing: border-box;
    }
    /* Label td: breathing room above, tight gap below */
    .rsp-reg-form tr[height="38px"]:not(:has(td[colspan="2"])) td[width="165px"] {
        padding-top: 10px !important;
        padding-bottom: 2px !important;
        font-size: 13px !important;
    }
    /* Input td: no top gap — label provides it */
    .rsp-reg-form tr[height="38px"]:not(:has(td[colspan="2"])) td:not([width="165px"]) {
        padding-top: 0 !important;
    }

    /* Button row outer td: full width, no extra padding */
    .rsp-reg-form tr[height="38px"] td[colspan="2"] {
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* Button table: flex row, Cancel left / Create right, vertically centred */
    .rsp-reg-btns { margin-top: 12px !important; width: 100% !important; }
    .rsp-reg-btns tr { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
    .rsp-reg-btns td { width: auto !important; padding: 0 !important; vertical-align: middle !important; }
    /* Captcha row: flex column, hide the empty spacer label td */
    .rsp-reg-form tr[height="100px"] {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }
    .rsp-reg-form tr[height="100px"] td[width="165px"] {
        display: none !important;
    }
    .rsp-reg-form tr[height="100px"] td:not([width="165px"]) {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding-left: 4px !important;
    }
}

/* --------------------------------------------------------------------------
   RecoverPassword.aspx — label-above-input reflow
   .rsp-rpw-email  = UserNameTemplate inner table (email row)
   .rsp-rpw-question = QuestionTemplate inner table (security Q+A rows)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Header row: "Reset Password" title + message sub-line
       Use .rsp-form-page .rsp-rpw-header (0,2,0) to beat the shared
       .rsp-form-page tr[height="60px"] td (0,2,1) on padding-left */
    .rsp-form-page .rsp-rpw-header { padding-left: 0 !important; }
    .rsp-form-page .rsp-rpw-header td { padding-left: 0 !important; }
    .rsp-form-page .rsp-rpw-header td[width="180px"] {
        padding-top: 6px !important;
        padding-bottom: 2px !important;
    }
    /* Message sub-line: flows directly under heading, left-aligned */
    .rsp-form-page .rsp-rpw-header td[align="center"] {
        display: block !important;
        text-align: left !important;
        padding-top: 0 !important;
        padding-left: 2px !important;
        font-size: 8pt !important;
        color: #555 !important;
    }
    /* Error rows: collapse fixed 53px height; zero out ul/li default margins
       so row is invisible when FailureText is empty, visible when populated */
    .rsp-rpw-email tr[height="53px"],
    .rsp-rpw-question tr[height="53px"] {
        height: auto !important;
    }
    .rsp-rpw-email tr[height="53px"] td,
    .rsp-rpw-question tr[height="53px"] td {
        padding-left: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .rsp-rpw-email tr[height="53px"] ul,
    .rsp-rpw-question tr[height="53px"] ul {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .rsp-rpw-email tr[height="53px"] li,
    .rsp-rpw-question tr[height="53px"] li {
        margin: 0 !important;
        padding: 5px 0 0 0 !important;
    }

    /* --- UserNameTemplate: email row --- */
    .rsp-rpw-email tr[height="28px"] {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }
    .rsp-rpw-email tr[height="28px"] td {
        display: block !important;
        width: 100% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        box-sizing: border-box;
        white-space: normal !important;
    }
    .rsp-rpw-email tr[height="28px"] td[width="110px"] {
        padding-top: 10px !important;
        padding-bottom: 2px !important;
        font-size: 13px !important;
    }
    .rsp-rpw-email tr[height="28px"] td:not([width="110px"]) {
        padding-top: 0 !important;
    }

    /* --- QuestionTemplate: security question + answer rows --- */
    .rsp-rpw-question tr[height="36px"] {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }
    .rsp-rpw-question tr[height="36px"] td {
        display: block !important;
        width: 100% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        box-sizing: border-box;
        white-space: normal !important;
    }
    .rsp-rpw-question tr[height="36px"] td[width="160px"] {
        padding-top: 10px !important;
        padding-bottom: 2px !important;
        font-size: 13px !important;
    }
    .rsp-rpw-question tr[height="36px"] td:not([width="160px"]) {
        padding-top: 0 !important;
        padding-left: 4px !important;
    }
}

.rsp-cs-wrap * {
    white-space: normal !important;
}
/* --------------------------------------------------------------------------
   Customer-Service.aspx
   Original structure: .dT.w100 > .dTR > .dTC.w49 | .dTC.w26(spacer) | .dTC
   Each card cell contains: .dT.w100 > .dTR.h22(header) + .dTR(body)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Stack outer table rows so each pair of cards goes vertical */
    .rsp-cs-wrap .dT.w100 { display: block !important; width: 100% !important; }
    .rsp-cs-wrap .dT.w100 > .dTR { display: block !important; width: 100% !important; margin-bottom: 6px; }
    /* Hide the 20px spacer column */
    .rsp-cs-wrap .dT.w100 > .dTR > .dTC.w26 { display: none !important; }
    /* Each card cell: full width, block */
    .rsp-cs-wrap .dT.w100 > .dTR > .dTC { display: block !important; width: 100% !important; box-sizing: border-box; margin-bottom: 4px; padding-top: 5px !important;}
    /* Inner card table: full width, block */
    .rsp-cs-wrap .dTC > .dT { display: block !important; width: 100% !important; box-sizing: border-box; }
    .rsp-cs-wrap .dTC > .dT > .dTR { display: block !important; width: 100% !important; }
    /* Header row: fix h22 hard height, allow text to wrap, style nicely */
    .rsp-cs-wrap .dTR.h22 { height: auto !important; }
    .rsp-cs-wrap .dTR.h22 .dTC { display: flex !important; align-items: center; justify-content: center; white-space: normal !important; padding: 4px 6px !important; font-size: 15px !important; font-weight: bold !important; line-height: 1.3 !important; box-sizing: border-box; width: 100% !important; }
    .rsp-cs-wrap .dTR.h22 .dTC a { display: block; width: 100%; text-align: center; }
    /* Body cell: allow wrapping, contain background image */
    .rsp-cs-wrap .dTC.grayNormal { display: block !important; width: 100% !important; white-space: normal !important; box-sizing: border-box; }
    .rsp-cs-wrap .dTC[style*="background-image"] {
        background-size: 36px auto !important;
        background-position: 99% 6px !important;
        padding-right: 44px !important;
    }
    /* Tighten spacing */
    .rsp-cs-wrap .h4   { display: none !important; }
    .rsp-cs-wrap ul    { margin-top: 4px !important; margin-bottom: 4px !important; }
    .rsp-cs-wrap p     { margin-top: 4px !important; margin-bottom: 4px !important; }
    .rsp-cs-wrap .mt26 { margin-top: 6px !important; }
    .rsp-cs-wrap .blueSkyBold { display: block !important; }
    /* Contact card inner 2-col layout: stack */
    .rsp-cs-wrap .w50  { width: 100% !important; }
    /* Each * bullet line: block + hanging indent so wrapped text aligns
       with the character after "* ", not the "*" itself */
    .rsp-cs-wrap .rsp-cs-bi {
        display: block !important;
        padding-left: 14px !important;
        text-indent: -10px !important;
    }
}

/* --------------------------------------------------------------------------
   Sell.aspx — "Request a Bid" form — mobile overrides
   Scoped to body.SellToUs.
   HTML structure:
     .dT.w100.bsbb > .dTR > .dTC×2   — topbar breadcrumb row
     #SellForm (table.w100)           — 4-col: w120 label | input | w120 label | input
     #ctl00_ContentArea_ItemsList     — 6-col fixed-px items table
     table.w100.mb5                   — actions row (wsnw buttons)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

    /* --- Topbar: release display:table + fixed lh45 / pr136 --- */
    body.SellToUs .dT.w100.bsbb { display: block !important; }
    body.SellToUs .dT.w100.bsbb > .dTR { display: block !important; height: auto !important; }
    body.SellToUs .dT.w100.bsbb > .dTR > .dTC {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        line-height: 1.5 !important;
        padding: 4px 6px !important;
        white-space: normal !important;
    }
    body.SellToUs .dT.w100.bsbb > .dTR > .dTC.pr136 {
        padding-right: 6px !important;
        text-align: left !important;
    }

    /* --- Contact form table (#SellForm): stack 4 cols → label + input pairs --- */
    body.SellToUs #SellForm { width: 100% !important; }

    /* Each data row becomes a block */
    body.SellToUs #SellForm tr.h27,
    body.SellToUs #SellForm tr.h19,
    body.SellToUs #SellForm tr.h40,
    body.SellToUs #SellForm tr.vat { display: block !important; height: auto !important; }

    /* All TDs become full-width blocks */
    body.SellToUs #SellForm tr.h27 td,
    body.SellToUs #SellForm tr.h19 td,
    body.SellToUs #SellForm tr.h40 td,
    body.SellToUs #SellForm tr.vat td {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 0 !important;
        box-sizing: border-box;
    }

    /* Label TDs (w120 + fwb): style like register — bold, spaced above, smaller gap below */
    body.SellToUs #SellForm td.w120.fwb {
        font-size: 13px !important;
        font-weight: bold !important;
        padding-top: 12px !important;
        padding-bottom: 2px !important;
    }

    /* Collapse hint rows (h19) entirely on mobile — hints are shown inline via ::after on the label */
    body.SellToUs #SellForm tr.h19 { display: none !important; }

    /* Append (optional) inline after the Company Name and Comments labels */
        body.SellToUs #SellForm td.rsp-sell-lbl-company::after,
        body.SellToUs #SellForm td.rsp-sell-lbl-comments::after {
            content: " (optional)";
            font-style: italic;
            font-weight: normal;
            font-size: 11px;
            color: #ff6600;
        }

    /* Inputs and textarea: full width, bordered, 16px to prevent iOS zoom */
    body.SellToUs #SellForm input[type="text"],
    body.SellToUs #SellForm textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        font-size: 16px !important;
        border: 1px solid #999 !important;
        border-radius: 3px;
        padding: 4px 6px !important;
        height: auto !important;
    }

    /* Captcha input: narrower — just 3 chars needed */
    body.SellToUs #SellForm input[size="3"] {
        width: 60px !important;
        display: inline !important;
    }


    /* Hide column-header row and spacer row */
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h22,
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h20 {
        display: none !important;
    }

    /* Cards 2+ hidden until revealed by JS Add button */
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30.rsp-sell-card-hidden {
        display: none !important;
    }

    /* Each item row = card, grid layout:
       [ Qty  |  Part Number        ]
       [ Manufacturer  | Condition  ]
       [ Serial Number              ]
       [ Comments                   ] */
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 {
        display: grid !important;
        grid-template-columns: 56px 1fr 1fr;
        grid-template-areas:
            "qty   pn    pn"
            "man   man   cond"
            "ser   ser   ser"
            "comm  comm  comm";
        column-gap: 8px;
        row-gap: 4px;
        height: auto !important;
        width: 100% !important;
        box-sizing: border-box;
        border: 1px solid #d0d0d0;
        border-radius: 4px;
        padding: 8px !important;
        margin-bottom: 10px;
    }

    /* Each cell: stacked label + input */
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td {
        display: flex !important;
        flex-direction: column;
        padding: 2px 0 !important;
        box-sizing: border-box;
        white-space: normal !important;
        width: auto !important;
        min-width: 0;
    }

    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(1) { grid-area: qty; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(2) { grid-area: pn; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(3) { grid-area: man; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(4) { grid-area: cond; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(5) { grid-area: ser; display: flex !important; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(6) { grid-area: comm; }

    /* Inject column labels via ::before; (optional) hint via ::after */
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(1)::before { content: "Qty";           font-weight: bold; font-size: 11px; color: #555; margin-bottom: 2px; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(2)::before { content: "Part Number";   font-weight: bold; font-size: 11px; color: #555; margin-bottom: 2px; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(3)::before { content: "Manufacturer";  font-weight: bold; font-size: 11px; color: #555; margin-bottom: 2px; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(4)::before { content: "Condition";     font-weight: bold; font-size: 11px; color: #555; margin-bottom: 2px; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(5)::before { content: "Serial Number(s)"; font-weight: bold; font-size: 11px; color: #555; margin-bottom: 2px; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(5)::after  { content: "(optional)";    font-size: 10px; color: #ff6600; margin-top: 1px; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(6)::before { content: "Comments";      font-weight: bold; font-size: 11px; color: #555; margin-bottom: 2px; }
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(6)::after  { content: "(optional)";    font-size: 10px; color: #ff6600; margin-top: 1px; }

    /* All inputs fill their cell */
    body.SellToUs #ctl00_ContentArea_ItemsList input[type="text"] {
        font-size: 16px !important;
        border: 1px solid #999 !important;
        border-radius: 3px;
        padding: 4px 6px !important;
        box-sizing: border-box;
        height: auto !important;
        width: 100% !important;
    }

    /* Qty input: narrow — just 3 chars */
    body.SellToUs #ctl00_ContentArea_ItemsList tr.h30 > td:nth-child(1) input[type="text"] {
        width: 44px !important;
    }

    /* --- Actions table (#SellActions): CSS Grid with named areas ---
       Row 1: note (full width)
       Row 1: [Remove Last Product]   [Add Another Product]
       Row 2: Please include Series...
       Row 3: [Cancel]                [Request Bid]
    */
    body.SellToUs #SellActions,
    body.SellToUs #SellActions tbody { display: block !important; width: 100% !important; }

    body.SellToUs #SellActions tr {
        display: grid !important;
        grid-template-areas:
            "remove  add"
            "note    note"
            "cancel  submit";
        grid-template-columns: 1fr 1fr;
        row-gap: 20px;
        column-gap: 10px;
        padding: 10px 8px 10px;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Override w94/w114/wsnw/pt6 from inline classes so grid columns take full control */
    body.SellToUs #SellActions td {
        display: flex !important;
        align-items: center;
        white-space: nowrap;
        padding: 0 !important;
        width: auto !important;
        min-width: 0;
        box-sizing: border-box;
    }

    #SellActionsNote   { grid-area: note;   align-items: flex-start; white-space: normal !important; }
    #SellActionsRemove { grid-area: remove; justify-content: flex-start; }
    #SellActionsAdd    { grid-area: add;    justify-content: flex-end; }
    #SellActionsCancel { grid-area: cancel; justify-content: flex-start; }
    #SellActionsSubmit { grid-area: submit; justify-content: flex-end; }

    .btnStandard {
        height: 32px !important;        
        font-size: 12px !important;
        box-sizing: border-box;
    }

    .btnBlue {
        display: block !important;
        height: 36px !important;
        padding: 7px 18px !important;
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
   PopularProducts.aspx — 5-column float product list
   -------------------------------------------------------------------------- */
/*
 * LoadProducts() renders 5 float:left div.w20pr columns.
 * At mobile w20pr (20%) is too narrow for part numbers.
 * Reflow to fewer columns at narrow widths.
 *
 * Nav header row: #NavRow is .dT.h45 with two dTC children.
 * 20 page-number links overflow and h45 clips the row at mobile.
 * IDs added to markup so CSS can target directly without ancestor selection.
 */
@media (max-width: 640px) {
    /* Release display:table and fixed 45px height on the nav row */
    #ctl00_ContentArea_NavRow { display: block !important; height: auto !important; }

    /* Stack both dTC cells as full-width blocks */
    #ctl00_ContentArea_Nav,
    #ctl00_ContentArea_PageLinksDiv {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        text-align: left !important;
        padding: 3px 6px !important;
        white-space: normal !important;
    }

    /* Page numbers: wrap onto multiple lines with comfortable tap targets */
    #ctl00_ContentArea_PageLinksDiv .BlueUnderline {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2px 0 !important;
        white-space: normal !important;
        line-height: 1;
    }
    #ctl00_ContentArea_PageLinksDiv .BlueUnderline a,
    #ctl00_ContentArea_PageLinksDiv .BlueUnderline .SelectedItem {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 30px !important;
        min-height: 30px !important;
        padding: 0 4px !important;
        margin: 0 !important;
    }

    /* Manufacturer dropdown: mouseover/mouseout never fires on touch —
       hide the hover menu entirely; the bar already shows the current selection */
/*    #manMenu { display: none !important; }*/
}

/* Column reflow */
@media (max-width: 900px) {
    #ctl00_ContentArea_PNList .w20pr { width: 25% !important; }
}
@media (max-width: 640px) {
    #ctl00_ContentArea_PNList .w20pr { width: 33.33% !important; }
}
@media (max-width: 480px) {
    #ctl00_ContentArea_PNList .w20pr {
        width: 50% !important;
        white-space: normal !important;  /* release wsnw so long part numbers wrap */
        word-break: break-all;
    }
}
@media (max-width: 340px) {
    #ctl00_ContentArea_PNList .w20pr { width: 100% !important; }
}

/* --------------------------------------------------------------------------
   Terms.aspx — TOC navigation
   -------------------------------------------------------------------------- */
.rsp-terms-toc {
    column-count: 3; column-gap: 0;
    padding: 6px 8px 4px 8px; box-sizing: border-box; width: 100%;
}
.rsp-terms-toc-item {
    display: block; break-inside: avoid; -webkit-column-break-inside: avoid;
    font-size: 12px; line-height: 23px; padding-right: 6px; box-sizing: border-box;
}

@media (max-width: 640px) { 
    .rsp-terms-toc { column-count: 2; }
    .rsp-content.tal div.fr.pl13.pr33[style*="margin-top:-11px"]:has(> a.return_to_top_a) {
        margin-top: 0 !important;
    }
}
@media (max-width: 440px) { .rsp-terms-toc { column-count: 1; padding: 4px 6px; } }

/* --------------------------------------------------------------------------
   About.aspx
   -------------------------------------------------------------------------- */
.rsp-about-feedback-title { padding-left: clamp(16px, 8%, 100px); }
.rsp-about-feedbacks { margin-left: clamp(8px, 5%, 63px); margin-right: clamp(8px, 5%, 70px); }

@media (max-width: 600px) {
    .rsp-about-wrap .dT > .dTR { display: flex; flex-direction: column; align-items: flex-start; }
    .rsp-about-wrap .dT > .dTR > .dTC:first-child { display: block; width: 100%; text-align: center; padding-bottom: 4px; }
    .rsp-about-wrap .dT > .dTR > .dTC:last-child  { display: block; width: 100%; }
}

/* --------------------------------------------------------------------------
   Product-Conditions.aspx — 3-column display-table condition rows
   Targeted via #rsp-pc-wrap (id added to the page's outer wrapper div).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Header bar: stack print icon + title */
    #rsp-pc-wrap .w58.fr {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 4px;
    }
    #rsp-pc-wrap .lh22.SeaBlue.bar.tac.wa.pl55 {
        padding-left: 8px !important;
        text-align: left !important;
    }

    /* Condition rows: release fixed height, stack cells */
    #rsp-pc-wrap .dTR {
        display: block !important;
        height: auto !important;
        padding: 6px 0;
    }
    #rsp-pc-wrap .dTR .dTC {
        display: block !important;
        width: auto !important;
        white-space: normal !important;
    }
    /* Code badge (col 1) + name (col 2): keep inline on same line */
    #rsp-pc-wrap .dTR .dTC.w44 {
        display: inline !important;
        padding-right: 6px;
        font-weight: bold;
    }
    #rsp-pc-wrap .dTR .dTC.w180 {
        display: inline !important;
    }
    /* Description (col 3): block below the code+name */
    #rsp-pc-wrap .dTR .dTC.wsu {
        display: block !important;
        padding-left: 4px !important;
        padding-top: 2px;
    }
}

/* --------------------------------------------------------------------------
   ReturnAuthorization.aspx
   Targets rsp-ra-* classes added to key tables in the .aspx markup.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

    /* --- nav header row --- */
    .rsp-form-page tr[height="45px"] > td > table tr { display: block !important; }
    .rsp-form-page tr[height="45px"] > td > table td {
        display: block !important;
        width: 100% !important;
        padding-right: 4px !important;
        white-space: normal !important;
    }
    .rsp-form-page #ctl00_ContentArea_Info{
        padding: 5px 5px 5px 5px !important;
        display: block !important;
    }
    /* --- Contact / Return Info 4-column table ---
       Use flex on each data row so col1+col2 wrap together, then col3+col4.
       At ≤640px, each pair (label+input) gets its own line. */
    table.rsp-ra-contact {
        width: 100% !important;
    }

    /* Hide the pure spacer rows (empty) */
    table.rsp-ra-contact tr[height="20px"] { display: none !important; }

    /* The "(optional)" header row: keep but tighten */
    table.rsp-ra-contact tr[height="20px"]:first-child { display: none !important; }

    /* Section header row (SeaBlue bar) stays as normal table row */
    table.rsp-ra-contact tr[height="22px"] { display: table-row !important; }
    table.rsp-ra-contact tr[height="22px"] td {
        display: table-cell !important;
        width: auto !important;
    }

    /* Data rows: flex so the 4 TDs wrap into 2 label+input pairs */
    table.rsp-ra-contact tr[height="27px"] {
        display: flex !important;
        flex-wrap: wrap;
        height: auto !important;
        padding: 5px 0 !important;
    }
    table.rsp-ra-contact tr:nth-child(3) {
       padding-bottom: 10px !important;
       padding-top: 0 !important;
    }

    /* Label cells: fixed left-side width, tight padding */
    table.rsp-ra-contact tr[height="27px"] td[width="120px"] {
        width: 100% !important;
        padding: 6px 6px 0 8px !important;
        white-space: nowrap;
        align-self: center;
        box-sizing: border-box;
        display: block !important;
    }
    /* Input cells: take remaining width on the same line as their label */
    table.rsp-ra-contact tr[height="27px"] td:not([width="120px"]) {
        flex: 1 1 0;
        min-width: 0;
        padding: 4px 8px 4px 4px !important;
        box-sizing: border-box;
    }
    /* All text inputs 100% / 16px */
    table.rsp-ra-contact input[type="text"] {
        font-size: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border: 1px solid #999 !important;
        border-radius: 3px;
        box-sizing: border-box;
    }

    /* --- Reason for Return ---
       Stack the "Reason for Return:" label above the radio box */
    table.rsp-ra-reason > tbody > tr > td,
    table.rsp-ra-reason > tr > td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding-right: 5px !important;
        padding-left: 5px !important;
        padding-top: 6px !important;
    }
    /* Stack the two radio columns (left/right) into one column */
    table.rsp-ra-reason .WhiteBG > tbody > tr[height="27px"],
    table.rsp-ra-reason .WhiteBG > tr[height="27px"] {
        display: block !important;
        height: auto !important;
    }
    table.rsp-ra-reason .WhiteBG > tbody > tr[height="27px"] > td,
    table.rsp-ra-reason .WhiteBG > tr[height="27px"] > td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    /* "Other (explain):" keep label+input on one line */
    table.rsp-ra-reason .WhiteBG table.WhiteBG td {
        display: table-cell !important;
        padding-right: 5px !important;
    }
    table.rsp-ra-reason .WhiteBG table.WhiteBG input[type="text"] {
        font-size: 16px !important;
        max-width: 100% !important;
        height: auto !important;
        border: 1px solid #999 !important;
        border-radius: 3px;
        box-sizing: border-box;
        width: auto !important;
    }

    /* --- Return Options: two label+select pairs, each on its own line ---
       Single row with 4 TDs: [Return Options:] [ReturnType] [Ship Replacement To:] [AddressList]
       nth-child used because TD1 and TD2 share width="120px" */
    table.rsp-ra-options > tbody > tr,
    table.rsp-ra-options > tr {
        display: block !important;
        height: auto !important;
        padding: 4px 0 8px !important;
    }
    table.rsp-ra-options td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 2px 8px !important;
        white-space: normal !important;
    }
    /* Label cells: no bottom gap so the select sits right under */
    table.rsp-ra-options td:nth-child(1) {
        padding-top: 8px !important;
        padding-bottom: 0 !important;
    }
    /* Extra top gap before the second pair */
    table.rsp-ra-options td:nth-child(3) {
        padding-top: 18px !important;
        padding-bottom: 0 !important;
    }
    /* Dropdown cells: stretch select full width */
    table.rsp-ra-options td:nth-child(2),
    table.rsp-ra-options td:nth-child(4) {
        padding-top: 2px !important;
    }
    table.rsp-ra-options select {
        font-size: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border: 1px solid #999 !important;
        border-radius: 3px;
        padding: 6px 8px !important;
        box-sizing: border-box;
    }

    /* --- Items list: card layout ---
       Hide the fixed-px header row; each item row becomes a labelled card. */
    #ctl00_ContentArea_ItemsList { width: 100% !important; }

    /* Hide the column-header row */
    #ctl00_ContentArea_ItemsList tr[height="22px"],
    #ctl00_ContentArea_ItemsList tr[height="20px"] { display: none !important; }

    /* Each item row = card */
    #ctl00_ContentArea_ItemsList tr[height="50px"] {
        display: block !important;
        height: auto !important;
        border: 1px solid #d0d0d0;
        border-radius: 4px;
        padding: 6px 8px !important;
        margin-bottom: 8px;
    }

    /* Each cell = full-width labelled field */
    #ctl00_ContentArea_ItemsList tr[height="50px"] > td {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        padding: 4px 0 !important;
        box-sizing: border-box;
    }

    /* Inject column labels via ::before */
    #ctl00_ContentArea_ItemsList tr[height="50px"] > td:nth-child(1)::before { content: "Qty"; font-weight: bold; font-size: 11px; color: #555; margin-bottom: 2px; }
    #ctl00_ContentArea_ItemsList tr[height="50px"] > td:nth-child(2)::before { content: "Mfr. Part Number"; font-weight: bold; font-size: 11px; color: #555; margin-bottom: 2px; }
    #ctl00_ContentArea_ItemsList tr[height="50px"] > td:nth-child(3)::before { content: "Serial Number(s)"; font-weight: bold; font-size: 11px; color: #555; margin-bottom: 2px; }
    #ctl00_ContentArea_ItemsList tr[height="50px"] > td:nth-child(4)::before { content: "Detailed Problem Description"; font-weight: bold; font-size: 11px; color: #555; margin-bottom: 2px; }

    /* Inputs/textareas fill the card field */
    #ctl00_ContentArea_ItemsList input[type="text"],
    #ctl00_ContentArea_ItemsList textarea {
        font-size: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border: 1px solid #999 !important;
        border-radius: 3px;
        box-sizing: border-box;
        text-align: left !important;
    }

    /* --- Actions row: 2×2 grid ---
       Row 1: [Remove Last Product] [Add Another Product]
       Row 2: [Cancel]              [Request Return]      */
    table.rsp-ra-actions > tbody > tr,
    table.rsp-ra-actions > tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        height: auto !important;
        gap: 8px 4px;
        padding: 10px 8px !important;
    }
    table.rsp-ra-actions td {
        display: block !important;
        width: 100% !important;
        white-space: nowrap;
        box-sizing: border-box;
        padding: 4px !important;
        text-align: center !important;
    }
    /* Submit button fills its cell */
    table.rsp-ra-actions td:nth-child(4) input,
    table.rsp-ra-actions td:nth-child(4) img { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   OrderDetail.aspx  (profile/OrderDetail.aspx uses SimpleLayout)
   -------------------------------------------------------------------------- */

/* Line items scroll wrapper — same pattern as checkout confirmation */
.OrderDetail .rsp-lineitems-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    display: block;
}
.OrderDetail .rsp-lineitems-wrap table {
    max-width: none;
}

/* Disclaimer row — center text and add breathing room above */
.OrderDetail tr[height="14px"] > td {
    text-align: center !important;
    padding-top: 14px !important;
    height: auto !important;
}

/* Buttons row — Cancel Order left, Continue Shopping right with gap */
#ctl00_ContentArea_CO {
    text-align: left !important;
    padding-right: 16px !important;
}

/* Info panel (thank-you message) — cancel the large right-padding on narrow screens */
@media (max-width: 640px) {
    #ctl00_ContentArea_orderDetail_InfoPanel td[style*="padding-right:120px"] {
        padding-right: 8px !important;
        white-space: normal !important;
    }
    /* Shrink the "Order" label cell so it doesn't dominate the row */
    #ctl00_ContentArea_orderDetail_InfoTitleCell {
        width: auto !important;
        padding-left: 8px !important;
        padding-right: 16px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 640px) {
    /* Contain the OD table */
    .OrderDetail .rsp-content { overflow-x: hidden; }

    /* Stack the 33% summary and address columns */
    .OrderDetail td[width="33%"] {
        display: block !important;
        width: 100% !important;
        padding-right: 4px !important;
        box-sizing: border-box;
    }

    /* Stack Instructions cell + Totals cell */
    .OrderDetail td[width="240px"],
    .OrderDetail table[style*="margin-top:25px"] > tbody > tr > td,
    .OrderDetail table[style*="margin-top:25px"] > tr > td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding-top: 12px;
    }

    /* Constrain textareas */
    .OrderDetail textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Allow nowrap cells outside the lineitems table to wrap */
    .OrderDetail td[nowrap],
    .OrderDetail td[nowrap="nowrap"] {
        white-space: normal !important;
        word-break: break-word;
    }
    /* Keep lineitems cells nowrap */
    .OrderDetail .rsp-lineitems-wrap td[nowrap],
    .OrderDetail .rsp-lineitems-wrap td[nowrap="nowrap"] {
        white-space: nowrap !important;
        word-break: normal !important;
    }

    /* Release fixed-pixel div widths */
    .OrderDetail div:not(.rsp-lineitems-wrap) {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Cap all tables except the lineitems scroll table */
    .OrderDetail table:not(.rsp-lineitems-wrap table) {
        max-width: 100%;
    }

    /* Line items: description moved to row below — same pattern as cart/confirmation */
    .OrderDetail .rsp-lineitems-wrap {
        overflow-x: visible;
    }
    .OrderDetail .rsp-lineitems-wrap table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    /* CSS guard: hide description col header in case JS hasn't run yet */
    .OrderDetail .rsp-lineitems-wrap tr:first-child td:nth-child(6) {
        display: none !important;
    }
    /* Description full-width row — italic style matching cart/confirmation */
    .OrderDetail .rsp-lineitems-wrap .rsp-cart-desc-row .rsp-cart-desc-cell {
        padding: 0 6px 4px 6px;
        font-size: 11px;
        font-style: italic;
        color: #666;
        white-space: normal;
        word-break: break-word;
        line-height: 1.4;
    }
    .OrderDetail .rsp-lineitems-wrap .rsp-cart-desc-row .rsp-cart-desc-cell a { color: #666; font-style: italic; }
}


/* --------------------------------------------------------------------------
   Contacts.aspx  — targeted via #rsp-contacts-wrap (id on outer div)
   Desktop layout is untouched; all overrides live inside @media only.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Topbar: clear floats, stack breadcrumb above office hours */
    #rsp-contacts-wrap > .lh45.pl6.Blue.fl,
    #rsp-contacts-wrap > .lh45.SeaBlue.fl {
        float: none !important;
        width: 100% !important;
        padding-left: 6px !important;
        line-height: 1.5 !important;
        padding-top: 4px;
        padding-bottom: 4px;
        box-sizing: border-box;
    }

    /* Outer table rows: switch to block so cards stack vertically */
    #rsp-contacts-wrap > .dT,
    #rsp-contacts-wrap > .dT > .dTR {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* All cells: full-width block */
    #rsp-contacts-wrap > .dT > .dTR > .dTC {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding-bottom: 8px;
    }

    /* Spacer columns (w23 holding 20.png): hide on mobile */
    #rsp-contacts-wrap > .dT > .dTR > .dTC.w23 {
        display: none !important;
    }

    /* Empty trailing cell: hide on mobile */
    #rsp-contacts-wrap > .dT > .dTR > .dTC:empty {
        display: none !important;
    }

    /* Card rows: release fixed heights */
    #rsp-contacts-wrap .dT > .dTR,


    /* Card bg icon: scale down so it doesn't overlap text */
    #rsp-contacts-wrap .dTC.w32 .dTR:not(:first-child) .dTC.grayNormal {
        background-size: 44px auto;
    }

    /* Footer block: release fixed height */
    #rsp-contacts-wrap .w100.h120.vat {
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 0;
    }

    /* Card inner dT: stretch to full width so header bar fills the card */
    #rsp-contacts-wrap .dTC.w32 > .dT {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   contact.aspx (form page) — targeted via #rsp-contact-fields and
   #rsp-contact-actions. Breadcrumb TR and "TO:" TR are untouched.
   Desktop layout is untouched; all overrides live inside @media only.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

    /* --- Fields grid: collapse all rows and cells to stacked blocks --- */
    #rsp-contact-fields,
    #rsp-contact-fields tbody,
    #rsp-contact-fields tr,
    #rsp-contact-fields td {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    /* "(optional)" header row: meaningless without 4 columns */
    #rsp-contact-fields tr[height="19px"] {
        display: none !important;
    }

    /* Label cells: space above, tight below — readable separation from input */
    #rsp-contact-fields td[width="120px"] {
        padding-top: 10px !important;
        padding-bottom: 2px !important;
        padding-left: 4px !important;
        padding-right: 0 !important;
        font-size: 13px !important;
    }

    /* Input container cells: right padding so border isn't clipped */
    #rsp-contact-fields td[align="left"],
    #rsp-contact-fields td[width="313px"],
    #rsp-contact-fields td[colspan="3"] {
        padding-left: 4px !important;
        padding-right: 8px !important;
    }

    /* All text inputs and textarea: full width, visible border, 16px vs iOS zoom */
    #rsp-contact-fields input[type="text"],
    #rsp-contact-fields textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        border: 1px solid #999 !important;
        border-radius: 3px !important;
        padding: 4px 6px !important;
    }

    /* Captcha input: narrow, still 16px */
    #rsp-contact-fields input[size="3"] {
        font-size: 16px !important;
        border: 1px solid #999 !important;
        border-radius: 3px !important;
        padding: 3px 4px !important;
        width: 52px !important;
        display: inline !important;
    }

    /* Captcha image: never overflow */
    #rsp-contact-fields img {
        max-width: 100%;
        height: auto;
    }

    /* --- Actions table: Cancel left, Send right --- */
    #rsp-contact-actions,
    #rsp-contact-actions tbody {
        display: block !important;
        width: 100% !important;
    }
    #rsp-contact-actions tr {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 4px !important;
        width: 100% !important;
    }
    #rsp-contact-actions td {
        display: block !important;
        width: auto !important;
        white-space: nowrap !important;
        text-align: left !important;
        padding: 0 !important;
    }
    #rsp-contact-actions td:last-child {
        padding-right: 8px !important;
    }
}

/* --------------------------------------------------------------------------
   product-conditions.aspx — 3-column CSS-table → 2-line mobile card
   Row 1: abbreviation (SSP) + short name on the same line, left-padded
   Row 2: full description spans full width
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

    /* Convert the CSS-table row to a flex container with wrapping */
    #rsp-pc-wrap .dTR {
        display: flex !important;
        flex-wrap: wrap !important;
        height: auto !important;
        align-items: center;
        padding: 6px 0;
        box-sizing: border-box;
    }

    /* Release fixed pixel widths so cells size to their content */
    #rsp-pc-wrap .dTR > .dTC {
        width: auto !important;
    }

    /* Abbreviation cell (SSP / SOP / …): left border indent */
    #rsp-pc-wrap .dTR > .dTC.w44 {
        flex: 0 0 auto;
        padding-left: 10px !important;
        padding-right: 6px !important;
    }

    /* Short-name cell: fills the rest of the first line */
    #rsp-pc-wrap .dTR > .dTC.w180 {
        flex: 1 1 auto;
        padding-left: 10px !important;
        white-space: normal !important;
    }

    /* Full-description cell: own full-width row below */
    #rsp-pc-wrap .dTR > .dTC.wsu {
        flex: 0 0 100% !important;
        padding-left: 10px !important;
        padding-right: 8px !important;
        padding-top: 4px;
        padding-bottom: 6px;
    }
}

/* --------------------------------------------------------------------------
   PrintConditions.aspx — header bar + 4-column display-table → same layout
   as product-conditions.aspx (#rsp-pc-wrap) on mobile.
   Header: .pl22.bsbb — overrides pr200 / tac on the "Product Conditions" bar.
   Table:  .pl2p.bsbb — hides the w20 arrow column; w43+w180 share line 1;
           wsu description is full-width on line 2; inline borders suppressed.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

    .pl22.bsbb {
        padding-left: 10px !important;
    }

    /* "Product Conditions" bar: cancel large right-padding (pr200) and
       center-alignment so the text sits left and stays on one line */
    .pl22.bsbb .lh22.SeaBlue.bar {
        padding-right: 8px !important;
        text-align: left !important;
    }

    /* Hide the arrow / spacer column */
    .pl2p.bsbb .dTR > .dTC.w20 {
        display: none !important;
    }

    /* Convert the outer CSS-table to a block so flex rows are correctly
       contained — without this, display:table auto-sizes from column widths
       and the flex rows have no reliable full-width anchor */
    .pl2p.bsbb > .dT {
        display: block !important;
        width: 100% !important;
    }

    /* Convert the CSS-table row to a flex container with wrapping */
    .pl2p.bsbb .dTR {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        height: auto !important;
        align-items: center;
        padding: 6px 0;
        box-sizing: border-box;
        margin-left: 6px !important;
    }

    /* Release fixed pixel widths and cancel inline border decorations */
    .pl2p.bsbb .dTR > .dTC {
        width: auto !important;
        min-width: 0;
        border: none !important;
        box-sizing: border-box;
        padding-top: 6px !important;
    }

    /* Abbreviation cell (SSP / SOP / …): left indent, matches w44 treatment */
    .pl2p.bsbb .dTR > .dTC.w43 {
        flex: 0 0 auto;
        padding-left: 10px !important;
        padding-right: 6px !important;
    }

    /* Short-name cell: fills the rest of the first line */
    .pl2p.bsbb .dTR > .dTC.w180 {
        flex: 1 1 auto;
        padding-left: 10px !important;
        white-space: normal !important;
    }

    /* Full-description cell: own full-width row below */
    .pl2p.bsbb .dTR > .dTC.wsu {
        flex: 0 0 100% !important;
        padding-left: 10px !important;
        padding-right: 12px !important;
        padding-top: 4px;
        padding-bottom: 6px;
        box-sizing: border-box !important;
    }
}