/*********************************************************************************************************************
 Default/Mobile
 *********************************************************************************************************************/
:root {
	--btn-light-gray-bg: #595959;
	--btn-light-gray-fg: #FFF;
	--btn-dark-gray-bg: #333;
	--btn-dark-gray-fg: #FFF;
}
html {
	scroll-padding-top: 91px;
	scroll-behavior: smooth;
}
body {
	padding-bottom: 70px !important; /* Approximate height of #checkout-summary #mobile-submit-btn-area */
}
dialog:not(#msg-box-modal) {
	border: 2px solid #a4d7d6;
	border-radius: 6px;
	box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
}
dialog::backdrop {
	background-color: #00000066;
}
#paypal-button-container iframe.component-frame {
	z-index: 0 !important; /* Override PayPal, set to a value that's less than #mobile-header */
}
#checkout-form {
	margin: 0 auto;
	padding: 0 4px;
	max-width: 800px;
}
#checkout-form[data-submission-in-progress="1"] #primary-sections {
	opacity: .5;
}
#checkout-form[data-submission-in-progress="1"] input,
#checkout-form[data-submission-in-progress="1"] select,
#checkout-form[data-submission-in-progress="1"] textarea,
#checkout-form[data-submission-in-progress="1"] button {
	pointer-events: none;
}
.checkout-form,
.checkout-form div,
.checkout-form table,
.checkout-form td,
.checkout-form input,
.checkout-form select,
.checkout-form textarea {
	font-size: 14px;
}
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form select,
.checkout-form textarea {
	font-size: 16px;
}
#checkout-form #checkout-summary {
	background: #f5f5f5;
}
#checkout-form section .disclaimer {
	opacity: .75;
	font-size: 10px;
}
#checkout-form > section > .section-content:not(:empty) {
	margin: 1em 0;
	padding: 1em;
	width: 100%;
	box-sizing: border-box;
}
#checkout-form h1,
#checkout-form h2 {
	color: #4e716d;
	font-size: 1.8em;
	margin: 1em 0 .5em 0;
}
#checkout-form h1,
#checkout-form h2 {
	margin: 10px 0 26px 0;
	padding: 0;
	clear: both;
	display: flex;
	align-items: center;
	text-align: center;
	color: #2c817f;
}
#checkout-form h1::before,
#checkout-form h2::before,
#checkout-form h1::after,
#checkout-form h2::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #a4d7d6;
}
#checkout-form h1:not(:empty)::before,
#checkout-form h2:not(:empty)::before {
	margin-right: 10px;
}
#checkout-form h1:not(:empty)::after,
#checkout-form h2:not(:empty)::after {
	margin-left: 10px;
}
#checkout-summary,
#checkout-form input[type="email"][data-validate-with-sendgrid].valid {
	background-image: none;
}
#primary-sections > section {
	margin-top: 50px;
}
#primary-sections > section:not(:first-of-type) {
	margin-top: 50px;
}
#checkout-form fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
#checkout-form .bccInputAlt {
	padding: 10px;
	border: 1px solid transparent;
}
/* read-only form fields */
#checkout-form section.saved .display-form-fields .bccInput {
	border-color: #abadb3;
	color: #4F4F4F;
	background-color: #eee;
	pointer-events: none;
}
#checkout-form section.saved .display-form-fields .bccInput:focus {
	outline-color: transparent;
}
#checkout-form section.saved .display-form-fields select {
	cursor: no-drop;
}
#checkout-form section.saved .display-form-fields select option:not(:checked) {
	display: none;
}
#checkout-form section.saved .display-form-fields label.checkbox {
	color: #4B4D53;
}
#checkout-form section.saved .display-form-fields label.checkbox input[type="checkbox"] {
	accent-color: #7E7E7E;
}
button.disabled,
button.disabled:hover,
button:disabled {
	/*
	background-color: #dddddd !important;
	color: #5e5e5e !important;
	opacity: .5;
	*/
	background-color: #ededed !important;
	color: #4d4d4d !important;
	cursor: not-allowed;
}
button.disabled:hover {
	border-color: #ededed !important;
}
#page-main button.save-btn,
#page-main .display-form-fields button.edit {
	width: 100%;
	text-transform: uppercase;
}
#page-main button.save-btn::before/*,
#page-main button.apply-promo::before*/ {
	/*content: "✔\a0";*/
	content: "\f00c\a0"; /* fa-check */
	font-family: "Font Awesome 6 Free", sans-serif;
}
#page-main button.edit::before {
	/*content: "✎\a0";*/
	content: "\f044\a0"; /* pen-to-square */
	font-family: "Font Awesome 6 Free", sans-serif;
}
/*
#page-main button.submit-order::after {
	content: "\a0▶";
	font-family: Verdana, sans-serif;
}
*/
#page-main button.disabled::before,
#page-main button:disabled::before {
	/*content: "🚫\a0";
	font-family: Verdana, sans-serif;*/
}
#page-main button.wait-for-ready::before,
#page-main .ajax-working button:disabled::before {
	content: "⌛\a0";
	font-family: Verdana, sans-serif;
}
#page-main > .order-id {
	font-size: 10px;
	color: #757575;
	width: 100%;
	text-align: center;
	display: block;
	margin-top: 25px;
}
#page-main > .order-id:empty {
	display: none;
}
button.wait-for-ready,
button.ajax-working {
	opacity: .5;
}
#checkout-form input.bccInput,
#checkout-form select.bccInput,
#checkout-form textarea.bccInput {
	font-family: Verdana, sans-serif;
	/*width: 100%;*/
}
#checkout-form select.quantity_input {
	font-size: 1em;
	background-color: #FFF;
}
#checkout-form label.checkbox,
#checkout-form label.radio {
	display: inline-flex;
	column-gap: 0.5em;
	align-items: center;
	margin: .5em 0;
}
#checkout-form input[type="checkbox"],
#checkout-form input[type="radio"] {
	width: 1.8em;
	height: 1.8em;
}
#checkout-form input[type="radio"] {
	border: 0;
}
#checkout-form input[type="checkbox"]:checked,
#checkout-form input[type="radio"]:checked {
	accent-color: #526B6B;
}
#checkout-form label.radio input[type="radio"] {
	margin-top: 0;
	margin-bottom: 0;
}
form input[data-error],
form select[data-error],
div.field-error {
	box-shadow: 0 0 3px #ce3643 !important;
	transition: box-shadow 200ms;
}

section > .display-saved,
section > .display-form-fields button.edit,
section.saved > .display-form-fields button.save-btn,
#payment-info.saved > .display-form-fields {
	display: none;
}
section.saved > .display-form-fields button.edit {
	display: inline-block;
}

/*
 * General message box (modal dialog pop-ups & non-modal in-page message boxes)
 */
.msg-box-basic {
	background-color:#d3ebeb;
	border:0;
	padding:1em;
}
.msg-box-basic.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.msg-box-basic + .msg-box-basic {
	margin-top: 1em;
}
.msg-box > div {
	overflow: auto;
}
.msg-box.x > svg.x {
	height: 16px;
	width: 16px;
	top: 0;
	right: 0;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}
.msg-box.x > svg.x:hover > path {
	stroke: #00529B;
	stroke-width: 2.5;
}
.msg-box.x > svg.x > circle {
	display: none;
}

/*
 * Modal dialog pop-ups
 */
@media only screen and (min-width: 480px) {
	#modal-alert {
		max-width: 90%;
	}
}
#modal-alert-msg,
#modal-confirm-msg,
.ui-modal-dialog > .msg {
	margin: 1em 0;
	font-size: 1.3em;
	white-space: pre-line;
}
.ui-modal-dialog > .msg {
	text-align: center;
}
.ui-modal-dialog > .msg .big-icon {
	font-size: 3em;
	display: block;
	color: #333; /* Same as button gray, which is .bccButtonGreen, but I didn't just add that class in case we eventually change it back to green */
}
.ui-modal-dialog > .msg .contact-msg {
	display: block;
	margin: 2em auto;
	line-height: 1.6;
	font-size: 14px;
}
.ui-modal-dialog > .msg .contact-msg a[href] {
	color: #000;
	font-weight: bold;
	white-space: nowrap;
}
.ui-modal-dialog > .msg .contact-msg a[href^="mailto:"] {
	text-decoration: underline;
}
.ui-modal-dialog > .msg a[href] {
	color: #00F;
}
#modal-alert-controls,
#modal-confirm-controls,
.ui-modal-dialog > .controls {
	display: flex;
	justify-content: space-evenly;
	column-gap: 1em;
}
/*
 * A #msg-box-modal dialog only show the message boxes inside it, not the dialog itself, so make the close icon larger
 * for the boxes and give them more vertical margin.
 */
#msg-box-modal {
	padding: 0;
	border: 0;
	background-color: transparent;
	max-width: calc(1300px + 24px * 2);
}
#msg-box-modal:focus-visible {
	outline: none;
}
#msg-box-modal .msg-box {
	outline: 6px solid #FFF;
	margin: 24px;
	box-shadow: #FFF 0 0 12px 6px;
}
#msg-box-modal .msg-box div.read-more {
	display: inline;
}
#msg-box-modal .msg-box div.read-more ~ a[data-ctrl]::before {
	content: "\00a0-\00a0";
	display: inline-block;
}
#msg-box-modal .msg-box.x {
	padding-right: 15px;
}
#msg-box-modal .msg-box .x {
	height: 24px;
	width: 24px;
	top: -12px;
	right: -12px;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}
#msg-box-modal .msg-box.x > svg.x > circle {
	display: block;
}
#msg-box-modal .msg-box.x > svg.x:hover > circle {
	fill: red;
}
#msg-box-modal .msg-box.x > svg.x:hover:not(.inside) > path {
	stroke: white;
}

/*
 * Non-dialog message box
 */
#checkout-form .msg-box.x > i.x {
	display: none;
}
/*
#checkout-form .msg-box.x > svg.x {
	width: 16px;
	right: 2px;
	top: -2px;
}
#checkout-form .msg-box.x > svg.x > circle {
	stroke: transparent;
	fill: transparent;
}
#checkout-form .msg-box.x > svg.x > path {
	stroke: #00529B;
	stroke-width: 2.5;
}
*/
#msg-box-modal .msg-box > ul,
#msg-box-modal .msg-box > .read-more > ul,
#checkout-form .msg-box > ul,
#checkout-form .msg-box > .read-more > ul {
	margin: 0;
	padding: 0 0 0 1em;
}
.status-messages:empty {
	display: none;
}
.status-messages .msg-box.auto-promo .content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 1em;
	align-items: center;
}
/**
 * Float Labels
 */
.field {
	margin-bottom: 1em;
}
.field select {
	background-color: #FFF
}
.float-label:not(label) {
	position: relative;
}
.float-label label {
	color: #757575;
	font-style: italic;
	padding: 0 0.5em 1px;
	position: absolute;
	transform: translateY(.85em);
	transition: all .25s ease;
	white-space: nowrap;
	max-width: 96%;
	box-sizing: border-box;
	overflow: hidden;
	/*z-index: 1;*/ /* Causes the label to appear over mobile header. If we need a z-index here, make the mobile header at least one higher */
}
.float-label.floated label {
	margin-left: 1em;
	background: #FFF;
	font-size: x-small;
	font-style: normal;
	transform: translateY(-0.5em);
	border-radius: 6px;
	/*box-shadow: 0 0 1px 1px rgba(255,255,255, 1);*/
}
.float-label .field-error .tooltip {
	z-index: 2;
}

/*********************************************************************************************************************
 SIGN IN
 *********************************************************************************************************************/
.modal-login {
	width: 320px;
}
.modal-login h2 {
	margin: 0 0 1em 0;
}
.modal-login .field input {
	width: 100%;
}
#primary-sections #cart-sign-in {
	display: flex;
	column-gap: 1em;
	align-items: center;
	margin-top: 50px;
	border-top: 1px solid #a4d7d6;
	/*border-bottom: 1px solid #a4d7d6;*/
	padding: 2em 0;
	flex-direction: column-reverse;
	row-gap: 1em;
}
#cart-sign-in > .bccButton {
	flex: 0 0 auto;
}
#cart-sign-in .forgot-password,
.modal-login .forgot-password {
	display: block;
	margin: 1em 0;
	opacity: .5;
	transition: all .25s ease;
}
#cart-sign-in .forgot-password:hover,
.modal-login .forgot-password:hover {
	opacity: 1;
	text-decoration: none;
}
#cart-sign-in .msg-box:empty,
.modal-login .msg-box:empty {
	display: none;
}

#cart-sign-in .field {
	margin: 0;
}
#cart-sign-in > fieldset {
	display: flex;
	column-gap: 1em;
	align-items: center;
	flex-wrap: wrap;
}
#cart-sign-in button {
	margin-right: auto;
}
#cart-sign-in input[type="email"],
#cart-sign-in input[type="password"] {
	width: 220px;
}
/*********************************************************************************************************************
FREE TIER GIFTS
*********************************************************************************************************************/
.msg-box.free-shipping,
.msg-box.pick-gift {
	border: 0;
	/*background-image: url("/images/checkout/gift-icon.svg");
	background-size: 2.5em;*/
	background-image: none;
	background-color: #d3ebeb;
	padding-left: 10px;
	color: #000;
	/*	padding-top: 2em;
		padding-bottom: 2em;*/
	margin: 2em 0;
  }
.msg-box.free-shipping {
	display: flex;
	align-items: center;
}
.msg-box.free-shipping::before {
	content: "";
	background: url("/images/checkout/free-shipping-icon.svg") no-repeat;
	background-size: 2.5em;
	min-height: 2.5em;
	padding-left: 50px;
}
/*
.msg-box.pick-gift::before {
	content: url("/images/checkout/gift-icon.svg");
	height: 1.8em;
	aspect-ratio: 1;
}
*/
.msg-box.pick-gift .bccButton.free-gift {
	margin-left: 1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.msg-box.pick-gift .content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 1em;
	align-items: center;
}
.msg-box.pick-gift .msg {
	flex: 1 1 auto;
	background: url("/images/checkout/gift-icon.svg") no-repeat;
	background-size: 2.5em;
	min-height: 2.5em;
	padding-left: 50px;
	display: flex;
	align-items: center;
}
.msg-box.pick-gift .content .bccButton.free-gift {
	flex: 0;
	margin: 0 auto;
}
ul#mystery-bag-list {
	list-style-type: none;
	margin: 0 0 1em 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(49%, 1fr));
	grid-auto-rows: minmax(50px, auto);
	grid-gap: 0.5em;
}
ul#mystery-bag-list li {
	overflow: auto;
	display: flex; /* So cell's child fills 100% of the height */
	align-items: stretch;
	justify-content: center;
	cursor: pointer;
}
ul#mystery-bag-list li > :first-child{
	/*display: block;*/
	/*height: 100%;*/
	min-height: 100px;
	/*box-sizing: border-box;*/
	box-sizing: content-box;
	/*	border: 1px solid #EEE;*/
	/*	border-radius: 5px;*/
	/*	box-shadow: inset 0 0 5px #6cb6b5;*/
	overflow: hidden;
	background: transparent none no-repeat center 0.5em;
	background-size: 150px 150px;
	padding: calc(0.5em + 150px + 0.25em) 0.5em 0.5em 0.5em;
	font-size: 1em;
	text-align: center;
	border: 1px solid #DDD;
	border-radius: 5px;
	flex: .75 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
ul#mystery-bag-list li .name {
	display: block;
}
.mystery-bag-list-footer {
	font-family: 'Open Sans', sans-serif;
}
.mystery-bag-list-footer > * {
	display: inline-block;
	margin-bottom: 15px;
	margin-top: 15px;
	width: 100%;
	text-align: center;
}
.mystery-bag-list-footer .description {
	font-size: 16px;
}
.mystery-bag-list-footer .rules {
	font-size: 12px;
	opacity: 0.8;
}
.mystery-bag-list-footer .or {
	font-weight: bold;
	font-size: 20px;
}

ul#gift-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	/*
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(49%, 1fr));
	grid-auto-rows: minmax(50px, auto);
	grid-gap: 0.5em;
	justify-items: stretch;
	 */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 10px;
}
ul#gift-list li {
	/*width: 235px;*/
	/*height: 350px;*/
	overflow: auto;
	display: flex; /* So cell's child fills 100% of the height */
	align-items: stretch;
	cursor: pointer;
	width: calc(50% - 10px); /* 50% to show 2 per row, then subtract column gap */
	max-width: 235px;
}
ul#gift-list li > :first-child {
	/*display: block;*/
	width: 100%;
	/*height: 100%;*/
	/*box-sizing: border-box;*/
	box-sizing: content-box;
	/*border: 1px solid #EEE;*/
	border: 2px solid #DDD;
	border-radius: 5px;
	/*box-shadow: inset 0 0 5px #6cb6b5;*/
	overflow: hidden;
	min-height: 50px;
	font-size: 1.25em;
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	background: transparent none no-repeat center 0.5em;
	background-size: 100px 100px;
	padding: 170px .5em .5em .5em;
	/*padding: calc(0.5em + 100px + 0.25em) .5em .5em .5em;*/
	/* To make the Add to Bag button show at the bottom */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/*min-height: 150px;*/
}
ul#gift-list li > :first-child .price {
	display: block;
	margin-top: 2em;
}
ul#gift-list li > :first-child button {
	cursor: inherit;
	padding: 5px;
}
ul#gift-list li .brand-logo {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 30px;
	object-fit: scale-down;
}
.SampleAddtoBag {
	background: none;
	border: none;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	line-height: 1.5em;
}

/* Desktop */
@media only screen and (min-width: 980px) {
	ul#mystery-bag-list {
		grid-template-columns: repeat(auto-fit, minmax(32%, 1fr)); /* 3 per row */
	}
	ul#gift-list {
		grid-template-columns: repeat(auto-fit, minmax(24%, 1fr)); /* 4 per row */
	}
	ul#gift-list li > *:first-child {
		/*min-height: 150px;*/
		/*background-position: 0.5em 0.5em;*/
		background-position: center 0.5em;
		background-size: 150px 150px;
		/*padding: 0.5em 0.5em 0.5em calc(0.5em + 150px + 0.25em);*/
		padding: 170px .5em .5em .5em;
		font-size: 1.25em;
	}
}
#gift-modal {
	width: 1300px;
	max-width: 100%;
	overscroll-behavior: contain;
	background: #FFF;
	box-sizing: border-box;
	padding: 0;
}
#gift-modal > div {
	position: relative;
	padding: 0 1em 1em 1em;
}
#gift-modal.loading #gift-list {
	min-height: 50vh;
}
#gift-modal header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1em;
	position: sticky;
	top: 0;
	z-index: 1; /* So elements with opacity will appear behind the header */
	background: #FFF;
	background: linear-gradient(180deg,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);
	padding: 1em 0;
}
#gift-modal header h1 {
	margin: 0;
	text-align: center;
	font-size: 24px;
	flex: 1 0 auto; /* So it expands horizontally to fill the area causing the text to appear centered */
}
#gift-modal h2 {
	margin: 0 0 1em 0;
	text-align: center;
	background-color: #d3ebeb;
	color: #000;
	border-radius: 6px;
	flex: 1 0 auto;
	font-size: 24px;
	padding: 8px;
}
#gift-modal .close {
	cursor: pointer;
}
#gift-modal button.close {
	border: none;
	background: transparent;
	padding: 0;
	display: flex; /* So dimensions will match the svg content */
	border-radius: 100%; /* round the active outline to match the svg */
	position: absolute;
	right: 12px;
}
#gift-modal > .container > button.close {
	position: sticky;
	top: 23px; /* (#gift-modal header top padding) + (#gift-model header h1 top padding) + ((#gift-model header h1 height - this height) / 2)) = 12 + 8 + (29-24)/2 = 20 + 2.5 = 22.5 */
	z-index: 2;
	margin-bottom: -24px; /* match height of the element so it will overlay the <header> that follows it */
	margin-right: 12px;
	float: right;
}
@media only screen and (max-width: 480px) {
	#gift-modal header h1,
	#gift-modal header h2 {
		font-size: 18px;
	}
	#gift-modal > .container > button.close {
		top: 19px; /* (#gift-modal header top padding) + (#gift-model header h1 top padding) + ((#gift-model header h1 height - this height) / 2)) = 12 + 8 + (22-24)/2 = 20 + -1 = 19 */
	}
}
#gift-modal svg.close {
	height: 24px;
	width: 24px;
	top: -12px;
	right: -12px;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}
#gift-modal svg.close:hover > circle {
	fill: red;
}
#gift-modal svg.close:hover > path {
	stroke: white;
}
#gift-modal.adding-gift {
	width: fit-content;
}
#gift-modal.adding-gift > :not(.adding-gift-msg){
	display: none;
}
#gift-modal .adding-gift-msg {
	font-size: 24px;
	padding: 1em;
}
#gift-modal .adding-gift-msg::before {
	content: "";
	cursor: pointer;
	user-select: none;
	font-style: normal;
	background: transparent url("/images/ajax-loading-indicator.gif") no-repeat center center;
	display: inline-block;
	height: 1em;
	aspect-ratio: 1;
	background-size: auto;
}

/*********************************************************************************************************************
 CART
 *********************************************************************************************************************/
#cart-table {
	width: 100%;
	border-spacing: 0 2px;
	border-collapse: separate;
}
#cart-table tbody td {
	padding-bottom: 1em;
}
#cart-table td.cell-product {
	padding-right: 1em;
	width: 100%;
	box-sizing: border-box;
}
#cart-table tr.removing > td.cell-product > div,
#cart-table .cell-product {
	display: flex;
	align-items: center;
}
#cart-table .cell-product .product-image {
	margin-right: 4px;
}
#cart-table .cart-item-name {
	font-weight: bold;
}
#cart-table .money,
#cart-table .cell-quantity {
	text-align: right;
}
#cart-table .bag-price {
	margin-top: .5em;
}
#cart-footer del,
#cart-table .bag-price del {
	text-decoration: line-through;
	font-size: .86em;
	display: inline-block;
}
#cart-table .cell-unit-price del {
	text-decoration: line-through;
	font-size: .86em;
	display: block;
}
#cart-footer ins,
#cart-table .bag-price ins,
#cart-table .cell-unit-price ins {
	text-decoration: none;
}
#cart-table td.cell-delete {
	text-align: right;
	padding-left: .5em;
}
#cart-table .cell-delete .delete {
	cursor: pointer;
	background: transparent url("/images/checkout/delete-btn.svg") no-repeat center center;
	display: inline-block;
	height: 1.8em;
	aspect-ratio: 1;
	background-size: contain;
}
#cart-table .cell-delete .delete:focus,
#cart-table .cell-delete .delete:hover {
	filter: drop-shadow(1px 1px 0 #ffcccc) drop-shadow(-1px -1px 0 #ffcccc);
}
#cart-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*border-top: 2px solid #000;*/
	padding-top: 4px;
}
#cart-footer #cart-totals {
	display: grid;
	grid-template-columns: max-content auto;
	row-gap: 2px;
	column-gap: 2em;
}
#cart-footer #cart-totals dt {
	font-weight: bold;
}
#cart-footer #cart-totals dd {
	text-align: right;
	margin: 0;
	white-space: nowrap;
}
#cart-footer #cart-totals dd#cart-fs-msg {
	grid-column: 1 / span 2;
	font-style: italic;
	text-align: right;
	font-size: smaller;
}
#cart-footer #cart-totals dd#cart-fs-msg:not(:empty)::before {
	content: "\f48b\0a";
	font-family: "Font Awesome 6 Free", sans-serif;
}
#checkout-form .keep-shopping-btn {
	color: var(--btn-light-gray-fg);
	background-color: var(--btn-light-gray-bg);
}
#checkout-form .keep-shopping-btn:active,
#checkout-form .keep-shopping-btn:hover {
	background-color: var(--btn-light-gray-fg);
	border-color: var(--btn-light-gray-bg);
	color: var(--btn-light-gray-bg);
}
#checkout-form .keep-shopping-btn::before {
	/*content: "↩\a0";*/
	content: "\f060\a0";
	font-family: "Font Awesome 6 Free", sans-serif;
}
@media only screen and (max-width: 480px) {
	#cart-table th.col-unit-price,
	#cart-table td.cell-unit-price {
		max-width: 0;
		padding: 0;
		visibility: hidden;
	}
	#cart-table th.col-unit-price > *,
	#cart-table td.cell-unit-price > *{
		display: none;
	}
}

#cart-table .cell-product {
	align-items: stretch;
	border-bottom: #757575;
	padding-bottom: 2em;
}
#cart-table tbody tr:not(:first-of-type) .cell-product {
	border-top: 1px solid #ccc;
	padding-top: 2em;
}
#cart-table .cell-product .name-and-price {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
#cart-table .cell-product .product-image img {
	height: 150px;
	width: auto;
	aspect-ratio: 1;
	display: block;
}
#cart-table .cell-product .cart-item-name {
	/*font-size: .95em;*/
	font-size: 18px;
	font-weight: normal;
}
#cart-table .cell-product .cart-item-name .variant {
	color: #757575;
	/*font-size: .9em;*/
	font-size: 14px;
	white-space: nowrap;
}
#cart-table .cell-product .mobile-extended-price,
#cart-table .cell-product .bag-price {
	margin-top: 1.5em;
}
#cart-table .cell-product .extended-price,
#cart-table .cell-product .mobile-extended-price,
#cart-table .cell-product .bag-price {
	/*font-size: 1.2em;*/
	font-size: 16px;
}
#cart-table .bag-price del {
	color: #757575;
	display: none;
	text-decoration: none;
}
/*
#cart-table .bag-price del::after {
	content: " MSRP";
}
 */
#cart-table/* .is-kit*/ .bag-price del {
	text-decoration: line-through;
}
/*
#cart-table .is-kit .bag-price del::after {
	content: "";
	padding-right: 0.5em;
}
 */
#cart-table .cell-product .unbundled-price {
	margin: .25em 0 0 0;
	color: #757575;
	font-size: 14px;
}
#cart-table .cell-product .unbundled-price:empty {
	display: none;
}
#cart-table .cell-product .unbundled-price::after {
	content: " each if purchased separately";
}
#cart-table .cell-product .controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1em;
	margin-top: 2em;
}
#cart-table .cell-delete {
	display: flex; /* To remove the excess spacing under the delete icon */
}
#cart-table .cell-quantity {
	text-align: left;
}
#cart-table .cell-product .bag-price,
#cart-table .cell-product .extended-price {
	display: none;
}
/* Desktop */
@media only screen and (min-width: 980px) {
	#cart-table .cell-product .cart-item-name {
		font-weight: normal;
	}
	#cart-table .cell-product .bag-price {
		display: block;
	}
	#cart-table .cell-product:not(.is-kit) .bag-price {
		display: flex;
		flex-direction: column-reverse;
	}
	#cart-table .cell-product:not(.is-kit) .bag-price del {
		margin-top: 0.25em;
	}
	#cart-table .bag-price del {
		display: inline-block;
	}
	#cart-table .cell-product .extended-price {
		display: flex;
		margin-left: auto;
		text-align: right;
		align-items: center;
		color: #000;
	}
	#cart-table .cell-product .mobile-extended-price {
		display: none;
	}
	#cart-table .cell-product .unbundled-price::after {
		content: " if purchased separately";
	}
}

/*********************************************************************************************************************
 SHIPPING & BILLING ADDRESS FIELDS
 *********************************************************************************************************************/
.address-fields .bccInput {
	width: 100%;
}
.address-fields fieldset {
	display: flex;
	column-gap: 1em;
}
.address-fields .field input {
	width: 100%;
}
/* Absolutely position the address book */
/*
#shipping-info {
	position: relative;
}
fieldset.addr-book {
	position: absolute;
	top: -1em;
	right: 0;
}
/* End address book positioning */
fieldset.addr-book .field {
	flex-grow: 1;
}
fieldset.addr-first-last-name .field,
fieldset.addr-phone-email .field {
	width: 50%;
}
fieldset.addr-company-book-country .field {
	flex-grow: 1;
}
.field.addr-street {
	flex-grow: 1;
}
.field.addr-apt {
	width: 8em;
}
fieldset.addr-city-state-zip .field {
	width: 33%;
}
#shipment-options-and-notes .shipping-notes textarea {
	width: 100%;
}
#checkout-form fieldset.addr-phone-email .field.addr-email div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 10px;
}
#checkout-form fieldset.addr-phone-email .field.addr-email div .bccInputAlt {
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	padding: 10px 0;
}
#checkout-form fieldset.addr-phone-email .field.addr-email div * {
	white-space: nowrap;
}
/* Desktop */
@media only screen and (min-width: 980px) {
	fieldset.addr-phone-email .field.addr-email div {
		flex-wrap: nowrap;
	}
}

/*********************************************************************************************************************
 SHIPPING METHOD
 *********************************************************************************************************************/
#primary-sections #shipping-method-section {
	text-align: center;
}
#shipping-method-area {
	display: inline-block;  /* So the ShowWorking() overlay won't stretch across the whole desktop */
	margin: 0 -0.5em; /* To give the ShowWorking() overlay some padding */
	padding: 0 0.5em; /* To give the ShowWorking() overlay some padding */
	text-align: left;
}
dl#shipping-methods {
	display: grid;
	/*grid-template-columns: max-content max-content; */
	/*grid-gap: 1em;*/
	column-gap: 1em;
	align-items: center;
	margin: 0;
}
dl#shipping-methods dd {
	grid-column: 2;
	margin-left: 0;
	text-align: right;
}
/*
 Shipping Company Icon
 */
#shipping-methods input[type="radio"][data-company] + .ship-method {
	background: none transparent no-repeat left center;
}
#shipping-methods input[type="radio"][data-company="USPS International"] + .ship-method,
#shipping-methods input[type="radio"][data-company="USPS"] + .ship-method {
	padding-left: 20px;
	background-image: url("/images/shipping-icons/usps-16x16.png");
}
#shipping-methods input[type="radio"][data-company="UPS"] + .ship-method {
	padding-left: 20px;
	background-image: url("/images/shipping-icons/ups-16x16.png");
}
#shipping-methods input[type="radio"][data-company="FedEx"] + .ship-method {
	padding-left: 20px;
	background-image: url("/images/shipping-icons/fedex-16x16.png");
}
#shipping-methods input[type="radio"][data-company="Canada Post"] + .ship-method {
	padding-left: 20px;
	background-image: url("/images/shipping-icons/canada-post-16x16.png");
}

/*********************************************************************************************************************
 BILLING
 *********************************************************************************************************************/
#payment-info {
	text-align: center;
}
#paypal-button-container,
#credit-card-container {
	margin: 0 2em 0 3em; /* Less margin on the right helps prevent the text under the credit card fields from wrapping */
}
#payment-types {
	margin: 0 0 1em 0;
	padding-left: 0;
	list-style-type: none;
	text-align: left;
	display: inline-block;
}
#payment-types > li {
	margin: 0 0 1em 0;
}
#payment-types > li.disabled label > *:not(input[name="payment_type"]){
	opacity: .5;
	filter: grayscale(100%);
}
#payment-types > li:last-of-type {
	margin-bottom: 2em !important;
}
#payment-types label.radio {
	margin: 0;
}
#payment-types label.radio input[type="radio"] {
	flex-shrink: 0;
}
#payment-types label.radio.vaulted {
	display: inline-flex;
}
#payment-types label.radio.vaulted .label-text {
	display: inline-flex;
	align-items: center;
	column-gap: .25em;
}
#payment-types .delete::after {
	content: "";
	background: transparent url("/images/checkout/delete-btn.svg") no-repeat center center;
	display: inline-block;
	height: 1.2em;
	aspect-ratio: 1;
	background-size: contain;
	cursor: pointer;
	user-select: none;
	font-style: normal;
}
#payment-types .delete:focus,
#payment-types .delete:hover {
	text-shadow : 0 0 6px #f3a53a;
	filter: drop-shadow(1px 1px 0 #ffcccc) drop-shadow(-1px -1px 0 #ffcccc);
}
#payment-types label.radio[for="pay-type-pp"] {
	align-items: center;
}
#payment-info #pay-type-cr + .label-text,
#payment-info .brand-card,
#payment-info .brand-amex,
#payment-info .brand-discover,
#payment-info .brand-mastercard,
#payment-info .brand-maestro,
#payment-info .brand-visa,
#payment-info .brand-afterpay,
#payment-info .brand-apple-pay,
#payment-info .brand-pp,
#payment-info .brand-pp-venmo {
	white-space: nowrap;
}
/*#payment-info #pay-type-cr + .label-text::before,*/
#payment-info .brand-card::before,
#payment-info .brand-amex::before,
#payment-info .brand-discover::before,
#payment-info .brand-mastercard::before,
#payment-info .brand-maestro::before,
#payment-info .brand-visa::before,
#payment-info .brand-afterpay::before,
#payment-info .brand-apple-pay::before,
#payment-info .brand-google-pay::before,
#payment-info .brand-pp::before,
#payment-info .brand-pp-venmo::before {
	display: inline-block;
	content: "";
	width: auto;
	height: 1.2em;
	margin-bottom: -.2em; /* When height > 1em we need to move it down to get back to 1em so it aligns */
	aspect-ratio: 32 / 20;
	background: transparent none no-repeat left center;
	background-size: contain;
	margin-right: .25em;
}
/*#payment-info #pay-type-cr + .label-text::before,*/
#payment-info .brand-card::before {
	background-image: url('/images/checkout/payment-icons/credit-card.png');
}
#payment-info .brand-amex::before {
	background-image: url('/images/checkout/payment-icons/amex.png');
}
#payment-info .brand-discover::before {
	background-image: url('/images/checkout/payment-icons/discover.png');
}
#payment-info .brand-mastercard::before {
	background-image: url('/images/checkout/payment-icons/mastercard.png');
}
#payment-info .brand-maestro::before {
	background-image: url('/images/checkout/payment-icons/maestro.png');
}
#payment-info .brand-visa::before {
	background-image: url('/images/checkout/payment-icons/visa.png');
}
#payment-info .brand-afterpay::before {
	background-image: url('/images/checkout/payment-icons/afterpay.png');
}
#payment-info .brand-apple-pay::before {
	background-image: url('/images/checkout/payment-icons/apple-pay.png');
}
#payment-info .brand-google-pay::before {
	background-image: url('/images/checkout/payment-google-pay.svg');
	box-shadow: 0 0 1px 0 #000;
	background-origin: content-box;
	padding: 0 2px;
}
#payment-info .brand-pp::before {
	background-image: url('/images/checkout/payment-icons/paypal.png');
}
#payment-info .brand-pp-venmo::before {
	background-image: url('/images/checkout/payment-icons/venmo.png');
}
#payment-types .details,
#display-payment .payment-method .details {
	font-style: italic;
	font-size: smaller;
}
#payment-types .details {
	/* To keep the ::before "-" in its own column and centered vertically */
	display: inline-flex;
	align-items: center;
}
#payment-types .details::before,
#display-payment .payment-method .details::before {
	content: "–";
	padding-right: 0.2em;
}
#payment-types label.radio img {
	height: 1em;
	width: auto;
}
#payment-types label.radio img.paypal,
#payment-types label.radio img.afterpay {
	height: 1.2em;
	margin-bottom: -.2em;
}
#payment-types label.radio img.google-pay {
	height: 1.4em;
	margin-bottom: -.2em;
}

#payment-types .venmo-sep,
#payment-types img.venmo {
	display: none;
}
#payment-types.show-venmo .venmo-sep,
#payment-types.show-venmo img.venmo {
	display: inline-block;
}
/* Afterpay qualification message */
#pay-type-ap ~ .afterpay-qualifications {
	display: none;
	font-style: italic;
}
#pay-type-ap:disabled ~ img.afterpay {
	/*filter: grayscale(100%); /* black text logo so grayscale doesn't do anything */
	opacity: .5;
}
#pay-type-ap:disabled[data-need="more"] ~ .afterpay-qualifications.need-more,
#pay-type-ap:disabled[data-need="less"] ~ .afterpay-qualifications.need-less {
	display: inline;
}
label[for="same-as-shipping"] {
	user-select: none;
}
#payment-info label[for="pay-type-cr"] .card-logos img {
	height: auto;
}
#payment-info label[for="pay-type-cr"] .card-logos img.highlight {
	/*filter: drop-shadow(0 0 0.25em #a4d7d6);*/
	box-shadow: 0 0 3px 1px #0F0;
}
#payment-info #credit-card-container {
	margin-top: 1em;
	margin-bottom: 2em;
}
#payment-info #credit-card-container .card-logos {
	display: flex;
	column-gap: 1em;
	margin: 1.5em 0 1.5em -2.5em; /* Left margin should be about the same as #credit-card-container except negative */
}
#payment-info #credit-card-container .card-logos img {
	width: 75px;
	height: auto;
	max-width: calc(25% - (3em / 4));
}
#payment-info #credit-card-container .card-logos img.highlight {
	filter: drop-shadow(0 0 0.25em #a4d7d6);
	/*box-shadow: 0 0 5px 1px red;*/
}
#paypal-button-container.disabled {
	opacity: .5;
	/*filter: grayscale(100%);*/
}
#credit-card-container {
	text-align: center;
	max-width: 557px; /* Same width as the PayPal buttons */
}
#credit-card-container > * {
	text-align: left;
}
#credit-card-options {
	display: inline-block;
}
/*
#payment-info {
	text-align: center;
}
#payment-types li.credit-card-area,
#payment-types li.paypal-area,
#payment-types li.afterpay-area {
	text-align: center;
}
#payment-types > li + li {
	padding: 2em 0 0 0;
	margin: 2em 0 0 0;
}
#payment-types li + li.paypal-area #paypal-button-container {
	margin-bottom: -1em; /* PayPal button iframe has extra white space at the bottom * /
}
#payment-types li + li.paypal-area #paypal-button-container + .msg-box {
	margin-top: calc(10px + 1em); /* Account for the negative bottom margin * /
}
label[for="pay-type-ap"] {
	flex-wrap: wrap; /* So we can get .afterpay-qualification onto the next line * /
	justify-content: center;
}
label[for="pay-type-ap"] .afterpay-qualifications {
	width: 100%;
	margin-top: 1em;
}

#paypal-button-container,
#credit-card-container {
	margin-left: 0;
}
*/
.card_field {
	height: 40px;
}
.card-exp-cvv {
	display: flex;
	column-gap: 1em;
}
.card-exp-cvv > * {
	flex: 1 1 auto;
}
/* Shift the "Exp. Date" label so it's to the right of the MM/YY placeholder */
.card-exp-date.float-label:not(.floated) label {
	left: 4em;
}
#card-number {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
}
#expiration-date {
	min-width: 6em;
}
#cvv {
	min-width: 4em;
}
#billing-address {
	margin-top: 1em;
}

/* Align the credit card icon inside of the credit card number field */
.card-number-field-area {
	display: flex;
}
.card-number-field-area #card-number {
	padding-right: calc(10px + 35px);
}
.card-number-field-area #card-number-brand-icon {
	position: relative;
	right: 35px;
	align-self: center;
}

/*********************************************************************************************************************
 SHIPPING & BILLING SAVED
 *********************************************************************************************************************/
section.saved #display-payment {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1em;
}
ul.display-address {
	margin: 1em 0;
	list-style: none;
	padding: 0;
}
ul.display-address:empty {
	display: none;
}
ul.display-address li.country {
	margin-bottom: .5em;
}
ul.display-address li.method {
	margin-top: 1em;
}
ul.display-address li.email:not(:empty):before {
	/*content: "📧\a0";*/
	content: "\f0e0\a0"; /* fa-envelope */
	font-family: "Font Awesome 6 Free", sans-serif;
}
ul.display-address li.phone:not(:empty):before {
	/*content: "📞\a0";*/
	content: "\f095\a0"; /* fa-phone */
	font-family: "Font Awesome 6 Free", sans-serif;
}
ul.display-address li.notifications:not(:empty):before,
ul.display-address li.receipt:not(:empty):before,
ul.display-address li.business:not(:empty):before {
	/*content: "✔️\a0";*/
	content: "\f00c\a0"; /* fa-check */
	font-family: "Font Awesome 6 Free", sans-serif;
}
ul.display-address li.notes:not(:empty):before {
	content: "Notes:\a0";
	font-weight: bold;
}
#display-shipping ul.display-address {
	margin: 0;
}
#display-payment {
	align-items: center;
}
#display-payment:empty {
	display: none;
}
#display-payment .payment-method {
	padding: 0;
	font-size: inherit;
}

/*********************************************************************************************************************
 SUMMARY & PROMO CODE
 *********************************************************************************************************************/
#checkout-summary {
	padding: 0 1em 2em 1em;
}
#checkout-summary {
	padding-top: .5em;
}
#checkout-form > section#checkout-summary > h2 + .section-content {
	margin-top: 0;
	padding-top: 0;
}
#checkout-summary dl {
	display: grid;
	grid-gap: 1em;
}
#checkout-summary dt {
	grid-column: 1;
}
#checkout-summary dd {
	grid-column: 2;
	margin-left: 0;
	text-align: right;
}
#checkout-summary dt:last-of-type,
#checkout-summary dd:last-of-type {
	margin-top: 1em;
}
#summary-tax-rate {
	font-size: .8em;
}
#summary-total-label,
#summary-total-value {
	font-weight: bold;
}
#checkout-summary #mobile-submit-btn-area {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FFF;
	z-index: 2;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
	-moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
	/*padding: 15px 84px;*/
	padding: 15px 0;
	text-align: center;

	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
#checkout-summary #mobile-submit-btn-area .ready-status {
	display: flex;
	flex-direction: column;
	flex-basis: content;
	margin: 0;
	row-gap: .5em;
}
@media only screen and (max-width: 479px) {
	#checkout-summary #mobile-submit-btn-area {
		flex-direction: column;
		row-gap: .5em;
	}
	#checkout-summary #mobile-submit-btn-area .ready-status {
		flex-direction: row;
	}
}
#checkout-summary #mobile-submit-btn-area .keep-shopping-btn {
	font-size: smaller;
}
#checkout-summary #submit-btn {
	width: 100%;
	box-sizing: border-box;
	/*	display: none;*/
}
#promo-code-area #promo-fieldset {
	display: flex;
	justify-content: space-between;
	border: 0;
	padding: 0;
	column-gap: 1em;
	min-width: 0;
}
#my-bag #promo-code-area #promo-fieldset {
	justify-content: flex-end;
}
#my-bag #promo-code-area .details {
	text-align: right;
}
#promo-code-area input {
	min-width: 0;
}
#promo-code-area button {
	white-space: nowrap;
}
#promo-code-area input,
#promo-code-area button {
	margin: 0;
}
#promo-code-area .details {
	font-size: smaller;
	margin: 10px 0 0 0;
}
#promo-code-area div.field {
	margin-bottom: 0;
	display: flex;
	min-width: 0;
}
button.apply-promo {
	--btn-bg: var(--btn-light-gray-bg);
	--btn-fg: var(--btn-light-gray-fg);
}
.field.float-label.floated + button.apply-promo {
	--btn-bg: var(--btn-dark-gray-bg);
	--btn-fg: var(--btn-dark-gray-fg);
}
button.apply-promo {
	color: var(--btn-fg);
	background-color: var(--btn-bg);
}
button.apply-promo:focus,
button.apply-promo:hover {
	background-color: var(--btn-fg);
	border-color: var(--btn-bg);
	color: var(--btn-bg);
}

/* Saved Promo Code Section */
/* Make it look like pain-text */
/*
#promo-code-area.saved .floated label {
	margin-left: -.5em;
	margin-top: 0.5em;
}
#promo-code-area.saved input[name="promo_code"] {
	border: 0;
	margin: 0;
	padding: 0;
	background: none;
}
*/
/* Make it look like a disabled field */
#promo-code-area.saved input[name="promo_code"] {
	background-color: #dddddd;
	color: #5e5e5e;
	/*opacity: .5;*/
	cursor: not-allowed;

}
/* Prevent browser from outlining it when it has focus */
#promo-code-area.saved input[name="promo_code"]:focus {
	outline: 0;
	/*border: 0;*/
}
#promo-code-area.saved #apply-promo-btn,
#promo-code-area.saved .details {
	display: none;
}

.ready-status {
	list-style-type: none;
	margin: 1em 0;
	padding: 0;
	display: flex;
	justify-content: space-around;
	width: 100%;
}
.ready-status li::before {
	/*content: "🚫\a0";*/
	/*content: "⌛\a0";*/
	/*content: "\f111\a0"; /* fa-circle */
	content: "\f059\a0"; /* fa-circle-question */
	font-family: "Font Awesome 6 Free", sans-serif;
}
#checkout-form .ready-status li.bag::before,
#checkout-form.can-save-shipping .ready-status li.shipping::before,
#checkout-form.can-save-payment .ready-status li.payment::before,
#checkout-form[data-shipping-locked] .ready-status li.shipping::before,
#checkout-form[data-payment-locked] .ready-status li.payment::before{
	content: "\f00c\a0"; /* fa-check */
	font-family: "Font Awesome 6 Free", sans-serif;
	color: green;
}

/**********************************************************************************************************************
 AJAX working/loading indicator
 Adjust the spinner size by overriding the .ajax-working-overlay .loader width and height
 *********************************************************************************************************************/
.ajax-working-overlay {
	position: absolute;
	bottom: 0;
	right: 0;
	top: 0;
	left: 0;
	background-color: #00000066;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1; /* Needed or relatively positioned elements will show above the overlay */
}
.ajax-working-overlay .loader {
	border: 2px solid #FFF;
	border-top-color: #3488db;
	border-radius: 50%;
	min-width: 10px;
	width: 5%;
	animation: spin 1s linear infinite;
	aspect-ratio: 1;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/**********************************************************************************************************************
 DEBUGGING
 *********************************************************************************************************************/
/*#checkout-form details.test-cards,*/
div.debug-order-ids {
	font-size: 14px !important;
}
div.error-triggers,
details.test-cards {
	flex: 1 1 0;
}
div.error-triggers select[name="error_trigger"] {
	width: 100%;
}
details.test-cards {
	text-align: center;
	border: 1px solid #a4d7d6;
	border-radius: 6px;
	padding: 2px;
	font-size: 14px;
}
details.test-cards summary {
	user-select: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	padding: calc(10px - 2px - 2px);
	white-space: nowrap;
}
details:not(summary) > * {
	font-size: 10px;
}
details.test-cards dl {
	display: grid;
	grid-template-columns: max-content auto;
	margin: 1em auto;
	text-align: left;
}
details.test-cards dl dd {
	margin-left: 4px;
}
details.test-cards dl dt small {
	display: none;
}
details.test-cards a {
	font-weight: normal
}
details.test-cards a::before {
	content: "(";
}
details.test-cards a::after {
	content: ")";
}
details.test-cards a[target="_blank"]::after {
	content: "🗗)";
	margin-left: .25em;
	display: inline-block;
}
.debug-order-ids {
	background: #EEE;
	padding: 2px 4px;
	border: 1px dashed #999;
}
.test-promos {
	width: 100%;
	/*	position: relative;
		top: -1em;*/
	margin-top: -1em;
}
#debug-stop-order {
	font-size: 8pt;
	display: block;
	margin: 1em 0
}
#debug-stop-order input[type="checkbox"] {
	width: auto;
	height: auto;
}
@media only screen and (min-width: 720px) {
	details.test-cards {
		/*float: right;*/
		max-height: 126px;
		min-width: 204px;
		overflow: auto;
		scrollbar-width: thin;
		/*box-shadow: 0 0 4px rgb(200, 200, 200);*/
		/*position: relative;
		z-index: 1;*/
		/*margin-left: 1em;*/
	}
	details.test-cards::-webkit-scrollbar {
		width: 12px;
		height: 12px;
	}
}
div.debug-order-ids {
	margin: 1em 0;
}

/**********************************************************************************************************************
 DESKTOP
 *********************************************************************************************************************/
@media only screen and (min-width: 980px) {
	/******************************************************************************************************************
	 Change the way backgrounds are spread across the viewport so overflow can be removed from the body
	 *****************************************************************************************************************/
	/*
	body {
		overflow: unset;
	}
	.overlord,
	#header4 {
		position: static;
	}
	#header3-subhead {
		padding-left: 0;
		padding-right: 0;
		margin-left: auto;
		margin-right: auto;
		position: static;
		float: none;
		border: none;
		background: transparent;
	}
	#link-dropz-v3 nav {
		position: static;
	}
	#link-dropz-v3 nav::before {
		width: 100%;
		height: inherit;
		display: block;
		background: #a4d7d6;
		content: "";
		position: absolute;
		left: 0;
		z-index: -1;
	}
	#page-footer .footer-outer {
		padding-left: 0;
		padding-right: 0;
		margin-left: auto;
		margin-right: auto;
		position: relative; /* So ::before can be the same height * /
	}
	#page-footer .footer-outer::before {
		display: block;
		background: #a4d7d6;
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: calc((100vw - 100%) / 2 * -1);
		width: 100vw;
	}
	*/

	/******************************************************************************************************************
	 GENERAL
	 *****************************************************************************************************************/
	html {
		scroll-padding-top: 1em;
	}
	body {
		padding-bottom: 0 !important;
	}
	.float-label.floated label {
		transform: translateY(-0.6em);
	}

	/******************************************************************************************************************
	 SHIPPING
	 *****************************************************************************************************************/
	#shipment-options-and-notes {
		display: flex;
	}
	#shipment-options-and-notes > * {
		flex-grow: 1;
	}
	#shipment-options-and-notes .shipping-notes textarea {
		height: 100%;
	}

	/******************************************************************************************************************
	 BILLING
	 *****************************************************************************************************************/
	#paypal-button-container,
	#credit-card-container {
		margin-right: 0;
		width: 300px; /* So payment options width doesn't change when switching */
	}

	/******************************************************************************************************************
	 SUMMARY
	 *****************************************************************************************************************/
	#checkout-form #checkout-summary > *:not(h2) {
		max-width: 400px;
		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
	}
	#checkout-form #checkout-summary .section-content {
		padding-left: 0;
		padding-right: 0;
	}
	#checkout-form #checkout-summary > button {
		display: block;
	}
	#checkout-summary #mobile-submit-btn-area {
		display: none;
	}
	/******************************************************************************************************************
	 DEBUG
	 *****************************************************************************************************************/
	details.test-cards dl dd small {
		display: inline;
	}
}