/* ==========================================================================
   PPP Theme — S/4HANA Public Cloud chrome for the customer / supplier portal.
   Loaded on every website page through `web_include_css` (hooks.py), which
   frappe writes out in templates/includes/head.html.

   The desk stylesheet (fiori.css) never reaches these pages, so the Horizon
   tokens are declared again here — the same reference values, so a portal page
   and a desk page are the same product. Nothing in this file changes markup or
   behaviour; frappe's portal templates are restyled where they stand:

     /me                  .portal-container / .portal-items / .portal-section
     /orders /invoices …  .website-list > .result > .web-list-item
     /orders/<name>       .page-header-wrapper + .order-container
     /issues              .web-list-container (the Web Form list)
     forms                .web-form / .frappe-control

   Deliberately untouched: `.login-content` and `.page-card`, which are the
   login page this site already styles through
   `Website Settings.head_html` (p13_login_page.py) — two stylesheets fighting
   over one page is how a login screen ends up broken.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — SAP Horizon reference values (same as fiori.css section 1)
   -------------------------------------------------------------------------- */
:root {
	--ppp-brand: #0070f2;
	--ppp-brand-hover: #0064d9;
	--ppp-brand-subtle: #ebf8ff;
	--ppp-brand-subtle-2: #d1efff;

	--ppp-canvas: #f5f6f7;
	--ppp-surface: #ffffff;
	--ppp-line: #d9d9d9;
	--ppp-line-subtle: #eaecee;

	--ppp-ink: #1d2d3e;
	--ppp-ink-2: #556b82;
	--ppp-ink-3: #6a7e95;

	--ppp-positive: #256f3a;
	--ppp-critical: #e76500;
	--ppp-negative: #aa0808;
	--ppp-neutral: #5b738b;

	--ppp-shadow-0: 0 0 0 0.0625rem rgba(34, 54, 79, 0.1), 0 0.125rem 0.25rem 0 rgba(34, 54, 79, 0.1);
	--ppp-shadow-1: 0 0 0 0.0625rem rgba(34, 54, 79, 0.12), 0 0.25rem 0.75rem 0 rgba(34, 54, 79, 0.14);
	--ppp-radius: 8px;
	--ppp-radius-tile: 12px;
}

/* --------------------------------------------------------------------------
   2. Page shell — the canvas, and the navbar as a Fiori shell bar
   -------------------------------------------------------------------------- */
/* The login page is excluded by the attribute frappe actually sets on the body
   (`data-path`); it has no `.login-page` class, so guarding on one only looked
   like it worked — the canvas landed on the login page too and was overridden
   further down by head_html. */
body:not([data-path="login"]):not([data-path="update-password"]) {
	background-color: var(--ppp-canvas);
	color: var(--ppp-ink);
	font-size: 14px;
}

/* A shell bar is 44px, flat, white, and separated from the canvas by a single
   hairline — not a shadow. It stays put while the page scrolls. */
.navbar.navbar-light {
	position: sticky;
	top: 0;
	z-index: 1030;
	min-height: 44px;
	padding: 0 16px;
	background: var(--ppp-surface) !important;
	border-bottom: 1px solid var(--ppp-line);
	box-shadow: none;
}

.navbar .navbar-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ppp-ink);
}

.navbar .navbar-brand img {
	max-height: 24px;
}

/* frappe's navbar.scss pins `.navbar-nav .nav-item .nav-link` to
   `line-height: 1` from a more specific selector than this one, so the height
   of a shell-bar link has to come from its box rather than from its line —
   otherwise every link in the bar is a 13px-tall tap target. */
.navbar .navbar-nav .nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 10px;
	font-size: 13px;
	color: var(--ppp-ink);
	box-shadow: inset 0 -2px 0 transparent;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
	color: var(--ppp-brand);
	box-shadow: inset 0 -2px 0 var(--ppp-brand);
}

.navbar .navbar-toggler {
	border: 0;
	padding: 4px 6px;
}

/* frappe's website stylesheet zeroes `.container` padding from 576px up to
   992px (scss/website/index.scss) while Bootstrap's `.row` keeps its -15px
   gutters, so on a tablet every `.container > .row` — the page body and the
   footer both — hangs 15px past each edge and the whole page scrolls
   sideways. The gutter is put back for that band only; the widths either side
   set their own. */
@media (min-width: 576px) and (max-width: 991.98px) {
	.container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* --------------------------------------------------------------------------
   3. Page title band — Fiori's dynamic page title over the content
   -------------------------------------------------------------------------- */
.page-header-wrapper {
	background: var(--ppp-surface);
	border-bottom: 1px solid var(--ppp-line-subtle);
	padding: 14px 0 12px;
	margin-bottom: 20px;
}

/* Several portal templates render the header block with nothing in it (/me is
   one), which leaves a white band across the top of the page. A title band
   with no title is not a band. */
.page-header-wrapper:not(:has(h1)):not(:has(h3)):not(:has(.my-account-header)) {
	display: none;
}

/* No re-centring: frappe already wraps a portal page in `main.container`, and
   centring again inside it is what floats the title in the middle of the band. */
.page-header-wrapper .page-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	text-align: left;
}

/* 22px/600 is the Fiori object title; the portal ships h3 and h1 for the same
   job on different pages, so both are normalised. */
.page-header h1,
.page-header h3,
.my-account-header {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ppp-ink);
}

.page-header-actions-block {
	margin-left: auto;
}

.page-header-actions-block .row {
	align-items: center;
	justify-content: flex-end;
	margin: 0;
}

.page_content {
	padding: 0 0 48px;
}

/* --------------------------------------------------------------------------
   4. My Account (/me) — the portal's landing grid
   The template renders one `.portal-section` per destination as a flat list;
   an enterprise portal opens on a grid of them, which is a matter of layout
   rather than markup.
   -------------------------------------------------------------------------- */
.portal-container {
	width: 100%;
}

.portal-section.head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 0 12px;
	border: 0;
}

.portal-section.head .title {
	font-size: 16px;
	font-weight: 600;
	color: var(--ppp-ink);
}

.my-account-name {
	font-size: 13px;
	color: var(--ppp-ink-2);
}

/* 200px so the grid still manages two columns inside the narrow, centred card
   frappe gives /me, and more as the viewport allows. */
.portal-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

.portal-items .portal-section {
	margin: 0;
	padding: 0;
	background: var(--ppp-surface);
	border-radius: var(--ppp-radius-tile);
	box-shadow: var(--ppp-shadow-0);
	transition: box-shadow 100ms linear, transform 100ms linear;
}

.portal-items .portal-section:hover {
	box-shadow: var(--ppp-shadow-1);
}

.portal-items .my-account-item-link {
	display: block;
}

.portal-items .my-account-item-link a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px;
	color: var(--ppp-ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

/* The glyph gets the accent square a Fiori launchpad tile uses, so the grid
   scans by icon rather than by reading every label. */
.portal-items .my-account-item-link a .icon,
.portal-items .my-account-item-link a svg {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 7px;
	border-radius: var(--ppp-radius);
	background: var(--ppp-brand-subtle);
	color: var(--ppp-brand);
	stroke: var(--ppp-brand);
}

.portal-items .my-account-item-link a:hover {
	color: var(--ppp-brand);
}

.portal-footer,
.page-footer {
	margin: 24px 0 0;
	padding: 16px 0;
	font-size: 12px;
	color: var(--ppp-ink-3);
}

/* --------------------------------------------------------------------------
   4.1 Portal side navigation — Fiori's side nav.
   The items are frappe's own: it renders the portal menu here for a user who
   has one (a Customer or Supplier) and a single "My Account" link for everyone
   else, which is why this file styles the rail and adds nothing to it. An
   earlier cut of this pass injected the menu with a script and produced two
   copies of it for the very users who mattered.
   -------------------------------------------------------------------------- */
#page-portal {
	padding-top: 20px;
}

#page-portal .sidebar-column {
	padding-right: 20px;
}

#page-portal .web-sidebar {
	position: sticky;
	top: 64px;
	background: var(--ppp-surface);
	border-radius: var(--ppp-radius);
	box-shadow: var(--ppp-shadow-0);
	padding: 8px;
}

#page-portal .web-sidebar ul {
	margin: 0;
}

#page-portal .sidebar-item {
	margin: 0;
}

#page-portal .sidebar-item > a {
	display: block;
	padding: 7px 10px;
	border-radius: var(--ppp-radius);
	font-size: 13px;
	color: var(--ppp-ink);
	text-decoration: none;
}

#page-portal .sidebar-item > a:hover {
	background: #f5f5f5;
	color: var(--ppp-brand);
}

/* Fiori marks the selected side-nav entry with a fill and a left rule.
   frappe puts the marker on the link, as `a.active` (web_sidebar.html sets it
   from the current path), not on the item — so this went unstyled until the
   selector was corrected. */
#page-portal .sidebar-item > a.active {
	background: var(--ppp-brand-subtle);
	color: var(--ppp-brand);
	font-weight: 500;
	box-shadow: inset 2px 0 0 var(--ppp-brand);
}


/* --------------------------------------------------------------------------
   5. Transaction lists (/orders, /invoices, /quotations, /shipments)
   -------------------------------------------------------------------------- */
.website-list {
	background: var(--ppp-surface);
	border-radius: var(--ppp-radius);
	box-shadow: var(--ppp-shadow-0);
	overflow: hidden;
}

/* erpnext's website.scss pulls this list 2rem to the left below 567px, which
   made sense when it was plain rows on the canvas. It is a card here, and a
   card has to line up with the title above it. */
@media (max-width: 567px) {
	.website-list {
		margin-left: 0;
	}
}

.website-list .result {
	display: block;
}

.web-list-item,
.transaction-list-item {
	padding: 12px 16px;
	border-bottom: 1px solid var(--ppp-line-subtle);
	transition: background-color 80ms linear;
}

.transaction-item-link:last-child .transaction-list-item,
.web-list-item:last-child {
	border-bottom: 0;
}

.web-list-item:hover,
.transaction-list-item:hover {
	background: #f5f5f5;
}

.list-item-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--ppp-brand);
}

.transaction-time,
.items-preview {
	font-size: 12px;
	color: var(--ppp-ink-2);
}

/* A money column is read by comparing digits, so it is tabular and aligned. */
.transaction-list-item .col-sm-2,
.transaction-list-item .col-sm-3 {
	font-variant-numeric: tabular-nums;
}

/* 5.1 Status pills — frappe's colour words mapped onto Fiori semantics, so
   "orange" means critical here and on the desk both. */
.indicator-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 1px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	background: #eaecee;
	color: var(--ppp-ink-2);
}

.indicator-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
}

.indicator-pill.green,
.indicator-pill.darkgrey.green {
	background: #f0fbf2;
	color: var(--ppp-positive);
}

.indicator-pill.orange,
.indicator-pill.yellow {
	background: #fff5e6;
	color: var(--ppp-critical);
}

.indicator-pill.red,
.indicator-pill.pink {
	background: #ffeaea;
	color: var(--ppp-negative);
}

.indicator-pill.blue,
.indicator-pill.purple {
	background: var(--ppp-brand-subtle);
	color: var(--ppp-brand);
}

.indicator-pill.grey,
.indicator-pill.darkgrey {
	background: #eef1f4;
	color: var(--ppp-neutral);
}

/* 5.2 The pager frappe puts under a website list */
.btn-more {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--ppp-line-subtle);
	border-radius: 0;
	background: var(--ppp-surface);
	color: var(--ppp-brand);
	font-size: 13px;
	padding: 10px;
}

.btn-more:hover {
	background: var(--ppp-brand-subtle);
}

/* --------------------------------------------------------------------------
   6. Document page (/orders/<name>) — Fiori object page
   -------------------------------------------------------------------------- */
.transaction-subheading {
	margin: 0 0 4px;
}

.indicator-container {
	align-items: center;
	margin: 0 0 16px !important;
}

/* The template puts the status pill in a col-10 and the customer's name in the
   col-2 beside it — 65px on a phone, which is narrower than the word "Arora"
   and broke the company name into a column of single letters. The pill takes
   the width it needs and the name takes the rest of the line. */
.indicator-container > .col-10 {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}

.indicator-container > .col-2 {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	min-width: 150px;
}

/* Below that the two do not fit side by side, so the party reads as a caption
   under the status. */
@media (max-width: 480px) {
	.indicator-container {
		flex-direction: column;
		align-items: flex-start;
	}

	.indicator-container > .col-2 {
		min-width: 0;
		margin-top: 8px;
		text-align: left !important;
	}
}

.order-container {
	background: var(--ppp-surface);
	border-radius: var(--ppp-radius);
	box-shadow: var(--ppp-shadow-0);
	padding: 16px;
	margin-top: 8px !important;
}

/* The column header of an items table is a label row: uppercase, small, muted
   — the same treatment the desk gives a responsive table's header. */
.order-item-header {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ppp-line);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ppp-ink-2) !important;
}

.order-items.row {
	padding: 10px 0;
	border-bottom: 1px solid var(--ppp-line-subtle);
	align-items: center;
}

/* Both the header and every item row are col-5 / col-3 / col-2 / col-2
   (erpnext/templates/pages/order.html). A col-2 is 47px of the card on a
   tablet and 28px on a phone, while "₹ 13,75,000.00" needs about a hundred and
   must not wrap — so the amount spilled out of its cell at every width below a
   laptop. The three data columns get a width that fits this site's largest
   amount and the item column takes what is left; one rule sizes the header and
   the rows together, so the labels stay over their numbers. */
/* A zero basis, not `auto`: a wrapping flex row decides where to break from
   each item's basis, and an item name plus its description is wider than the
   card, so with `auto` the three data columns were pushed onto a second line
   before any shrinking happened. From zero, all four share one line and the
   item column grows into whatever the data columns leave. */
.order-items > .col-5 {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	min-width: 0;
}

/* 96px, not 76: a col-3 carries 15px of Bootstrap padding on each side, and
   the word "Quantity" in the header needs 55 of what is left. */
.order-items > .col-3 {
	flex: 0 0 96px;
	width: 96px;
	max-width: 96px;
}

.order-items > .col-2 {
	flex: 0 0 100px;
	width: 100px;
	max-width: 100px;
}

.order-items > .col-2.text-right {
	flex-basis: 116px;
	width: 116px;
	max-width: 116px;
}

.order-item-name {
	font-weight: 500;
	color: var(--ppp-ink);
}

.order-qty,
.order-rate {
	font-variant-numeric: tabular-nums;
	color: var(--ppp-ink-2);
}

/* "₹ 13,75,000.00" does not fit a col-2 at this font size and wraps onto two
   lines, which breaks the column of digits the reader is scanning. The money
   columns keep their number on one line and the item column gives up the
   space.

   The child combinator matters: the item cell holds a nested `.row` of its own
   (thumbnail + name + description), whose last cell also carries a `col-`
   class. A descendant selector caught that too, so the item description became
   one unwrapped 850px line and pushed the page 179px sideways on a tablet. */
.order-items > [class*="col-"]:last-child,
.order-rate,
.order-taxes .row > div:last-child {
	white-space: nowrap;
}

/* A product name like "PLM-BK-18-8X4" has no spaces to break at, and the
   description that follows it is a paragraph — both wrap, whatever the column
   width. */
.order-item-name,
.order-item-name * {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* The thumbnail sits in a percentage-width column of the item cell, and the
   item cell is the one that gives up space to the data columns — so on a
   narrow card the thumbnail collapsed to a sliver with its placeholder letters
   stacked vertically. A thumbnail is a fixed size. The placeholder carries its
   height inline in the template, hence the override. */
.order-item-name .order-image-col {
	flex: 0 0 68px;
	width: 68px;
	max-width: 68px;
	padding: 0 12px 0 0;
}

/* The text beside it needs a zero basis for the same reason the item column
   does: with `auto`, a description longer than the cell pushes itself onto the
   line below the thumbnail. */
.order-item-name .order-image-col + [class*="col-"] {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	min-width: 0;
	padding-left: 0;
}

/* One square placeholder, not a box inside a box: the bordered `.order-image`
   is the tile and the placeholder inside it just centres the initials. Both
   carry their height from the template — `h-100` as a class, `min-height` as
   an inline style — so both have to be overridden here. */
.order-item-name .order-image {
	height: 56px !important;
	min-height: 56px !important;
}

.order-item-name .no-image-cart-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 0 !important;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 12px;
	color: var(--ppp-ink-3);
}

.order-image,
.order-image-col img {
	border-radius: var(--ppp-radius);
	border: 1px solid var(--ppp-line-subtle);
	background: #fff;
}

/* Totals read as a summary, so they sit apart from the item rows and the grand
   total carries the emphasis.

   The template repeats one block per line — `.order-taxes.w-100` wrapping a
   `.col-4.d-flex` that holds a col-8 label and a col-4 amount — rather than
   one block containing a row per line, so the styling below is per line. An
   earlier version of this section styled `.order-taxes .row`, which this
   markup never contains; none of it applied. */
.order-taxes {
	margin: 0 !important;
	font-variant-numeric: tabular-nums;
}

/* Separation from the last item row, once, for the group. */
.order-items + .order-taxes {
	margin-top: 16px !important;
	padding-top: 12px;
	border-top: 1px solid var(--ppp-line);
}

/* Each line is a third of the card wide, split col-8 / col-4 between label and
   amount — which leaves the amount a twelfth of the card, 47px on a tablet,
   for "₹ 22,27,840.00". Instead: the line takes the right-hand side of the
   card, the label takes what is left, and the amount takes the width its
   digits need. */
.order-taxes > .col-4 {
	flex: 0 0 auto;
	width: min(340px, 100%);
	max-width: 100%;
	margin-left: auto;
	padding: 5px 0 !important;
	border-bottom: 1px solid var(--ppp-line-subtle);
}

.order-taxes > .col-4 > .item-grand-total.col-8 {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	padding-left: 0;
	color: var(--ppp-ink-2);
}

.order-taxes > .col-4 > .item-grand-total.col-4 {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	padding-left: 16px;
	white-space: nowrap;
}

/* The grand total is the line the customer opened the page for; the template
   marks it `font-weight-bold`. */
.order-taxes.font-weight-bold > .col-4 {
	border-bottom: 0;
	font-size: 16px;
	color: var(--ppp-ink);
}

.order-taxes.font-weight-bold > .col-4 > .item-grand-total.col-8 {
	color: var(--ppp-ink);
}

/* --------------------------------------------------------------------------
   7. Web Form lists and forms (/issues, /issues/new, portal web forms)
   -------------------------------------------------------------------------- */
.web-list-container,
.web-form-container {
	max-width: 1140px;
	margin: 0 auto;
	background: var(--ppp-surface);
	border-radius: var(--ppp-radius);
	box-shadow: var(--ppp-shadow-0);
	padding: 16px;
}

.web-list-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ppp-line-subtle);
}

.web-list-header h1 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
}

.web-list-actions {
	margin-left: auto;
}

.web-list-table th {
	font-size: 13px;
}

/* Fiori fields: a filled box with a single bottom line, and the brand on
   focus. Applies to portal forms, not to the login card. */
.page_content .form-control,
.web-form .form-control,
.web-list-filters .form-control {
	background: #f2f3f4;
	border: 0;
	border-bottom: 1px solid #556b82;
	border-radius: 4px 4px 0 0;
	box-shadow: none;
	font-size: 14px;
	color: var(--ppp-ink);
}

.page_content .form-control:focus,
.web-form .form-control:focus {
	background: #fff;
	border-bottom: 2px solid var(--ppp-brand);
	box-shadow: none;
}

.web-form .section-head {
	font-size: 14px;
	font-weight: 600;
	color: var(--ppp-ink);
}

/* --------------------------------------------------------------------------
   8. Buttons — Fiori metrics (2rem tall, 8px radius, no gradient)
   -------------------------------------------------------------------------- */
.page_content .btn,
.page-header-wrapper .btn,
.web-list-container .btn {
	min-height: 32px;
	padding: 5px 12px;
	border-radius: var(--ppp-radius);
	font-size: 13px;
	font-weight: 500;
	box-shadow: none;
}

.page_content .btn-primary,
.page-header-wrapper .btn-primary,
.web-list-container .btn-primary {
	background: var(--ppp-brand);
	border-color: var(--ppp-brand);
	color: #fff;
}

.page_content .btn-primary:hover,
.web-list-container .btn-primary:hover {
	background: var(--ppp-brand-hover);
	border-color: var(--ppp-brand-hover);
}

/* Fiori's secondary is a brand outline, and its "transparent" is brand text. */
.page_content .btn-secondary,
.page-header-wrapper .btn-secondary,
.page_content .btn-light {
	background: transparent;
	border: 1px solid var(--ppp-brand);
	color: var(--ppp-brand);
}

.page_content .btn-secondary:hover,
.page-header-wrapper .btn-secondary:hover,
.page_content .btn-light:hover {
	background: var(--ppp-brand-subtle);
	border-color: var(--ppp-brand);
	color: var(--ppp-brand-hover);
}

.dropdown-menu {
	border: 1px solid var(--ppp-line);
	border-radius: var(--ppp-radius);
	box-shadow: var(--ppp-shadow-1);
	padding: 4px;
}

.dropdown-menu .dropdown-item {
	border-radius: 4px;
	font-size: 13px;
	padding: 7px 10px;
}

.dropdown-menu .dropdown-item:hover {
	background: var(--ppp-brand-subtle);
	color: var(--ppp-brand);
}

/* --------------------------------------------------------------------------
   9. Copyright line
   Most portal templates render no footer at all — `www/me.html` blanks the
   block outright and the transaction lists never fill it — so the mark that
   `Website Settings.footer_powered` carries reaches only the pages that do
   render one (an order, /issues, the website pages). The wording comes from
   `--ppp-copyright`, declared in `Website Settings.head_html` and year-stamped
   on every request by ppp_theme/website.py, because CSS cannot ask what year
   it is. Pages that already show a real footer are left alone, and so is the
   login page, which draws its own mark and hides this band.
   -------------------------------------------------------------------------- */
body:not(:has(footer.web-footer)) .page-footer:empty::before {
	content: var(--ppp-copyright, "");
	display: block;
	padding: 18px 0 24px;
	border-top: 1px solid var(--ppp-line-subtle);
	font-size: 12px;
	color: var(--ppp-ink-3);
	text-align: center;
}

/* --------------------------------------------------------------------------
   10. Phone
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.page-header h1,
	.page-header h3,
	.my-account-header {
		font-size: 18px;
	}

	.portal-items {
		grid-template-columns: 1fr;
	}

	.order-item-header {
		display: none;
	}

	/* Four columns beside each other leave the item name about 50px on a
	   360px card. The name takes the whole line and the numbers read
	   underneath it, which is the order the labels are hidden in anyway. */
	.order-items > .col-5 {
		flex: 1 1 100%;
		margin-bottom: 6px;
	}

	/* A list row that has to be read on a phone stacks rather than squeezing
	   four columns into 360px. */
	.transaction-list-item .row > [class^="col-"] {
		margin-bottom: 4px;
	}
}