apirocket 0.0.14 → 0.0.20

package/dist/ecommerce.css

@@ -51,7 +51,7 @@
 	--cart-item-quantity-icon-background-color: transparent;
 	--cart-item-quantity-icon-size: 16px;
 	--cart-item-price-font-size: 16px;
-	--cart-item-price-font-weight: normal;
+	--cart-item-price-font-weight: bold;
 	--cart-item-price-font-color: #404040;
 
 	--cart-button-font-size: 16px;
@@ -121,29 +121,28 @@
 }
 
 .apirocket-cart-header-continue {
-	display: block;
+	display: none;
+	align-items: center;
 	text-align: left;
 	color: #737373;
 	font-size: 16px;
 	font-weight: normal;
-	display: none;
 	cursor: pointer;
 }
 
 .apirocket-cart-header-login {
-	display: block;
+	display: none;
+	align-items: center;
 	text-align: right;
 	color: #737373;
 	font-size: 16px;
 	font-weight: normal;
-	display: none;
 	cursor: pointer;
 }
 
 .apirocket-cart-header-login svg,
 .apirocket-cart-header-continue svg { margin-right: 16px; }
 
-
 .apirocket-cart-body {
 	flex: 1 1 auto;
 	padding: 0px;
@@ -151,6 +150,14 @@
 	overflow-y: auto;
 }
 
+.apirocket-cart-body-message {
+	font-size: 18px;
+	font-weight: var(--cart-item-description-font-weight, lighter);
+	color: #666;	
+	padding: var(--cart-item-padding, 32px) var(--cart-padding, 32px);
+	border-bottom: var(--cart-item-border-width, 1px) solid var(--cart-item-border-color, #e5e5e5);
+}
+
 .apirocket-cart-footer {
 	flex: 0 0 auto;
 	padding: var(--cart-padding, 32px);
@@ -209,6 +216,7 @@
 .apirocket-cart-item-col-description {
 	align-self: flex-start;
 	padding-right: 32px;
+	flex-grow: 1;	
 }
 
 .apirocket-cart-item-col-description-name {
@@ -319,8 +327,9 @@
 		padding: 40px 0px;
 	}
 
-	.apirocket-cart-full-screen .apirocket-cart-header-continue { display: block; }
-	.apirocket-cart-full-screen .apirocket-cart-header-login { display: block; }
+	.apirocket-cart-full-screen .apirocket-cart-header-continue { display: flex; }
+	.apirocket-cart-full-screen .apirocket-cart-header-login { display: flex; }
+
 	.apirocket-cart-full-screen .apirocket-cart-header-close { display: none; }
 
 	.apirocket-cart-full-screen .apirocket-cart-footer {
@@ -329,6 +338,7 @@
 		margin-left: auto; 
 		margin-right: 0;
 		padding: 0px;
+		padding-top: 32px;
 		padding-bottom: 96px;
 	}
 
@@ -374,10 +384,14 @@
 /* Mobile version */
 
 @media (max-width: 720px) {
+
 	.apirocket-cart {
 		width: 100%;
 		box-shadow: none;
 	}
+
+	.apirocket-cart-header-continue { display: none; }
+	.apirocket-cart-header-login { display: none; }		
 }.apirocket-checkout * { box-sizing: content-box; }
 
 .apirocket-checkout {
@@ -430,7 +444,8 @@
 }
 
 .apirocket-checkout-continue {
-	display: block;
+	display: flex;
+	align-items: center;
 	text-align: left;
 	margin-top: 40px;
 	margin-bottom: 40px;
@@ -440,8 +455,38 @@
 	cursor: pointer;
 }
 
+.apirocket-checkout-close {
+	display: none;
+	cursor: pointer;
+	position: absolute;
+	top: 16px;
+	right: 32px;
+}
+
+.apirocket-checkout-summary-container {
+	display: flex;
+	flex-flow: column;
+	max-height: calc(100vh - 5%);
+	overflow: hidden;
+}
+
+.apirocket-checkout-summary-top {
+	flex: 0 0 auto;
+}
+
+.apirocket-checkout-summary-content {
+	flex: 1 1 auto;
+	overflow-y: scroll;
+}
+
+.apirocket-checkout-summary-footer {
+	flex: 0 0 auto;
+}
+
 .apirocket-checkout-summary-login {
-	display: block;
+	display: flex;
+	align-items: center;
+	justify-content: end;
 	text-align: right;
 	margin-top: 40px;
 	margin-bottom: 40px;
@@ -471,7 +516,7 @@
 .apirocket-checkout-summary-item {
 	display: flex;
 	justify-content: stretch;
-	align-items: center;
+	align-items: flex-start;
 	padding-bottom: 16px;
 	border-bottom: 1px solid #d9d9d9;
 	margin-bottom: 16px;
@@ -480,6 +525,9 @@
 .apirocket-checkout-summary-item-col-image {
 	flex: 0 0 auto;
 	max-width: 100px;
+	border: 1px solid #e5e5e5;
+	border-radius: 4px;
+	overflow: hidden;
 }
 
 .apirocket-checkout-summary-item-col-image img {
@@ -492,9 +540,9 @@
 	flex: 1 1 auto;
 	padding-left: 16px;
 	padding-right: 8px;
-	font-size: 16px;
+	font-size: 14px;
 	font-weight: bold;
-	line-height: 20px;
+	line-height: 18px;
 }
 
 .apirocket-checkout-summary-item-col-description small {
@@ -581,6 +629,7 @@
 }
 
 .apirocket-checkout-breadcrumbs ol li {
+	cursor: pointer;
 	color: #a3a3a3;
 	font-size: 14px;
 	line-height: 1;
@@ -674,6 +723,14 @@
 	text-align: right;
 }
 
+.apirocket-checkout-button-edit {
+	cursor: pointer;
+}
+
+.apirocket-checkout-button-edit:hover {
+	text-decoration: underline;
+}
+
 .apirocket-checkout-section a {
 	color: #404040;
 	outline: none;
@@ -717,8 +774,13 @@
 	color: #404040;
 	font-size: 14px;
 	line-height: 1;
+	text-decoration: none;
 }
 
+.apirocket-checkout-footer ul li a:focus {
+	outline: none;
+	text-decoration: underline;
+}
 
 .apircoket-checkout-legal {
 	margin-top: 16px;
@@ -828,11 +890,11 @@
 
 .apirocket-checkout-fieldset > :last-child { border-bottom: none; }
 
-.apirocket-checkout-fieldset .form-input,
-.apirocket-checkout-fieldset .form-select,
-.apirocket-checkout-fieldset .form-checkbox,
-.apirocket-checkout-fieldset .form-radio { margin-bottom: 0; }
-.apirocket-checkout-fieldset .form-radio .form-radio-label { font-size: 16px; }
+.apirocket-checkout-fieldset .apirocket-form-input,
+.apirocket-checkout-fieldset .apirocket-form-select,
+.apirocket-checkout-fieldset .apirocket-form-checkbox,
+.apirocket-checkout-fieldset .apirocket-form-radio { margin-bottom: 0; }
+.apirocket-checkout-fieldset .apirocket-form-radio .form-radio-label { font-size: 16px; }
 
 .apirocket-checkout-fieldset > * {
 	padding: 16px;
@@ -897,7 +959,8 @@
 	.apirocket-checkout-summary-header,
 	.apirocket-checkout-summary-login { display: none; }
 
-	.apirocket-checkout-continue { display: none;}
+	.apirocket-checkout-continue { display: none; }
+	.apirocket-checkout-close { display: block; }
 	
 	.apirocket-checkout-breadcrumbs { text-align: center; }
 	.apirocket-checkout-breadcrumbs ol { display: inline-flex; text-align: center; }
@@ -945,7 +1008,9 @@
 		max-width: 80px;
 	}
 	
-	.apirocket-checkout-summary-item-col-image img { max-height: 80px; }
+	.apirocket-checkout-summary-item-col-image img { 
+		max-height: 80px;
+	}
 	
 	.apirocket-checkout-summary-item-col-description {
 		flex: 1 1;
@@ -1009,73 +1074,7 @@
 }
 
 
-
-.apirocket-button {
-	box-sizing: border-box !important;
-	display: block;
-	width: 100%;
-	padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
-	margin: 0px;
-	border-radius: var(--cart-button-border-radius, 4px);
-	background-color: var(--cart-button-background-color, transparent);
-	border: 1px solid var(--cart-button-border-color, #e5e5e5);
-	color: var(--cart-button-font-color, #737373);
-	line-height: 1;
-	font-size: var(--cart-button-font-size, 16px);
-	font-weight: var(--cart-button-font-weight, normal);
-	text-align: center;
-	transition-property: color, border-color, background-color, box-shadow;
-	transition-timing-function: ease;
-	transition-duration: 350ms;
-	cursor: pointer;
-}
-
-.apirocket-button:hover {
-	background-color: var(--cart-button-background-color-hover, transparent);
-	border-color: var(--cart-button-border-color-hover, #404040);
-	color: var(--cart-button-font-color-hover, #404040);
-}
-
-.apirocket-button-link {
-	display: block;
-	text-align: left;
-	justify-content: flex-start;
-	align-items: center;
-	border: none;
-	padding-left: 0;
-	padding-right: 0;
-	width: auto;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-.apirocket-button-link span {
-	margin-left: 16px;
-	margin-right: 16px;
-}
-
-.apirocket-button-primary {
-	background-color: var(--cart-button-primary-background-color, #1d4ed8);
-	border-color: var(--cart-button-primary-border-color, #1d4ed8);
-	color: var(--cart-button-primary-text-color, #fff);
-}
-
-.apirocket-button-primary:hover {
-	background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
-	border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
-	color: var(--cart-button-primary-text-color-hover, #fff);
-	box-shadow: var(--cart-shadow-button-primary-hover, none);
-}
-
-
-@media (max-width: 720px) {
-
-	.apirocket-button-link { 
-		width: 100%;
-		text-align: center;
-	}
-
-}.apirocket-modal *,
+.apirocket-modal *,
 .apirocket-modal *::before,
 .apirocket-modal *::after { box-sizing: border-box; }
 
@@ -1104,16 +1103,17 @@
 	height: 96px;
 }
 
-.apirocket-modal-nav > div {
-	display: block;
+.apirocket-modal-nav-button {
+	display: flex;
+	align-items: center;
 	text-align: left;
 	color: #737373;
 	font-size: 16px;
 	font-weight: normal;
-	cursor: pointer;
+	cursor: pointer;	
 }
 
-.apirocket-modal-nav > div svg { margin-right: 16px; } 
+.apirocket-modal-nav-button svg { margin-right: 16px; } 
 
 .apirocket-modal-content {
 	display: flex;
@@ -1223,129 +1223,14 @@
 		right: -8px;
 		top: -8px;
 	}	
-}.apirocket-summary {}
-
-.apirocket-summary-top {
-	margin-top: 56px;
-	margin-bottom: 32px;
-}
-
-.apirocket-summary-header {
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;	
-	margin-bottom: 32px;
-}
-
-.apirocket-summary-header-icon {
-	flex: 0 1;	
-	margin-right: 16px;
-}
-
-.apirocket-summary-header-content {}
-
-.apirocket-summary-header-title {
-	font-size: 24px;
-	font-weight: bold;
-	line-height: 1.2;
-	color: #404040;
-	margin-bottom: 4px;
-}
-
-.apirocket-summary-header-subtitle {
-	font-size: 18px;
-	font-weight: normal;
-	line-height: 1.2;
-	color: #737373;
-}
-
-.apirocket-summary-section {
-	margin-top: 16px;
-	border: 1px solid #d9d9d9;
-	border-radius: 4px;
-	padding: 24px;
-}
-
-.apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
-.apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
-
-.apirocket-summary-section-title {
-	font-size: 18px;
-	font-weight: bold;
-	line-height: 1.2;
-	color: #404040;
-	margin-bottom: 24px;
-}
-
-.apirocket-summary-section-subtitle {
-	font-size: 16px;
-	font-weight: bold;
-	line-height: 1;
-	color: #404040;
-	margin-bottom: 16px;
-}
-
-.apirocket-summary-section-text {
-	font-size: 14px;
-	font-weight: normal;
-	line-height: 18px;
-	color: #404040;
-}
-
-.apirocket-summary-help {
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;	
-}
-
-.apirocket-summary-help-icon { 
-	flex: 0 1;
-	padding-right: 12px;
-}
-
-.apirocket-summary-help-content {
-	font-size: 14px;
-	font-weight: normal;
-	line-height: 1.2;
-	color: #404040;
-}
-
-.apirocket-summary-help-content a {
-	display: block;
-	color: #737373;
-}
-
-@media (max-width: 1000px) {
-	.apirocket-summary-top { display: none; }
-	.apirocket-summary-header { margin-top: 32px; }
-}
-
-@media (max-width: 720px) {	
-	.apirocket-summary-section-subtitle { margin-top: 24px; }
-	.apirocket-summary-header { 
-		flex-direction: column;
-		align-items: center;
-		text-align: center; 
-	}
-	.apirocket-summary-header-icon {
-		margin-right: 0px;
-		margin-bottom: 16px;
-	}
-	.apirocket-summary-header-title { 
-		font-size: 28px;
-		margin-bottom: 8px;
-	}
-}
-
-
-
-.form-input {
+}.apirocket-form-input {
 	display: block;
 	position: relative;
 	margin-bottom: 16px;
 }
 
-.form-input input {
+.apirocket-form-input input {
+	all: unset;
 	appearance: none;
 	-moz-appearance: none;
 	-webkit-appearance: none;	
@@ -1365,19 +1250,19 @@
 	box-sizing: border-box;
 }
 
-.form-input input:focus {
+.apirocket-form-input input:focus {
 	border-color: #404040;
 	box-shadow: 0 0 0 1px #404040;
 }
 
-.form-input input:not(:placeholder-shown) {
+.apirocket-form-input input:not(:placeholder-shown) {
 	padding-top: 22px;
 	padding-bottom: 6px;
 }
 
-.form-input input:disabled { background-color: #f5f5f5; opacity: 0.8; color: #404040; } 
+.apirocket-form-input input:disabled { background-color: #f5f5f5; opacity: 0.8; color: #404040; } 
 
-.form-input-placeholder {
+.apirocket-form-input-placeholder {
 	position: absolute;
 	font-size: 12px;
 	line-height: 1;
@@ -1392,12 +1277,12 @@
 	text-overflow: ellipsis;
 }
 
-.form-input input:not(:placeholder-shown) ~ span.form-input-placeholder {
+.apirocket-form-input input:not(:placeholder-shown) ~ span.apirocket-form-input-placeholder {
 	opacity: 1;
 	transform: translateY(0%);
 }
 
-.form-input .form-input-error-message {
+.apirocket-form-input .apirocket-form-input-error-message {
 	display: none;
 	font-size: 14px;
 	line-height: 1.2;
@@ -1406,18 +1291,15 @@
 	color: #dc2626;
 }
 
-.form-input.invalid.touched input {
+.apirocket-form-input.invalid.touched input {
 	border-color: #dc2626;
 	box-shadow: 0 0 0 1px #dc2626;
 }
 
-.form-input.invalid.touched .form-input-placeholder { color: #dc2626; }
-.form-input.invalid.touched .form-input-error-message { display: block; }
-
+.apirocket-form-input.invalid.touched .apirocket-form-input-placeholder { color: #dc2626; }
+.apirocket-form-input.invalid.touched .apirocket-form-input-error-message { display: block; }
 
-
-
-.form-checkbox {
+.apirocket-form-checkbox {
 	display: flex;
 	align-items: flex-start;
 	justify-content: start;
@@ -1425,7 +1307,7 @@
 	margin-bottom: 16px;
 }
 
-.form-checkbox-label {
+.apirocket-form-checkbox-label {
 	flex: 0 1 auto;
 	display: block;
 	font-size: 14px;
@@ -1435,13 +1317,14 @@
 	cursor: pointer;
 }
 
-.form-checkbox-label small {
+.apirocket-form-checkbox-label small {
 	display: block;
 	color: #a3a3a3;
 	font-size: 12px;
 }
 
-.form-checkbox input {
+.apirocket-form-checkbox input {
+	all: unset;
 	flex: 0 0 auto;
 	appearance: none;
 	-moz-appearance: none;
@@ -1464,20 +1347,20 @@
 	background-color: #fff;
 }
 
-.form-checkbox input:focus {
+.apirocket-form-checkbox input:focus {
 	border-color: #404040;
 	box-shadow: 0 0 0 1px #404040;
 }
 
-.form-checkbox input:checked {
+.apirocket-form-checkbox input:checked {
 	background-color: #404040;
 	border-color: #404040;
 }
 
-.form-checkbox input:disabled { background-color: #f5f5f5; }
-.form-checkbox input:disabled + .form-checkbox-label { color: #a3a3a3; }
+.apirocket-form-checkbox input:disabled { background-color: #f5f5f5; }
+.apirocket-form-checkbox input:disabled + .apirocket-form-checkbox-label { color: #a3a3a3; }
 
-.form-checkbox input::after {
+.apirocket-form-checkbox input::after {
 	display: block;
 	position: absolute;
 	width: 20px;
@@ -1490,11 +1373,11 @@
 	transform: scale(0);
 }
 
-.form-checkbox input:checked::after {
+.apirocket-form-checkbox input:checked::after {
 	transform: scale(1);
 }
 
-.form-checkbox-error-message {
+.apirocket-form-checkbox-error-message {
 	display: none;
 	position: absolute;
 	left: 32px;
@@ -1504,17 +1387,14 @@
 	color: #dc2626;
 }
 
-.form-checkbox.invalid.touched input {
+.apirocket-form-checkbox.invalid.touched input {
 	border-color: #dc2626;
 	box-shadow: 0 0 0 1px #dc2626;
 }
 
-.form-checkbox.invalid.touched .form-checkbox-error-message { display: block; }
-
-
+.apirocket-form-checkbox.invalid.touched .apirocket-form-checkbox-error-message { display: block; }
 
-
-.form-radio {
+.apirocket-form-radio {
 	display: flex;
 	align-items: flex-start;
 	justify-content: start;
@@ -1522,7 +1402,7 @@
 	margin-bottom: 16px;
 }
 
-.form-radio-label {
+.apirocket-form-radio-label {
 	position: relative;
 	flex: 0 1 auto;
 	display: inline-block;
@@ -1533,20 +1413,20 @@
 	cursor: pointer;
 }
 
-.form-radio-label small {
+.apirocket-form-radio-label small {
 	display: block;
 	color: #a3a3a3;
 	font-size: 12px;
 }
 
-.form-radio input:checked ~ .form-radio-label { font-weight: bold; }
-.form-radio input:checked ~ .form-radio-label small { font-weight: normal; }
+.apirocket-form-radio input:checked ~ .apirocket-form-radio-label { font-weight: bold; }
+.apirocket-form-radio input:checked ~ .apirocket-form-radio-label small { font-weight: normal; }
 
-.form-radio input:disabled { background-color: #f5f5f5; }
-.form-radio input:disabled + .form-radio-label { color: #a3a3a3; }
+.apirocket-form-radio input:disabled { background-color: #f5f5f5; }
+.apirocket-form-radio input:disabled + .apirocket-form-radio-label { color: #a3a3a3; }
 
-.form-radio-label img,
-.form-radio-label svg {
+.apirocket-form-radio-label img,
+.apirocket-form-radio-label svg {
 	position: absolute;
 	display: inline-block;
 	height: 24px;
@@ -1554,7 +1434,7 @@
 	top: -2px;
 }
 
-.form-radio input {
+.apirocket-form-radio input {
 	flex: 0 0 auto;
 	appearance: none;
 	-moz-appearance: none;
@@ -1577,17 +1457,17 @@
 	background-color: #fff;
 }
 
-.form-radio input:focus {
+.apirocket-form-radio input:focus {
 	border-color: #404040;
 	box-shadow: 0 0 0 1px #404040;
 }
 
-.form-radio input:checked {
+.apirocket-form-radio input:checked {
 	background-color: #404040;
 	border-color: #404040;
 }
 
-.form-radio input::after {
+.apirocket-form-radio input::after {
 	display: block;
 	position: absolute;
 	width: 20px;
@@ -1600,11 +1480,11 @@
 	transform: scale(0);
 }
 
-.form-radio input:checked::after {
+.apirocket-form-radio input:checked::after {
 	transform: scale(1);
 }
 
-.form-radio-error-message {
+.apirocket-form-radio-error-message {
 	display: none;
 	position: absolute;
 	left: 32px;
@@ -1614,23 +1494,21 @@
 	color: #dc2626;
 }
 
-.form-radio.invalid.touched input {
+.apirocket-form-radio.invalid.touched input {
 	border-color: #dc2626;
 	box-shadow: 0 0 0 1px #dc2626;
 }
 
-.form-radio.invalid.touched .form-radio-error-message { display: block; }
-
-
+.apirocket-form-radio.invalid.touched .apirocket-form-radio-error-message { display: block; }
 
-
-.form-select {
+.apirocket-form-select {
 	display: block;
 	position: relative;
 	margin-bottom: 16px;
 }
 
-.form-select select {
+.apirocket-form-select select {
+	all: unset;
 	appearance: none;
 	-moz-appearance: none;
 	-webkit-appearance: none;	
@@ -1650,19 +1528,19 @@
 	cursor: pointer;
 }
 
-.form-select select:focus {
+.apirocket-form-select select:focus {
 	border-color: #404040;
 	box-shadow: 0 0 0 1px #404040;
 }
 
-.form-select select:not(:placeholder-shown) {
+.apirocket-form-select select:not(:placeholder-shown) {
 	padding-top: 22px;
 	padding-bottom: 6px;
 }
 
-.form-select select:disabled { background-color: #f5f5f5; color: #404040; opacity: 0.8; }
+.apirocket-form-select select:disabled { background-color: #f5f5f5; color: #404040; opacity: 0.8; }
 
-.form-select::before {
+.apirocket-form-select::before {
 	display: block;
 	position: absolute;
 	top: 8px;
@@ -1677,7 +1555,7 @@
 	pointer-events: none;
 }
 
-.form-select-placeholder {
+.apirocket-form-select-placeholder {
 	position: absolute;
 	font-size: 12px;
 	line-height: 1;
@@ -1692,12 +1570,12 @@
 	text-overflow: ellipsis;
 }
 
-.form-select select:not(:placeholder-shown) ~ span.form-select-placeholder {
+.apirocket-form-select select:not(:placeholder-shown) ~ span.apirocket-form-select-placeholder {
 	opacity: 1;
 	transform: translateY(0%);
 }
 
-.form-select .form-select-error-message {
+.apirocket-form-select .apirocket-form-select-error-message {
 	display: none;
 	font-size: 14px;
 	line-height: 1.2;
@@ -1706,11 +1584,205 @@
 	color: #dc2626;
 }
 
-.form-select.invalid.touched select {
+.apirocket-form-select.invalid.touched select {
 	border-color: #dc2626;
 	box-shadow: 0 0 0 1px #dc2626;
 }
 
-.form-select.invalid.touched .form-select-placeholder { color: #dc2626; }
-.form-select.invalid.touched .form-select-error-message { display: block; }
+.apirocket-form-select.invalid.touched .apirocket-form-select-placeholder { color: #dc2626; }
+.apirocket-form-select.invalid.touched .apirocket-form-select-error-message { display: block; }
+
 
+.apirocket-button, 
+button.apirocket-button {
+	box-sizing: border-box !important;
+	display: block;
+	width: 100%;
+	padding: var(--cart-button-padding-y, 16px) var(--cart-button-padding-x, 16px);
+	margin: 0px;
+	border-radius: var(--cart-button-border-radius, 4px);
+	background-color: var(--cart-button-background-color, transparent);
+	border: 1px solid var(--cart-button-border-color, #e5e5e5);
+	color: var(--cart-button-font-color, #737373);
+	line-height: 1;
+	font-size: var(--cart-button-font-size, 16px);
+	font-weight: var(--cart-button-font-weight, normal);
+	text-align: center;
+	transition-property: color, border-color, background-color, box-shadow;
+	transition-timing-function: ease;
+	transition-duration: 350ms;
+	cursor: pointer;
+}
+
+.apirocket-button:hover {
+	background-color: var(--cart-button-background-color-hover, transparent);
+	border-color: var(--cart-button-border-color-hover, #404040);
+	color: var(--cart-button-font-color-hover, #404040);
+}
+
+.apirocket-button:focus { 
+	outline: none;
+	text-decoration: underline;
+}
+
+.apirocket-button-link,
+button.apirocket-button-link {
+	display: flex;
+	align-items: center;
+	text-align: left;
+	justify-content: flex-start;
+	align-items: center;
+	border: none;
+	padding-left: 0;
+	padding-right: 0;
+	width: auto;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.apirocket-button-link span {
+	margin-left: 16px;
+	margin-right: 16px;
+}
+
+.apirocket-button-primary,
+button.apirocket-button-primary {
+	background-color: var(--cart-button-primary-background-color, #1d4ed8);
+	border-color: var(--cart-button-primary-border-color, #1d4ed8);
+	color: var(--cart-button-primary-text-color, #fff);
+}
+
+button.apirocket-button-primary:disabled {
+	background-color: #eee;
+	border-color: #eee;
+	color: #ccc;
+}
+
+.apirocket-button-primary:hover {
+	background-color: var(--cart-button-primary-background-color-hover, #1d4ed8);
+	border-color: var(--cart-button-primary-border-color-hover, #1d4ed8);
+	color: var(--cart-button-primary-text-color-hover, #fff);
+	box-shadow: var(--cart-shadow-button-primary-hover, none);
+}
+
+@media (max-width: 720px) {
+
+	.apirocket-button-link { 
+		width: 100%;
+		justify-content: center;
+	}
+
+}.apirocket-summary {}
+
+.apirocket-summary-top {
+	margin-top: 56px;
+	margin-bottom: 32px;
+}
+
+.apirocket-summary-header {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;	
+	margin-bottom: 32px;
+}
+
+.apirocket-summary-header-icon {
+	flex: 0 1;	
+	margin-right: 16px;
+}
+
+.apirocket-summary-header-content {}
+
+.apirocket-summary-header-title {
+	font-size: 24px;
+	font-weight: bold;
+	line-height: 1.2;
+	color: #404040;
+	margin-bottom: 4px;
+}
+
+.apirocket-summary-header-subtitle {
+	font-size: 18px;
+	font-weight: normal;
+	line-height: 1.2;
+	color: #737373;
+}
+
+.apirocket-summary-section {
+	margin-top: 16px;
+	border: 1px solid #d9d9d9;
+	border-radius: 4px;
+	padding: 24px;
+}
+
+.apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
+.apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
+
+.apirocket-summary-section-title {
+	font-size: 18px;
+	font-weight: bold;
+	line-height: 1.2;
+	color: #404040;
+	margin-bottom: 24px;
+}
+
+.apirocket-summary-section-subtitle {
+	font-size: 16px;
+	font-weight: bold;
+	line-height: 1;
+	color: #404040;
+	margin-bottom: 16px;
+}
+
+.apirocket-summary-section-text {
+	font-size: 14px;
+	font-weight: normal;
+	line-height: 18px;
+	color: #404040;
+}
+
+.apirocket-summary-help {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;	
+}
+
+.apirocket-summary-help-icon { 
+	flex: 0 1;
+	padding-right: 12px;
+}
+
+.apirocket-summary-help-content {
+	font-size: 14px;
+	font-weight: normal;
+	line-height: 1.2;
+	color: #404040;
+}
+
+.apirocket-summary-help-content a {
+	display: block;
+	color: #737373;
+}
+
+@media (max-width: 1000px) {
+	.apirocket-summary-top { display: none; }
+	.apirocket-summary-header { margin-top: 32px; }
+}
+
+@media (max-width: 720px) {	
+	.apirocket-summary-section-subtitle { margin-top: 24px; }
+	.apirocket-summary-header { 
+		flex-direction: column;
+		align-items: center;
+		text-align: center; 
+	}
+	.apirocket-summary-header-icon {
+		margin-right: 0px;
+		margin-bottom: 16px;
+	}
+	.apirocket-summary-header-title { 
+		font-size: 28px;
+		margin-bottom: 8px;
+	}
+}.spinner.svelte-15qwtf3.svelte-15qwtf3{animation:svelte-15qwtf3-rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner.svelte-15qwtf3 .path.svelte-15qwtf3{stroke:rgb(161, 161, 170);stroke-linecap:round;animation:svelte-15qwtf3-dash 1.5s ease-in-out infinite}@keyframes svelte-15qwtf3-rotate{100%{transform:rotate(360deg)}}@keyframes svelte-15qwtf3-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}