/*
 * Site frame: header, category bar, mobile menu, search suggestions (#typeahead), checkout header and footer.
 * Loaded on every page by templates/main_page.tpl.php after stylesheet.css, whose older #header, #menu,
 * #mobile_menu and #footer rules it overrides (hence the id-based selectors here).
 * Markup: includes/header.php, includes/checkout_header.php, includes/footer.php.
 */

body {
	background-color: #F3F2EF;
}

.hd,
#typeahead,
#footer,
#select_language,
.lg-page,
#loginBox {
	--hd-ink: #17181A;
	--hd-text: #3A3C40;
	--hd-muted: #55585E;
	--hd-page: #F3F2EF;
	--hd-border: #E2E0DB;
	--hd-divider: #ECEAE6;
	--hd-field-border: #D9D6D0;
	--hd-red: #9E1B13;
	--hd-red-dark: #6E120C;
	--hd-nav: #990000;
	--hd-nav-active: #6E0000;

	font-family: 'Archivo', 'Segoe UI', Verdana, sans-serif;
}

.hd *,
.hd *::before,
.hd *::after,
#footer *,
#footer *::before,
#footer *::after {
	box-sizing: border-box;
}

/* stylesheet.css sets Verdana directly on every div, span and a */
.hd div,
.hd span,
.hd a,
#footer div,
#footer span,
#footer a,
#typeahead div,
#typeahead span,
#select_language div,
#select_language span,
#select_language a,
.lg-page div,
.lg-page span,
.lg-page a,
#loginBox div,
#loginBox span,
#loginBox a {
	font-family: inherit;
}

.lg-page *,
.lg-page *::before,
.lg-page *::after,
#loginBox *,
#loginBox *::before,
#loginBox *::after {
	box-sizing: border-box;
}

.hd :focus-visible,
#footer :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.hd .pl-icon,
#footer .pl-icon {
	flex-shrink: 0;
}

.hd-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Foundation draws the select arrow 1rem outside the content box and expects 1.5rem right padding. The redesigned
   fields use less padding, which clipped the arrow, so it is placed from the border edge instead. */
.pl select,
.lg-page select {
	background-origin: border-box;
	background-position: right 12px center;
	background-size: 9px 6px;
	padding-right: 34px !important;
}

.hd-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--hd-ink);
	cursor: pointer;
}

.hd-icon-btn:hover {
	background: var(--hd-page);
}

/* ---------- Header bar ---------- */

.header_container.hd {
	background: #FFFFFF;
}

#header.hd-bar {
	padding: 0;
	border-bottom: 1px solid var(--hd-border);
	background: #FFFFFF;
}

.hd-wrap {
	display: flex;
	align-items: center;
	gap: 12px 24px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 16px;
}

.hd-menu-btn {
	display: none;
}

#header #storeLogo.hd-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	width: auto;
	padding: 0;
	text-align: left;
}

#header #storeLogo.hd-logo img {
	display: block;
	height: 20px;
	width: auto;
}

.hd-language {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--hd-field-border);
	border-radius: 8px;
	background: #FFFFFF;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--hd-ink);
	cursor: pointer;
}

.hd-language img {
	display: block;
}

.hd-search-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.hd-search-wrap form {
	margin: 0;
}

.hd .hd-search {
	display: flex;
	align-items: center;
	margin: 0;
	height: 42px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--hd-page);
	cursor: text;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.hd .hd-search:focus-within {
	border-color: var(--hd-ink);
	background: #FFFFFF;
}

.hd .hd-search input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	font-size: 14px;
	color: var(--hd-ink);
}

.hd .hd-search input[type="text"]:focus {
	outline: none;
	box-shadow: none;
}

.hd .hd-search input::placeholder {
	color: #6B6E74;
}

.hd .hd-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: transparent;
	color: var(--hd-muted);
	cursor: pointer;
}

.hd .hd-search button:hover {
	color: var(--hd-ink);
}

.hd-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
}

.hd a.hd-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hd-ink);
	text-decoration: none;
	white-space: nowrap;
}

.hd a.hd-action:hover {
	background: var(--hd-page);
	color: var(--hd-ink);
	text-decoration: none;
}

.hd-cart-icon {
	position: relative;
	display: inline-flex;
	margin-right: 6px;
}

#header #shoppingCart #cart_count {
	position: absolute;
	top: -7px;
	right: -9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	width: auto;
	height: 18px;
	padding: 0 5px;
	border: 2px solid #FFFFFF;
	border-radius: 999px;
	background: var(--hd-red);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: #FFFFFF;
}

#header #shoppingCart #cart_count.is-empty {
	background: #8E8A82;
}

/* ---------- Category bar ---------- */

.menu-container.hd-nav {
	position: relative;
	border-top: 0;
	box-shadow: none;
	background: var(--hd-nav);
}

.hd-nav-wrap {
	display: flex;
	justify-content: space-between;
	gap: 0 16px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 16px;
}

.hd-nav #menu,
.hd-nav #right_menu {
	display: flex;
	flex-wrap: wrap;
	float: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hd-nav #menu > li,
.hd-nav #right_menu > li {
	display: block;
	float: none;
	font-size: 14px;
	color: #FFFFFF;
}

.hd-nav #menu > li > a,
.hd-nav #right_menu > li > a {
	display: block;
	padding: 11px 12px;
	font-weight: 600;
	color: #FFFFFF;
	text-decoration: none;
	white-space: nowrap;
}

.hd-nav #menu li a:hover,
.hd-nav #right_menu li a:hover {
	background: rgba(0, 0, 0, 0.18);
	color: #FFFFFF;
	text-decoration: none;
}

.hd-nav #menu li.menu_active a,
.hd-nav #right_menu li.menu_active a {
	background: var(--hd-nav-active);
}

.hd-message {
	max-width: 1240px;
	margin: 12px auto 0;
	padding: 10px 16px;
	border: 1px solid #F0DC8C;
	border-radius: 10px;
	background: #FFF4D6;
	font-size: 14px;
	color: #5E4700;
}

/* ---------- Mobile menu (toggle_mobile_menu() in script.js slides it and the veil) ---------- */

#mobile_menu.hd-drawer {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 2000;
	width: min(320px, 86vw);
	max-width: none;
	overflow-y: auto;
	border: 0;
	background: #FFFFFF;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
	font-size: 15px;
}

#mobile_menu.hd-drawer.no_search_offset {
	top: 0;
}

.hd-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 10px 12px 18px;
	border-bottom: 1px solid var(--hd-divider);
}

.hd-drawer-logo {
	display: block;
	height: 18px;
	width: auto;
}

#mobile_menu.hd-drawer ul {
	margin: 0;
	padding: 8px 0;
	list-style: none;
}

#mobile_menu.hd-drawer ul + ul {
	border-top: 1px solid var(--hd-divider);
}

#mobile_menu.hd-drawer li {
	list-style: none;
	background: none;
	color: inherit;
}

#mobile_menu.hd-drawer a {
	display: block;
	margin: 0;
	padding: 11px 18px;
	border: 0;
	font-weight: 600;
	color: var(--hd-ink);
	text-decoration: none;
}

#mobile_menu.hd-drawer .hd-drawer-secondary a {
	font-weight: 500;
	color: var(--hd-text);
}

#mobile_menu.hd-drawer a:hover {
	background: var(--hd-page);
}

#mobile_menu.hd-drawer li.mobile_menu_active > a {
	box-shadow: inset 3px 0 0 var(--hd-red);
	background: var(--hd-page);
	color: var(--hd-red);
}

/* ---------- Language popup (guests) ---------- */

#select_language.hd-language-popup {
	width: 380px;
	max-width: calc(100vw - 32px);
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.hd-popup-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 12px 12px 18px;
	border-bottom: 1px solid var(--hd-divider);
}

#select_language h2 {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 17px;
	font-style: normal;
	font-weight: 800;
	color: var(--hd-ink);
}

#select_language ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 10px;
	list-style: none;
}

#select_language li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hd-ink);
	text-decoration: none;
}

#select_language li a:hover {
	background: var(--hd-page);
}

/* ---------- Search suggestions (built by script.js) ---------- */

#typeahead {
	overflow: hidden;
	border: 1px solid var(--hd-border);
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
	z-index: 1500;
}

#typeahead .result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	border-bottom: 1px solid var(--hd-divider);
	font-size: 14px;
}

#typeahead .result:last-child {
	border-bottom: 0;
}

#typeahead .result .clear {
	display: none;
}

#typeahead .image {
	float: none;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

#typeahead .image img {
	max-width: 32px;
	max-height: 32px;
}

#typeahead .content {
	min-width: 0;
	padding-left: 0;
}

#typeahead .result p {
	color: var(--hd-text);
}

#typeahead .result p b {
	font-weight: 700;
	color: var(--hd-ink);
}

#typeahead .result.selected {
	background: var(--hd-page);
}

#typeahead .result .subtitle {
	font-size: 12px;
	color: var(--hd-muted);
}

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

.hd-checkout .hd-wrap {
	justify-content: space-between;
	gap: 16px 32px;
	flex-wrap: wrap;
}

.hd-progress {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.hd-progress li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--hd-muted);
}

.hd-progress li + li::before {
	content: "";
	width: 32px;
	height: 2px;
	border-radius: 1px;
	background: var(--hd-field-border);
}

.hd-progress li.is-done + li::before,
.hd-progress li.is-done + li.is-current::before {
	background: var(--hd-nav);
}

.hd-progress a,
.hd-progress span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.hd-progress .is-done a {
	font-weight: 600;
	color: var(--hd-ink);
}

.hd-progress .is-done a:hover .hd-step-label {
	text-decoration: underline;
}

.hd-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 2px solid var(--hd-field-border);
	border-radius: 50%;
	background: #FFFFFF;
	font-size: 13px;
	font-weight: 800;
	color: var(--hd-muted);
}

.hd-progress .is-done .hd-step-number {
	border-color: var(--hd-nav);
	background: var(--hd-nav);
	color: #FFFFFF;
}

.hd-progress .is-current {
	font-weight: 800;
	color: var(--hd-ink);
}

.hd-progress .is-current .hd-step-number {
	border-color: var(--hd-nav);
	color: var(--hd-nav);
	box-shadow: 0 0 0 3px rgba(153, 0, 0, 0.12);
}

/* ---------- Login page and login popup (includes/functions/product_listing_ui.php) ---------- */

.lg-page {
	background: var(--hd-page);
	padding: 40px 16px 56px;
	color: var(--hd-text);
	font-size: 15px;
	line-height: 1.45;
}

.lg-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	max-width: 880px;
	margin: 0 auto;
}

/* One card only (password_forgotten) */
.lg-wrap-single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 480px;
}

.lg-page p.lg-intro {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--hd-text);
}

.lg-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	border: 1px solid var(--hd-border);
	border-radius: 14px;
	background: #FFFFFF;
}

.lg-card-muted {
	background: transparent;
	border-style: dashed;
	border-color: var(--hd-field-border);
}

.lg-page h1,
.lg-pitch h2,
#loginBox h2 {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	color: var(--hd-ink);
	line-height: 1.2;
}

.lg-page h1 {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.lg-messages {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lg-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.lg-page .lg-field,
#loginBox .lg-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hd-text);
}

.lg-page .lg-field input,
#loginBox .lg-field input {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--hd-field-border);
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: none;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--hd-ink);
}

.lg-page .lg-field input:focus,
#loginBox .lg-field input:focus {
	border-color: var(--hd-ink);
	outline: none;
	box-shadow: 0 0 0 1px var(--hd-ink);
}

.lg-submit {
	height: 46px;
	margin: 4px 0 0;
	padding: 0 20px;
	border: 0;
	border-radius: 8px;
	background: var(--hd-red);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #FFFFFF;
	cursor: pointer;
}

.lg-submit:hover {
	background: var(--hd-red-dark);
}

.lg-page a.lg-forgot,
#loginBox a.lg-forgot {
	align-self: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--hd-red);
}

.lg-pitch {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lg-pitch h2 {
	font-size: 18px;
	font-weight: 800;
}

.lg-pitch p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--hd-text);
}

.lg-benefits {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--hd-ink);
}

.lg-benefits li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lg-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #E8F4EC;
	color: #1E7B45;
}

.lg-page a.lg-become,
#loginBox a.lg-become {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	margin-top: 4px;
	padding: 0 18px;
	border: 1px solid var(--hd-ink);
	border-radius: 8px;
	background: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	color: var(--hd-ink);
	text-decoration: none;
}

.lg-page a.lg-become:hover,
#loginBox a.lg-become:hover {
	background: var(--hd-ink);
	color: #FFFFFF;
}

/* Dealer application (create_account) */
.lg-wrap.ca-wrap {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	align-items: start;
	max-width: 1080px;
}

.ca-note {
	font-size: 13px;
	font-weight: 600;
	color: var(--hd-red);
}

.ca-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.lg-page fieldset.ca-group {
	margin: 0;
	padding: 0;
	border: 0;
}

.lg-page .ca-group > legend {
	margin: 0 0 10px;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hd-muted);
}

.ca-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ca-fields > .ca-wide {
	grid-column: 1 / -1;
}

.lg-page .ca-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hd-text);
}

.ca-req {
	margin-left: 2px;
	color: var(--hd-red);
}

.lg-page .ca-field input[type="text"],
.lg-page .ca-field input[type="email"],
.lg-page .ca-field input[type="tel"],
.lg-page .ca-field input[type="password"],
.lg-page .ca-field select,
.lg-page .ca-field textarea {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--hd-field-border);
	border-radius: 8px;
	background-color: #FFFFFF;
	box-shadow: none;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--hd-ink);
}

.lg-page .ca-field textarea {
	height: auto;
	min-height: 110px;
	padding: 10px 12px;
	resize: vertical;
}

.lg-page .ca-field input:focus,
.lg-page .ca-field select:focus,
.lg-page .ca-field textarea:focus {
	border-color: var(--hd-ink);
	outline: none;
	box-shadow: 0 0 0 1px var(--hd-ink);
}

.lg-page .ca-gender > legend {
	margin: 0 0 6px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
}

.ca-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lg-page .ca-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--hd-field-border);
	border-radius: 8px;
	background: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	color: var(--hd-ink);
	cursor: pointer;
}

.lg-page .ca-choice:has(input:checked) {
	border-color: var(--hd-ink);
	box-shadow: inset 0 0 0 1px var(--hd-ink);
}

.lg-page .ca-choice input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--hd-red);
}

.ca-side {
	position: sticky;
	top: 16px;
}

.ca-text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--hd-text);
}

.ca-text h1,
.ca-text h2,
.ca-text h3 {
	margin: 0 0 8px;
	font-family: inherit;
	font-style: normal;
	font-size: 18px;
	font-weight: 800;
	color: var(--hd-ink);
}

.ca-text p,
.ca-text ul {
	font-size: 14px;
	margin-bottom: 10px;
}

@media screen and (max-width: 63.99875em) {
	.lg-wrap.ca-wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	.ca-side {
		position: static;
	}
}

@media screen and (max-width: 39.99875em) {
	.ca-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Contact page: company details next to the form */
.ct-info {
	position: sticky;
	top: 16px;
	gap: 12px;
	font-size: 14px;
	line-height: 1.55;
}

.ct-info img.ct-logo {
	align-self: flex-start;
	width: auto;
	height: 18px;
}

.lg-page a.ct-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 800;
	color: var(--hd-ink);
	text-decoration: none;
}

.ct-address {
	color: var(--hd-muted);
}

@media screen and (max-width: 63.99875em) {
	.ct-info {
		position: static;
	}
}

#loginBox.reveal {
	width: 760px;
	max-width: calc(100vw - 32px);
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	font-size: 15px;
	line-height: 1.45;
	color: var(--hd-text);
	overflow: hidden;
}

.lg-popup-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 12px 12px 20px;
	border-bottom: 1px solid var(--hd-divider);
}

#loginBox h2#loginBox_title {
	font-size: 18px;
	font-weight: 800;
}

.lg-popup-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.lg-popup-form {
	padding: 22px 20px;
}

#loginBox .lg-pitch {
	padding: 22px 20px;
	border-left: 1px solid var(--hd-divider);
	background: var(--hd-page);
}

@media screen and (max-width: 39.99875em) {
	.lg-page {
		padding-top: 20px;
	}

	.lg-wrap,
	.lg-popup-body {
		grid-template-columns: 1fr;
	}

	.lg-card {
		padding: 20px;
	}

	#loginBox.reveal {
		top: 16px !important;
		margin: 0 auto;
	}

	#loginBox .lg-pitch {
		border-left: 0;
		border-top: 1px solid var(--hd-divider);
	}
}

/* ---------- Messages ($messageStack->output(): login, contact, create account, checkout, cart ...) ---------- */

/* A tinted box with a round icon, the same on every page. The output is a table with an inline 11px font on the
   text cell, hence the !important. */
table.messageStackError,
table.messageStackWarning,
table.messageStackInfo,
table.messageStackSuccess {
	width: 100% !important;
	height: auto;
	margin: 0;
	padding: 0;
	border: 1px solid;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 8px;
	font-family: 'Archivo', 'Segoe UI', Verdana, sans-serif;
	line-height: 1.4;
}

table.messageStackError tbody,
table.messageStackError tr,
table.messageStackWarning tbody,
table.messageStackWarning tr,
table.messageStackInfo tbody,
table.messageStackInfo tr,
table.messageStackSuccess tbody,
table.messageStackSuccess tr {
	border: 0;
	background: transparent;
}

table.messageStackError td,
table.messageStackWarning td,
table.messageStackInfo td,
table.messageStackSuccess td {
	padding: 10px 14px 10px 0 !important;
	border: 0;
	background: transparent;
	font-size: 14px !important;
	font-weight: 600;
	vertical-align: middle;
	color: inherit;
}

/* Also beats the text cell rule above (table.messageStack* td), which would leave the icon against the border */
table.messageStackError td.messageStackErrorImage,
table.messageStackWarning td.messageStackWarningImage,
table.messageStackInfo td.messageStackInfoImage,
table.messageStackSuccess td.messageStackSuccessImage {
	width: 46px !important;
	height: auto;
	padding: 10px 0 10px 14px !important;
	background: none;
}

td.messageStackErrorImage::before,
td.messageStackWarningImage::before,
td.messageStackInfoImage::before,
td.messageStackSuccessImage::before {
	content: "!";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	color: #FFFFFF;
}

td.messageStackSuccessImage::before {
	content: "\2713";
}

td.messageStackInfoImage::before {
	content: "i";
}

table.messageStackError {
	border-color: #F0C9C4;
	background: #FBEDEB;
	color: #5C0F0A;
}

td.messageStackErrorImage::before {
	background: #9E1B13;
}

table.messageStackSuccess {
	border-color: #BFDDC9;
	background: #E8F4EC;
	color: #134D2B;
}

td.messageStackSuccessImage::before {
	background: #1E7B45;
}

table.messageStackWarning {
	border-color: #EED9A0;
	background: #FFF4D6;
	color: #5C3B00;
}

td.messageStackWarningImage::before {
	background: #B07A00;
}

table.messageStackInfo {
	border-color: #BCD3EE;
	background: #E8F0FA;
	color: #1F4E8A;
}

td.messageStackInfoImage::before {
	background: #1F4E8A;
}

table.messageStackError a,
table.messageStackWarning a,
table.messageStackInfo a,
table.messageStackSuccess a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- Footer ---------- */

#footer.ft {
	max-width: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hd-border);
	background: #FFFFFF;
	font-size: 14px;
	color: var(--hd-text);
}

/* The customer's contact person, a band at the top of the footer */
.ft-contact {
	border-bottom: 1px solid var(--hd-divider);
}

.ft-contact-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 18px 16px;
}

.ft-contact-avatar {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top;
	background: var(--hd-page);
}

.ft-contact-initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hd-border);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--hd-ink);
}

.ft-contact-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.3;
}

.ft-contact-label {
	font-size: 13px;
	color: var(--hd-muted);
}

.ft-contact-name {
	font-size: 16px;
	font-weight: 800;
	color: var(--hd-ink);
}

#footer a.ft-contact-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	margin-left: auto;
	padding: 0 16px;
	border: 1px solid var(--hd-field-border);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: var(--hd-ink);
	text-decoration: none;
	white-space: nowrap;
}

#footer a.ft-contact-phone:hover {
	border-color: var(--hd-ink);
}

@media (max-width: 480px) {
	#footer a.ft-contact-phone {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}
}

.ft-wrap {
	display: grid;
	grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(0, 1fr)) auto;
	gap: 24px 40px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px 16px;
}

.ft-brand {
	display: flex;
	flex-direction: column;
	gap: 10px;
	line-height: 1.5;
}

.ft-brand img.ft-logo {
	display: block;
	align-self: flex-start;
	width: auto;
	height: 18px;
}

#footer a.ft-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 800;
	color: var(--hd-ink);
	text-decoration: none;
}

.ft-address {
	color: var(--hd-muted);
}

#footer ul.ft-links {
	float: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer .ft-links a {
	color: var(--hd-text);
	text-decoration: none;
}

#footer .ft-links a:hover {
	color: var(--hd-red);
	text-decoration: underline;
}

.ft-cards {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-end;
	gap: 6px;
}

/* Native size: the card logos are 24x16 px bitmaps and blur when scaled up */
.ft-cards img {
	display: block;
	width: 24px;
	height: 16px;
	border-radius: 2px;
}

.ft-language {
	display: none;
}

.ft-bottom {
	border-top: 1px solid var(--hd-divider);
}

.ft-bottom-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 16px;
	font-size: 12px;
	color: var(--hd-muted);
}

/* Scroll-to-top button (main_page.tpl.php) */
.scroll_to_top_wrapper {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--hd-border, #E2E0DB);
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
	color: #17181A;
	opacity: 1;
	line-height: 44px !important;
}

.scroll_to_top_wrapper .material-icons {
	line-height: 42px;
	font-size: 26px !important;
}

/* Checkout: logo only */
#footer.ft-checkout .ft-wrap {
	display: flex;
	justify-content: center;
	padding: 20px 16px;
}

/* ---------- Narrow screens ---------- */

@media screen and (max-width: 63.99875em) {
	.hd-menu-btn {
		display: inline-flex;
		margin-left: -8px;
	}

	.hd-wrap {
		flex-wrap: wrap;
		gap: 10px 12px;
		padding: 10px 16px 12px;
	}

	.hd-wrap-search #searchBar {
		order: 10;
		flex: 1 1 100%;
	}

	.hd-guest-search {
		display: none;
	}

	.hd-language-wrap {
		display: none;
	}

	.menu-container.hd-nav {
		display: none;
	}

	.ft-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ft-brand,
	.ft-cards {
		grid-column: 1 / -1;
	}

	.ft-cards {
		justify-content: flex-start;
	}

	.ft-language {
		display: block;
	}
}

@media screen and (max-width: 39.99875em) {
	.hd-action-label {
		display: none;
	}

	.hd a.hd-action {
		padding: 0 8px;
	}

	/* Menu button, logo and the two icons share one line */
	#header #storeLogo.hd-logo {
		flex: 0 1 auto;
		min-width: 0;
	}

	#header #storeLogo.hd-logo img {
		height: 15px;
		max-width: 100%;
	}

	.hd-actions {
		gap: 0;
	}

	.hd-progress .hd-step-label {
		display: none;
	}

	.hd-progress li + li::before {
		width: 20px;
	}

	/* Checkout: logo and steps centred above each other */
	.hd-checkout .hd-wrap {
		flex-direction: column;
		justify-content: center;
		gap: 12px;
	}

	.hd-checkout #header #storeLogo.hd-logo {
		flex: none;
	}
}