apirocket 0.4.2 → 0.5.0

package/dist/ecommerce.css

@@ -392,948 +392,534 @@
 
 	.apirocket-cart-header-continue { display: none; }
 	.apirocket-cart-header-login { display: none; }		
-}.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-checkout * { box-sizing: content-box; }
 
-.apirocket-summary-header-icon {
-	flex: 0 1;	
-	margin-right: 16px;
+.apirocket-checkout {
+	display: block;
+	position: fixed;
+	z-index: 10000;
+	right: 0;
+	top: 0;
+	overflow: hidden;
+	overflow-y: auto;
+	width: 100%;
+	height: 100vh;
+	font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
+	background-color: #fff;
 }
 
-.apirocket-summary-header-content {}
+.apirocket-checkout-wrap {
+	display: flex;
+	margin: 0 auto;
+	width: 90%;
+	min-height: 100%;
+	max-width: 1100px;
+	padding: 0 5%;
 
-.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-checkout-main {
+	order: 1;
+	width: 52%;
+	padding-right: 48px;
 }
 
-.apirocket-summary-section {
-	margin-top: 16px;
-	border: 1px solid #d9d9d9;
-	border-radius: 4px;
-	padding: 24px;
+.apirocket-checkout-summary {
+	order: 2;
+	position: relative;
+	width: 40%;
+	padding-left: 48px;
 }
 
-.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-checkout-summary::after {
+	position: absolute;
+	display: block;
+	top: 0;
+	left: 0;
+	content: "";
+	width: 300%;
+	height: 100%;
+	background: #f5f5f5;
+	z-index: -1;
 }
 
-.apirocket-summary-section-subtitle {
+.apirocket-checkout-continue {
+	display: flex;
+	align-items: center;
+	text-align: left;
+	margin-top: 40px;
+	margin-bottom: 40px;
+	color: #737373;
 	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;
+	cursor: pointer;
 }
 
-.apirocket-summary-help {
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;	
+.apirocket-checkout-close {
+	display: none;
+	cursor: pointer;
+	position: absolute;
+	top: 16px;
+	right: 32px;
 }
 
-.apirocket-summary-help-icon { 
-	flex: 0 1;
-	padding-right: 12px;
+.apirocket-checkout-summary-container {
+	display: flex;
+	flex-flow: column;
+	max-height: calc(100vh - 5%);
+	overflow: hidden;
 }
 
-.apirocket-summary-help-content {
-	font-size: 14px;
-	font-weight: normal;
-	line-height: 1.2;
-	color: #404040;
+.apirocket-checkout-summary-top {
+	flex: 0 0 auto;
 }
 
-.apirocket-summary-help-content a {
-	display: block;
-	color: #737373;
+.apirocket-checkout-summary-content {
+	flex: 1 1 auto;
+	overflow-y: scroll;
 }
 
-@media (max-width: 1000px) {
-	.apirocket-summary-top { display: none; }
-	.apirocket-summary-header { margin-top: 32px; }
+.apirocket-checkout-summary-footer {
+	flex: 0 0 auto;
 }
 
-@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;
-	}
-}.apirocket-modal *,
-.apirocket-modal *::before,
-.apirocket-modal *::after { box-sizing: border-box; }
-
-.apirocket-modal {
+.apirocket-checkout-summary-login {
 	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-	position: fixed;
-	z-index: 10001;
-	right: 0;
-	top: 0;
-	overflow: hidden;
-	overflow-y: auto;
-	width: 100%;
-	height: 100vh;
-	font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
-	background-color: #f5f5f5;	
+	align-items: center;
+	justify-content: end;
+	text-align: right;
+	margin-top: 40px;
+	margin-bottom: 40px;
+	color: #737373;
+	font-size: 16px;
+	font-weight: normal;
+	cursor: pointer;
 }
 
-.apirocket-modal-nav {
-	position: absolute;
+.apirocket-checkout-summary-login svg,
+.apirocket-checkout-continue svg { margin-right: 16px; }
+
+.apirocket-checkout-summary-header {
 	display: flex;
+	justify-content: space-between;
 	align-items: center;
-	width: 90%;
-	max-width: 1100px;
-	height: 96px;
+	margin-top: 56px;
+	margin-bottom: 48px;
 }
 
-.apirocket-modal-nav-button {
-	display: flex;
-	align-items: center;
-	text-align: left;
-	color: #737373;
-	font-size: 16px;
+.apirocket-checkout-summary-header :last-child a {
+	font-size: 14px;
 	font-weight: normal;
-	cursor: pointer;	
+	color: #737373;
 }
 
-.apirocket-modal-nav-button svg { margin-right: 16px; } 
-
-.apirocket-modal-content {
+.apirocket-checkout-summary-item {
 	display: flex;
-	flex-flow: column;
-	width: 480px;
-	height: auto;
-	padding: 32px;
-	background-color: #fff;
-	margin-top: 96px;
-	margin-bottom: 32px;
+	justify-content: stretch;
+	align-items: flex-start;
+	padding-bottom: 16px;
+	border-bottom: 1px solid #d9d9d9;
+	margin-bottom: 16px;
 }
 
-.apirocket-modal-header {
-	position: relative;
-	padding-bottom: 32px;
+.apirocket-checkout-summary-item-col-image {
+	flex: 0 0 auto;
+	max-width: 100px;
+	border: 1px solid #e5e5e5;
+	border-radius: 4px;
+	overflow: hidden;
 }
 
-.apirocket-modal-title {
-	font-size: 18px;
+.apirocket-checkout-summary-item-col-image img {
+	display: block;
+	max-width: 100%;
+	max-height: 100px;
+}
+
+.apirocket-checkout-summary-item-col-description {
+	flex: 1 1 auto;
+	padding-left: 16px;
+	padding-right: 8px;
+	font-size: 14px;
 	font-weight: bold;
-	line-height: 1;
-	color: #404040;
-	margin-bottom: 8px;
+	line-height: 18px;
 }
 
-.apirocket-modal-subtitle {
+.apirocket-checkout-summary-item-col-description small {
+	display: block;
 	font-size: 14px;
 	font-weight: normal;
-	line-height: 16px;
-	color: #737373;
+	color: #a3a3a3;
 }
 
-.apirocket-modal-close {
-	position: absolute;
-	right: -16px;
-	top: -16px;
+.apirocket-checkout-summary-item-col-quantity {
+	flex: 0 0 50px;
+	font-size: 16px;
+	font-weight: normal;
+	color: #a3a3a3;	
+	text-align: right;
 }
 
-.apirocket-modal-close-icon {
-	height: var(--cart-header-text-close-icon-size, 24px);
-	width: var(--cart-header-text-close-icon-size, 24px);
-	color: var(--cart-header-text-close-icon-color, #a3a3a3);
-	cursor: pointer;
+.apirocket-checkout-summary-item-col-price {
+	flex: 0 0 100px;
+	font-size: 16px;
+	font-weight: bold;
+	color: #404040;		
+	text-align: right;
 }
 
-.apirocket-modal-body-text-password {
+.apirocket-checkout-summary-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: 16px;
+}
+
+.apirocket-checkout-summary-label {
+	font-size: 16px;
+	font-weight: normal;
+	line-height: 18px;
+	color: #404040;
+}
+
+.apirocket-checkout-summary-value {
+	font-size: 18px;
+	font-weight: bold;
+	line-height: 18px;
+	color: #404040;	
+}
+
+.apirocket-checkout-summary-row-total {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	border-top: 1px solid #d9d9d9;
+	margin-top: 24px;
+	padding-top: 24px;
+}
+
+.apirocket-checkout-summary-label-total {
+	font-size: 18px;
+	font-weight: bold;
+	line-height: 21px;
 	color: #404040;
+}
+.apirocket-checkout-summary-label-total small {
+	display: block;
 	font-size: 14px;
-	font-weight: normal;
 	line-height: 16px;
-	margin-top: -8px;text-align: right;
-	cursor: pointer;
+	font-weight: normal;
+	color: #a3a3a3;
 }
 
-.apirocket-modal-body-text-password:hover { text-decoration: underline; }
+.apirocket-checkout-summary-value-total {
+	font-size: 24px;
+	font-weight: bold;
+	line-height: 24px;
+	color: #404040;	
+}
 
-.apirocket-modal-footer-text {
+.apirocket-checkout-breadcrumbs ol {
+	display: flex;
+	align-items: center;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	margin-top: 24px;
+}
+
+.apirocket-checkout-breadcrumbs ol li {
+	cursor: pointer;
 	color: #a3a3a3;
 	font-size: 14px;
-	font-weight: normal;
-	line-height: 16px;
-	text-align: center;
-	margin-top: 16px;
+	line-height: 1;
 }
 
-.apirocket-modal-footer-text span { 
-	color: #404040; 
-	cursor: pointer;
+.apirocket-checkout-breadcrumbs ol li::after {
+	width: 5px;
+	height: 9px;
+	display: inline-block;
+	content: "";
+	background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M1.164.2a.682.682 0 00-.964.964l3.154 3.154L.2 7.472a.682.682 0 10.964.965L4.8 4.8a.682.682 0 000-.964L1.164.2z' fill='%23A3A3A3'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: center;
+	padding: 0 8px;
 }
 
-.apirocket-modal-footer-text span:hover { text-decoration: underline; }
+.apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
 
+.apirocket-checkout-breadcrumbs ol li a {
+	color: #a3a3a3;
+	text-decoration: underline;
+}
 
-.apirocket-modal-body {}
+.apirocket-checkout-breadcrumbs-active {
+	font-weight: bold;
+	color: #404040 !important;
+}
 
-.apirocket-modal-footer {
-	padding-top: 32px;
+.apirocket-checkout-steps-summary {
+	border: 1px solid #d9d9d9;
+	border-radius: 4px;
+	overflow: hidden;
+	margin-top: 48px;
 }
 
-.apirocket-modal-row {
+.apirocket-checkout-steps-summary-row {
 	display: flex;
-	justify-content: space-between;
-	align-items: flex-start;
+	position: relative;
+	border-bottom: 1px solid #d9d9d9;
+	padding: 16px;
 }
 
-.apirocket-modal-row > * {
-	flex: 1 1;
-	margin-right: 16px;
+.apirocket-checkout-steps-summary-label {
+	flex: 0 0 90px;
+	font-size: 14px;
+	font-weight: normal;
+	line-height: 14px;	
+	color: #a3a3a3;
 }
 
-.apirocket-modal-row > *:last-child { margin-right: 0; }
-
-
-@media (max-width: 720px) {
-	.apirocket-modal-row { display: block; }
-	.apirocket-modal-row > * { margin-right: 0; }
-
-	.apirocket-modal-nav { display: none; }
-
-	.apirocket-modal-content {
-		width: 95%;
-		margin-top: 32px;
-		padding: 24px;
-	}
-
-	.apirocket-modal-close {
-		right: -8px;
-		top: -8px;
-	}	
+.apirocket-checkout-steps-summary-text {
+	flex: 1 1 auto;
+	font-size: 14px;
+	font-weight: normal;
+	line-height: 18px;
+	color: #404040;
 }
 
-.apirocket-modal-messaje {
-	margin-top: 32px;
-	margin-bottom: 32px;
-	text-align: center;
+.apirocket-checkout-steps-summary-link {
+	flex: 0 0 60px;
+	text-align: right;
+	font-size: 12px;
+	font-weight: normal;
+	line-height: 1;
+	text-decoration: underline;
+	color: #737373;
+	cursor: pointer;
 }
 
-.apirocket-modal-message-icon {
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	width: 48px;
-	height: 48px;
-	border-radius: 24px;
-	margin: auto;
-	margin-bottom: 32px;
+.apirocket-checkout-section {
+	margin-top: 48px;
 }
 
-.apirocket-modal-message-icon-ok {
-	background-color: #d1fae5;
-	color: #10b981;
+.apirocket-checkout-section-header {
+	margin-bottom: 24px;
 }
 
-.apirocket-modal-message-title {
+.apirocket-checkout-section-title {
 	font-size: 18px;
 	font-weight: bold;
 	line-height: 1;
-	text-align: center;
 	color: #404040;
-	margin-bottom: 16px;	
 }
 
-.apirocket-modal-message-text {
-	color: #737373;
-	font-size: 14px;
+.apirocket-checkout-section-subtitle {
+	font-size: 12px;
 	font-weight: normal;
-	text-align: center;
-	line-height: 16px;
-	margin-bottom: 32px;
-}
-.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);
+	padding-top: 4px;
 	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;
+	color: #a3a3a3;
+	text-align: right;
+}
+
+.apirocket-checkout-button-edit {
 	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-checkout-button-edit:hover {
+	text-decoration: underline;
 }
 
-.apirocket-button:focus { 
+.apirocket-checkout-section a {
+	color: #404040;
 	outline: none;
 	text-decoration: underline;
 }
-/* 
-.apirocket-button-loading {
-	position: relative;
-}  */
 
-.apirocket-button-wraper {
-	position: relative;
-	display: inline-block;
-	width: 32px;
+.apirocket-checkout-section-text {
+	font-size: 14px;
+	line-height: 1;
+	margin-top: 4px;
+	color: #737373;
 }
 
-.apirocket-button-spinner {
-	position: absolute;
-	width: 22px;
-	height: 22px;
-	top: -11px;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	margin: auto;
-	border: 4px solid currentColor;
-	border-top-color: transparent !important;
-	border-radius: 50%;
-	animation: button-loading-spinner 1s ease infinite;
+.apirocket-checkout-actions {
+	display: flex;
+	margin-top: 64px;
+	align-items: center;
+	max-width: 100%;
 }
 
-@keyframes button-loading-spinner {
-	from { transform: rotate(0turn) }
-	to { transform: rotate(1turn) }
+.apirocket-checkout-actions > * { flex: 1 1; }
+
+.apirocket-checkout-footer {
+	margin-top: 72px;
+	border-top: 1px solid #d9d9d9;
+	margin-bottom: 64px;
+	padding-top: 16px;
 }
 
-.apirocket-button-link,
-button.apirocket-button-link {
+.apirocket-checkout-footer ul {
 	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;
+	list-style: none;
+	padding: 0;
+	margin: 0;
 }
 
-.apirocket-button-link span {
-	margin-left: 16px;
-	margin-right: 16px;
-}
+.apirocket-checkout-footer ul li { 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);
+.apirocket-checkout-footer ul li a {
+	color: #404040;
+	font-size: 14px;
+	line-height: 1;
+	text-decoration: none;
 }
 
-button.apirocket-button-primary:disabled {
-	background-color: #eee;
-	border-color: #eee;
-	color: #ccc;
+.apirocket-checkout-footer ul li a:focus {
+	outline: none;
+	text-decoration: underline;
 }
 
-.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);
+.apircoket-checkout-legal {
+	margin-top: 16px;
+	font-size: 14px;
+	color: #737373;
+	font-weight: normal;
+	line-height: 1.4;
 }
 
-
-@media (max-width: 720px) {
-
-	.apirocket-button-link { 
-		width: 100%;
-		justify-content: center;
-	}
-
+.apircoket-checkout-legal a {
+	text-decoration: underline;
+	color: #404040;
 }
 
-.apirocket-checkout * { box-sizing: content-box; }
-
-.apirocket-checkout {
+.apirocket-checkout-logo img {
 	display: block;
-	position: fixed;
-	z-index: 10000;
-	right: 0;
-	top: 0;
-	overflow: hidden;
-	overflow-y: auto;
-	width: 100%;
-	height: 100vh;
-	font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
-	background-color: #fff;
+	max-height: 80px;
 }
 
-.apirocket-checkout-wrap {
-	display: flex;
-	margin: 0 auto;
-	width: 90%;
-	min-height: 100%;
-	max-width: 1100px;
-	padding: 0 5%;
+.apirocket-checkout-mobile { display: none; }
 
+.apirocket-checkout-mobile .apirocket-checkout-logo {
+	display: block;
+	margin-top: 16px;
+	margin-bottom: 16px;
 }
-
-.apirocket-checkout-main {
-	order: 1;
-	width: 52%;
-	padding-right: 48px;
+.apirocket-checkout-mobile .apirocket-checkout-logo img {
+	display: block;
+	margin: auto;
+	max-height: 80px;
 }
 
-.apirocket-checkout-summary {
-	order: 2;
-	position: relative;
-	width: 40%;
-	padding-left: 48px;
+.apirocket-checkout-mobile-menu {
+	background-color: #f5f5f5;
+	border-top: 1px solid #d9d9d9;
 }
 
-.apirocket-checkout-summary::after {
-	position: absolute;
-	display: block;
-	top: 0;
-	left: 0;
-	content: "";
-	width: 300%;
-	height: 100%;
-	background: #f5f5f5;
-	z-index: -1;
+.apirocket-checkout-mobile-wrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 90%;
+	max-width: 560px;
+	margin: 0 auto;
+	padding: 16px 0px;
+	color: #404040;
 }
 
-.apirocket-checkout-continue {
-	display: flex;
+.apirocket-checkout-mobile-wrapper-cart {
+	display: inline-flex;
 	align-items: center;
-	text-align: left;
-	margin-top: 40px;
-	margin-bottom: 40px;
-	color: #737373;
-	font-size: 16px;
-	font-weight: normal;
+	color: #404040;
 	cursor: pointer;
 }
 
-.apirocket-checkout-close {
-	display: none;
-	cursor: pointer;
-	position: absolute;
-	top: 16px;
-	right: 32px;
+.apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
+
+.apirocket-checkout-mobile-wrapper-total {
+	line-height: 20px;
+	font-size: 20px;
+	font-weight: bold;
 }
 
-.apirocket-checkout-summary-container {
-	display: flex;
-	flex-flow: column;
-	max-height: calc(100vh - 5%);
+.apirocket-checkout-mobile-summary { 
+	background-color: #f5f5f5;
+	transition-property: max-height;
+	transition-timing-function: ease-in;
+	transition-duration: 350ms;	
+	max-height: 0px;
 	overflow: hidden;
+	border-bottom: 1px solid #d9d9d9;
 }
 
-.apirocket-checkout-summary-top {
-	flex: 0 0 auto;
+.apirocket-checkout-mobile-summary--show {
+	max-height: 1000px;
+	overflow: auto;
 }
 
-.apirocket-checkout-summary-content {
-	flex: 1 1 auto;
-	overflow-y: scroll;
+.apirocket-checkout-mobile-summary-wrapper {
+	width: 90%; 
+	max-width: 560px; 
+	padding: 16px 0px;
+	margin: 0 auto;
 }
 
-.apirocket-checkout-summary-footer {
-	flex: 0 0 auto;
-}
 
-.apirocket-checkout-summary-login {
-	display: flex;
-	align-items: center;
-	justify-content: end;
-	text-align: right;
-	margin-top: 40px;
-	margin-bottom: 40px;
-	color: #737373;
-	font-size: 16px;
-	font-weight: normal;
-	cursor: pointer;
-}
 
-.apirocket-checkout-summary-login svg,
-.apirocket-checkout-continue svg { margin-right: 16px; }
+/* Utils */
 
-.apirocket-checkout-summary-header {
+.apirocket-checkout-row {
 	display: flex;
 	justify-content: space-between;
-	align-items: center;
-	margin-top: 56px;
-	margin-bottom: 48px;
+	align-items: flex-start;
+}
+.apirocket-checkout-row > * {
+	flex: 1 1;
+	margin-right: 16px;
 }
 
-.apirocket-checkout-summary-header :last-child a {
-	font-size: 14px;
-	font-weight: normal;
-	color: #737373;
+.apirocket-checkout-row > *:last-child { margin-right: 0; }
+
+.apirocket-checkout-fieldset {
+	border: 1px solid #d9d9d9;
+	border-radius: 4px;
+	overflow: hidden;
 }
 
-.apirocket-checkout-summary-item {
-	display: flex;
-	justify-content: stretch;
-	align-items: flex-start;
-	padding-bottom: 16px;
+.apirocket-checkout-fieldset > :last-child { border-bottom: none; }
+
+.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;
 	border-bottom: 1px solid #d9d9d9;
-	margin-bottom: 16px;
 }
-
-.apirocket-checkout-summary-item-col-image {
+.apirocket-checkout-fieldset-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+ }
+.apirocket-checkout-fieldset-row > * { flex: 1 1; margin-right: 16px; }
+.apirocket-checkout-fieldset-row > :first-child { flex: 1 1 auto;}
+.apirocket-checkout-fieldset-row > :last-child { 
 	flex: 0 0 auto;
-	max-width: 100px;
-	border: 1px solid #e5e5e5;
-	border-radius: 4px;
-	overflow: hidden;
+	margin-right: 0px;
+	font-size: 16px;
+	font-weight: bold;
+	line-height: 20px;
+	color: #404040;
 }
 
-.apirocket-checkout-summary-item-col-image img {
+.apirocket-checkout-fieldset-row > :last-child img { 
 	display: block;
-	max-width: 100%;
-	max-height: 100px;
-}
-
-.apirocket-checkout-summary-item-col-description {
-	flex: 1 1 auto;
-	padding-left: 16px;
-	padding-right: 8px;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 18px;
-}
-
-.apirocket-checkout-summary-item-col-description small {
-	display: block;
-	font-size: 14px;
-	font-weight: normal;
-	color: #a3a3a3;
-}
-
-.apirocket-checkout-summary-item-col-quantity {
-	flex: 0 0 50px;
-	font-size: 16px;
-	font-weight: normal;
-	color: #a3a3a3;	
-	text-align: right;
-}
-
-.apirocket-checkout-summary-item-col-price {
-	flex: 0 0 100px;
-	font-size: 16px;
-	font-weight: bold;
-	color: #404040;		
-	text-align: right;
-}
-
-.apirocket-checkout-summary-row {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding-top: 16px;
-}
-
-.apirocket-checkout-summary-label {
-	font-size: 16px;
-	font-weight: normal;
-	line-height: 18px;
-	color: #404040;
-}
-
-.apirocket-checkout-summary-value {
-	font-size: 18px;
-	font-weight: bold;
-	line-height: 18px;
-	color: #404040;	
-}
-
-.apirocket-checkout-summary-row-total {
-	display: flex;
-	justify-content: space-between;
-	align-items: flex-start;
-	border-top: 1px solid #d9d9d9;
-	margin-top: 24px;
-	padding-top: 24px;
-}
-
-.apirocket-checkout-summary-label-total {
-	font-size: 18px;
-	font-weight: bold;
-	line-height: 21px;
-	color: #404040;
-}
-.apirocket-checkout-summary-label-total small {
-	display: block;
-	font-size: 14px;
-	line-height: 16px;
-	font-weight: normal;
-	color: #a3a3a3;
-}
-
-.apirocket-checkout-summary-value-total {
-	font-size: 24px;
-	font-weight: bold;
-	line-height: 24px;
-	color: #404040;	
-}
-
-.apirocket-checkout-breadcrumbs ol {
-	display: flex;
-	align-items: center;
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	margin-top: 24px;
-}
-
-.apirocket-checkout-breadcrumbs ol li {
-	cursor: pointer;
-	color: #a3a3a3;
-	font-size: 14px;
-	line-height: 1;
-}
-
-.apirocket-checkout-breadcrumbs ol li::after {
-	width: 5px;
-	height: 9px;
-	display: inline-block;
-	content: "";
-	background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9'%3E%3Cpath d='M1.164.2a.682.682 0 00-.964.964l3.154 3.154L.2 7.472a.682.682 0 10.964.965L4.8 4.8a.682.682 0 000-.964L1.164.2z' fill='%23A3A3A3'/%3E%3C/svg%3E");
-	background-repeat: no-repeat;
-	background-position: center;
-	padding: 0 8px;
-}
-
-.apirocket-checkout-breadcrumbs ol li:last-child::after { display: none; }
-
-.apirocket-checkout-breadcrumbs ol li a {
-	color: #a3a3a3;
-	text-decoration: underline;
-}
-
-.apirocket-checkout-breadcrumbs-active {
-	font-weight: bold;
-	color: #404040 !important;
-}
-
-.apirocket-checkout-steps-summary {
-	border: 1px solid #d9d9d9;
-	border-radius: 4px;
-	overflow: hidden;
-	margin-top: 48px;
-}
-
-.apirocket-checkout-steps-summary-row {
-	display: flex;
-	position: relative;
-	border-bottom: 1px solid #d9d9d9;
-	padding: 16px;
-}
-
-.apirocket-checkout-steps-summary-label {
-	flex: 0 0 90px;
-	font-size: 14px;
-	font-weight: normal;
-	line-height: 14px;	
-	color: #a3a3a3;
-}
-
-.apirocket-checkout-steps-summary-text {
-	flex: 1 1 auto;
-	font-size: 14px;
-	font-weight: normal;
-	line-height: 18px;
-	color: #404040;
-}
-
-.apirocket-checkout-steps-summary-link {
-	flex: 0 0 60px;
-	text-align: right;
-	font-size: 12px;
-	font-weight: normal;
-	line-height: 1;
-	text-decoration: underline;
-	color: #737373;
-	cursor: pointer;
-}
-
-.apirocket-checkout-section {
-	margin-top: 48px;
-}
-
-.apirocket-checkout-section-header {
-	margin-bottom: 24px;
-}
-
-.apirocket-checkout-section-title {
-	font-size: 18px;
-	font-weight: bold;
-	line-height: 1;
-	color: #404040;
-}
-
-.apirocket-checkout-section-subtitle {
-	font-size: 12px;
-	font-weight: normal;
-	padding-top: 4px;
-	line-height: 1;
-	color: #a3a3a3;
-	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;
-	text-decoration: underline;
-}
-
-.apirocket-checkout-section-text {
-	font-size: 14px;
-	line-height: 1;
-	margin-top: 4px;
-	color: #737373;
-}
-
-.apirocket-checkout-actions {
-	display: flex;
-	margin-top: 64px;
-	align-items: center;
-	max-width: 100%;
-}
-
-.apirocket-checkout-actions > * { flex: 1 1; }
-
-.apirocket-checkout-footer {
-	margin-top: 72px;
-	border-top: 1px solid #d9d9d9;
-	margin-bottom: 64px;
-	padding-top: 16px;
-}
-
-.apirocket-checkout-footer ul {
-	display: flex;
-	align-items: center;
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-
-.apirocket-checkout-footer ul li { margin-right: 16px; }
-
-.apirocket-checkout-footer ul li a {
-	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;
-	font-size: 14px;
-	color: #737373;
-	font-weight: normal;
-	line-height: 1.4;
-}
-
-.apircoket-checkout-legal a {
-	text-decoration: underline;
-	color: #404040;
-}
-
-.apirocket-checkout-logo img {
-	display: block;
-	max-height: 80px;
-}
-
-.apirocket-checkout-mobile { display: none; }
-
-.apirocket-checkout-mobile .apirocket-checkout-logo {
-	display: block;
-	margin-top: 16px;
-	margin-bottom: 16px;
-}
-.apirocket-checkout-mobile .apirocket-checkout-logo img {
-	display: block;
-	margin: auto;
-	max-height: 80px;
-}
-
-.apirocket-checkout-mobile-menu {
-	background-color: #f5f5f5;
-	border-top: 1px solid #d9d9d9;
-}
-
-.apirocket-checkout-mobile-wrapper {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 90%;
-	max-width: 560px;
-	margin: 0 auto;
-	padding: 16px 0px;
-	color: #404040;
-}
-
-.apirocket-checkout-mobile-wrapper-cart {
-	display: inline-flex;
-	align-items: center;
-	color: #404040;
-	cursor: pointer;
-}
-
-.apirocket-checkout-mobile-wrapper-cart svg { margin-right: 8px; }
-
-.apirocket-checkout-mobile-wrapper-total {
-	line-height: 20px;
-	font-size: 20px;
-	font-weight: bold;
-}
-
-.apirocket-checkout-mobile-summary { 
-	background-color: #f5f5f5;
-	transition-property: max-height;
-	transition-timing-function: ease-in;
-	transition-duration: 350ms;	
-	max-height: 0px;
-	overflow: hidden;
-	border-bottom: 1px solid #d9d9d9;
-}
-
-.apirocket-checkout-mobile-summary--show {
-	max-height: 1000px;
-	overflow: auto;
-}
-
-.apirocket-checkout-mobile-summary-wrapper {
-	width: 90%; 
-	max-width: 560px; 
-	padding: 16px 0px;
-	margin: 0 auto;
-}
-
-
-
-/* Utils */
-
-.apirocket-checkout-row {
-	display: flex;
-	justify-content: space-between;
-	align-items: flex-start;
-}
-.apirocket-checkout-row > * {
-	flex: 1 1;
-	margin-right: 16px;
-}
-
-.apirocket-checkout-row > *:last-child { margin-right: 0; }
-
-.apirocket-checkout-fieldset {
-	border: 1px solid #d9d9d9;
-	border-radius: 4px;
-	overflow: hidden;
-}
-
-.apirocket-checkout-fieldset > :last-child { border-bottom: none; }
-
-.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;
-	border-bottom: 1px solid #d9d9d9;
-}
-.apirocket-checkout-fieldset-row {
-	display: flex;
-	justify-content: space-between;
-	align-items: flex-start;
- }
-.apirocket-checkout-fieldset-row > * { flex: 1 1; margin-right: 16px; }
-.apirocket-checkout-fieldset-row > :first-child { flex: 1 1 auto;}
-.apirocket-checkout-fieldset-row > :last-child { 
-	flex: 0 0 auto;
-	margin-right: 0px;
-	font-size: 16px;
-	font-weight: bold;
-	line-height: 20px;
-	color: #404040;
-}
-
-.apirocket-checkout-fieldset-row > :last-child img { 
-	display: block;
-	max-height: 24px; 
+	max-height: 24px; 
 }
 
 .apirocket-checkout-fieldset-row-wrapper {
@@ -1495,245 +1081,489 @@ button.apirocket-button-primary:disabled {
 }
 
 
-.apirocket-tabs {
+
+.apirocket-summary {}
+
+.apirocket-summary-top {
+	margin-top: 56px;
+	margin-bottom: 32px;
+}
+
+.apirocket-summary-header {
 	display: flex;
-	position: relative;
-	justify-content: center;
-	border-bottom: 1px solid #e5e5e5;
-	overflow-x: auto;
+	justify-content: flex-start;
+	align-items: center;	
+	margin-bottom: 32px;
 }
 
-.apirocket-tab {
+.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;
-	padding: 16px 24px 13px 24px;
+}
+
+.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;
-	border-bottom: 3px solid #fff;
-	cursor: pointer;
-	white-space: nowrap;
+	font-weight: bold;
+	line-height: 1;
+	color: #404040;
+	margin-bottom: 16px;
 }
 
-.apirocket-tab-active {
+.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;
+	}
+}
+.apirocket-modal *,
+.apirocket-modal *::before,
+.apirocket-modal *::after { box-sizing: border-box; }
+
+.apirocket-modal {
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+	position: fixed;
+	z-index: 10001;
+	right: 0;
+	top: 0;
+	overflow: hidden;
+	overflow-y: auto;
+	width: 100%;
+	height: 100vh;
+	font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
+	background-color: #f5f5f5;	
+}
+
+.apirocket-modal-nav {
+	position: absolute;
+	display: flex;
+	align-items: center;
+	width: 90%;
+	max-width: 1100px;
+	height: 96px;
+}
+
+.apirocket-modal-nav-button {
+	display: flex;
+	align-items: center;
+	text-align: left;
+	color: #737373;
+	font-size: 16px;
+	font-weight: normal;
+	cursor: pointer;	
+}
+
+.apirocket-modal-nav-button svg { margin-right: 16px; } 
+
+.apirocket-modal-content {
+	display: flex;
+	flex-flow: column;
+	width: 480px;
+	height: auto;
+	padding: 32px;
+	background-color: #fff;
+	margin-top: 96px;
+	margin-bottom: 32px;
+}
+
+.apirocket-modal-header {
+	position: relative;
+	padding-bottom: 32px;
+}
+
+.apirocket-modal-title {
+	font-size: 18px;
 	font-weight: bold;
-	border-bottom: 3px solid #404040;
+	line-height: 1;
+	color: #404040;
+	margin-bottom: 8px;
 }
 
-.apirocket-tab-menu {
+.apirocket-modal-subtitle {
+	font-size: 14px;
+	font-weight: normal;
+	line-height: 16px;
+	color: #737373;
+}
+
+.apirocket-modal-close {
 	position: absolute;
-	display: none;
-	right: 32px;
-	top: 16px;
+	right: -16px;
+	top: -16px;
+}
+
+.apirocket-modal-close-icon {
+	height: var(--cart-header-text-close-icon-size, 24px);
+	width: var(--cart-header-text-close-icon-size, 24px);
+	color: var(--cart-header-text-close-icon-color, #a3a3a3);
+	cursor: pointer;
+}
+
+.apirocket-modal-body-text-password {
 	color: #404040;
+	font-size: 14px;
+	font-weight: normal;
+	line-height: 16px;
+	margin-top: -8px;text-align: right;
+	cursor: pointer;
 }
 
-.apirocket-tab-panel { 
-	display: none; 
-	padding: 32px;
+.apirocket-modal-body-text-password:hover { text-decoration: underline; }
+
+.apirocket-modal-footer-text {
+	color: #a3a3a3;
+	font-size: 14px;
+	font-weight: normal;
+	line-height: 16px;
+	text-align: center;
+	margin-top: 16px;
+}
+
+.apirocket-modal-footer-text span { 
+	color: #404040; 
+	cursor: pointer;
+}
+
+.apirocket-modal-footer-text span:hover { text-decoration: underline; }
+
+
+.apirocket-modal-body {}
+
+.apirocket-modal-footer {
+	padding-top: 32px;
 }
 
-.apirocket-tab-panel-active {
-	display: block ;
+.apirocket-modal-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
 }
 
-.apirocket-tab-panel-max-with {
-	width: 100%;
-	max-width: 592px;
-	margin: auto;
+.apirocket-modal-row > * {
+	flex: 1 1;
+	margin-right: 16px;
 }
 
+.apirocket-modal-row > *:last-child { margin-right: 0; }
+
+
 @media (max-width: 720px) {
-	
-	.apirocket-tabs {
-		display: block;
-		padding-left: 32px;
-		padding-right: 32px;
-	}
+	.apirocket-modal-row { display: block; }
+	.apirocket-modal-row > * { margin-right: 0; }
 
-	
-	.apirocket-tab {
-		border-bottom-color: #fff;
-		padding-left: 0px;
-		padding-right: 0;
+	.apirocket-modal-nav { display: none; }
+
+	.apirocket-modal-content {
+		width: 95%;
+		margin-top: 32px;
+		padding: 24px;
 	}
 
-	.apirocket-tab:not(.apirocket-tab-active) { display: none; }
-	.apirocket-tabs.apirocket-tabs-menu-active .apirocket-tab { display: block;	}
-	.apirocket-tab-menu { display: block !important; }
+	.apirocket-modal-close {
+		right: -8px;
+		top: -8px;
+	}	
 }
-.apirocket-my-account * { box-sizing: content-box; }
 
-.apirocket-my-account {
-	position: fixed;
-	z-index: 10000;
-	right: 0;
-	top: 0;
-	overflow: hidden;
-	width: 100%;
-	height: 100vh;
-	font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
-	background-color: #fff;
+.apirocket-modal-messaje {
+	margin-top: 32px;
+	margin-bottom: 32px;
+	text-align: center;
 }
 
-.apirocket-my-account-content {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	height: 100%;
-	overflow: hidden;
+.apirocket-modal-message-icon {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	width: 48px;
+	height: 48px;
+	border-radius: 24px;
+	margin: auto;
+	margin-bottom: 32px;
 }
 
-
-.apirocket-my-account-header {
-	display: flex;
-	flex: none;
-	height: 96px;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0px 32px;
-	margin-bottom: 16px;
-	background-color: #f5f5f5;
+.apirocket-modal-message-icon-ok {
+	background-color: #d1fae5;
+	color: #10b981;
 }
 
-.apirocket-my-account-header-title {
+.apirocket-modal-message-title {
 	font-size: 18px;
-	font-weight: normal;
+	font-weight: bold;
+	line-height: 1;
+	text-align: center;
 	color: #404040;
+	margin-bottom: 16px;	
 }
 
-.apirocket-my-account-header-close-icon {
-	height: var(--cart-header-text-close-icon-size, 24px);
-	width: var(--cart-header-text-close-icon-size, 24px);
-	color: var(--cart-header-text-close-icon-color, #a3a3a3);
-	cursor: pointer;
-}
-
-.apirocket-my-account-header-continue {
-	display: none;
-	align-items: center;
-	text-align: left;
+.apirocket-modal-message-text {
 	color: #737373;
-	font-size: 16px;
+	font-size: 14px;
 	font-weight: normal;
-	cursor: pointer;
+	text-align: center;
+	line-height: 16px;
+	margin-bottom: 32px;
 }
 
-.apirocket-my-account-header-logout {
-	display: none;
-	align-items: center;
-	text-align: right;
-	color: #737373;
-	font-size: 16px;
-	font-weight: normal;
+.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-my-account-header-logout svg,
-.apirocket-my-account-header-continue svg { margin-right: 16px; }
+.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-loading {
+	position: relative;
+}  */
 
+.apirocket-button-wraper {
+	position: relative;
+	display: inline-block;
+	width: 32px;
+}
 
-.apirocket-my-account-body {
-	flex: 1 1;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	padding: 0px;
+.apirocket-button-spinner {
+	position: absolute;
+	width: 22px;
+	height: 22px;
+	top: -11px;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	margin: auto;
+	border: 4px solid currentColor;
+	border-top-color: transparent !important;
+	border-radius: 50%;
+	animation: button-loading-spinner 1s ease infinite;
 }
 
-.apirocket-my-account-body .apirocket-tabs { flex: none; }
+@keyframes button-loading-spinner {
+	from { transform: rotate(0turn) }
+	to { transform: rotate(1turn) }
+}
 
-.apirocket-my-account-body .apirocket-tabs-panels {
-	flex: 1 1;	
-	overflow-y: auto;
+.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-my-account-address {
-	border: 1px solid #d9d9d9;
-	padding: 16px 24px;
-	margin-bottom: 24px;
-	border-radius: 8px;
+.apirocket-button-link span {
+	margin-left: 16px;
+	margin-right: 16px;
 }
 
-.apirocket-my-account-address-head {
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: 16px;
-	font-size: 14px;
-	color: #404040;
-	font-weight: bold;
+.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);
 }
 
-.apirocket-my-account-address-content {
-	display: block;
-	font-size: 14px;
-	color: #737373;
-	font-weight: normal;
-	line-height: 1.5;	
-	margin-bottom: 24px;
+button.apirocket-button-primary:disabled {
+	background-color: #eee;
+	border-color: #eee;
+	color: #ccc;
 }
 
-.apirocket-my-account-address-content strong {
-	display: inline-block;
-	color: #404040; 
-	margin-bottom: 8px;
+.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);
 }
 
-.apirocket-my-account-address-content div:nth-child(2) {
-	margin-bottom: 8px;
+
+@media (max-width: 720px) {
+
+	.apirocket-button-link { 
+		width: 100%;
+		justify-content: center;
+	}
+
 }
 
-.apirocket-my-account-address-content > div { width: 100%; }
 
-.apirocket-my-account-address-footer {
+.apirocket-tabs {
 	display: flex;
-	justify-content: space-between;
-	font-size: 14px;
+	position: relative;
+	justify-content: center;
+	border-bottom: 1px solid #e5e5e5;
+	overflow-x: auto;
+}
+
+.apirocket-tab {
 	color: #737373;
-	font-weight: normal;
-	line-height: 1.5;
+	padding: 16px 24px 13px 24px;
+	font-size: 16px;
+	border-bottom: 3px solid #fff;
+	cursor: pointer;
+	white-space: nowrap;
 }
 
-.apirocket-my-account-address-footer > div {
-	text-decoration: underline;
-	cursor: pointer;	
+.apirocket-tab-active {
+	color: #404040;
+	font-weight: bold;
+	border-bottom: 3px solid #404040;
 }
 
-.apirocket-my-account-address-footer .apirocket-my-account-address-default {
-	display: inline-block;
-	background-color: #E4E4E7;
-	font-size: 12px;
-	color: #737373;
-	font-weight: normal;
-	line-height: 1;
-	text-decoration: none;
-	padding: 5px 12px;
-	border-radius: 6px;
+.apirocket-tab-menu {
+	position: absolute;
+	display: none;
+	right: 32px;
+	top: 16px;
+	color: #404040;
 }
 
+.apirocket-tab-panel { 
+	display: none; 
+	padding: 32px;
+}
 
+.apirocket-tab-panel-active {
+	display: block ;
+}
 
-@media (min-width: 720px) {
+.apirocket-tab-panel-max-with {
+	width: 100%;
+	max-width: 592px;
+	margin: auto;
+}
 
-	.apirocket-my-account-content {
-		width: 90%;
-		max-width: 980px;
-		margin: 0 auto;
+@media (max-width: 720px) {
+	
+	.apirocket-tabs {
+		display: block;
+		padding-left: 32px;
+		padding-right: 32px;
 	}
 
-	.apirocket-my-account-header {
-		height: 102px;
-		background-color: #fff;		
-		margin-bottom: 0px;
-	}	
-
-	.apirocket-my-account-header-continue { display: flex; }
-	.apirocket-my-account-header-logout { display: flex; }
-	.apirocket-my-account-header-close { display: none; }	
-}
+	
+	.apirocket-tab {
+		border-bottom-color: #fff;
+		padding-left: 0px;
+		padding-right: 0;
+	}
 
-@media (max-width: 720px) {
-	.apirocket-my-account-header-continue { display: none; }
-	.apirocket-my-account-header-login { display: none; }		
+	.apirocket-tab:not(.apirocket-tab-active) { display: none; }
+	.apirocket-tabs.apirocket-tabs-menu-active .apirocket-tab { display: block;	}
+	.apirocket-tab-menu { display: block !important; }
 }
 .apirocket-form-input {
 	display: block;
@@ -2124,6 +1954,7 @@ button.apirocket-button-primary:disabled {
 .apirocket-form-select.invalid.touched .apirocket-form-select-placeholder { color: #dc2626; }
 .apirocket-form-select.invalid.touched .apirocket-form-select-error-message { display: block; }
 
+
 .apirocket-error-block {
 	display: flex;
 	justify-content: start;
@@ -2140,4 +1971,182 @@ button.apirocket-button-primary:disabled {
 
 .apirocket-error-block-icon {
 	margin-right: 12px;
-}.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}}
+}
+
+.apirocket-my-account * { box-sizing: content-box; }
+
+.apirocket-my-account {
+	position: fixed;
+	z-index: 10000;
+	right: 0;
+	top: 0;
+	overflow: hidden;
+	width: 100%;
+	height: 100vh;
+	font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
+	background-color: #fff;
+}
+
+.apirocket-my-account-content {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	height: 100%;
+	overflow: hidden;
+}
+
+
+.apirocket-my-account-header {
+	display: flex;
+	flex: none;
+	height: 96px;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0px 32px;
+	margin-bottom: 16px;
+	background-color: #f5f5f5;
+}
+
+.apirocket-my-account-header-title {
+	font-size: 18px;
+	font-weight: normal;
+	color: #404040;
+}
+
+.apirocket-my-account-header-close-icon {
+	height: var(--cart-header-text-close-icon-size, 24px);
+	width: var(--cart-header-text-close-icon-size, 24px);
+	color: var(--cart-header-text-close-icon-color, #a3a3a3);
+	cursor: pointer;
+}
+
+.apirocket-my-account-header-continue {
+	display: none;
+	align-items: center;
+	text-align: left;
+	color: #737373;
+	font-size: 16px;
+	font-weight: normal;
+	cursor: pointer;
+}
+
+.apirocket-my-account-header-logout {
+	display: none;
+	align-items: center;
+	text-align: right;
+	color: #737373;
+	font-size: 16px;
+	font-weight: normal;
+	cursor: pointer;
+}
+
+.apirocket-my-account-header-logout svg,
+.apirocket-my-account-header-continue svg { margin-right: 16px; }
+
+
+
+.apirocket-my-account-body {
+	flex: 1 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	padding: 0px;
+}
+
+.apirocket-my-account-body .apirocket-tabs { flex: none; }
+
+.apirocket-my-account-body .apirocket-tabs-panels {
+	flex: 1 1;	
+	overflow-y: auto;
+}
+
+.apirocket-my-account-address {
+	border: 1px solid #d9d9d9;
+	padding: 16px 24px;
+	margin-bottom: 24px;
+	border-radius: 8px;
+}
+
+.apirocket-my-account-address-head {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 16px;
+	font-size: 14px;
+	color: #404040;
+	font-weight: bold;
+}
+
+.apirocket-my-account-address-content {
+	display: block;
+	font-size: 14px;
+	color: #737373;
+	font-weight: normal;
+	line-height: 1.5;	
+	margin-bottom: 24px;
+}
+
+.apirocket-my-account-address-content strong {
+	display: inline-block;
+	color: #404040; 
+	margin-bottom: 8px;
+}
+
+.apirocket-my-account-address-content div:nth-child(2) {
+	margin-bottom: 8px;
+}
+
+.apirocket-my-account-address-content > div { width: 100%; }
+
+.apirocket-my-account-address-footer {
+	display: flex;
+	justify-content: space-between;
+	font-size: 14px;
+	color: #737373;
+	font-weight: normal;
+	line-height: 1.5;
+}
+
+.apirocket-my-account-address-footer > div {
+	text-decoration: underline;
+	cursor: pointer;	
+}
+
+.apirocket-my-account-address-footer .apirocket-my-account-address-default {
+	display: inline-block;
+	background-color: #E4E4E7;
+	font-size: 12px;
+	color: #737373;
+	font-weight: normal;
+	line-height: 1;
+	text-decoration: none;
+	padding: 5px 12px;
+	border-radius: 6px;
+}
+
+
+
+@media (min-width: 720px) {
+
+	.apirocket-my-account-content {
+		width: 90%;
+		max-width: 980px;
+		margin: 0 auto;
+	}
+
+	.apirocket-my-account-header {
+		height: 102px;
+		background-color: #fff;		
+		margin-bottom: 0px;
+	}	
+
+	.apirocket-my-account-header-continue { display: flex; }
+	.apirocket-my-account-header-logout { display: flex; }
+	.apirocket-my-account-header-close { display: none; }	
+}
+
+@media (max-width: 720px) {
+	.apirocket-my-account-header-continue { display: none; }
+	.apirocket-my-account-header-login { display: none; }		
+}
+
+.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}}