/* ========================================================================== responsive-standard.css Loaded ONLY by StandardLayout.master. Covers: Products.aspx (product detail), browse.aspx, Cart.aspx, OrderHistory.aspx, Wish-List.aspx ========================================================================== */ /* -------------------------------------------------------------------------- Products.aspx — product detail -------------------------------------------------------------------------- */ /* Unlock the fixed min-widths from main.css */ .w492m { min-width: 0 !important; } .w362m { min-width: 0 !important; } /* Bottom spacer div — never let it push a minimum page width */ #ctl00_MainContent_divProduct #MWL { width: 0 !important; height: 0 !important; } /* * Similar Parts / Specs table: scroll container only at narrow widths. * At desktop (>900px) the table uses percentage columns that fill the * content area naturally — no scroll container needed and adding one * would cause the wsnw cells to trigger an unwanted inner h-scroll. * At ≤900px the layout is already constrained to full viewport width, * so we need the scroll container to prevent page-level h-scroll. */ @media (max-width: 900px) { /* Outer left margin */ #ctl00_MainContent_divProduct.ml20 { margin-left: 0 !important; } /* * CORE FIX — flatten the entire div-based pseudo-table layout. * * main.css defines: * .dT { display:table } — width:100% on a table is a minimum, not a cap; * the table grows wider if content demands it. * .dTC { display:table-cell; white-space:nowrap } * * Patching individual levels one at a time doesn't work because * white-space:nowrap on any un-reset ancestor still inherits into * every nested HTML table's cells, forcing them to expand unconstrained. * * The correct fix: convert ALL .dT / .dTR / .dTC div elements inside * divProduct to display:block in one scoped rule and reset white-space. * These classes are only used on
pseudo-table wrappers, never on * real //
elements, so width:100% here is safe. */ #ctl00_MainContent_divProduct .dT, #ctl00_MainContent_divProduct .dTR, #ctl00_MainContent_divProduct .dTC { display: block !important; width: auto !important; white-space: normal !important; } /* Hide the empty 20px spacer column */ #ctl00_MainContent_divProduct .dTC.w20 { display: none !important; } /* Image panel: constrain and centre */ #ctl00_MainContent_Image { width: 100% !important; margin: 0 auto 8px auto; text-align: center; } #ctl00_MainContent_Image img.largeimg { max-width: 100%; height: auto; } /* Nav breadcrumb row: the h45 is on the parent .dT container — release it */ #ctl00_MainContent_divProduct .dT.h45 { height: auto !important; } #ctl00_MainContent_divNav .PDCategories { white-space: normal !important; word-break: break-word; } /* Related Categories: td has wsnw and each .Category div has h19 — both clip wrapped links */ #ctl00_MainContent_RelatedCategories td.wsnw { white-space: normal !important; } #ctl00_MainContent_RelatedCategories .Category { height: auto !important; white-space: normal !important; word-break: break-word; } /* Paging: drop fixed 200px, left-align */ #ctl00_MainContent_divPaging { width: auto !important; text-align: left !important; padding-top: 4px; padding-right: 4px; } /* Restore display-table layout inside the paging widget so prev/text/next stay inline — the broad .dT/.dTR/.dTC block rule above flattens them. */ #ctl00_MainContent_divPaging .dT { display: table !important; width: auto !important; } #ctl00_MainContent_divPaging .dTR { display: table-row !important; width: auto !important; } #ctl00_MainContent_divPaging .dTC { display: table-cell !important; width: auto !important; white-space: nowrap; } /* Inventory label column — allow it to shrink */ .w492m table.w100 td.w114 { width: auto !important; white-space: nowrap; } /* * Similar Parts + Specs: scroll container, targeted overrides only. * table-layout:auto respects HTML width="9%" attributes which become * too narrow at mobile (~36px) for values like "$158.00". * Fix: strip percentage widths on all cells, let auto-layout size them * from content, and only allow the description column to wrap. */ #ctl00_MainContent_Details2 { width: 100% !important; max-width: 100% !important; overflow-x: auto; display: block; box-sizing: border-box; } #ctl00_MainContent_Details2 table { width: 100% !important; table-layout: auto !important; } /* Release all HTML percentage widths — let content drive column size */ #ctl00_MainContent_Details2 td { width: auto !important; } /* Description column only wraps — everything else stays on one line */ #ctl00_MainContent_Details2 td.w35 { white-space: normal !important; word-break: break-word; min-width: 120px; } /* Price / Disc / Qty columns: enough room for values like "$158.00" */ #ctl00_MainContent_Details2 td.w9 { min-width: 52px; white-space: nowrap; } /* Part number column: allow it to shrink a bit but not split */ #ctl00_MainContent_Details2 td.w23 { min-width: 80px; white-space: nowrap; } /* Cond column: always 3 chars — shrink padding to save space */ #ctl00_MainContent_Details2 td.w6 { padding-left: 4px !important; padding-right: 4px !important; white-space: nowrap; } /* Cart icon column: enough room to tap comfortably */ #ctl00_MainContent_Details2 td.w3 { min-width: 30px; padding-left: 6px !important; padding-right: 6px !important; white-space: nowrap; } } @media (max-width: 640px) { /* Similar Parts: description hidden, shown as full-width row below — matches cart/confirmation */ #ctl00_MainContent_Details2 { overflow-x: visible; } #ctl00_MainContent_Details2 table { min-width: 0 !important; } /* CSS guard: hide description col header in case JS hasn't run yet */ #ctl00_MainContent_Details2 tr.bar td.w35 { display: none !important; } /* Description full-width row (injected by JS) */ #ctl00_MainContent_Details2 .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; } #ctl00_MainContent_Details2 .rsp-cart-desc-row .rsp-cart-desc-cell a { color: #666; font-style: italic; } } /* Quantity + buttons row: reflow on narrow screens */ @media (max-width: 640px) { #ctl00_MainContent_Quantity table.w100 { width: 100% !important; } /* Qty input: taller, 16px font to prevent iOS zoom */ #ctl00_MainContent_QuantityBox { height: 36px !important; width: 52px !important; font-size: 16px !important; padding: 4px 6px !important; box-sizing: border-box; } #ctl00_MainContent_ProductDisplayPanel table.w100 tr.vat { display: flex !important; flex-wrap: nowrap !important; gap: 0; align-items: center; } #ctl00_MainContent_ProductDisplayPanel table.w100 tr.vat td { width: auto !important; white-space: nowrap; } /* Qty cell: shrink to input, remove wide left padding */ #ctl00_MainContent_ProductDisplayPanel td.w35p { width: auto !important; padding-left: 4px !important; flex-shrink: 0; } /* Gap between qty and buttons via padding-left on the buttons cell */ #ctl00_MainContent_ProductDisplayPanel td.w35p + td { padding-left: 18px !important; flex: 1 1 auto; } /* Right breathing room so buttons don't jam against screen edge */ #ctl00_MainContent_ProductDisplayPanel { padding-right: 16px !important; } /* Remove pr20 on Add to Cart cell; add symmetric left padding */ #ctl00_MainContent_ProductDisplayPanel td.w165 { padding-left: 8px !important; padding-right: 8px !important; } #ctl00_MainContent_ProductDisplayPanel table.w100 tr.vat td table tr.vat { display: flex !important; flex-wrap: nowrap !important; gap: 8px; align-items: center; } /* Add to Cart: natural width; Save for Later: shrink to text, less left pad */ #ctl00_MainContent_ProductDisplayPanel td.w165 { width: auto !important; flex-shrink: 0; } #ctl00_MainContent_ProductDisplayPanel td.w140 { width: auto !important; flex-shrink: 1; padding-left: 6px !important; } } @media (max-width: 640px) { /* Disclaimer text: allow wrapping */ .TableRow4 { white-space: normal !important; } /* Similar Parts: hide Est Val column when server doesn't strip it (desktop UA resized narrow). Only the header cell has a class (w9.ColumnAlignRight.wsnw.pl6) — target that only. Data cells are empty with no class and collapse to nothing on their own. */ #ctl00_MainContent_Details2 td.w9.ColumnAlignRight.wsnw.pl6 { display: none !important; } /* Spec label column: allow shrink */ .TableRowName.w110 { white-space: normal !important; width: 80px !important; } } @media (max-width: 480px) { /* Image panel: constrain to full width, keep visible */ #ctl00_MainContent_Image { max-width: 100% !important; width: 100% !important; } #ctl00_MainContent_Image img.largeimg { max-width: 100% !important; width: auto !important; height: auto !important; display: block; margin: 0 auto; } } /* -------------------------------------------------------------------------- Browse / Product List (browse.aspx / default.aspx category pages) -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Cart.aspx — empty state info block -------------------------------------------------------------------------- */ /* !important needed to beat the inline style="width:660px" on the div and the width="660px" HTML attribute on the nested table */ .rsp-cart-info { width: 100% !important; max-width: 660px; box-sizing: border-box; } .rsp-cart-info > table { width: 100% !important; max-width: 660px; box-sizing: border-box; } /* Cart outer padding TDs: remove the 20px left indent on mobile */ @media (max-width: 640px) { td.cart-outer { padding-left: 0 !important; } td.cart-outer #ctl00_MainContent_Buttons{ margin: 0 !important; } #ctl00_MainContent_CartPanel .rsp-ebd-td-qty{ white-space: normal !important; } #ctl00_MainContent_CartPanel .rsp-ebd-span-qty{ display: block !important; } #ctl00_MainContent_CartPanel .rsp-ebd-div-error{ white-space: normal !important; } #ctl00_MainContent_CartPanel .rsp-ebd-div-error[style*="inline-flex"]{ display: block !important; } } @media (max-width: 900px) { /* At ≤900px mainContent collapses to full width; remove the 40px left padding so the 660px content doesn't push past the viewport edge */ .rsp-cart-info-td { padding-left: 12px !important; } /* Allow the block to fill the narrower content area. overflow:hidden is the safety net: table-layout:auto ignores max-width when nowrap TDs are present, so we clip at the div level instead. */ .rsp-cart-info { max-width: 100% !important; overflow: hidden; } .rsp-cart-info > table { max-width: 100% !important; } /* Release nowrap on the heading rows so the table doesn't force itself wider */ .rsp-cart-info td[nowrap], .rsp-cart-info td[nowrap="nowrap"] { white-space: normal !important; } } @media (max-width: 640px) { /* Further tighten padding at very narrow widths */ .rsp-cart-info-td { padding-left: 8px !important; } /* Bullet rows have height="17px" inline — clips wrapped text */ .rsp-cart-info tr { height: auto !important; } /* Containing TDs have nowrap="nowrap" — prevents bullet text from wrapping */ .rsp-cart-info td[nowrap], .rsp-cart-info td[nowrap="nowrap"] { white-space: normal !important; } /* Hanging indent for wrapped bullet lines */ .rsp-cart-info table table td { display: flex; align-items: baseline; padding-left: 0 !important; text-indent: 0; } .rsp-cart-info table table td .rsp-bul { flex-shrink: 0; } .rsp-cart-info table table td .rsp-bul-text { flex: 1; } } /* * The Subtotal TABLE uses float:left (400px spacer) + float:right (subtotal box). * Floated children don't give height to their container, so the TABLE is * zero-height. The buttons table below it has margin-top:25px measured from * that zero-height bottom, making the buttons crowd against the item rows. * Fix: overflow:hidden on the TD turns it into a block-formatting context * that contains the floats — giving the TABLE its proper 25px height. * Scoped with > (direct child) so it never hits #ctl00_MainContent_MainButtons. */ #ctl00_MainContent_CartPanel > table[style*="margin-top:25px"] td { overflow: hidden; } /* .btnBlue is defined in main.css — no base overrides needed here. See @media (max-width: 640px) below for responsive adjustments. */ #ctl00_MainContent_CheckoutButton { /* .btnBlue — scoped override anchor */ } @media (max-width: 640px) { /* Basket table: horizontal scroll */ #ctl00_MainContent_BasketDetail { display: block; overflow-x: auto; } /* Qty input in cart: 16px font to prevent iOS zoom, taller */ #ctl00_MainContent_BasketDetail input[type="text"][data-warnid] { font-size: 16px !important; height: 22px !important; width: 24px !important; } /* Hide description header — cart only (cart has checkbox col so desc is col 6). Wish-list has no checkbox col so desc is col 6 too, but we must NOT hide it on wish-list. Scope to body.Cart / body:not(.Profile). */ body:not(.Profile) #ctl00_MainContent_BasketDetail tr:first-child td:nth-child(6) { display: none !important; } /* Delete cell moved to end: right-align, tight width */ #ctl00_MainContent_BasketDetail tr[id^="r"] td:last-child, #ctl00_MainContent_BasketDetail tr:first-child td:last-child { text-align: right !important; padding-right: 4px !important; padding-left: 4px !important; width: 1% !important; white-space: nowrap !important; } /* Tail placeholder cell in desc row: match delete col width */ #ctl00_MainContent_BasketDetail .rsp-cart-desc-row td:last-child { width: 1% !important; padding: 0 !important; } /* Price / Ext Price: cols before delete — prevent wrapping */ #ctl00_MainContent_BasketDetail tr[id^="r"] td:nth-last-child(2), #ctl00_MainContent_BasketDetail tr[id^="r"] td:nth-last-child(3) { white-space: nowrap !important; } /* Cart description moved to row below — italic style matching Similar Parts */ .rsp-cart-desc-row .rsp-cart-desc-cell { padding: 0 6px 4px 6px; font-size: 11px; font-style: italic; color: #666; white-space: normal; overflow-wrap: break-word; word-break: break-word; line-height: 1.4; } .rsp-cart-desc-row .rsp-cart-desc-cell a { color: #666; font-style: italic; } /* Spacer cell inherits the row background naturally — no extra rule needed */ /* Delete image: bigger tap target on mobile */ #ctl00_MainContent_BasketDetail input[type="image"][src*="DeleteItem"] { width: 18px !important; height: 18px !important; } /* Hide the empty 400px float-left spacer — desktop layout prop only */ #ctl00_MainContent_CartPanel > table[style*="margin-top:25px"] div[style*="float:left"] { display: none !important; } /* Subtotal box: unset float, auto-width, push right */ #ctl00_MainContent_CartPanel > table[style*="margin-top:25px"] div[style*="float:right"] { float: none !important; width: auto !important; margin-left: auto; display: block; } /* Subtotal inner table: full width so label+value fill the box */ #ctl00_MainContent_CartPanel > table[style*="margin-top:25px"] div[style*="float:right"] table { width: 100% !important; } /* Subtotal wrapper table: full width */ #ctl00_MainContent_CartPanel > table[style*="margin-top:25px"] { width: 100% !important; } /* Action buttons: stack vertically, full-width */ #ctl00_MainContent_MainButtons td { display: block !important; width: 100% !important; text-align: left !important; padding-bottom: 6px; box-sizing: border-box; } #ctl00_MainContent_MainButtons td[align="right"] { text-align: left !important; } /* Left-side buttons: flex row so they sit side by side and fill width */ #ctl00_MainContent_MainButtons td[align="left"] { display: flex !important; flex-wrap: wrap; gap: 8px; padding-bottom: 14px !important; } #ctl00_MainContent_MainButtons td[align="left"] input[type="submit"], #ctl00_MainContent_SaveForLaterButton, #ctl00_MainContent_MainButtons td[align="left"] .btnBlue { flex: 1 1 auto; width: auto !important; min-width: 80px; height: 32px !important; margin: 0 !important; box-sizing: border-box; } /* .btnBlue / Checkout button: auto size on mobile */ #ctl00_MainContent_MainButtons td[align="right"] { padding-top: 10px !important; } .btnStandard { height: 32px !important; font-size: 13px !important; box-sizing: border-box; } .btnBlue { display: block !important; width: auto !important; height: 36px !important; padding: 7px 18px !important; box-sizing: border-box; } } /* -------------------------------------------------------------------------- Wish-List.aspx -------------------------------------------------------------------------- */ /* * WishListMode omits the leading checkbox col so columns shift left by 1: * Cart: col7 = Description, col8 = Price, col9 = Ext Price * Wish-List: col6 = Description, col7 = Price, col8 = Ext Price * body.Profile scopes all rules to wish-list only — zero cart impact. * * Header inner table: TD width="170px" + TD padding-right:166px are desktop * layout props that force the row wider than mobile viewport. */ @media (max-width: 640px) { /* Release fixed header cell widths/padding */ /* body.Profile .mainContent td[style*="padding-right:166px"] { padding-right: 6px !important; }*/ /* body.Profile .mainContent td[width="170px"] { width: auto !important; } */ /* Wish-list buttons: release fixed 140px width, allow natural sizing */ body.Profile #ctl00_MainContent_MainButtons input[type="submit"] { width: auto !important; min-width: 120px; margin-right: 6px !important; margin-bottom: 4px; } /* Wish-list table: same 9-col fixed-% layout as cart — needs horizontal scroll */ body.Profile #ctl00_MainContent_BasketDetail { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Description cell: hidden by JS (desc moved to row below), but .text-truncate sets max-width:1px — override so it doesn't collapse before JS runs */ body.Profile #ctl00_MainContent_BasketDetail td.text-truncate { max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; word-break: break-word; } /* Wish-list button row: Update+Empty flex left, Continue Shopping right */ body.Profile #ctl00_MainContent_MainButtons { width: 100% !important; } body.Profile #ctl00_MainContent_MainButtons td[align="left"] { display: flex !important; flex-wrap: wrap; gap: 8px; padding-bottom: 8px !important; width: auto !important; } body.Profile #ctl00_MainContent_MainButtons td[align="left"] input[type="submit"] { flex: 1 1 auto; height: 32px !important; margin: 0 !important; min-width: 110px; } body.Profile #ctl00_MainContent_MainButtons td[align="right"] { display: block !important; text-align: right !important; padding-top: 4px !important; width: auto !important; } body.Profile #ctl00_MainContent_MainButtons td[align="right"] input[type="submit"] { height: 32px !important; width: auto !important; margin-right: 0 !important; } body.Profile .rsp-wl-info { width: auto !important; } body.Profile .rsp-wl-message { width: auto !important; padding: 0 !important; text-align: left !important; } } /* -------------------------------------------------------------------------- OrderHistory.aspx / Wish-List.aspx -------------------------------------------------------------------------- */ /* * OrderList table has 6 columns (Order#, Date, PO#, Total, Status, Invoices) * all with HTML width="N%" attributes and nowrap. * Strategy: scroll container + auto layout + strip % widths. * Date (col 2) and Total (col 4) must stay nowrap — "$1,234.56" and * "Jan 5, 2024" must not split. All other columns can wrap. * The HtmlTable is assigned ID="OrderHistoryTable" in code-behind; * ASP.NET renders it as ctl00_MainContent_OrderHistoryTable. */ #ctl00_MainContent_OrderHistoryTable { box-sizing: border-box; } @media (max-width: 640px) { #ctl00_MainContent_OrderHistoryTable { display: block; width: 100%; overflow-x: auto; table-layout: auto !important; } /* Release all HTML percentage widths */ #ctl00_MainContent_OrderHistoryTable td { width: auto !important; } /* Allow Order#, PO#, Status, Invoices to wrap */ #ctl00_MainContent_OrderHistoryTable td[nowrap], #ctl00_MainContent_OrderHistoryTable td[nowrap="nowrap"] { white-space: normal !important; word-break: break-word; } /* Restore nowrap on Date (col 2) and Total (col 4) — never split these */ #ctl00_MainContent_OrderHistoryTable td:nth-child(2), #ctl00_MainContent_OrderHistoryTable td:nth-child(4) { white-space: nowrap !important; word-break: normal !important; min-width: 60px; } /* Header row: "Order History" title + date-range filter buttons. The filter TD has width="300px" — stack it below the title at mobile. */ #ctl00_MainContent table:first-of-type > tbody > tr:first-child > td:last-child, #ctl00_MainContent table:first-of-type > tr:first-child > td:last-child { display: block !important; width: 100% !important; text-align: left !important; padding-left: 4px !important; white-space: normal !important; } } /* Cancel the ml20 outer margin on narrow screens so nav/bottom nav align with the page edge */ @media (max-width: 900px) { #productList { margin: 0 !important; } /* Nav left padding: keep small on narrow screens */ #productList #Nav { padding-left: 6px !important; } /* Product table: all nowrap cells wrap — same approach as cart */ #productList #ctl00_MainContent_Products_ProdList { display: block; overflow-x: auto; } /* Price (nth-child 5) and Stock (nth-child 6) must never wrap */ #productList #ctl00_MainContent_Products_ProdList td:nth-child(5), #productList #ctl00_MainContent_Products_ProdList td:nth-child(6) { white-space: nowrap !important; word-break: normal !important; } #productList #ctl00_MainContent_Products_ProdList td:nth-child(2) { word-break: normal !important; } /* Description column: also override text-truncate class */ #productList td.text-truncate { max-width: none !important; width: auto !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; word-break: break-word; } } @media (max-width: 640px) { /* Top pager (#Products_Message): flatten the nested dT/dTR/dTC table-display wrappers and clear the fr float so page numbers can wrap */ #ctl00_MainContent_Products_Message { width: auto !important; padding-top: 4px !important; text-align: left !important; } #ctl00_MainContent_Products_Message .fr { float: none !important; } #ctl00_MainContent_Products_Message .dT, #ctl00_MainContent_Products_Message .dTR { display: block !important; } #ctl00_MainContent_Products_Message .dTC { display: inline !important; white-space: normal !important; width: auto !important; } #ctl00_MainContent_Products_Message .dTC.w10p { display: inline-block !important; vertical-align: middle; } /* Top nav row: break the outer dT/dTR table model so Nav + Message can stack */ #productList .dT.h45 { display: block !important; height: auto !important; } #productList .dT.h45 > .dTR { display: flex !important; flex-wrap: wrap !important; align-items: flex-start; padding-bottom: 5px; } #productList #ctl00_MainContent_Products_Nav { /* display: block !important; flex: 1 1 60%;*/ padding-left: 0 !important; } #productList #ctl00_MainContent_Products_Message { flex: 1 1 auto; padding-right: 6px !important; padding-left: 6px !important; text-align: left !important; } #productList .mb25 .w100.vam.lh22 { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 6px; white-space: normal !important; } /* Reset every floated/fixed-width child in the pager row */ #productList .mb25 .w100.vam.lh22 > div { float: none !important; width: auto !important; padding-top: 0 !important; flex: 0 0 auto; } /* "Showing 1-25 of N" — full-width first row */ #productList .mb25 .w100.vam.lh22 > div.fl { flex: 1 1 100%; order: 1; } /* "Page X of N | Go to page" label — DOM order 4, visual order 2 */ #productList .mb25 .w100.vam.lh22 > div.fr:has(#ctl00_MainContent_Products_CurrentPages) { order: 2; } /* Page input — DOM order 3, visual order 3 */ #productList .mb25 .w100.vam.lh22 > div.fr:has(#ctl00_MainContent_Products_SelPage) { order: 3; } /* Go button — DOM order 2, visual order 4 */ #productList .mb25 .w100.vam.lh22 > div.fr:has(#ctl00_MainContent_Products_GoToPage) { order: 4; } /* Go-to-page input: 16px prevents iOS zoom, styled border */ #ctl00_MainContent_Products_SelPage { font-size: 16px !important; height: auto !important; border: 1px solid #999 !important; border-radius: 3px !important; padding: 3px 4px !important; box-sizing: border-box; width: 44px !important; } /* Paging nav: release wsnw so page numbers can wrap, enlarge tap targets */ #ctl00_MainContent_Products_Message .dTC.wsnw { white-space: normal !important; word-break: break-word; } #ctl00_MainContent_Products_Message .dTC.wsnw .pag-curr, #ctl00_MainContent_Products_Message .dTC.wsnw a { display: inline-block; min-width: 32px; min-height: 28px; line-height: 28px; text-align: center; padding: 0; } /* Prev/Next group arrow cells: adequate tap size */ #ctl00_MainContent_Products_Message .dTC.w80, #ctl00_MainContent_Products_Message .dTC.w10p { min-width: 32px !important; width: auto !important; } #ctl00_MainContent_Products_Message .dTC.w80 a, #ctl00_MainContent_Products_Message .dTC.w10p a { display: inline-block; min-width: 32px; min-height: 28px; line-height: 28px; text-align: center; } /* Price column bold at mobile (nth-child 5, data rows only) */ #productList #ctl00_MainContent_Products_ProdList tr[id^="r"] td:nth-child(5) { font-weight: bold !important; } /* Cond column: always 3 chars — trim padding to save space */ #productList td.w6.ColumnAlignCenter { padding-left: 3px !important; padding-right: 3px !important; } /* Cart icon column: more room, comfortable tap target */ #productList td.w3.ColumnAlignCenter { min-width: 28px !important; padding-left: 6px !important; padding-right: 6px !important; } /* -------------------------------------------------------------------------- No-products-found block (#NoProd) -------------------------------------------------------------------------- */ /* Spacer bar above the message: kill fixed width */ #productList #MWL { width: 100% !important; } /* Remove the 170px left indent so message fills the viewport */ #ctl00_MainContent_Products_NoProd .pl170 { padding-left: 0 !important; } /* Release the fixed 680px list width */ #ctl00_MainContent_Products_NoProd ul.w680 { width: 100% !important; box-sizing: border-box; } /* Bullet rows: release fixed lh17 so wrapped text isn't clipped */ #ctl00_MainContent_Products_NoProd li.lh17 { line-height: normal !important; height: auto !important; padding-bottom: 4px; } /* Bottom buttons: stack instead of float-right */ #ctl00_MainContent_Products_NoProd .w100.mb45 { display: flex !important; flex-direction: row-reverse; flex-wrap: wrap; gap: 8px; padding: 12px 8px 0; } #ctl00_MainContent_Products_NoProd .w100.mb45 > div { float: none !important; padding-top: 0 !important; } #ctl00_MainContent_Products_NoProd .w100.mb45 input[type="submit"] { margin-right: 0 !important; width: auto !important; } } /* Product list: description moved to full-width row below each item on mobile */ @media (max-width: 900px) { .rsp-pl-desc-row .rsp-pl-desc-cell { padding: 0 4px 4px 4px; font-size: 11px; font-style: italic; color: #555; white-space: normal; word-break: break-word; line-height: 1.4; } .rsp-pl-desc-row .rsp-pl-desc-cell a { color: #555; font-style: italic; } } /* -------------------------------------------------------------------------- Related Products grid (product detail page) Mirrors the Special Offer grid in responsive-home.css. 4 columns desktop → 3 columns ≤560px → 2 columns ≤360px -------------------------------------------------------------------------- */ @media (max-width: 900px) { /* Related Products grid: activate as soon as the broad block rule fires. Rules are scoped with #ctl00_MainContent_divProduct to beat the broad display:block !important rule (1 ID + 2 classes > 1 ID + 1 class). */ #ctl00_MainContent_divProduct .rsp-rp-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 4px; } #ctl00_MainContent_divProduct .rsp-rp-grid .rsp-rp-row { display: contents !important; } #ctl00_MainContent_divProduct .rsp-rp-grid .rsp-rp-row > .dTC { display: block !important; width: auto !important; text-align: center !important; box-sizing: border-box; padding-bottom: 4px; } #ctl00_MainContent_divProduct .rsp-rp-grid .rsp-rp-row > .dTC .w134 { width: 100% !important; } #ctl00_MainContent_divProduct .rsp-rp-grid .rsp-rp-row > .dTC .w134 .dT { width: 100% !important; } #ctl00_MainContent_divProduct .rsp-rp-grid .rsp-rp-row > .dTC img { max-width: 100%; height: auto; } } @media (max-width: 480px) { #ctl00_MainContent_divProduct .rsp-rp-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 360px) { #ctl00_MainContent_divProduct .rsp-rp-grid { grid-template-columns: repeat(2, 1fr); } } /* -------------------------------------------------------------------------- Product image modal --- mobile full-screen overrides -------------------------------------------------------------------------- */ @media (max-width: 900px) { .dlgsdhw.ui-dialog { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; margin: 0 !important; border-radius: 0 !important; border: none !important; box-sizing: border-box; overflow: visible !important; } .dlgsdhw .ui-dialog-content { overflow: visible !important; } .dlgsdhw #btnCloseWindow { position: fixed !important; top: 4px !important; right: 4px !important; width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important; z-index: 200 !important; background: rgba(255,255,255,0.9) !important; border-radius: 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 1px 4px rgba(0,0,0,0.25); } #zContainer.pd-mobile-imgpane { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: calc(100vh - 90px) !important; z-index: 101 !important; align-items: center !important; justify-content: center !important; padding-top: 52px !important; box-sizing: border-box; overflow: hidden !important; background: #fff; } #zContainer.pd-mobile-imgpane .zoomin { display: flex !important; align-items: center !important; justify-content: center !important; width: 100vw !important; height: calc(100vh - 90px - 52px) !important; max-height: calc(100vh - 90px - 52px) !important; } #zContainer.pd-mobile-imgpane img { max-width: 100vw !important; max-height: calc(100vh - 90px - 52px) !important; width: auto !important; height: auto !important; object-fit: contain; touch-action: pinch-zoom; user-select: none; } #leftImgPanel.pd-mobile-thumbstrip { display: block !important; position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 90px !important; z-index: 102 !important; background: #f8f8f8 !important; border-top: 2px solid #ccc !important; box-sizing: border-box; overflow: hidden !important; -webkit-mask-image: linear-gradient(to right, black 82%, transparent 100%); mask-image: linear-gradient(to right, black 82%, transparent 100%); } #leftImgPanel.pd-mobile-thumbstrip #ctl00_MainContent_leftImgList { display: flex !important; flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; width: 100% !important; height: 90px !important; gap: 4px; padding: 7px 8px !important; box-sizing: border-box; scrollbar-width: none; } #leftImgPanel.pd-mobile-thumbstrip #ctl00_MainContent_leftImgList::-webkit-scrollbar { display: none; } #leftImgPanel.pd-mobile-thumbstrip #ctl00_MainContent_leftImgList > div { flex: 0 0 72px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 72px !important; height: 72px !important; } #leftImgPanel.pd-mobile-thumbstrip .piccell { display: flex !important; align-items: center !important; justify-content: center !important; width: 68px !important; height: 68px !important; border: 1px solid lightgrey !important; box-sizing: border-box; } #leftImgPanel.pd-mobile-thumbstrip .galimg { max-width: 64px !important; max-height: 64px !important; width: auto !important; height: auto !important; } } @media (max-width: 640px) { /* Overview / Inventory & Prices header rows: Inner table has 2 TDs: [label "Overview"] [item name / disclaimer text] Hide the label (first TD), left-align the value (last TD), truncate overflow */ #ctl00_MainContent_Details td.bar > table td:first-child { display: none !important; } #ctl00_MainContent_Details td.bar > table td:last-child { width: 100% !important; text-align: left !important; padding-left: 6px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 0 !important; /* forces ellipsis inside table cell */ } /* Spacer row: keep at natural 12px on mobile — matches Inventory & Prices visual gap */ #ctl00_MainContent_Details tr.h12 { height: 12px !important; } } /* -------------------------------------------------------------------------- Order History card layout (body.Profile — StandardLayout) -------------------------------------------------------------------------- */ @media (max-width: 640px) { /* Hide 20px spacer columns */ body.Profile .mainContent td[width="20px"] { display: none !important; } /* Date-range filter TD: allow wrapping */ body.Profile .mainContent td[width="300px"] { width: auto !important; white-space: normal !important; text-align: left !important; padding: 4px 0 !important; } /* "Orders per page" row */ body.Profile .mainContent td[align="right"][style*="padding-right:6px"] { text-align: left !important; white-space: normal !important; padding: 4px !important; } /* Card container */ .rsp-oh-cards { width: 100%; box-sizing: border-box; padding: 0 2px; } /* Individual card */ .rsp-oh-card { border: 1px solid #d0d0d0; border-radius: 4px; margin-bottom: 8px; overflow: hidden; font-size: 13px; } .rsp-oh-card.LightGreyBG { background: #f0f0f0; } /* Card header: order number link + date */ .rsp-oh-card-header { display: flex; justify-content: space-between; align-items: center; background: url(/Images/small_bar.png) repeat-x; padding: 5px 8px; font-weight: bold; } .rsp-oh-card-header a { color: #fff; text-decoration: none; font-size: 13px; } .rsp-oh-card-date { color: #223f7f; font-size: 12px; font-weight: normal; } /* Card body rows */ .rsp-oh-card-body { padding: 6px 8px; } .rsp-oh-card-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #e8e8e8; } .rsp-oh-card-row:last-child { border-bottom: none; } .rsp-oh-lbl { color: #555; font-size: 11px; white-space: nowrap; margin-right: 8px; } .rsp-oh-val { text-align: right; color: #222; font-size: 12px; } /* ----------------------------------------------------------------------- Payment Methods (Payment.aspx / PaymentManager.ascx) ----------------------------------------------------------------------- */ /* Hide outer 20px spacer TDs */ #container .mainContent:has(#ctl00_MainContent_IC) TABLE > tbody > TR > TD[width="20px"], #container .mainContent:has(#ctl00_MainContent_IC) TABLE > TR > TD[width="20px"] { display: none !important; } #container .mainContent:has(#ctl00_MainContent_IC) TABLE > tbody > TR > TD[nowrap]:not([width="20px"]), #container .mainContent:has(#ctl00_MainContent_IC) TABLE > TR > TD[nowrap]:not([width="20px"]) { white-space: normal !important; width: 100% !important; } /* Title row */ #ctl00_MainContent_IC { padding-right: 4px !important; text-align: left !important; white-space: normal !important; } /* Section header bar */ #ctl00_MainContent_PaymentManager_TitleInfo { white-space: normal !important; width: 100% !important; box-sizing: border-box; } /* ContentArea */ #ctl00_MainContent_PaymentManager_ContentArea { text-align: left !important; padding-right: 5px !important; } /* Error row */ #ctl00_MainContent_PaymentManager_Errors td[style*="padding-left:210px"] { padding-left: 0 !important; padding-right: 0 !important; } #card-errors { padding-left: 0 !important; padding-right: 0 !important; margin-top: 8px !important; } /* ---- FORM FIELDS ---- */ .rsp-pay-fields { padding-left: 5px !important; padding-right: 5px !important; } .rsp-pay-fields tr { display: block !important; height: auto !important; } /* ALL label TDs - with or without nowrap */ .rsp-pay-fields td[width="155px"][nowrap], .rsp-pay-fields td[width="155px"]:not([nowrap]) { display: block !important; width: 100% !important; padding: 10px 0 2px 0 !important; white-space: normal !important; } /* Billing Address label - MAXIMUM specificity override */ .rsp-pay-fields td.rsp-pay-label[width="155px"][style*="padding-left"] { padding-left: 0 !important; padding-right: 0 !important; } /* Billing Address combo - remove padding-left */ .rsp-pay-fields td[style="padding-left:15px"] { padding-left: 0 !important; } /* Stripe card element */ #card-element { height: 40px !important; border: 1px solid #999; border-radius: 3px; padding: 8px 6px !important; box-sizing: border-box; font-size: 16px !important; } /* Label cell */ #ctl00_MainContent_PaymentManager_EditForm td { display: block !important; width: 100% !important; padding-bottom: 3px !important; font-size: 13px !important; } /* Select elements */ #ctl00_MainContent_PaymentManager_EditForm_BillingAddress { font-size: 16px !important; width: 100% !important; height: auto !important; border: 1px solid #999 !important; border-radius: 3px; padding: 6px 8px !important; box-sizing: border-box; margin: 0 !important; margin-bottom: 20px !important; } #ctl00_MainContent_PaymentManager_EditForm select { font-size: 16px !important; height: auto !important; border: 1px solid #999 !important; border-radius: 3px; padding: 6px 8px !important; } #ctl00_MainContent_PaymentManager_Errors { margin: 0 !important; } /* ---- ACTIONS (BUTTONS + SECURITY) ---- */ /* Actions table itself */ .rsp-pay-actions { padding: 24px 5px 0 5px !important; } /* All TRs in actions table */ .rsp-pay-actions tr { display: block !important; width: 100% !important; } /* Hide all spacer TDs */ .rsp-pay-spacer { display: none !important; } /* Buttons container TD */ .rsp-pay-buttons { display: block !important; width: 100% !important; padding: 0 !important; text-align: left !important; } /* Inner button table — restore table display values to cancel the .rsp-pay-actions tr { display:block } rule that bleeds in here too. Then use table-cell width distribution: cancel cell expands (width:100%), save cell shrinks to button width (width:1px floors at min-content). */ .rsp-pay-btn-table { display: table !important; width: 100% !important; } .rsp-pay-btn-table tr { display: table-row !important; width: auto !important; } .rsp-pay-btn-table td { display: table-cell !important; } .rsp-pay-cancel-cell { width: 100% !important; text-align: left !important; } .rsp-pay-save-cell { width: 1px !important; white-space: nowrap !important; padding-right: 0 !important; } /* Reset button inline styles */ #ctl00_MainContent_PaymentManager_CancelButton { height: auto !important; width: auto !important; padding: 6px 14px !important; margin: 0 !important; font-size: 14px !important; } /* Security message TD */ .rsp-pay-security { display: block !important; width: 100% !important; padding: 12px 0 0 0 !important; text-align: center !important; white-space: normal !important; } .rsp-pay-security * { white-space: normal !important; } /* ----------------------------------------------------------------------- Payment Methods — billing address form (AddressManager embedded in Payment.aspx) Mirrors AddressBook rules in responsive-profile.css, keyed to the PaymentManager-prefixed rendered IDs. ----------------------------------------------------------------------- */ /* 1. Release outer centering TD (padding-right:170px) */ #ctl00_MainContent_PaymentManager_AddressManager_ContentArea { padding-right: 0 !important; text-align: left !important; } /* 2. Release fixed 565px wrappers */ #ctl00_MainContent_PaymentManager_AddressManager_EditForm_EditPanel, #ctl00_MainContent_PaymentManager_AddressManager_ContentArea div[style*="width:565px"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData { width: 100% !important; box-sizing: border-box; margin: 0 !important; } /* 3. Form rows: stack label above input */ #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData tr { display: block !important; height: auto !important; } #ctl00_MainContent_Shipping_AddressManager_EditForm_AddressData td[width="140px"], #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData td[width="140px"] { padding-right: 0 !important; } /* Label cell */ #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData td[width="165px"] { display: block !important; width: 100% !important; padding-top: 12px !important; padding-bottom: 3px !important; font-size: 13px !important; } /* Input/select cell */ #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData td[align="left"]:not([width]) { display: block !important; width: 100% !important; padding-left: 0 !important; box-sizing: border-box; } /* 4. Inputs and selects: 16px, full width, visible border */ #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData input[type="text"], #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData .TextBox { 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; } #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData 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; } /* 5. Error row: remove 170px left indent */ #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData td[style*="padding-left:170px"] { display: block !important; padding-left: 0 !important; width: 100% !important; } /* 6. Buttons row: Cancel left, Save right */ #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData td[colspan="2"] { display: block !important; width: 100% !important; padding: 0 !important; } #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData td[colspan="2"] table { width: 100% !important; } #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData td[colspan="2"] table tr { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; } #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData td[colspan="2"] table td { display: block !important; width: auto !important; flex: 0 0 auto; padding: 4px !important; } /* 7. Security notice row */ #ctl00_MainContent_PaymentManager_AddressManager_EditForm_AddressData td[style*="padding-left:40px"] { display: block !important; width: 100% !important; padding-left: 0 !important; padding-top: 16px !important; text-align: center !important; box-sizing: border-box; } /* ----------------------------------------------------------------------- Payment Methods — card list (Payment.aspx) ----------------------------------------------------------------------- */ /* Switch TR to flex so we can push the actions TD to its own bottom row. Must reset HTML width= attributes on all TDs or they fight flex. */ .CreditCardWallet tr[valign="top"] { display: flex !important; flex-wrap: wrap !important; align-items: flex-start; } .CreditCardWallet tr[valign="top"] > td { box-sizing: border-box; } .CreditCardWallet tr[valign="top"] > td:nth-child(1) { flex: 1 1 auto; min-width: 0; } .CreditCardWallet tr[valign="top"] > td:nth-child(2) { flex: 0 0 auto; min-width: 52px; } .CreditCardWallet tr[valign="top"] > td:nth-child(3) { flex: 1 1 auto; min-width: 0; padding-left: 8px !important; padding-bottom: 5px !important;} /* Actions TD: force onto its own full-width row, right-aligned */ .CreditCardWallet tr[valign="top"] > td:nth-child(4) { flex: 0 0 100%; text-align: right !important; padding: 6px 15px 4px 0 !important; } .CreditCardWallet tr[valign="top"] > td:nth-child(4) a { margin-left: 16px; } .CreditCardWallet tr[valign="top"] > td:nth-child(4) .Black { display: none !important; } /* Add Card: right-aligned with breathing room above */ #ctl00_MainContent_PaymentManager_AddNewCard { float: right; margin-top: 15px; } #ctl00_MainContent_PaymentManager_EditPanel { padding-left:5px !important; } #ctl00_MainContent_PaymentManager_EditPanel tr[valign="top"] > td { width: auto !important; box-sizing: border-box; } /* Delete-confirm / error-notice rows — hide 180px spacer, full-width message */ #ctl00_MainContent_PaymentManager_ContentArea tr:has(.rsp-pay-notice) td:first-child { display: none !important; } #ctl00_MainContent_PaymentManager_ContentArea tr:has(.rsp-pay-notice) td:nth-child(2) { padding-left: 0 !important; } .rsp-pay-notice { width: 100% !important; padding-left: 8px !important; box-sizing: border-box; } /* Cancel button: pull to screen left */ #ctl00_MainContent_PaymentManager_CancelDeleteButton { float: left !important; margin-left: 10px !important; } /* ----------------------------------------------------------------------- Account Options (Options.aspx) ----------------------------------------------------------------------- */ /* Hide 20px spacer column */ body.Profile #container .mainContent TABLE > TR > TD[width="20px"] { display: none !important; } /* Content TD: release nowrap, add padding */ body.Profile #container .mainContent TABLE > TR > TD[nowrap]:not([width="20px"]) { white-space: normal !important; padding-left: 5px !important; padding-right: 5px !important; } /* Title row: release padding-right */ body.Profile #container .mainContent TABLE TR TD[style*="padding-right:180px"] { padding-right: 4px !important; text-align: left !important; } /* Section header "Account options" */ #ctl00_MainContent_Title { white-space: normal !important; width: 100% !important; box-sizing: border-box; } /* Form table rows: stack vertically */ #ctl00_MainContent_ProfileEdit TR[valign="top"] { display: block !important; } #ctl00_MainContent_ProfileEdit TR[valign="top"] > TD { display: block !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Label TD (420px): add spacing */ #ctl00_MainContent_ProfileEdit TR[valign="top"] > TD[width="420px"] { padding-top: 12px !important; padding-bottom: 4px !important; } /* Value TD: minimal top padding */ #ctl00_MainContent_ProfileEdit TR[valign="top"] > TD:not([width]):not([colspan]) { padding-top: 0 !important; padding-bottom: 12px !important; } /* Grey divider rows */ #ctl00_MainContent_ProfileEdit TR[height="1px"] { display: block !important; height: 1px !important; width: 100% !important; } #ctl00_MainContent_ProfileEdit TR[height="1px"] > TD { display: block !important; width: 100% !important; height: 1px !important; } #ctl00_MainContent_ProfileEdit TR[height="1px"] > TD { display: block !important; width: 100% !important; height: 1px !important; } /* Language dropdown: mobile friendly */ #ctl00_MainContent_ProfileEdit_LanguageOptionList { font-size: 16px !important; width: 100% !important; max-width: 300px !important; height: auto !important; border: 1px solid #999 !important; border-radius: 3px; padding: 6px 8px !important; box-sizing: border-box; } /* Button row: side-by-side layout */ #ctl00_MainContent_ProfileEdit TR[valign="top"] TD[colspan="2"] TABLE { margin-top: 16px !important; width: 100% !important; } #ctl00_MainContent_ProfileEdit TR[valign="top"] TD[colspan="2"] TABLE TR { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; } #ctl00_MainContent_ProfileEdit TR[valign="top"] TD[colspan="2"] TABLE TR > TD { flex: 0 0 auto !important; padding: 0 !important; width: auto !important; text-align: left !important; } #ctl00_MainContent_ProfileEdit TR[valign="top"] TD B { font-size: 13px !important; } /* Cancel button cell - first (left) */ #ctl00_MainContent_ProfileEdit TR[valign="top"] TD[colspan="2"] TABLE TR > TD:first-child { order: 1 !important; padding-right: 0 !important; } /* Save button cell - second (right) */ #ctl00_MainContent_ProfileEdit TR[valign="top"] TD[colspan="2"] TABLE TR > TD:last-child { order: 2 !important; } /* Cancel button */ #ctl00_MainContent_ProfileEdit_CancelButton { padding: 6px 14px !important; font-size: 14px !important; } }