@charset "UTF-8";

:root {

	--red: #C0151B;
	--green: #046501;

	--navy: #011839;
	--black: #000000;
	--bright-blue: #0977D3;
	--light-blue: #F3F6F9;
	--light-grey: #C2C2C2;
	--light-grey-blue: #DBE0E7;
	--grey: #666666;

	--border-color: #DBE1E4;

	--arrow-right: url(data:image/svg+xml,%3Csvg%20width%3D%2214px%22%20height%3D%2211px%22%20viewBox%3D%220%200%2014%2011%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M13.7539062%2C5.87890625%20C14.0820312%2C5.5234375%2014.0820312%2C4.9765625%2013.7539062%2C4.62109375%20L9.37890625%2C0.24609375%20C9.0234375%2C-0.08203125%208.4765625%2C-0.08203125%208.12109375%2C0.24609375%20C7.79296875%2C0.6015625%207.79296875%2C1.1484375%208.12109375%2C1.50390625%20L11.0195312%2C4.375%20L0.875%2C4.375%20C0.3828125%2C4.375%200%2C4.7578125%200%2C5.25%20C0%2C5.7421875%200.3828125%2C6.125%200.875%2C6.125%20L11.0195312%2C6.125%20L8.12109375%2C8.99609375%20C7.79296875%2C9.3515625%207.79296875%2C9.8984375%208.12109375%2C10.2539062%20C8.4765625%2C10.5820312%209.0234375%2C10.5820312%209.37890625%2C10.2539062%20L13.7539062%2C5.87890625%20Z%22%20id%3D%22Path%22%20fill%3D%22%23000000%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E);
	--check: url(data:image/svg+xml,%3Csvg%20width%3D%2212px%22%20height%3D%2211px%22%20viewBox%3D%220%200%2012%2011%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M11.6546892%2C0.155687164%20C12.0297826%2C0.446523509%2012.1101598%2C0.975316864%2011.8422359%2C1.34547221%20L4.98338433%2C10.6522353%20C4.82262999%2C10.8373129%204.60829088%2C10.9695113%204.36715938%2C10.9959509%20C4.0992355%2C11.0223906%203.858104%2C10.9166319%203.67055727%2C10.7579939%20L0.2411315%2C7.37371645%20C-0.0803771666%2C7.03000077%20-0.0803771666%2C6.50120742%200.2411315%2C6.15749174%20C0.589432555%2C5.84021572%201.12528033%2C5.84021572%201.47358139%2C6.15749174%20L4.17961266%2C8.85433785%20L10.4490317%2C0.340764838%20C10.7437479%2C-0.0293905099%2011.2795957%2C-0.108709513%2011.6546892%2C0.155687164%20Z%22%20id%3D%22Path%22%20fill%3D%22%23000000%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E);
	--x-circle: url(data:image/svg+xml,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M8%2C16%20C12.40625%2C16%2016%2C12.40625%2016%2C8%20C16%2C3.59375%2012.40625%2C0%208%2C0%20C3.59375%2C0%200%2C3.59375%200%2C8%20C0%2C12.40625%203.59375%2C16%208%2C16%20Z%20M5.21875%2C5.21875%20C5.5%2C4.9375%206%2C4.9375%206.28125%2C5.21875%20L8%2C6.9375%20L9.71875%2C5.21875%20C10%2C4.9375%2010.5%2C4.9375%2010.78125%2C5.21875%20C11.0625%2C5.5%2011.0625%2C6%2010.78125%2C6.28125%20L9.0625%2C8%20L10.78125%2C9.71875%20C11.0625%2C10%2011.0625%2C10.5%2010.78125%2C10.78125%20C10.46875%2C11.0625%2010%2C11.0625%209.71875%2C10.78125%20L8%2C9.0625%20L6.28125%2C10.78125%20C6%2C11.0625%205.5%2C11.0625%205.21875%2C10.78125%20C4.9375%2C10.46875%204.9375%2C10%205.21875%2C9.71875%20L6.9375%2C8%20L5.21875%2C6.28125%20C4.9375%2C6%204.9375%2C5.5%205.21875%2C5.21875%20Z%22%20id%3D%22Shape%22%20fill%3D%22%23C0151B%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E);

	--transition: ease all 150ms;
	
}

[hidden] {
	display: none !important;
}

.cart-and-checkout main#content {
    color: var(--black);
    float: none;
    font-weight: 400;
	max-width: 100%;
    min-height: 0;
    padding: 0;
    width: 100%;
}

.cart-and-checkout main#content h1 {
	font-style: normal;
	font-weight: 700;
}

.cart-and-checkout main a:not(.button) {
	color: var(--bright-blue);
}

.cart-and-checkout main a:not(.button):is(:hover, :focus-visible) {
	text-decoration: underline;
}

.cart-and-checkout main :is(button, .button).primary {
    align-items: center;
    background: var(--bright-blue);
    border: 0;
	border-radius: 0.25rem;
    color: #fff;
    display: inline-flex;
    font-style: normal;
	font-size: 1.125rem;
	font-weight: 600;
    gap: 0.5em;
    justify-content: center;
    min-height: 3.125rem;
	min-width: 5rem;
    padding: 1em;
}

.cart-and-checkout main :is(button, .button).primary:is(:hover, :focus-visible) {
    background: var(--navy);
    box-shadow: 0 0 0 3px var(--bright-blue);
}

.cart-and-checkout main :is(button, .button).primary.arrow:after {
    background: #fff;
    content: "";
    display: block;
    flex-shrink: 0;
    height: 0.875em;
    mask-image: var(--arrow-right);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
	transition: var(--transition);
    width: 0.875em;    
}

.cart-and-checkout main :is(button, .button).primary:not(.arrow):after {
    display: none;
}

.cart-and-checkout main :is(button, .button).primary.arrow:is(:hover, :focus-visible):after {
    background: var(--bright-blue);
}

.cart-and-checkout main :is(button, .button).secondary {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 0.25rem;
    bottom: auto;
    box-shadow: inset 0 0 0 1px var(--bright-blue);
    color: var(--black);
    display: inline-flex;
    font-size: 0.875em;
    font-style: normal;
    font-weight: 400;
    height: 2.3125rem;
    justify-content: center;
    left: auto;
    padding: 0 1em;
    position: relative;
    right: auto;
    top: auto;
}

.cart-and-checkout main :is(button, .button).secondary:after {
    display: none;
}

.cart-and-checkout main :is(button, .button).secondary:is(:hover, :focus-visible) {
    background: var(--navy);
	color: #fff;
}

.cart-and-checkout main input:not([type=radio], [type=checkbox]) {
	height: 2.5em;
}

.cart-and-checkout main hr {
	border-color: var(--border-color);
	border-width: 2px;
	margin: 1.875em 0;
}

#shopping-cart {
	background: var(--light-blue);
	display: flex;
}

#shopping-cart .wrap {
	margin-inline: auto
}






/* ======================================================== */
/* 			Product List	  								*/			
/* ======================================================== */

.cart-list {
	display: grid;
	gap: 0.75em;
	margin-bottom: 1.875em;
}

.cart-list li {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;
}

.cart-list .undo-wrap {
	background: rgba(0,0,0,0.05);
	border-radius: 10px;
	display: flex;
	gap: 1em;
	grid-column: 1/-1;
	justify-content: space-between;
	padding: 1em;
}

.cart-list .undo-wrap p {
    align-items: center;
    display: flex;
	line-height: 1.25em;
    margin: 0;
}

.cart-list .undo-wrap button {
    align-items: center;
    display: flex;
    font-size: 1rem;
    font-style: normal;
    height: 2.5em;
    justify-content: center;
    padding: 0 1em;
}

.cart-list .undo-wrap button:is(:hover, :focus-visible) {
  background: var(--bright-blue);
  border-color: var(--bright-blue);
  color: #fff;
}

.product {
	align-items: start;
    background: #FFFFFF;
    border: 1px solid var(--light-grey-blue);
    border-radius: 0.5em;
    box-shadow: 0 0.125em 0.375em 0 rgba(0, 0, 0, 0.08);
	display: grid;
	grid-column: 1/-1;
	grid-template-columns: subgrid;
    clear: both;
    float: none;
    position: relative;
	transition: var(--transition);
    width: 100%;
}
.product .product-image { grid-area: image; }
.product .info-block { grid-area: info; }
.product .product-price { grid-area: price; }
.product .quantity { grid-area: quantity; }
.product .subtotal { grid-area: subtotal; }
.product .remove { grid-area: remove; }
.product .add-to-cart { grid-area: add-to-cart; }
.product .disclaimer { grid-area: disclaimer; }

.product .product-image {
    aspect-ratio: 1/1;
	display: block;
	position: relative;
}

.product .product-image:focus {
    outline: 2px solid var(--bright-blue);
	outline-offset: 2px;
}

.product .product-image img {
	left: 50%;
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.product .info-block {
	width: 100%;
}

.product .product-name {
    align-items: center;
    color: var(--navy);
    display: flex;
    font-size: 1.125em;
    font-weight: 600;
    line-height: 1.2em;
    margin-bottom: 0.25em;
}

.product .product-option {
	color: #000000;
	display: block;
	font-size: 0.875em;
	line-height: 1.125em;
}

.product em.product-option {
	color: var(--grey);
}

.product .product-option + .product-option {
	margin-top: 0.25em;
}

.product .edit-options {
	display: flex;
	flex-shrink: 0;
	gap: 1.75em;
}

.product .price {
    line-height: 2.5rem;
}

.product .quantity input {
	background: none;
	border: 1px solid var(--border-color);
	border-radius: 0.5em;
    height: 2.5rem;
    padding: 0;
    text-align: center;
    width: 4.5rem;
}

.product .quantity input:focus {
	border-color: var(--bright-blue);
}

.product .subtotal {
	color: var(--navy);
	font-weight: 600;
	justify-content: flex-end;
}

.continue-shopping {
	align-items: center;
	display: inline-flex;
	gap: 0.325em;
}

.continue-shopping:before {
    background: currentColor;
    content: "";
    display: block;
    flex-shrink: 0;
    height: 0.875em;
    mask-image: var(--arrow-right);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    transform: scaleX(-1);
    width: 0.875em;
}

.continue-shopping:is(:hover, :focus-visible) {
    text-decoration: underline;
}



/* Empy Cart */
.empty-cart {
	background: #fff;
	border-radius: 4px;
	padding: 1.5em;
	text-align: center;
}

.empty-cart h2 {
	margin-bottom: 0.5rem;
}


/* Donation */

.product.donation {
    border: 2px solid #C1D1DF;
    box-shadow: none;
}

.product.donation .product-name {
	color: var(--red);
	margin-bottom: 0;
}

.product.donation .price {
	background: #F3F6F9;
	border-radius: 0.5rem;
	padding: 0 1.5em;
	display: block;
	text-align: center;
}

.product.donation .product-option u {
	display: inline-block;
	text-decoration: underline;
}

.product.donation .price {
    align-items: center;
    color: #011839;
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    justify-content: center;
    margin-top: 0.75em;
}

.product.donation button {
    align-items: center;
    display: flex;
    font-size: 1rem;
    font-style: normal;
    height: 2.5em;
    justify-content: center;
    padding: 0 1em;
}

.product.donation .add-to-cart button:is(:hover, :focus-visible) {
	background: var(--bright-blue);
	border-color: var(--bright-blue);
	color: #fff;
}

.product.donation .disclaimer {
	border-top: 1px dotted #DBE1E4;
	font-size: 0.875em;
	line-height: 1.25em;
	padding-top: 1rem;
}






/* ======================================================== */
/* 			Start Checkout  								*/			
/* ======================================================== */

#shopping-cart .start-checkout {
	background:#fff;
}

#shopping-cart .start-checkout form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
}

#shopping-cart .start-checkout table {
	table-layout: fixed;
	width: 100%;
}

#shopping-cart .start-checkout details.expanding-form {
	display: block;
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

#shopping-cart .start-checkout details.expanding-form summary {
	align-items: center;
	display: flex;
	justify-content: space-between;
	list-style: none;
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

#shopping-cart .start-checkout details.expanding-form summary::-webkit-details-marker {
	display: none;
}

#shopping-cart .start-checkout details.expanding-form summary:is(:hover, :focus-visible) .button {
  background: var(--navy);
  color: #fff;
}

#shopping-cart .start-checkout details.expanding-form[open] summary .button {
	background: var(--navy);
	color: #fff;
}

#shopping-cart .start-checkout details.expanding-form .flex-form {
	align-items: flex-end;
	background: var(--light-blue);
	border-radius: 0.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
	max-width: 100%;
	min-width: 0;
	padding: 0.5rem;
	text-align: left;
	width: 100%;
	font-size: 0.875rem;
}

#shopping-cart .start-checkout details.expanding-form .flex-form > div {
	flex: 1 1 auto;
	min-width: 0;
}

#shopping-cart .start-checkout details.expanding-form .flex-form button {
	flex: 0 0 auto;
	font-size: 1em;
	max-width: 100%;
}

#shopping-cart .start-checkout input {
	box-sizing: border-box;
	background: #fff;
	display: block;
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

.start-checkout td {
	padding: 0.25em 0;
	vertical-align: middle;
}

.start-checkout td:last-child {
	text-align: right;
}

.start-checkout tr:last-child td {
	padding-bottom: 1em;
}

.start-checkout tfoot td {
	color: var(--navy);
	border-top: 1px solid var(--border-color);
	padding-top: 0.75em;
	font-size: 1.125em;
	font-weight: 700;
}

.start-checkout p {
	text-align: center;
}

.start-checkout p a {
	color: var(--bright-blue);
	display: block;
}

.start-checkout p a:is(:hover, :focus-visible) {
	text-decoration: underline;
}






/* ======================================================== */
/* 			Dialog Popover  								*/			
/* ======================================================== */

dialog.popover {
	align-content: center;
	align-items: center;
	background: rgba(1,24,57,0.90);
	border: 0;
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	margin: 0;
	min-height: 100%;
	min-width: 100%;
	opacity: 0;
	padding: 1em;
	pointer-events: none;
	position: fixed;
	top: 0;
	transition: opacity 200ms ease;
	width: 100%;
	z-index: 10;
}

dialog.popover[open] {
	opacity: 1;
	pointer-events: all;
}

dialog.popover .center {
	background: #fff;
	border-radius: 0.625em;
	max-width: 55rem;
	padding: 3em 2em;
	position: relative;
	z-index: 2;
}

dialog.popover .center .close {
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-100%);
}

dialog.popover .center .close:is(:hover, :focus-visible) {
    outline: 2px solid var(--bright-blue);
}

dialog.popover .popover-content {
	max-height: calc(100vh - 12.375em);
	text-align: center;
}

dialog.popover .popover-content .actions {
	display: flex;
	gap: 1em;
	justify-content: center;
	margin-top: 1.5em;
}

dialog.popover .popover-content #accountLogin {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
	margin-bottom: 1em;
    max-width: 19.875em;
    width: 100%;
}

dialog.popover .popover-content #accountLogin label {
	display: block;
	text-align: left;
    width: 100%;
}

dialog.popover .popover-content #accountLogin input {
	border-radius: 0;
	padding: 0 0.5em;
    width: 100%;
}

dialog.popover .popover-content p {
	margin-bottom: 1em;
}

dialog.popover .popover-content p a {
	color: var(--bright-blue);
	display: block;
}

dialog.popover .popover-content p a:is(:hover, :focus-visible) {
	text-decoration: underline;
}

dialog.popover .popover-content .go-back {
	border-top: 1px solid var(--border-color);
	padding-top: 1em;
}

dialog.popover .popover-content .go-back button {
    align-items: center;
    border-color: var(--border-color);
    color: var(--bright-blue);
    display: flex;
    font-style: normal;
	font-size: 1rem;
	gap: 0.35em;
    height: 40px;
    justify-content: center;
    width: 100%;
}

dialog.popover .popover-content .go-back button:is(:hover, :focus-visible) {
	background: var(--navy);
	color: #fff;
}

dialog.popover .popover-content .go-back button:before {
    background: currentColor;
    content: "";
    display: block;
    flex-shrink: 0;
    height: 0.875em;
    mask-image: var(--arrow-right);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    transform: scaleX(-1);
    width: 0.875em;
}

dialog.popover .popover-mask {
	background: none;
	border: 0;
	cursor: default;
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1;
}

.form-error {
	color: var(--red);
	text-align: left;
}






/* ======================================================== */
/* 			Order Confirmation / Thank You Page				*/			
/* ======================================================== */
#shopping-cart.order-confirmation {
	background:#fff;
}

#shopping-cart.order-confirmation .wrap {
	max-width: 62.5em;
	padding: 0;
	width: 100%;
}

#shopping-cart.order-confirmation .order-view {
	display: flex;
}

#shopping-cart.order-confirmation .order-view > * {
	padding: 0;
}

/* Order Summary  */
#shopping-cart.order-confirmation .cart-list {
	gap: 0;
    border-top: 1px solid var(--border-color);
}

#shopping-cart.order-confirmation .product {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
	gap: 0.5em 1em;
	grid-template-columns: auto 1fr 1fr 1fr;
	grid-template-areas: 
		"image info info info"
		"image price quantity subtotal"
	;
    padding: 1.5em 0;
}
#shopping-cart.order-confirmation .product > :not(.info-block) {
	align-self: unset;
	border: 0;
	display: block;
	justify-self: unset;
	margin: 0;
	padding: 0;
}

#shopping-cart.order-confirmation .product-name {
    min-height: 0;
}

#shopping-cart.order-confirmation .price {
    line-height: inherit;
	font-size: 1em;
}

#shopping-cart.order-confirmation .quantity span:first-child {
    color: var(--grey);
}

#shopping-cart.order-confirmation .addresses {
    display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

#shopping-cart.order-confirmation .addresses > * {
    flex: 1 1 auto;
}

#shopping-cart.order-confirmation .addresses h2 {
    margin-bottom: 1rem;
}

/* Cart Brief  */
#shopping-cart.order-confirmation .cart-brief {
	background: var(--light-blue);
	border-radius: 0.5em;
	padding: 2em;
}

#shopping-cart.order-confirmation .cart-brief table {
	width: 100%;
}

#shopping-cart.order-confirmation .cart-brief .green-text {
	color: var(--green);
}

#shopping-cart.order-confirmation .cart-brief td {
	padding: 0.25em 0;
	vertical-align: middle;
}

#shopping-cart.order-confirmation .cart-brief td:last-child {
	text-align: right;
}

#shopping-cart.order-confirmation .cart-brief tfoot td {
	color: var(--navy);
	border-top: 1px solid var(--border-color);
	padding-top: 0.75em;
	font-size: 1.125em;
	font-weight: 700;
}

#shopping-cart.order-confirmation .thank-you-text {
	border-top: 1px solid var(--border-color);
	margin-top: 1em;
	padding-top: 1.875em;
}

#shopping-cart.order-confirmation #create-account {
	background: var(--light-blue);
	border-radius: 0.5em;
	padding: 1.5em;
}

#shopping-cart.order-confirmation #create-account h2 {
	margin-bottom: 0.5rem;
}

#shopping-cart.order-confirmation #create-account {
	margin-top: 3em;
}

#shopping-cart.order-confirmation .form-grid {
	align-items: end;
	display: grid;
	gap: 1em 0.5em;
	grid-template-columns: repeat(12, 1fr);
}

#shopping-cart.order-confirmation .form-grid input,
#shopping-cart.order-confirmation .form-grid button {
	height: 2.5rem;
	padding: 0 0.5rem;
	font-size: 1em;
    width: 100%;
}

#shopping-cart.order-confirmation .form-grid input {
	background: #fff;
}

#shopping-cart.order-confirmation .form-grid button {
	background: var(--bright-blue);
	border: 0;
	color: #fff;
	font-style: normal;
}

#shopping-cart.order-confirmation .form-grid button:is(:hover, :focus-visible) {
  background: var(--navy);
  box-shadow: 0 0 0 3px var(--bright-blue);
}

#shopping-cart.order-confirmation .form-grid > * {
	min-width: 0;
}

#shopping-cart.order-confirmation .form-grid label {
	display: block;
}

#shopping-cart.order-confirmation .form-grid .full {
	grid-column: 1/-1;
}

#shopping-cart.order-confirmation .form-error {
	color: var(--red);
	display: block;
	font-size: 0.875em;
	line-height: 1.2em;
	margin-bottom: 0.25em;
	text-align: left;
}