/**
 * Trade portal.
 *
 * Reuses the theme's tokens and type scale, not its section rhythm. The portal
 * is a working tool: dense, fast, and quiet. Falls back to literal brand values
 * where the theme's custom properties are not present, so the portal still
 * looks right if the theme is ever swapped.
 */

:root {
	--p-navy: var(--c-navy, #2b3990);
	--p-ink: var(--c-ink, #242e35);
	--p-slate: var(--c-slate, #545d5c);
	--p-pale: var(--c-pale, #f1f5fd);
	--p-stone: var(--c-stone, #deddd9);
	--p-sand: var(--c-sand, #ece5da);
	--p-line: rgba(36, 46, 53, 0.14);
	--p-line-soft: rgba(36, 46, 53, 0.08);
	--p-radius: 3px;
	--p-bar-h: 64px;
	--p-total-h: 68px;
	/* Wide enough for a right-aligned price plus a 46px box. */
	--p-cell-w: 104px;
	--p-cell-gap: 8px;
	/* The product name column is capped rather than elastic, and the gap to
	   the pack columns absorbs the leftover width on a wide screen. */
	--p-name-w: 480px;
	--p-name-gap: clamp(20px, 3vw, 64px);
}

/* The hidden attribute has to beat the display values set below it, or the
   review and confirmation panels sit open over the order form. */
.swlw-portal [hidden] {
	display: none !important;
}

.swlw-portal {
	margin: 0;
	background: var(--p-pale);
	color: var(--p-ink);
	font-family: var(--ff-body, "Jost", system-ui, sans-serif);
	font-size: 16px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

.swlw-portal * {
	box-sizing: border-box;
}

.swlw-portal.has-modal {
	overflow: hidden;
}

/* ------------------------------------------------------------------ header */

.portal-bar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--p-navy);
	color: #fff;
}

.portal-bar__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 1560px;
	margin: 0 auto;
	padding: 0 20px;
	height: var(--p-bar-h);
}

.portal-bar__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: #fff;
	flex: 0 0 auto;
}

.portal-bar__logo {
	display: block;
	width: auto;
	height: 40px;
}

.portal-bar__sub {
	padding-left: 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.28);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.75;
	white-space: nowrap;
}

.portal-bar__nav {
	display: flex;
	gap: 4px;
	margin-right: auto;
}

.portal-bar__link {
	display: block;
	padding: 8px 14px;
	border-radius: var(--p-radius);
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 14.5px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.portal-bar__link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.portal-bar__link.is-current {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.portal-bar__account {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13.5px;
}

.portal-bar__company {
	opacity: 0.85;
}

.portal-bar__logout {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 1px;
}

/* -------------------------------------------------------------------- main */

.portal-main {
	max-width: 1560px;
	margin: 0 auto;
	padding: 26px 20px 40px;
}

.portal-h1 {
	font-family: var(--ff-display, "Cormorant Infant", Georgia, serif);
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.1;
	margin: 0 0 6px;
	font-weight: 400;
}

.portal-h2 {
	font-family: var(--ff-display, "Cormorant Infant", Georgia, serif);
	font-size: 26px;
	font-weight: 400;
	margin: 0 0 14px;
}

.portal-lead {
	margin: 0;
	color: var(--p-slate);
	font-size: 15px;
	max-width: 58ch;
}

.portal-chip {
	display: inline-block;
	padding: 5px 11px;
	border: 1px solid var(--p-line);
	border-radius: 100px;
	font-size: 12.5px;
	background: #fff;
	white-space: nowrap;
}

.portal-chip--muted {
	color: var(--p-slate);
	background: transparent;
	border-style: dashed;
}

.portal-optional {
	color: var(--p-slate);
	font-size: 12px;
	font-weight: 400;
}

/* ----------------------------------------------------------------- buttons */

.swlw-portal .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border: 1px solid var(--p-navy);
	border-radius: var(--p-radius);
	background: var(--p-navy);
	color: #fff;
	font: inherit;
	font-size: 14.5px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* The theme animates a navy fill into .btn via a ::before wipe and turns the
   label white to suit. The portal keeps its label colour, so the wipe slid
   navy in behind navy text and the button read as blank on hover. */
.swlw-portal .btn::before,
.swlw-portal .btn::after {
	display: none !important;
}

.swlw-portal .btn:hover,
.swlw-portal .btn:focus-visible {
	background: #232f77;
	border-color: #232f77;
	color: #fff;
}

.swlw-portal .btn--ghost {
	background: transparent;
	color: var(--p-navy);
}

.swlw-portal .btn--ghost:hover,
.swlw-portal .btn--ghost:focus-visible {
	background: var(--p-navy);
	border-color: var(--p-navy);
	color: #fff;
}

.swlw-portal .btn[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* -------------------------------------------------------------- order form */

.order-form__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.order-form__meta {
	display: flex;
	gap: 8px;
	align-items: center;
}

.order-form__tools {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--p-line);
	border-bottom: 0;
	border-radius: var(--p-radius) var(--p-radius) 0 0;
}

.order-search {
	position: relative;
	flex: 1 1 320px;
}

.order-search input {
	width: 100%;
	padding: 11px 34px 11px 13px;
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	font: inherit;
	font-size: 15px;
	background: var(--p-pale);
}

.order-search input:focus {
	outline: 2px solid var(--p-navy);
	outline-offset: -1px;
	background: #fff;
}

.order-search__clear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border: 0;
	background: transparent;
	color: var(--p-slate);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}

.order-search__clear:hover {
	background: var(--p-pale);
	color: var(--p-ink);
}

.order-filters {
	display: flex;
	gap: 6px;
}

.order-filter {
	padding: 9px 15px;
	border: 1px solid var(--p-line);
	border-radius: 100px;
	background: #fff;
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.order-filter:hover {
	border-color: var(--p-navy);
}

.order-filter.is-active {
	background: var(--p-navy);
	border-color: var(--p-navy);
	color: #fff;
}

.order-gst-note {
	margin: 0 0 0 auto;
	padding-right: 4px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--p-slate);
	white-space: nowrap;
}

.order-layout {
	display: grid;
	grid-template-columns: 216px minmax(0, 1fr);
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: 0 0 var(--p-radius) var(--p-radius);
	overflow: hidden;
}

/* ------------------------------------------------------------------- rail */

.order-rail {
	border-right: 1px solid var(--p-line);
	background: var(--p-pale);
	overflow: hidden;
}

.order-rail__inner {
	max-height: calc(100vh - var(--p-bar-h) - 210px - var(--p-total-h));
	overflow-y: auto;
	padding: 8px 0 14px;
}

.order-rail__cat {
	padding: 14px 16px 5px;
	font-size: 10.5px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--p-slate);
}

.order-rail__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 7px 16px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 13.5px;
	text-align: left;
	cursor: pointer;
	color: var(--p-ink);
}

.order-rail__link:hover {
	background: rgba(43, 57, 144, 0.07);
}

.order-rail__n {
	color: var(--p-slate);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

.order-rail__badge {
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 100px;
	background: var(--p-navy);
	color: #fff;
	font-size: 11px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- list */

.order-list {
	position: relative;
	min-width: 0;
}

.order-list__viewport {
	position: relative;
	/* The sticky total bar is fixed over the bottom of the screen, so its
	   height comes off the list or the last rows sit underneath it. */
	height: calc(100vh - var(--p-bar-h) - 210px - var(--p-total-h));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.order-list__sizer {
	position: relative;
	width: 1px;
}

.order-list__rows {
	position: absolute;
	inset: 0;
}

.order-list__empty,
.order-list__loading {
	padding: 40px 20px;
	text-align: center;
	color: var(--p-slate);
}

/* Rows and their pack columns -------------------------------------------
   Every section declares its own pack columns and each row lines up under
   them, so a section reads like an order sheet rather than a ragged list.
   --packs is set per row by the renderer. */

/* Headings and rows share one grid so the column labels can never drift out
   of line with the cells under them. The name column is capped: left to its
   own devices it stretched to 825px on a wide screen and left a chasm
   between the product and its prices. */
.order-head,
.order-row {
	display: grid;
	grid-template-columns: minmax(0, var(--p-name-w)) auto;
	gap: 0 var(--p-name-gap);
	justify-content: start;
	align-items: center;
}

.order-head {
	position: absolute;
	left: 0;
	right: 0;
	height: 46px;
	padding: 0 18px;
	background: var(--p-sand);
	border-bottom: 1px solid var(--p-line);
}

.order-head__title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
}

.order-head__cat {
	font-size: 10.5px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--p-slate);
}

.order-head__sub {
	font-family: var(--ff-display, "Cormorant Infant", Georgia, serif);
	font-size: 20px;
	line-height: 1;
}

/* Reserved at the width of the widest section in view, so every section's
   name column matches and the cells all start at the same x. */
.order-head__cols,
.order-row__cells {
	width: calc(
		var(--max-packs, 4) * var(--p-cell-w) +
		(var(--max-packs, 4) - 1) * var(--p-cell-gap)
	);
	display: grid;
	grid-template-columns: repeat(var(--packs, 1), var(--p-cell-w));
	gap: 0 var(--p-cell-gap);
	justify-content: start;
}

.order-head__col {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--p-slate);
	text-align: center;
}

.order-row {
	position: absolute;
	left: 0;
	right: 0;
	height: 50px;
	padding: 0 18px;
	border-bottom: 1px solid var(--p-line-soft);
}

/* Banding, because a price stacked above its quantity box sits higher than
   the product name beside it and the eye pairs it with the row above.
   Driven by the row's index in the full list, not :nth-child: only the
   visible rows are in the DOM, so nth-child would restripe on every scroll. */
.order-row.is-alt {
	background: rgba(36, 46, 53, 0.025);
}

.order-row:hover {
	background: var(--p-pale);
}

.order-row.is-in-order {
	background: rgba(43, 57, 144, 0.06);
	box-shadow: inset 3px 0 0 var(--p-navy);
}

.order-row__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.order-row__name {
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-row__detail {
	font-size: 11.5px;
	color: var(--p-slate);
}

/* Price and box share one line, so a row's name, price and quantity all sit
   on the same centre line. Stacking the price above the box put it 12px
   higher than the product name and it read as belonging to the row above. */
.order-cell {
	display: flex;
	align-items: center;
	gap: 6px;
	position: relative;
}

.order-cell--empty {
	opacity: 0;
}

/* The section heading carries the column labels on desktop, so the per-cell
   copy of them is only needed once the row stacks. */
.order-cell__label {
	display: none;
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--p-slate);
}

/* Takes the leftover width and right-aligns, so prices form their own tidy
   column hard against the boxes. */
.order-cell__price {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: var(--p-slate);
	white-space: nowrap;
}

.order-cell.is-set .order-cell__price {
	color: var(--p-navy);
	font-weight: 600;
}

.order-cell__na {
	flex: 1 1 auto;
	text-align: right;
	font-size: 10.5px;
	color: var(--p-slate);
}

.order-cell__units {
	margin-left: 3px;
	font-style: normal;
	font-size: 10px;
	color: var(--p-slate);
	opacity: 0.8;
}

.order-cell__qty {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

/* Desktop is keyboard-first: tab down the column and type. The steppers are
   touch affordances and only earn their space on a phone. */
.order-step {
	display: none;
	width: 20px;
	height: 26px;
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	background: #fff;
	color: var(--p-ink);
	font: inherit;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.order-step:hover {
	border-color: var(--p-navy);
	color: var(--p-navy);
}

/* The theme sets `input[type="number"] { width: 100% }`, which is (0,1,1) and
   therefore beats a bare `.order-qty`. On desktop the grid track hid it; on a
   phone the flex row has nothing to constrain it and the box filled the
   screen. Scoping to .swlw-portal wins on specificity rather than on order. */
/* Empty boxes are a soft tint with no border, so an untouched grid stays
   quiet; anything with a quantity in it goes navy and reads at a glance. */
.swlw-portal .order-qty {
	flex: 0 0 auto;
	width: 46px;
	height: 28px;
	padding: 0 3px;
	border: 1px solid transparent;
	border-radius: var(--p-radius);
	background: rgba(36, 46, 53, 0.05);
	font: inherit;
	font-size: 14px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.order-row:hover .order-qty {
	background: #fff;
	border-color: var(--p-line);
}

.order-cell.is-set .order-qty {
	background: #fff;
	border-color: var(--p-navy);
	color: var(--p-navy);
	font-weight: 600;
}

.order-qty::-webkit-outer-spin-button,
.order-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.order-qty:focus {
	outline: 2px solid var(--p-navy);
	outline-offset: -1px;
}

/* ------------------------------------------------------------- total bar */

.order-total {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: var(--p-total-h);
	padding: 0 20px;
	background: var(--p-ink);
	color: #fff;
}

.order-total__figures {
	display: flex;
	gap: 24px;
	align-items: baseline;
	font-size: 13.5px;
	flex-wrap: wrap;
}

.order-total__figures strong {
	font-variant-numeric: tabular-nums;
}

.order-total__grand {
	font-size: 16px;
}

/* Reserved whether or not the bar is showing. Adding the space only once a
   line went in shifted the page the moment you typed the first quantity, and
   the fixed bar then covered the row you were working in. */
.swlw-portal--order .portal-main {
	padding-bottom: calc(var(--p-total-h) + 26px);
}

/* ---------------------------------------------------------------- review */

.order-review,
.order-done {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 30px 16px;
	background: rgba(36, 46, 53, 0.55);
	overflow-y: auto;
}

.order-review__inner,
.order-done__inner {
	position: relative;
	width: 100%;
	max-width: 760px;
	padding: 30px;
	background: #fff;
	border-radius: var(--p-radius);
}

.order-review__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--p-slate);
}

.order-review__lines {
	max-height: 42vh;
	overflow-y: auto;
	margin-bottom: 22px;
	border: 1px solid var(--p-line-soft);
	border-radius: var(--p-radius);
}

.order-review__cat {
	padding: 8px 14px;
	background: var(--p-sand);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--p-slate);
}

.order-review__line {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 82px 92px;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	border-bottom: 1px solid var(--p-line-soft);
	font-size: 14px;
}

.order-review__qty {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.order-review__name em {
	display: block;
	font-style: normal;
	font-size: 11.5px;
	color: var(--p-slate);
}

.order-review__price,
.order-review__linetotal {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.order-review__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.order-review__fields p {
	margin: 0;
}

.order-review__wide {
	grid-column: 1 / -1;
}

.order-review__fields label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
}

.order-review__fields input,
.order-review__fields textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	font: inherit;
	font-size: 14.5px;
	background: var(--p-pale);
}

.order-review__foot {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--p-line);
}

.order-review__totals {
	display: flex;
	gap: 22px;
	justify-content: flex-end;
	font-size: 14px;
	margin-bottom: 10px;
}

.order-review__grand {
	font-size: 17px;
}

.order-review__note {
	margin: 0 0 16px;
	font-size: 12.5px;
	color: var(--p-slate);
}

.order-review__actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.order-review__error {
	margin: 14px 0 0;
	padding: 11px 14px;
	background: #fbeaea;
	border-left: 3px solid #a3423c;
	font-size: 14px;
}

.order-done__ref {
	font-size: 17px;
}

.order-done__actions {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}

/* --------------------------------------------------------------- tables */

.portal-panel {
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	padding: 22px 24px;
	margin-bottom: 20px;
	/*
	 * A wide table has to scroll inside its own card. Without this the order
	 * history ran the whole document 367px wider than a phone, so the page
	 * itself scrolled sideways and the status, View, PDF and Reorder columns
	 * were simply unreachable. Publicans order from a phone on the floor of a
	 * venue, so this is the case that matters most.
	 */
	overflow-x: auto;
}

.portal-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	/* Below this the columns crush into unreadable slivers rather than
	   scrolling, because the table would happily shrink to fit. */
	min-width: 620px;
}

/* Keep "View · PDF" on one line: wrapped, the separator ends up sitting on a
   line of its own and reads as a stray bullet. */
.portal-actions {
	white-space: nowrap;
}

.portal-table th {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--p-line);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--p-slate);
	font-weight: 500;
}

.portal-table td {
	padding: 12px;
	border-bottom: 1px solid var(--p-line-soft);
	vertical-align: top;
}

.portal-table tr:last-child td {
	border-bottom: 0;
}

.portal-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 100px;
	font-size: 11.5px;
	background: var(--p-sand);
}

.portal-status--received {
	background: #e4e9f9;
	color: #2b3990;
}

/*
 * Picked and out for delivery both used to fall through to the bare .portal-status
 * sand, which made them identical on screen. They are the two states a customer
 * most wants told apart: on the shelf, or on the van.
 */
.portal-status--picked {
	background: #f6ecd6;
	color: #7a5a17;
}

.portal-status--out {
	background: #dcefec;
	color: #15625b;
}

.portal-status--delivered {
	background: #e2efe4;
	color: #2f6b3c;
}

.portal-status--cancelled {
	background: #f6e5e4;
	color: #8c3b35;
}

.portal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.portal-dl {
	margin: 0;
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 8px 16px;
	font-size: 14.5px;
}

.portal-dl dt {
	color: var(--p-slate);
	font-size: 13px;
}

.portal-dl dd {
	margin: 0;
}

.portal-empty {
	padding: 34px 20px;
	text-align: center;
	color: var(--p-slate);
}

/* ------------------------------------------------------------ trade login */

.swlw-login {
	min-height: 100vh;
}

.login-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	min-height: 100vh;
}

.login-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px clamp(24px, 5vw, 72px);
	background: #fff;
}

/* Without this the form sits against the left edge of a very wide column
   with a lot of nothing beside it. */
.login-panel__inner {
	width: 100%;
	max-width: 430px;
	margin-inline: auto;
}

.login-brand {
	display: block;
	margin-bottom: auto;
}

.login-brand img {
	width: auto;
	height: 68px;
}

.login-h1 {
	margin: 0 0 8px;
	font-family: var(--ff-display, "Cormorant Infant", Georgia, serif);
	font-size: clamp(34px, 4vw, 46px);
	font-weight: 400;
	line-height: 1.05;
	color: var(--p-navy);
}

.login-lead {
	margin: 0 0 28px;
	max-width: 46ch;
	color: var(--p-slate);
	font-size: 15.5px;
}

.login-notice {
	margin: 0 0 20px;
	padding: 12px 15px;
	background: var(--p-pale);
	border-left: 3px solid var(--p-navy);
	font-size: 14.5px;
}

.login-notice--error {
	background: #fbeaea;
	border-left-color: #a3423c;
}

.login-form {
	max-width: 420px;
}

.login-form p {
	margin: 0 0 16px;
}

.login-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--p-slate);
}

.login-form input[type="text"],
.login-form input[type="password"] {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	background: var(--p-pale);
	font: inherit;
	font-size: 16px;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
	outline: 2px solid var(--p-navy);
	outline-offset: -1px;
	background: #fff;
}

.login-form__remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--p-ink);
}

.login-form__submit {
	width: 100%;
	padding: 14px 22px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 12.5px;
}

.login-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
	max-width: 420px;
	font-size: 14px;
}

.login-links a {
	color: var(--p-navy);
}

.login-help,
.login-back {
	max-width: 420px;
	margin: 26px 0 0;
	font-size: 13px;
	color: var(--p-slate);
}

.login-back {
	margin-top: 12px;
}

.login-help a,
.login-back a {
	color: var(--p-navy);
}

.login-aside {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 44px clamp(28px, 4vw, 56px);
	background: var(--p-navy);
	color: #fff;
	overflow: hidden;
}

/* A drawn horizon rather than a photograph, so the panel never depends on an
   image being present and never washes the type out. */
.login-aside::after {
	content: "";
	position: absolute;
	left: -20%;
	right: -20%;
	bottom: -46%;
	aspect-ratio: 2 / 1;
	border-radius: 50% 50% 0 0;
	background: rgba(255, 255, 255, 0.055);
	pointer-events: none;
}

.login-aside__inner {
	position: relative;
	z-index: 1;
	max-width: 30ch;
}

.login-aside__quote {
	margin: 0 0 22px;
	font-family: var(--ff-display, "Cormorant Infant", Georgia, serif);
	font-size: clamp(24px, 2.4vw, 33px);
	line-height: 1.22;
}

.login-aside__licence {
	margin: 0;
	font-size: 12px;
	opacity: 0.7;
}

@media (max-width: 860px) {
	.login-split {
		grid-template-columns: 1fr;
	}

	.login-aside {
		order: -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding: 22px 24px;
	}

	.login-aside__quote {
		font-size: 17px;
		margin-bottom: 6px;
	}

	.login-aside__licence {
		font-size: 11px;
	}

	.login-panel {
		padding: 34px 24px 48px;
	}

	.login-brand {
		margin-bottom: 0;
		flex: 0 0 auto;
	}

	.login-brand img {
		height: 52px;
	}
}

/* ------------------------------------------------- trade application form */

.swlw-apply {
	background: var(--p-pale);
}

.apply-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px clamp(16px, 4vw, 44px);
	background: var(--p-navy);
}

.apply-bar__brand img {
	display: block;
	width: auto;
	height: 46px;
}

.apply-bar__back {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 13px;
}

.apply-bar__back:hover {
	color: #fff;
}

.apply-main {
	max-width: 880px;
	margin: 0 auto;
	padding: 34px clamp(16px, 4vw, 24px) 60px;
}

.apply-h1 {
	margin: 0 0 8px;
	font-family: var(--ff-display, "Cormorant Infant", Georgia, serif);
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 400;
	line-height: 1.05;
	color: var(--p-navy);
}

.apply-h2 {
	margin: 0 0 4px;
	font-family: var(--ff-display, "Cormorant Infant", Georgia, serif);
	font-size: 26px;
	font-weight: 400;
}

.apply-h3 {
	margin: 30px 0 4px;
	font-family: var(--ff-display, "Cormorant Infant", Georgia, serif);
	font-size: 21px;
	font-weight: 400;
}

.apply-lead {
	margin: 0;
	max-width: 62ch;
	color: var(--p-slate);
	font-size: 15.5px;
}

.apply-head {
	margin-bottom: 26px;
}

.apply-note {
	margin: 0 0 16px;
	color: var(--p-slate);
	font-size: 13.5px;
	max-width: 62ch;
}

.apply-note--privacy {
	margin-top: 22px;
	padding: 12px 15px;
	background: rgba(43, 57, 144, 0.05);
	border-left: 3px solid var(--p-navy);
	color: var(--p-ink);
}

.apply-notice {
	margin: 0 0 22px;
	padding: 13px 16px;
	background: #fff;
	border-left: 3px solid var(--p-navy);
	font-size: 14.5px;
}

.apply-notice--error {
	background: #fbeaea;
	border-left-color: #a3423c;
}

/* Steps are a progress indicator, not navigation: they only appear once the
   script has taken over, so the no-JS form still shows every section. */
.apply-steps {
	display: none;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	gap: 6px;
	counter-reset: step;
	flex-wrap: wrap;
}

.is-stepped .apply-steps {
	display: flex;
}

.apply-steps li {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 1 1 auto;
	padding: 9px 12px;
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	background: #fff;
	font-size: 12.5px;
	color: var(--p-slate);
	white-space: nowrap;
}

.apply-steps li span {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--p-pale);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.apply-steps li.is-current {
	border-color: var(--p-navy);
	color: var(--p-ink);
}

.apply-steps li.is-current span,
.apply-steps li.is-done span {
	background: var(--p-navy);
	color: #fff;
}

.apply-step {
	padding: 26px clamp(18px, 3vw, 30px) 24px;
	margin-bottom: 20px;
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
}

.is-stepped .apply-step {
	display: none;
	margin-bottom: 0;
}

.is-stepped .apply-step.is-current {
	display: block;
}

.apply-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
	margin-top: 18px;
}

.apply-grid--ref {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 10px;
}

.apply-field {
	margin: 0;
	min-width: 0;
}

.apply-field--wide {
	grid-column: 1 / -1;
}

.apply-field label,
.apply-sign__label {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--p-slate);
}

.apply-hint {
	letter-spacing: 0;
	text-transform: none;
	font-size: 11.5px;
	opacity: 0.85;
}

.swlw-apply input[type="text"],
.swlw-apply input[type="email"],
.swlw-apply input[type="tel"],
.swlw-apply input[type="date"],
.swlw-apply input[type="file"],
.swlw-apply select,
.swlw-apply textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	background: var(--p-pale);
	font: inherit;
	font-size: 15px;
	color: var(--p-ink);
}

.swlw-apply input:focus,
.swlw-apply select:focus,
.swlw-apply textarea:focus {
	outline: 2px solid var(--p-navy);
	outline-offset: -1px;
	background: #fff;
}

.swlw-apply input:user-invalid,
.swlw-apply select:user-invalid,
.swlw-apply textarea:user-invalid {
	border-color: #a3423c;
}

.apply-error {
	display: block;
	margin-top: 5px;
	color: #8c3b35;
	font-size: 13px;
}

.apply-person {
	margin: 16px 0 0;
	padding: 16px 18px 20px;
	border: 1px solid var(--p-line-soft);
	border-radius: var(--p-radius);
	background: var(--p-pale);
}

.apply-person legend {
	padding: 0 8px;
	font-size: 11px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--p-slate);
}

.apply-person .apply-grid {
	margin-top: 6px;
}

.apply-checks,
.apply-check {
	margin: 20px 0 0;
	display: grid;
	gap: 10px;
	font-size: 14.5px;
}

.apply-checks label,
.apply-check label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	letter-spacing: 0;
	text-transform: none;
	font-size: 14.5px;
	color: var(--p-ink);
	margin: 0;
}

.apply-checks input,
.apply-check input {
	margin-top: 2px;
	flex: 0 0 auto;
}

.apply-check--terms {
	padding: 14px 16px;
	background: var(--p-pale);
	border-radius: var(--p-radius);
}

.apply-legal {
	margin-top: 16px;
	padding: 16px 18px;
	background: var(--p-pale);
	border: 1px solid var(--p-line-soft);
	border-radius: var(--p-radius);
	font-size: 13px;
	line-height: 1.55;
	color: var(--p-slate);
}

.apply-legal p {
	margin: 0 0 10px;
}

.apply-legal p:last-child {
	margin-bottom: 0;
}

.apply-legal--scroll {
	max-height: 260px;
	overflow-y: auto;
}

.apply-legal__warning {
	color: var(--p-ink);
	font-weight: 600;
}

/* ---- signature pads ---- */

.apply-sign {
	margin-top: 24px;
}

.apply-pad {
	position: relative;
	border: 1px dashed var(--p-line);
	border-radius: var(--p-radius);
	background: #fff;
	overflow: hidden;
}

.apply-pad.is-signed {
	border-style: solid;
	border-color: var(--p-navy);
}

.apply-pad canvas {
	display: block;
	width: 100%;
	height: auto;
	/* A finger drawing must not pan the page. */
	touch-action: none;
	cursor: crosshair;
}

.apply-pad__clear {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 5px 12px;
	border: 1px solid var(--p-line);
	border-radius: 100px;
	background: #fff;
	font: inherit;
	font-size: 12px;
	color: var(--p-slate);
	cursor: pointer;
}

.apply-pad__clear:hover {
	border-color: var(--p-navy);
	color: var(--p-navy);
}

.apply-pad__hint {
	position: absolute;
	left: 14px;
	bottom: 10px;
	font-size: 12px;
	color: var(--p-slate);
	opacity: 0.7;
	pointer-events: none;
}

.apply-pad.is-signed .apply-pad__hint {
	display: none;
}

.apply-sign-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.apply-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--p-line-soft);
}

.apply-nav .btn:only-child {
	margin-left: auto;
}

.apply-done {
	max-width: 60ch;
	padding: 34px clamp(20px, 4vw, 36px);
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
}

.apply-done p {
	color: var(--p-slate);
	font-size: 15px;
}

.apply-ref {
	font-size: 17px;
	color: var(--p-ink) !important;
}

.apply-done__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.apply-foot {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 24px) 40px;
	color: var(--p-slate);
	font-size: 12px;
}

.apply-foot p {
	margin: 0 0 5px;
	max-width: 70ch;
}

@media (max-width: 720px) {
	.apply-grid,
	.apply-grid--ref,
	.apply-sign-pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.apply-steps li {
		flex: 1 1 auto;
		padding: 8px;
		justify-content: center;
	}

	/* Numbers only: the labels will not fit across a phone. */
	.apply-steps li {
		font-size: 0;
		gap: 0;
	}

	.apply-steps li span {
		font-size: 11px;
	}

	.apply-nav {
		flex-direction: column-reverse;
	}

	.apply-nav .btn {
		width: 100%;
	}
}

/* --------------------------------------------------------------- footer */

.portal-foot {
	max-width: 1560px;
	margin: 0 auto;
	padding: 22px 20px 34px;
	color: var(--p-slate);
	font-size: 12px;
}

.portal-foot p {
	margin: 0 0 5px;
}

.portal-foot__warning {
	max-width: 70ch;
}

/* --------------------------------------------------------------- mobile */

/* Give the product name back some room before the layout has to stack: with
   five pack columns the name was down to 231px at 1100. */
@media (max-width: 1400px) {
	:root {
		--p-cell-w: 96px;
		--p-cell-gap: 6px;
		--p-name-gap: 20px;
	}
}

/* The rail turns into a chip strip well before the layout would otherwise
   break: with six pack columns reserved, keeping a 216px sidebar squeezed the
   product name down to 222px at 1100 and truncated most of the range. */
@media (max-width: 1240px) {
	.order-layout {
		grid-template-columns: 1fr;
	}

	.order-rail {
		border-right: 0;
		border-bottom: 1px solid var(--p-line);
	}

	.order-rail__inner {
		display: flex;
		gap: 6px;
		max-height: none;
		overflow-x: auto;
		padding: 10px 12px;
	}

	.order-rail__cat {
		display: none;
	}

	.order-rail__link {
		width: auto;
		flex: 0 0 auto;
		border: 1px solid var(--p-line);
		border-radius: 100px;
		background: #fff;
		padding: 6px 12px;
		white-space: nowrap;
	}
}

@media (max-width: 960px) {
	/* One column: the name sits over the packs rather than beside them. */
	.order-row,
	.order-head {
		grid-template-columns: minmax(0, 1fr);
	}

	.order-row {
		height: 112px;
		align-content: center;
		gap: 7px 0;
		padding: 0 14px;
	}

	.order-row__name {
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.order-row__cells {
		width: auto;
		display: flex;
		gap: 6px;
		overflow-x: auto;
		padding-bottom: 2px;
		scrollbar-width: none;
	}

	.order-row__cells::-webkit-scrollbar {
		display: none;
	}

	/* Back to a stacked card, and the steppers come back with it: a phone
	   has no tab key and a 46px box is a poor touch target. */
	.order-cell {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		min-width: 92px;
		padding: 5px 6px;
		border: 1px solid var(--p-line-soft);
		border-radius: var(--p-radius);
		background: #fff;
	}

	.order-cell.is-set {
		border-color: var(--p-navy);
	}

	.order-cell__price,
	.order-cell__na {
		flex: none;
		text-align: center;
	}

	.order-step {
		display: block;
	}

	.swlw-portal .order-qty {
		background: #fff;
		border-color: var(--p-line);
	}

	.order-cell--empty {
		display: none;
	}

	.order-cell__label {
		display: block;
	}

	.order-head__cols {
		display: none;
	}

	.order-head {
		height: 42px;
	}

	.order-list__viewport {
		height: calc(100vh - 250px - var(--p-total-h));
	}
}

@media (max-width: 780px) {
	.portal-bar__inner {
		gap: 12px;
	}

	.portal-bar__nav {
		order: 3;
		width: 100%;
		overflow-x: auto;
	}

	.portal-bar__company {
		display: none;
	}

	.portal-bar__inner {
		height: auto;
		flex-wrap: wrap;
		padding: 12px 16px;
	}

	.portal-main {
		padding: 18px 14px 30px;
	}

	/* The total bar wraps to two rows on a phone, so the space reserved for
	   it grows. Overriding the token keeps every calc that uses it correct. */
	:root {
		--p-total-h: 148px;
	}

	.order-total {
		height: auto;
		padding: 10px 14px;
		flex-wrap: wrap;
		gap: 8px;
	}

	.order-total__figures {
		gap: 14px;
		font-size: 12.5px;
	}

	.order-review__fields {
		grid-template-columns: 1fr;
	}

	.order-review__line {
		grid-template-columns: 38px minmax(0, 1fr) 78px;
	}

	.order-review__price {
		display: none;
	}

	.portal-dl {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.portal-dl dd {
		margin-bottom: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.swlw-portal * {
		transition: none !important;
	}
}

/* Reorder notice ---------------------------------------------------------- */

/*
 * Shown when the order form has been opened from a past order. It has to
 * carry two different messages: what was loaded, and what has changed since.
 */
.order-reorder {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--p-line);
	border-left: 3px solid var(--p-navy);
	border-radius: var(--p-radius);
	background: var(--p-pale);
}

.order-reorder--bad {
	border-left-color: #8c3b35;
	background: #f9eeed;
}

.order-reorder__lead {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
}

.order-reorder__list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	line-height: 1.5;
}

.order-reorder__note {
	padding: 4px 0 4px 16px;
	border-top: 1px solid var(--p-line-soft);
	position: relative;
	color: var(--p-slate);
}

.order-reorder__note::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--p-slate);
}

.order-reorder__note--delisted::before,
.order-reorder__note--unpriced::before {
	background: #8c3b35;
}

.order-reorder__note--repriced::before {
	background: #a8804a;
}

.order-reorder__note strong {
	color: var(--p-ink);
}

/* Legal documents --------------------------------------------------------- */

.legal-main {
	max-width: 860px;
}

.legal-meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 18px 0 6px;
}

.legal-flag {
	margin: 20px 0;
	padding: 14px 16px;
	border: 1px solid var(--p-line);
	border-left: 3px solid var(--p-navy);
	border-radius: var(--p-radius);
	background: #fff;
	font-size: 14.5px;
	line-height: 1.5;
}

.legal-flag p {
	margin: 0 0 8px;
}

.legal-flag p:last-child {
	margin-bottom: 0;
}

.legal-flag--bad {
	border-left-color: #8c3b35;
	background: #f9eeed;
}

.legal-body {
	margin-top: 18px;
	padding: 28px 30px;
	background: #fff;
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	/* A legal document is read, not scanned, so it gets a proper measure. */
	font-size: 15.5px;
	line-height: 1.65;
}

.legal-body > *:first-child {
	margin-top: 0;
}

.legal-body > *:last-child {
	margin-bottom: 0;
}

/* The portal resets paragraph margins for its dense screens. A legal document
   is the opposite case: without this the clauses run together as one block. */
.legal-body p {
	margin: 0 0 15px;
}

.legal-body h2 {
	font-family: var(--ff-display, "Cormorant Infant", Georgia, serif);
	font-size: 25px;
	font-weight: 400;
	margin: 30px 0 10px;
	padding-top: 18px;
	border-top: 1px solid var(--p-line-soft);
}

.legal-body h3 {
	font-size: 16px;
	margin: 22px 0 6px;
}

.legal-body ol,
.legal-body ul {
	padding-left: 22px;
}

.legal-body li {
	margin-bottom: 6px;
}

.legal-body a {
	color: var(--p-navy);
}

.legal-versions {
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--p-line);
}

.legal-versions ul {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.legal-versions li {
	padding: 7px 0;
	border-bottom: 1px solid var(--p-line-soft);
}

.legal-versions__when {
	color: var(--p-slate);
	font-size: 13.5px;
	margin-left: 8px;
}

@media (max-width: 700px) {
	.legal-body {
		padding: 20px 18px;
		font-size: 15px;
	}
}

/* Shown only when no logo is set in Site Settings. The plugin used to fall
   back to assets/logo.svg, which it does not ship, so that path served a
   broken image in the portal bar. */
.portal-bar__wordmark {
	font-family: var(--ff-display, "Cormorant Infant", Georgia, serif);
	font-size: 22px;
	line-height: 1.1;
	color: #fff;
	white-space: nowrap;
}