/* * Norman Lamps — Mobile App Shell — Account Pages * -------------------------------------------------------------------------- * Activates only when is set (see header.twig). * * Covers every customer-facing route under `account/*`: * #account-login #account-account #account-edit * #account-register #account-password #account-address * #account-forgotten #account-order #account-wishlist * #account-newsletter #account-download #account-return * #account-transaction #account-reward #account-recurring * * All share the same DOM skeleton from OpenCart's default twig set: * *
* * [
...
] *
*
* {{ heading_title }} *
*
* ... *
* *
* *
...
*
*
*
*
*
Back
*
*
*
*
*
*
* * Bootstrap 3's `col-sm-*` columns already stack to full-width on xs viewports, * so most of the heavy lifting here is typography, spacing, button sizing, * tap-target accessibility, table-to-card conversion, and giving the * dashboard a settings-app vibe. * -------------------------------------------------------------------------- */ /* ============================================================================= 1. PAGE CONTAINER ============================================================================= */ [data-nlm-mobile="1"] [id^="account-"].container { padding-left: 0; padding-right: 0; max-width: none; } /* Breadcrumb is already styled by nlm-category.css for product-search/category, but account pages aren't covered there. Apply the same compact treatment. The anchors get a generous vertical hit area so they pass tap-target audits even though the visible text is small breadcrumb-style. */ [data-nlm-mobile="1"] [id^="account-"] > .breadcrumb { margin: 0; padding: 0 14px; background: var(--nlm-c-surface-alt); border-radius: 0; border-bottom: 1px solid var(--nlm-c-border); font-size: 13px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; min-height: 44px; } [data-nlm-mobile="1"] [id^="account-"] > .breadcrumb > li { display: inline-flex; align-items: center; white-space: nowrap; } [data-nlm-mobile="1"] [id^="account-"] > .breadcrumb > li + li::before { content: "/"; padding: 0 8px; color: var(--nlm-c-text-muted); } [data-nlm-mobile="1"] [id^="account-"] > .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 2px; color: var(--nlm-c-primary); text-decoration: none; } /* Alerts — keep Bootstrap structure, just modernise spacing/radius. */ [data-nlm-mobile="1"] [id^="account-"] > .alert { margin: 12px 14px; border-radius: var(--nlm-radius); padding: 12px 14px; font-size: 14px; line-height: 1.4; border-width: 1px; } [data-nlm-mobile="1"] [id^="account-"] > .alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } [data-nlm-mobile="1"] [id^="account-"] > .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; } [data-nlm-mobile="1"] [id^="account-"] > .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } /* The `.row` wrapper around #content has Bootstrap's negative -15px margins which leak past the container; reset on mobile. */ [data-nlm-mobile="1"] [id^="account-"] > .row { margin-left: 0; margin-right: 0; } [data-nlm-mobile="1"] [id^="account-"] #content { padding-left: 14px; padding-right: 14px; width: 100%; float: none; } /* ============================================================================= 2. HEADINGS ----------------------------------------------------------------------------- OpenCart inconsistently uses H1 (register, edit, password, forgotten, order_list) and H2 (login, account dashboard, address list/form, order_info, wishlist). Normalize to a single visual treatment so the account section reads as one cohesive app. ============================================================================= */ [data-nlm-mobile="1"] [id^="account-"] #content > h1, [data-nlm-mobile="1"] [id^="account-"] #content > h2 { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 16px 0 12px; color: var(--nlm-c-text); letter-spacing: -0.01em; } /* Intro `

` that follows H1 on register / forgotten — softer & smaller. */ [data-nlm-mobile="1"] [id^="account-"] #content > h1 + p, [data-nlm-mobile="1"] [id^="account-"] #content > h2 + p { margin: 0 0 16px; color: var(--nlm-c-text-muted); font-size: 14px; line-height: 1.5; } /* ============================================================================= 3. FORM STRUCTURE (universal for all account forms) ----------------------------------------------------------------------------- Bootstrap 3's `.form-horizontal` puts a `.col-sm-2 control-label` next to a `.col-sm-10` field on >=768px and stacks them below. On phones we already get stacking for free; what we need to fix is the cramped 15px gutters, the tiny labels, and the bare-bones inputs. ============================================================================= */ [data-nlm-mobile="1"] [id^="account-"] .form-horizontal { margin: 0; } /* Reset Bootstrap horizontal column margins inside forms */ [data-nlm-mobile="1"] [id^="account-"] .form-horizontal .form-group { margin-left: 0; margin-right: 0; margin-bottom: 14px; } [data-nlm-mobile="1"] [id^="account-"] .form-horizontal .form-group > [class*="col-"] { padding-left: 0; padding-right: 0; width: 100%; float: none; } /* Labels — bigger, darker, with consistent spacing */ [data-nlm-mobile="1"] [id^="account-"] .form-horizontal .control-label, [data-nlm-mobile="1"] [id^="account-"] .form-group > label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--nlm-c-text); margin: 0 0 6px; padding: 0; line-height: 1.3; } /* Required-field asterisk — the theme stylesheet already does `div.required .control-label:before { content: '* '; color: #F00; }` so we only need to recolour it to our brand red and tighten its spacing. */ [data-nlm-mobile="1"] [id^="account-"] .form-group.required > .control-label::before, [data-nlm-mobile="1"] [id^="account-"] .form-group.required > label::before { color: var(--nlm-c-danger); font-weight: 700; margin-right: 1px; } /* Inputs / selects / textareas — app-style rounded fields */ [data-nlm-mobile="1"] [id^="account-"] .form-control, [data-nlm-mobile="1"] [id^="account-"] input[type="text"]:not([class*="qty"]), [data-nlm-mobile="1"] [id^="account-"] input[type="email"], [data-nlm-mobile="1"] [id^="account-"] input[type="tel"], [data-nlm-mobile="1"] [id^="account-"] input[type="password"], [data-nlm-mobile="1"] [id^="account-"] input[type="number"], [data-nlm-mobile="1"] [id^="account-"] input[type="search"], [data-nlm-mobile="1"] [id^="account-"] textarea, [data-nlm-mobile="1"] [id^="account-"] select { display: block; width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px; /* prevents iOS auto-zoom on focus */ line-height: 1.4; color: var(--nlm-c-text); background: var(--nlm-c-surface); border: 1px solid var(--nlm-c-border-strong); border-radius: var(--nlm-radius); box-shadow: none; transition: border-color var(--nlm-dur) var(--nlm-ease), box-shadow var(--nlm-dur) var(--nlm-ease); } [data-nlm-mobile="1"] [id^="account-"] textarea { min-height: 96px; resize: vertical; } [data-nlm-mobile="1"] [id^="account-"] .form-control:focus, [data-nlm-mobile="1"] [id^="account-"] input:focus, [data-nlm-mobile="1"] [id^="account-"] textarea:focus, [data-nlm-mobile="1"] [id^="account-"] select:focus { outline: none; border-color: var(--nlm-c-primary); box-shadow: 0 0 0 3px rgba(45, 92, 136, 0.15); } /* Native select chevron — Bootstrap removes the OS one inconsistently; restore it as a clean SVG so the field reads as interactive. */ [data-nlm-mobile="1"] [id^="account-"] select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; padding-right: 38px; } /* Field-level error text */ [data-nlm-mobile="1"] [id^="account-"] .text-danger { display: block; margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--nlm-c-danger); } /* Fieldsets & legends — flatten Bootstrap's underlined legend into a clean section header that looks like a settings-app section title. */ [data-nlm-mobile="1"] [id^="account-"] fieldset { border: none; padding: 0; margin: 0 0 20px; } [data-nlm-mobile="1"] [id^="account-"] fieldset > legend { display: block; width: 100%; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nlm-c-text-muted); border: none; padding: 0; margin: 18px 0 10px; line-height: 1.2; } /* `.input-group` for date / time pickers — keep button glued to input. */ [data-nlm-mobile="1"] [id^="account-"] .input-group { display: flex; width: 100%; } [data-nlm-mobile="1"] [id^="account-"] .input-group > .form-control { flex: 1 1 auto; border-top-right-radius: 0; border-bottom-right-radius: 0; } [data-nlm-mobile="1"] [id^="account-"] .input-group .input-group-btn .btn { min-height: 48px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } /* ============================================================================= 4. RADIO & CHECKBOX (tap target accessibility) ----------------------------------------------------------------------------- Native / are 13x13 px on most browsers — well under the 44 px tap target minimum. We can't easily restyle the box itself across browsers, so we (a) wrap each in a .radio/.radio-inline label that already exists in the markup, and (b) pad the label so the whole row is the tap target. The native control stays visible but is enlarged to 18 px for visual weight. ============================================================================= */ /* Stacked block radios/checkboxes — used in account/register customer group, account/address default-address yes/no, account/newsletter, etc. */ [data-nlm-mobile="1"] [id^="account-"] .radio, [data-nlm-mobile="1"] [id^="account-"] .checkbox { display: block; margin: 0 0 4px; padding: 0; min-height: 44px; } [data-nlm-mobile="1"] [id^="account-"] .radio > label, [data-nlm-mobile="1"] [id^="account-"] .checkbox > label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; margin: 0; font-size: 15px; font-weight: 500; color: var(--nlm-c-text); background: var(--nlm-c-surface); border: 1px solid var(--nlm-c-border); border-radius: var(--nlm-radius); cursor: pointer; transition: border-color var(--nlm-dur) var(--nlm-ease), background var(--nlm-dur) var(--nlm-ease); } [data-nlm-mobile="1"] [id^="account-"] .radio > label:active, [data-nlm-mobile="1"] [id^="account-"] .checkbox > label:active { background: var(--nlm-c-surface-alt); } [data-nlm-mobile="1"] [id^="account-"] .radio input[type="radio"], [data-nlm-mobile="1"] [id^="account-"] .checkbox input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--nlm-c-primary); flex: 0 0 20px; } /* Inline radios (newsletter Yes / No on register & address forms) — render as a 2-up segmented control so it's clear they're mutually exclusive. Bootstrap 3 ships `.radio-inline { position: relative; padding-left: 20px; }` plus `.radio-inline input[type=radio] { position: absolute; margin-left: -20px; }` which positions the radio OUTSIDE the label's flow. That blew up our flex layout the first time around (the text node ended up invisible behind the absolutely-positioned input). We reset both. */ [data-nlm-mobile="1"] [id^="account-"] .form-group .radio-inline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; flex: 1 1 0; min-height: 44px; padding: 10px 14px; margin: 0; font-size: 15px; font-weight: 500; color: var(--nlm-c-text); background: var(--nlm-c-surface); border: 1px solid var(--nlm-c-border-strong); cursor: pointer; position: static; /* override Bootstrap's .radio-inline { position: relative } */ transition: background var(--nlm-dur) var(--nlm-ease), border-color var(--nlm-dur) var(--nlm-ease); } [data-nlm-mobile="1"] [id^="account-"] .form-group .radio-inline:first-of-type { border-radius: var(--nlm-radius) 0 0 var(--nlm-radius); } [data-nlm-mobile="1"] [id^="account-"] .form-group .radio-inline:last-of-type { border-radius: 0 var(--nlm-radius) var(--nlm-radius) 0; border-left: none; } [data-nlm-mobile="1"] [id^="account-"] .form-group .radio-inline + .radio-inline { border-left: none; } [data-nlm-mobile="1"] [id^="account-"] .form-group .radio-inline input[type="radio"] { position: static !important; /* unwedge from Bootstrap's absolute positioning */ width: 18px; height: 18px; margin: 0 !important; accent-color: var(--nlm-c-primary); flex: 0 0 18px; } /* The parent div that holds the inline radios — flex them into a row. */ [data-nlm-mobile="1"] [id^="account-"] .form-group > div:has(> .radio-inline), [data-nlm-mobile="1"] [id^="account-"] .form-group > [class*="col-"] > div:has(> .radio-inline) { display: flex; width: 100%; } /* ============================================================================= 5. BUTTONS ----------------------------------------------------------------------------- OpenCart's account templates use .btn.btn-primary for Submit/Continue/Login, .btn.btn-default for Back, .btn.btn-info for Edit/View, .btn.btn-danger for Delete/Remove. On mobile we want big, finger-friendly, full-width primary buttons and clearly secondary "Back" actions. ============================================================================= */ [data-nlm-mobile="1"] [id^="account-"] .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; font-size: 15px; font-weight: 600; line-height: 1.2; border-radius: var(--nlm-radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background var(--nlm-dur) var(--nlm-ease), border-color var(--nlm-dur) var(--nlm-ease), transform var(--nlm-dur) var(--nlm-ease); } [data-nlm-mobile="1"] [id^="account-"] .btn:active { transform: translateY(1px); } /* Primary — submit / continue / login */ [data-nlm-mobile="1"] [id^="account-"] .btn-primary, [data-nlm-mobile="1"] [id^="account-"] input[type="submit"].btn-primary { background: var(--nlm-c-primary); color: var(--nlm-c-text-inverse); border-color: var(--nlm-c-primary); min-height: 52px; font-size: 16px; } [data-nlm-mobile="1"] [id^="account-"] .btn-primary:hover, [data-nlm-mobile="1"] [id^="account-"] .btn-primary:focus, [data-nlm-mobile="1"] [id^="account-"] .btn-primary:active { background: var(--nlm-c-primary-hover); border-color: var(--nlm-c-primary-hover); color: var(--nlm-c-text-inverse); } /* Default / Back — ghost */ [data-nlm-mobile="1"] [id^="account-"] .btn-default { background: var(--nlm-c-surface); color: var(--nlm-c-text); border-color: var(--nlm-c-border-strong); } [data-nlm-mobile="1"] [id^="account-"] .btn-default:hover, [data-nlm-mobile="1"] [id^="account-"] .btn-default:focus, [data-nlm-mobile="1"] [id^="account-"] .btn-default:active { background: var(--nlm-c-surface-alt); border-color: var(--nlm-c-border-strong); color: var(--nlm-c-text); } /* Info — used for Edit / View in address & order lists. Reuse primary blue. */ [data-nlm-mobile="1"] [id^="account-"] .btn-info { background: var(--nlm-c-primary); color: var(--nlm-c-text-inverse); border-color: var(--nlm-c-primary); } [data-nlm-mobile="1"] [id^="account-"] .btn-info:hover, [data-nlm-mobile="1"] [id^="account-"] .btn-info:focus { background: var(--nlm-c-primary-hover); border-color: var(--nlm-c-primary-hover); color: var(--nlm-c-text-inverse); } /* Danger — Delete / Remove */ [data-nlm-mobile="1"] [id^="account-"] .btn-danger { background: var(--nlm-c-surface); color: var(--nlm-c-danger); border-color: #fecaca; } [data-nlm-mobile="1"] [id^="account-"] .btn-danger:hover, [data-nlm-mobile="1"] [id^="account-"] .btn-danger:focus { background: #fef2f2; border-color: var(--nlm-c-danger); color: var(--nlm-c-danger); } /* Bottom button rows (.buttons.clearfix) — stack on mobile, primary on top */ [data-nlm-mobile="1"] [id^="account-"] .buttons { display: flex; flex-direction: column-reverse; /* primary above Back visually */ gap: 10px; margin: 20px 0 8px; clear: both; } [data-nlm-mobile="1"] [id^="account-"] .buttons::before, [data-nlm-mobile="1"] [id^="account-"] .buttons::after { content: none; /* kill .clearfix pseudo-elements that claim grid space */ } [data-nlm-mobile="1"] [id^="account-"] .buttons > .pull-left, [data-nlm-mobile="1"] [id^="account-"] .buttons > .pull-right { float: none; width: 100%; } [data-nlm-mobile="1"] [id^="account-"] .buttons .btn { width: 100%; } /* Submit inputs that aren't inside .buttons (login form) — make them full width too. */ [data-nlm-mobile="1"] [id^="account-"] form > input[type="submit"], [data-nlm-mobile="1"] [id^="account-"] form .form-group + input[type="submit"], [data-nlm-mobile="1"] [id^="account-"] form > .well input[type="submit"] { width: 100%; margin-top: 4px; } /* ============================================================================= 6. LOGIN PAGE (#account-login) ----------------------------------------------------------------------------- Two stacked .well panels: "New Customer" (with Continue → register link) and "Returning Customer" (with email/password form). Restyle as cards with the returning-customer form on top — that's what 90% of mobile visitors came here to do. ============================================================================= */ [data-nlm-mobile="1"] #account-login .well { background: var(--nlm-c-surface); border: 1px solid var(--nlm-c-border); border-radius: var(--nlm-radius-lg); box-shadow: var(--nlm-shadow-sm); padding: 18px 16px 20px; margin: 0 0 14px; } [data-nlm-mobile="1"] #account-login .well h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--nlm-c-text); } [data-nlm-mobile="1"] #account-login .well p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--nlm-c-text-muted); } [data-nlm-mobile="1"] #account-login .well p strong { display: block; color: var(--nlm-c-text); font-weight: 600; margin-bottom: 2px; } /* Returning-customer card → put it on top of the New-customer card visually. We can't easily reorder rows in legacy markup without JS; instead, flex the wrapper .row and use order. Bootstrap's `.row` is a normal block on xs, so we promote it. */ [data-nlm-mobile="1"] #account-login #content > .row { display: flex; flex-direction: column; } [data-nlm-mobile="1"] #account-login #content > .row > .col-sm-6:nth-child(1) { order: 2; /* New Customer card moves below */ } [data-nlm-mobile="1"] #account-login #content > .row > .col-sm-6:nth-child(2) { order: 1; /* Returning Customer card on top */ } /* "Forgotten Password?" link inside the password form-group. Renders as a compact body-text link visually, but the anchor itself is a 44px-tall tap target via padding so it passes the accessibility audit. */ [data-nlm-mobile="1"] #account-login .well .form-group a { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 4px -8px; /* negative left margin so the visible text sits at the natural form gutter while padding extends the hit area */ padding: 12px 8px; font-size: 13px; color: var(--nlm-c-primary); text-decoration: none; font-weight: 500; } [data-nlm-mobile="1"] #account-login .well .form-group a:hover, [data-nlm-mobile="1"] #account-login .well .form-group a:focus { text-decoration: underline; } /* Continue (Register) link inside New-customer well — anchor styled like .btn-primary */ [data-nlm-mobile="1"] #account-login .well > a.btn-primary { width: 100%; } /* ============================================================================= 7. ACCOUNT DASHBOARD (#account-account) ----------------------------------------------------------------------------- The dashboard is a series of H2 group-titles followed by .list-unstyled anchor lists. Native treatment looks like nested bullets stripped of bullets — boring. Make each anchor a tappable settings-app row with a chevron and an icon (drawn via CSS::before since we can't touch markup). ============================================================================= */ [data-nlm-mobile="1"] #account-account #content > h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nlm-c-text-muted); margin: 18px 4px 8px; line-height: 1.2; } [data-nlm-mobile="1"] #account-account #content > h2:first-of-type { margin-top: 10px; } [data-nlm-mobile="1"] #account-account .list-unstyled { margin: 0 0 8px; padding: 0; background: var(--nlm-c-surface); border: 1px solid var(--nlm-c-border); border-radius: var(--nlm-radius-lg); overflow: hidden; list-style: none; } [data-nlm-mobile="1"] #account-account .list-unstyled > li { margin: 0; border-bottom: 1px solid var(--nlm-c-border); } [data-nlm-mobile="1"] #account-account .list-unstyled > li:last-child { border-bottom: none; } [data-nlm-mobile="1"] #account-account .list-unstyled > li > a { display: flex; align-items: center; min-height: 52px; padding: 12px 36px 12px 14px; font-size: 15px; font-weight: 500; color: var(--nlm-c-text); text-decoration: none; position: relative; background: var(--nlm-c-surface); transition: background var(--nlm-dur) var(--nlm-ease); } [data-nlm-mobile="1"] #account-account .list-unstyled > li > a:active { background: var(--nlm-c-surface-alt); } /* Chevron-right indicator */ [data-nlm-mobile="1"] #account-account .list-unstyled > li > a::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--nlm-c-text-muted); border-top: 2px solid var(--nlm-c-text-muted); transform: translateY(-50%) rotate(45deg); } /* ============================================================================= 8. LIST / TABLE → CARD TRANSFORM ----------------------------------------------------------------------------- Order list, order details, address list, wishlist all use wide .table.table-bordered with 5–7 columns. On a 390px viewport that produces a horizontal scroller with truncated cells. Convert each to a card stack with explicit pseudo-element labels driven by the column order. ============================================================================= */ /* Hide the wrapping .table-responsive horizontal scroll on mobile — we'll re-flow the contents instead. */ [data-nlm-mobile="1"] [id^="account-"] .table-responsive { overflow-x: visible; -webkit-overflow-scrolling: auto; } /* Common: collapse table layout */ [data-nlm-mobile="1"] [id^="account-"] .table { display: block; width: 100%; margin: 0 0 12px; border: none; background: transparent; } [data-nlm-mobile="1"] [id^="account-"] .table > thead { display: none; /* hide column headers on mobile */ } [data-nlm-mobile="1"] [id^="account-"] .table > tbody, [data-nlm-mobile="1"] [id^="account-"] .table > tfoot { display: block; width: 100%; } [data-nlm-mobile="1"] [id^="account-"] .table > tbody > tr, [data-nlm-mobile="1"] [id^="account-"] .table > tfoot > tr { display: block; width: 100%; margin: 0 0 10px; padding: 12px 14px; background: var(--nlm-c-surface); border: 1px solid var(--nlm-c-border); border-radius: var(--nlm-radius); box-shadow: var(--nlm-shadow-sm); } [data-nlm-mobile="1"] [id^="account-"] .table > tbody > tr > td, [data-nlm-mobile="1"] [id^="account-"] .table > tfoot > tr > td { display: block; width: 100% !important; padding: 4px 0; border: none !important; text-align: left !important; font-size: 14px; line-height: 1.4; white-space: normal !important; color: var(--nlm-c-text); } /* ----------------------------------------------------------------------------- 8a. ORDER LIST (#account-order /index.php?route=account/order) columns: Order ID | Customer | No. Products | Status | Total | Date | View --------------------------------------------------------------------------- */ [data-nlm-mobile="1"] #account-order .table > tbody > tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; } /* Order ID — top left, bold */ [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 700; color: var(--nlm-c-text); padding: 0; } /* View button — top right */ [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(7) { grid-column: 2; grid-row: 1 / span 4; align-self: center; text-align: right !important; padding: 0; width: auto !important; } [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(7) .btn { min-height: 40px; padding: 0 14px; font-size: 13px; } [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(7) .btn .fa { margin-right: 6px; } /* Append "View" text after the eye icon since the icon-only button reads as nothing on a phone */ [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(7) .btn::after { content: "View"; } /* Customer name — labelled row, smaller */ [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--nlm-c-text-muted); padding: 0; } [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(2)::before { content: "Customer: "; font-weight: 600; color: var(--nlm-c-text); } /* Date */ [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(6) { grid-column: 1; grid-row: 3; font-size: 13px; color: var(--nlm-c-text-muted); padding: 0; } [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(6)::before { content: "Placed: "; font-weight: 600; color: var(--nlm-c-text); } /* Products count */ [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(3) { grid-column: 1; grid-row: 4; font-size: 13px; color: var(--nlm-c-text-muted); padding: 0; } [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(3)::before { content: "Items: "; font-weight: 600; color: var(--nlm-c-text); } /* Status — render as a coloured pill on its own row at the bottom of the card */ [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(4) { grid-column: 1 / span 2; grid-row: 5; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--nlm-c-border) !important; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--nlm-c-primary); } [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(4)::before { content: "Status:"; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nlm-c-text-muted); } /* Total — render large on the right of status row */ [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(5) { grid-column: 1 / span 2; grid-row: 6; display: flex; justify-content: flex-end; font-size: 18px; font-weight: 700; color: var(--nlm-c-text); padding: 0; } [data-nlm-mobile="1"] #account-order .table > tbody > tr > td:nth-child(5)::before { content: "Total: "; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nlm-c-text-muted); align-self: center; margin-right: auto; padding-top: 2px; } /* ----------------------------------------------------------------------------- 8b. ORDER INFO (#account-order /index.php?route=account/order/info) Three+ tables on one page: [1] Order detail (invoice/order/date | payment method/shipping method) [2] Payment address | Shipping address [3] Line items + totals [4] Comment (optional) [5] History (date | status | comment) The default `.table > tbody > tr` rule above already turns each into a card. We just need to tighten layout on the line-items table and the addresses table. --------------------------------------------------------------------------- */ /* The order_info template has a 2-cell header row in the with colspan=2 that says "Order Details". Since we hide globally, this is fine. */ /* Order detail row — first table — flatten to a 2-column key/value list */ [data-nlm-mobile="1"] #account-order .table:not(.table-line-items) > tbody > tr > td b { display: inline-block; min-width: 110px; font-weight: 600; color: var(--nlm-c-text-muted); } /* Addresses table (the one with `text_payment_address` / `text_shipping_address`) — these tables have a with the column titles, which we hide. So we re-add the labels via ::before on the s. We can detect this table by the presence of with vertical-align styled content. Simpler: just keep the addresses readable. */ [data-nlm-mobile="1"] #account-order .table > tbody > tr > td br + b, [data-nlm-mobile="1"] #account-order .table > tbody > tr > td > b:first-child { display: inline-block; margin-top: 2px; } /* Line items / totals table (third table, has thead with column_name etc.) — the cards work but we want clearer hierarchy. */ /* History table (h3 above it: "Order History") — same card treatment works. Add a label prefix for each cell to keep context. */ [data-nlm-mobile="1"] #account-order #content > h3 { font-size: 14px; font-weight: 700; margin: 20px 0 10px; color: var(--nlm-c-text); text-transform: uppercase; letter-spacing: 0.04em; } /* ----------------------------------------------------------------------------- 8c. ADDRESS LIST (#account-address /index.php?route=account/address) columns: Address text | Action buttons --------------------------------------------------------------------------- */ [data-nlm-mobile="1"] #account-address .table > tbody > tr, [data-nlm-mobile="1"] #account-address .table > tbody > tr > form { display: block; } [data-nlm-mobile="1"] #account-address .table > tbody > tr { padding: 14px; } /* Address text */ [data-nlm-mobile="1"] #account-address .table > tbody > tr > td:nth-child(1) { font-size: 15px; line-height: 1.55; color: var(--nlm-c-text); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--nlm-c-border) !important; } /* Edit / Delete buttons */ [data-nlm-mobile="1"] #account-address .table > tbody > tr > td:nth-child(2) { display: flex; gap: 8px; padding: 0; } [data-nlm-mobile="1"] #account-address .table > tbody > tr > td:nth-child(2) .btn { flex: 1 1 0; min-width: 0; } /* ----------------------------------------------------------------------------- 8d. WISHLIST (#account-wishlist /index.php?route=account/wishlist) columns: Image | Name | Model | Stock | Price | Action(Cart/Remove) --------------------------------------------------------------------------- */ [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr { display: grid; grid-template-columns: 80px 1fr; gap: 4px 12px; align-items: start; } /* Image */ [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(1) { grid-column: 1; grid-row: 1 / span 4; padding: 0; } [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(1) img { width: 100%; max-width: 80px; height: auto; border-radius: var(--nlm-radius-sm); border: 1px solid var(--nlm-c-border); } /* Name */ [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(2) { grid-column: 2; grid-row: 1; font-size: 14px; font-weight: 600; line-height: 1.35; padding: 0; } [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(2) a { color: var(--nlm-c-text); text-decoration: none; } /* Model */ [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--nlm-c-text-muted); padding: 0; } [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(3):not(:empty)::before { content: "Model: "; font-weight: 600; } /* Stock */ [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(4) { grid-column: 2; grid-row: 3; font-size: 12px; color: var(--nlm-c-text-muted); padding: 0; } [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(4):not(:empty)::before { content: "Stock: "; font-weight: 600; } /* Price */ [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(5) { grid-column: 2; grid-row: 4; font-size: 16px; font-weight: 700; color: var(--nlm-c-text); padding: 4px 0 0; } /* Action buttons (cart + remove) */ [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(6) { grid-column: 1 / span 2; grid-row: 5; display: flex; gap: 8px; padding: 8px 0 0; margin-top: 4px; border-top: 1px solid var(--nlm-c-border); } [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(6) .btn { flex: 1 1 0; min-height: 44px; } [data-nlm-mobile="1"] #account-wishlist .table > tbody > tr > td:nth-child(6) .btn .fa { margin-right: 6px; } /* ============================================================================= 9. PAGINATION & RESULTS COUNT (shared, order list / wishlist) ============================================================================= */ [data-nlm-mobile="1"] [id^="account-"] #content > .row:has(> .col-sm-6 > .pagination), [data-nlm-mobile="1"] [id^="account-"] #content > .row:has(.results) { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 16px 0; } [data-nlm-mobile="1"] [id^="account-"] .pagination { margin: 0; display: inline-flex; border-radius: var(--nlm-radius); overflow: hidden; } [data-nlm-mobile="1"] [id^="account-"] .pagination > li > a, [data-nlm-mobile="1"] [id^="account-"] .pagination > li > span { min-width: 44px; min-height: 44px; padding: 0 12px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } /* ============================================================================= 10. ACCOUNT INFO TEXT (text_register_account, text_email, etc.) The login template puts `

{{ text_register }}

` then a second `

{{ text_register_account }}

` — give the body copy room to breathe without bleeding outside the well card. ============================================================================= */ [data-nlm-mobile="1"] [id^="account-"] .well p { margin: 0 0 12px; } [data-nlm-mobile="1"] [id^="account-"] .well p:last-of-type { margin-bottom: 16px; }