fontdue-js 2.10.1 → 2.12.0

package/dist/fontdue.css

@@ -840,6 +840,10 @@ div[data-component=TypeTesters] {
   opacity: 0.5;
 }
 
+:root {
+  --section_spacing: 60px;
+}
+
 .character-viewer {
   --size: calc(var(--monitor-width) * 1 / 2);
   --half-gap: calc(var(--line-gap) / 2);
@@ -1133,19 +1137,34 @@ body[data-fontdue-store-modal=open] {
 
 @media (min-width: 900px) {
   .store-modal__cart__container {
+    display: flex;
+    min-height: 100%;
+  }
+}
+
+@media (min-width: 900px) {
+  .store-modal__cart__review {
+    padding-right: var(--StoreModalPageContainer-side-padding);
+    border-right: 1px solid var(--horizontal_rule_color);
+    flex: 1;
+  }
+}
+@media (min-width: 900px) {
+  .store-modal__cart__review {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    grid-auto-rows: min-content;
     grid-gap: 20px;
     align-items: baseline;
   }
 }
 
 .store-modal__cart__items,
-.store-modal__cart__checkout {
+.store-modal__cart__order-variables {
   grid-column: 1/span 2;
 }
 
-.store-modal__cart__checkout-button {
+.store-modal__cart__button {
   background: none;
   color: inherit;
   font: inherit;
@@ -1159,24 +1178,112 @@ body[data-fontdue-store-modal=open] {
   text-transform: inherit;
   width: 100%;
   padding: 20px;
-  text-align: right;
+  text-align: center;
   background: var(--checkout_button_background_color);
   border: 1px solid var(--checkout_button_border_color);
   color: var(--checkout_button_text_color);
 }
-.store-modal__cart__checkout-button:active, .store-modal__cart__checkout-button:focus {
+.store-modal__cart__button:active, .store-modal__cart__button:focus {
   outline: none;
 }
-.store-modal__cart__checkout-button:not(:disabled) {
+.store-modal__cart__button:not(:disabled) {
   cursor: pointer;
 }
-.store-modal__cart__checkout-button:hover:not(:disabled) {
+.store-modal__cart__button:hover:not(:disabled) {
   background: var(--checkout_button_hover_background_color);
   border-color: var(--checkout_button_hover_border_color);
   color: var(--checkout_button_hover_text_color);
 }
-.store-modal__cart__checkout-button:disabled {
-  opacity: 0.5;
+.store-modal__cart__button:disabled {
+  opacity: 0.2;
+}
+
+@media (min-width: 900px) {
+  .store-modal__cart__checkout {
+    flex: 1;
+    padding-left: var(--StoreModalPageContainer-side-padding);
+  }
+}
+
+.store-modal__cart__checkout[data-disabled=true],
+.store-modal__cart__checkout-section[data-disabled=true] {
+  pointer-events: none;
+  opacity: 0.2;
+}
+
+.store-modal__cart__checkout-section:not(:last-child) {
+  margin-bottom: var(--section_spacing);
+}
+
+.store-modal__cart__checkout-section-title {
+  font-family: var(--font-family__bold, inherit);
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.store-modal__cart__checkout-section-subtitle {
+  display: inline-block;
+  font-family: var(--font-family, inherit);
+  color: var(--secondary_text_color);
+  font-size: 0.875em;
+}
+.store-modal__cart__checkout-section-subtitle a {
+  text-decoration: none;
+}
+.store-modal__cart__checkout-section-subtitle svg {
+  vertical-align: middle;
+  fill: currentColor;
+}
+
+.store-modal__cart__identity {
+  white-space: pre;
+}
+
+.store-modal__cart__payment {
+  margin-bottom: 20px;
+}
+
+.store-modal__cart__edit-button {
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: inherit;
+  text-align: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  text-transform: inherit;
+  color: var(--link_color);
+  border-bottom: 1px solid;
+}
+.store-modal__cart__edit-button:active, .store-modal__cart__edit-button:focus {
+  outline: none;
+}
+.store-modal__cart__edit-button:not(:disabled) {
+  cursor: pointer;
+}
+.store-modal__cart__edit-button:hover {
+  color: var(--link_hover_color);
+}
+
+.store-modal__cart__error {
+  color: var(--error_color);
+  margin-bottom: 20px;
+}
+
+.store-modal__cart__payment {
+  margin-bottom: 20px;
+}
+
+.store-modal__cart__agreement {
+  display: flex;
+  align-items: center;
+  margin-top: 30px;
+  margin-bottom: 30px;
 }
 
 .store-modal__container__overlay {
@@ -1220,6 +1327,15 @@ body[data-fontdue-store-modal=open] {
   font-size: 16px;
   animation: slideIn 300ms forwards;
   line-height: normal;
+  transition: max-width 200ms;
+}
+@media (min-width: 900px) {
+  [data-route=cart] .store-modal__container__container {
+    max-width: 1600px;
+  }
+  [data-route=checkout] .store-modal__container__container {
+    max-width: 1200px;
+  }
 }
 .store-modal__container__container * {
   box-sizing: border-box;
@@ -1376,6 +1492,11 @@ body[data-fontdue-store-modal=open] {
   margin-right: 0.25em;
 }
 
+.store-modal__families[data-disabled=true] {
+  opacity: 0.2;
+  pointer-events: none;
+}
+
 .store-modal__family__container {
   display: flex;
   flex-direction: column;
@@ -1392,13 +1513,7 @@ body[data-fontdue-store-modal=open] {
 }
 
 .store-modal__family__group {
-  display: grid;
-  grid-template-columns: 1fr;
-}
-@media (min-width: 900px) {
-  .store-modal__family__group {
-    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
-  }
+  display: flex;
 }
 
 .store-modal__family__style-button,
@@ -1415,6 +1530,7 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
+  flex: 1;
   --border-color: var(--button_border_color);
   padding: 15px 20px 20px;
   background: var(--button_background_color);
@@ -1424,6 +1540,8 @@ body[data-fontdue-store-modal=open] {
   z-index: 0;
   box-shadow: 0 0 0 1px var(--border-color);
   padding-bottom: 15px;
+  margin-bottom: 1px;
+  margin-right: 1px;
 }
 .store-modal__family__style-button:active, .store-modal__family__style-button:focus,
 .store-modal__family__family-button:active,
@@ -1482,7 +1600,8 @@ body[data-fontdue-store-modal=open] {
   }
 }
 
-.store-modal__family-button__price {
+.store-modal__family-button__price,
+.store-modal__family-button__checked {
   margin-left: auto;
   display: inline-block;
 }
@@ -1565,8 +1684,15 @@ body[data-fontdue-store-modal=open] {
   margin-left: auto;
 }
 
-.store-modal__license-selection__container:first-child {
-  margin-bottom: 80px;
+.store-modal__license-selection__container[data-disabled=true] {
+  opacity: 0.2;
+  pointer-events: none;
+}
+.store-modal__license-selection__container:not(:first-child) {
+  margin-top: var(--section_spacing);
+}
+.store-modal__license-selection__container:not(:last-child) {
+  margin-bottom: var(--section_spacing);
 }
 
 .store-modal__license-selection__title {
@@ -1577,7 +1703,7 @@ body[data-fontdue-store-modal=open] {
 }
 
 .store-modal__license-selection__license {
-  margin-bottom: 20px;
+  margin-bottom: 26px;
 }
 
 .store-modal__license-selection__license-button {
@@ -1617,7 +1743,7 @@ body[data-fontdue-store-modal=open] {
   border-color: var(--button_hover_border_color);
 }
 .store-modal__license-selection__license-button:disabled {
-  opacity: 0.5;
+  opacity: 0.2;
 }
 .store-modal__license-selection__license-button[data-selected=true]:not(:disabled) {
   background: var(--button_selected_background_color);
@@ -1634,6 +1760,7 @@ body[data-fontdue-store-modal=open] {
 
 .store-modal__license-selection__license-button + .store-modal__license-selection__description {
   margin-top: 10px;
+  color: var(--secondary_text_color);
 }
 
 .store-modal__license-selection__license-button-label {
@@ -1717,41 +1844,50 @@ body[data-fontdue-store-modal=open] {
   align-items: center;
 }
 
-.store-modal__page__container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  --StoreModalPageContainer-top-padding: 10px;
-  --StoreModalPageContainer-side-padding: 15px;
+.store-modal__licensee-is-billing-identity__container[data-disabled=true] {
+  opacity: 0.2;
+  pointer-events: none;
 }
-@media (min-width: 900px) {
-  .store-modal__page__container {
-    --StoreModalPageContainer-top-padding: 30px;
-    --StoreModalPageContainer-side-padding: 30px;
-  }
+.store-modal__licensee-is-billing-identity__container:not(:first-child) {
+  margin-top: var(--section_spacing);
 }
-
-.store-modal__page__body {
-  padding: var(--StoreModalPageContainer-top-padding) var(--StoreModalPageContainer-side-padding);
+.store-modal__licensee-is-billing-identity__container:not(:last-child) {
+  margin-bottom: var(--section_spacing);
 }
 
-.store-modal__page__sticky-footer {
-  position: sticky;
-  z-index: 1;
-  bottom: 0;
-  margin-top: auto;
-  background: var(--primary_background_color);
-  padding: var(--StoreModalPageContainer-top-padding) var(--StoreModalPageContainer-side-padding);
-  border-top: 1px solid var(--horizontal_rule_color);
+.store-modal__licensee-is-billing-identity__title {
+  font-family: var(--font-family__bold, inherit);
+  margin-bottom: 20px;
 }
 
-.store-modal__product-summary__container {
+.store-modal__licensee-is-billing-identity__buttons {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  gap: 20px;
 }
 
-.store-modal__product-summary__add-to-cart-button {
+.store-modal__order-variable-selection__container {
+  margin-bottom: 40px;
+}
+.store-modal__order-variable-selection__container[data-disabled=true] {
+  opacity: 0.2;
+  pointer-events: none;
+}
+.store-modal__order-variable-selection__container:not(:first-child) {
+  margin-top: var(--section_spacing);
+}
+.store-modal__order-variable-selection__container:not(:last-child) {
+  margin-bottom: var(--section_spacing);
+}
+
+.store-modal__order-variable-selection__title {
+  margin-bottom: 20px;
+}
+
+.store-modal__order-variable-selection__item:not(:last-child) {
+  margin-bottom: 26px;
+}
+
+.store-modal__order-variable-selection__button {
   background: none;
   color: inherit;
   font: inherit;
@@ -1763,51 +1899,95 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  padding: 10px 20px;
-  white-space: nowrap;
-  background: var(--add_to_cart_button_background_color);
-  border: 1px solid var(--add_to_cart_button_border_color);
-  color: var(--add_to_cart_button_text_color);
-  text-align: center;
+  border: 1px solid var(--button_border_color);
+  background: var(--button_background_color);
+  color: var(--button_text_color);
+  overflow: hidden;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
 }
-.store-modal__product-summary__add-to-cart-button:active, .store-modal__product-summary__add-to-cart-button:focus {
+.store-modal__order-variable-selection__button:active, .store-modal__order-variable-selection__button:focus {
   outline: none;
 }
-.store-modal__product-summary__add-to-cart-button:not(:disabled) {
+.store-modal__order-variable-selection__button:not(:disabled) {
   cursor: pointer;
 }
-.store-modal__product-summary__add-to-cart-button:hover:not(:disabled) {
-  background: var(--add_to_cart_button_hover_background_color);
-  border: 1px solid var(--add_to_cart_button_hover_border_color);
-  color: var(--add_to_cart_button_hover_text_color);
+.store-modal__order-variable-selection__button:hover:not(:disabled) {
+  border-color: var(--button_hover_border_color);
+  background: var(--button_hover_background_color);
+  color: var(--button_hover_text_color);
 }
-.store-modal__product-summary__add-to-cart-button:disabled {
+.store-modal__order-variable-selection__button:disabled {
   opacity: 0.5;
 }
-@media (min-width: 900px) {
-  .store-modal__product-summary__add-to-cart-button {
-    padding: 20px;
-    width: 200px;
-  }
+.store-modal__order-variable-selection__button[data-selected=true]:not(:disabled) {
+  background: var(--button_selected_background_color);
+  border-color: var(--button_selected_border_color);
+  color: var(--button_selected_text_color);
+}
+.store-modal__order-variable-selection__button[data-selected=true]:not(:disabled) .store-modal__order-variable-selection__label {
+  border-color: var(--button_selected_border_color);
+}
+.store-modal__order-variable-selection__button .icon {
+  font-size: 18px;
+  margin-right: 8px;
 }
 
-.store-modal__product-summary__styles-price {
-  color: var(--secondary_text_color);
-  text-decoration: line-through;
+.store-modal__order-variable-selection__label {
+  padding: 10px;
+  flex: 2 0 40%;
+  align-items: flex-start;
+  display: flex;
+}
+[data-variable-type=select] .store-modal__order-variable-selection__label {
+  border-right: 1px solid var(--button_border_color);
 }
 
-.store-modal__review-confirm__container {
-  display: grid;
-  grid-template-columns: 3fr 2fr;
-  grid-gap: 20px;
+.store-modal__order-variable-selection__select-label {
+  flex: 3 0 60%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  padding: 10px;
+}
+.store-modal__order-variable-selection__select-label .icon {
+  margin-left: 10px;
+}
+
+.store-modal__order-variable-selection__select {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  background: none;
 }
 
-.store-modal__review-confirm__agreement {
+.store-modal__order-variable-selection__icon-pair {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
+}
+
+.store-modal__order-variable-selection__item[data-ghost=true] .store-modal__order-variable-selection__button {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.store-modal__order-variable-selection__ghost-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+  color: var(--secondary_text_color);
 }
 
-.store-modal__review-confirm__button {
+.store-modal__order-variable-selection__ghost-remove {
   background: none;
   color: inherit;
   font: inherit;
@@ -1819,54 +1999,61 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  text-align: center;
-  background: var(--checkout_button_background_color);
-  border: 1px solid var(--checkout_button_border_color);
-  color: var(--checkout_button_text_color);
-  padding-left: 10px;
-  padding-right: 10px;
+  color: var(--link_color);
+  border-bottom: 1px solid var(--link_color);
 }
-.store-modal__review-confirm__button:active, .store-modal__review-confirm__button:focus {
+.store-modal__order-variable-selection__ghost-remove:active, .store-modal__order-variable-selection__ghost-remove:focus {
   outline: none;
 }
-.store-modal__review-confirm__button:not(:disabled) {
+.store-modal__order-variable-selection__ghost-remove:not(:disabled) {
   cursor: pointer;
 }
-.store-modal__review-confirm__button:disabled {
-  opacity: 0.5;
+.store-modal__order-variable-selection__ghost-remove:hover {
+  color: var(--link_hover_color);
+  border-bottom-color: var(--link_hover_color);
 }
-.store-modal__review-confirm__button:hover:not(:disabled) {
-  background: var(--checkout_button_hover_background_color);
-  border-color: var(--checkout_button_hover_border_color);
-  color: var(--checkout_button_hover_text_color);
+
+.store-modal__order-variable-selection__description {
+  margin-top: 10px;
+  color: var(--secondary_text_color);
 }
 
-.store-modal__review-item__container {
-  display: grid;
-  grid-template-columns: 1fr max-content;
-  grid-gap: 40px;
-  margin-right: calc(-1 * var(--StoreModalPageContainer-padding));
-  margin-left: calc(-1 * var(--StoreModalPageContainer-padding));
-  padding-left: var(--StoreModalPageContainer-padding);
-  padding-right: var(--StoreModalPageContainer-padding);
+.store-modal__page__container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  --StoreModalPageContainer-top-padding: 10px;
+  --StoreModalPageContainer-side-padding: 15px;
 }
-.store-modal__review-item__container:not(:first-child) {
-  padding-top: 30px;
-  border-bottom: 1px solid color(grey);
+@media (min-width: 900px) {
+  .store-modal__page__container {
+    --StoreModalPageContainer-top-padding: 30px;
+    --StoreModalPageContainer-side-padding: 30px;
+  }
 }
-.store-modal__review-item__container:not(:last-child) {
-  padding-bottom: 30px;
+
+.store-modal__page__body {
+  padding: var(--StoreModalPageContainer-top-padding) var(--StoreModalPageContainer-side-padding);
 }
-.store-modal__review-item__container:last-child {
-  border: none;
+
+.store-modal__page__sticky-footer {
+  position: sticky;
+  z-index: 1;
+  bottom: 0;
+  margin-top: auto;
+  background: var(--primary_background_color);
+  padding: var(--StoreModalPageContainer-top-padding) var(--StoreModalPageContainer-side-padding);
+  border-top: 1px solid var(--horizontal_rule_color);
 }
 
-.store-modal__review__container {
-  /* format identity info properly */
-  white-space: pre-line;
+.store-modal__product-summary__container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.store-modal__review__section--button {
+.store-modal__product-summary__add-to-cart-button {
   background: none;
   color: inherit;
   font: inherit;
@@ -1878,69 +2065,37 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
+  padding: 10px 20px;
+  white-space: nowrap;
+  background: var(--add_to_cart_button_background_color);
+  border: 1px solid var(--add_to_cart_button_border_color);
+  color: var(--add_to_cart_button_text_color);
+  text-align: center;
 }
-.store-modal__review__section--button:active, .store-modal__review__section--button:focus {
+.store-modal__product-summary__add-to-cart-button:active, .store-modal__product-summary__add-to-cart-button:focus {
   outline: none;
 }
-.store-modal__review__section--button:not(:disabled) {
+.store-modal__product-summary__add-to-cart-button:not(:disabled) {
   cursor: pointer;
 }
-.store-modal__review__section--button:hover {
-  color: var(--secondary_text_color);
-}
-
-.store-modal__review__section {
-  padding-bottom: 30px;
-  border-bottom: 1px solid var(--horizontal_rule_color);
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  grid-column-gap: 20px;
-  margin-right: calc(-1 * var(--StoreModalPageContainer-side-padding));
-  margin-left: calc(-1 * var(--StoreModalPageContainer-side-padding));
-  padding-left: var(--StoreModalPageContainer-side-padding);
-  padding-right: var(--StoreModalPageContainer-side-padding);
-}
-@media (min-width: 900px) {
-  .store-modal__review__section {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-.store-modal__review__section:not(:first-child) {
-  padding-top: 30px;
-}
-
-.store-modal__review__items {
-  display: block;
+.store-modal__product-summary__add-to-cart-button:hover:not(:disabled) {
+  background: var(--add_to_cart_button_hover_background_color);
+  border: 1px solid var(--add_to_cart_button_hover_border_color);
+  color: var(--add_to_cart_button_hover_text_color);
 }
-
-.store-modal__review__totals {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  grid-column-gap: 20px;
+.store-modal__product-summary__add-to-cart-button:disabled {
+  opacity: 0.2;
 }
 @media (min-width: 900px) {
-  .store-modal__review__totals {
-    grid-template-columns: 1fr 1fr;
+  .store-modal__product-summary__add-to-cart-button {
+    padding: 20px;
+    width: 200px;
   }
 }
-.store-modal__review__totals .cart__price-blocks {
-  grid-column: 2;
-}
-
-.store-modal__review__confirm {
-  margin-right: calc(-1 * var(--StoreModalPageContainer-side-padding));
-  margin-left: calc(-1 * var(--StoreModalPageContainer-side-padding));
-  padding-left: var(--StoreModalPageContainer-side-padding);
-  padding-right: var(--StoreModalPageContainer-side-padding);
-  margin-bottom: calc(-1 * var(--StoreModalPageContainer-top-padding));
-  margin-top: 100px;
-  padding-top: 30px;
-  padding-bottom: 100px;
-  background: var(--secondary_background_color);
-}
 
-.store-modal__review__error {
-  color: color(red);
+.store-modal__product-summary__styles-price {
+  color: var(--secondary_text_color);
+  text-decoration: line-through;
 }
 
 .store-modal__style-button__container {
@@ -1955,7 +2110,8 @@ body[data-fontdue-store-modal=open] {
   word-break: break-word;
 }
 
-.store-modal__style-button__price {
+.store-modal__style-button__price,
+.store-modal__style-button__checked {
   margin-left: auto;
 }
 
@@ -1995,7 +2151,7 @@ body[data-fontdue-store-modal=open] {
   text-transform: inherit;
   background: var(--button_background_color);
   border: 1px solid var(--button_border_color);
-  color: 1px solid var(--button_text_color);
+  color: var(--button_text_color);
   padding: 10px 20px;
 }
 .cart-additions__expand-button:active, .cart-additions__expand-button:focus {
@@ -2067,6 +2223,7 @@ body[data-fontdue-store-modal=open] {
   margin-right: -1px;
   padding-right: 35px;
   font-family: inherit;
+  min-width: 0;
 }
 .cart-additions[data-status=error] .cart-additions__field {
   color: var(--error_color);
@@ -2100,14 +2257,19 @@ body[data-fontdue-store-modal=open] {
   margin-right: calc(-1 * var(--StoreModalPageContainer-padding));
   padding-left: var(--StoreModalPageContainer-padding);
   padding-right: var(--StoreModalPageContainer-padding);
-  border-top: 1px solid var(--horizontal_rule_color);
+  padding-bottom: 40px;
+  border-bottom: 1px solid var(--horizontal_rule_color);
   margin-bottom: 40px;
   line-height: 20px;
   --gutter: 20px;
 }
+.cart-item:first-child {
+  border-top: 1px solid var(--horizontal_rule_color);
+}
 @media (min-width: 900px) {
   .cart-item {
     display: grid;
+    align-items: baseline;
     grid-template-columns: 300fr 700fr 80px;
     grid-template-areas: "name licenses price";
     grid-column-gap: var(--gutter);
@@ -2120,13 +2282,13 @@ body[data-fontdue-store-modal=open] {
     color: var(--link_hover_color);
     --variable-border-color: var(--link_hover_color);
     --license-border-color: var(--link_hover_color);
-    --additional-licenses-border-color: var(--link_hover_color);
-    --additional-license-border-color: var(--link_hover_color);
-    --additional-license-color: var(--link_hover_color);
     --styles-count-color: var(--link_hover_color);
     --text-input-edit-color: var(--link_hover_color);
   }
 }
+.cart-item__error {
+  color: var(--error_color);
+}
 .cart-item__aa {
   display: none;
 }
@@ -2134,19 +2296,21 @@ body[data-fontdue-store-modal=open] {
   color: var(--styles-count-color, var(--secondary_text_color));
 }
 .cart-item__name {
+  font-size: 1em;
   margin-top: 30px; /* line up to the baseline of next column */
   font-weight: 400;
+  display: flex;
+  justify-content: space-between;
 }
 .cart-item__licenses {
   margin: 0;
   padding: 0;
+  list-style: none;
 }
 .cart-item__license {
-  display: grid;
-  grid-template-columns: 20px 1fr;
-  grid-template-areas: "delete options";
-  grid-column-gap: var(--gutter);
+  display: flex;
   align-items: flex-start;
+  gap: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
 }
@@ -2157,20 +2321,6 @@ body[data-fontdue-store-modal=open] {
     --text-input-edit-color: var(--link_hover_color);
   }
 }
-@media (min-width: 900px) {
-  .cart-item__license {
-    grid-template-columns: 2fr 3fr 20px;
-    grid-template-areas: "type options delete";
-  }
-}
-.cart-item__license__wrapper {
-  grid-column-start: options;
-}
-@media (min-width: 900px) {
-  .cart-item__license__wrapper {
-    display: contents;
-  }
-}
 .cart-item__license__delete-button {
   background: none;
   color: inherit;
@@ -2183,8 +2333,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  grid-column-start: delete;
-  margin-top: 11px;
 }
 .cart-item__license__delete-button:active, .cart-item__license__delete-button:focus {
   outline: none;
@@ -2192,28 +2340,21 @@ body[data-fontdue-store-modal=open] {
 .cart-item__license__delete-button:not(:disabled) {
   cursor: pointer;
 }
-@media (max-width: 899px) {
-  .cart-item__license__delete-button {
-    order: -1;
-  }
-}
 .cart-item__license__delete-button .icon {
-  font-size: 18px;
+  font-size: 16px;
 }
 .cart-item__license + .cart-item__license {
   border-top: 1px solid var(--horizontal_rule_color);
 }
+.cart-item__license-wrapper {
+  flex: 1;
+}
 .cart-item__license-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: 10px 0;
   align-self: flex-start;
-}
-@media (max-width: 899px) {
-  .cart-item__license-name {
-    margin-bottom: 4px;
-  }
+  margin-bottom: 20px;
 }
 .cart-item__license-variables {
   margin: 0;
@@ -2258,15 +2399,6 @@ body[data-fontdue-store-modal=open] {
   cursor: pointer;
   background: none;
 }
-.cart-item__license-variable__option form {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
 .cart-item__license-variable__option .icon {
   font-size: 16px;
   margin-left: 10px;
@@ -2276,19 +2408,12 @@ body[data-fontdue-store-modal=open] {
   margin-bottom: 0.5em;
 }
 .cart-item__license-variable__text-input {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
   background: transparent;
   color: var(--primary_text_color);
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  padding: 5px 10px;
+  padding: 10px;
   border: none;
   outline: none;
 }
@@ -2310,13 +2435,6 @@ body[data-fontdue-store-modal=open] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
   padding: 10px;
 }
 .cart-item__license-variable__text-input-button:active, .cart-item__license-variable__text-input-button:focus {
@@ -2333,15 +2451,9 @@ body[data-fontdue-store-modal=open] {
   padding: 10px;
 }
 .cart-item__price {
-  display: grid;
-  grid-template-columns: 20px 1fr;
-  grid-column-gap: var(--gutter);
   margin-top: 20px;
   font-variant-numeric: tabular-nums;
 }
-.cart-item__price > *:first-child {
-  grid-column-start: 2;
-}
 @media (min-width: 900px) {
   .cart-item__price {
     display: initial;
@@ -2374,7 +2486,6 @@ body[data-fontdue-store-modal=open] {
   text-transform: inherit;
   color: var(--additional-license-color, var(--link_color));
   border-bottom: 1px solid var(--additional-license-border-color, var(--link_color));
-  padding: 4px 0;
   margin: 0 5px;
 }
 .cart-item__additional-licenses__item:active, .cart-item__additional-licenses__item:focus {
@@ -2391,7 +2502,9 @@ body[data-fontdue-store-modal=open] {
 .cart__price-block {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  grid-column-gap: 20px;
   margin: 20px 0;
+  align-items: baseline;
 }
 .cart__price-block__price {
   text-align: right;
@@ -2436,6 +2549,120 @@ body[data-fontdue-store-modal=open] {
   font-size: 22px;
 }
 
+/* Share URL section */
+.cart__share {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding-top: 20px;
+  width: 100%;
+  border-top: 1px solid var(--horizontal_rule_color);
+}
+
+.cart__share-title {
+  margin-bottom: 20px;
+}
+
+.cart__share-url-input-container {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.cart__share-url-input {
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: inherit;
+  text-align: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  text-transform: inherit;
+  min-width: 0;
+  flex: 1 1 0;
+  color: currentcolor;
+  padding: 10px 15px;
+  background: var(--secondary_background_color);
+  border: 1px solid var(--secondary_background_color);
+  border-right: none;
+}
+.cart__share-url-input:active, .cart__share-url-input:focus {
+  outline: none;
+}
+.cart__share-url-input:focus {
+  border-color: var(--primary_text_color);
+}
+
+.cart__share-url-text {
+  font-family: monospace;
+  word-break: break-all;
+  margin-bottom: 15px;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.cart__share__button {
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: inherit;
+  text-align: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  text-transform: inherit;
+  text-align: center;
+  background: var(--button_background_color);
+  border: 1px solid var(--button_border_color);
+  color: 1px solid var(--button_text_color);
+  padding: 10px 20px;
+}
+.cart__share__button:active, .cart__share__button:focus {
+  outline: none;
+}
+.cart__share__button:not(:disabled) {
+  cursor: pointer;
+}
+.cart__share__button:hover {
+  background: var(--button_hover_background_color);
+  border-color: var(--button_hover_border_color);
+  color: var(--button_hover_text_color);
+}
+
+.cart__share__pdf-button,
+.cart__share__share-button {
+  display: block;
+  width: 100%;
+  margin-bottom: 60px;
+}
+
+.cart__share__copy-button {
+  position: relative;
+  white-space: nowrap;
+}
+.cart__share__copy-button .icon {
+  visibility: hidden;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1em;
+}
+.cart__share__copy-button[data-copied=true] span {
+  visibility: hidden;
+}
+.cart__share__copy-button[data-copied=true] .icon {
+  visibility: visible;
+}
+
+.cart__share-error {
+  color: var(--error_color);
+  margin-top: 10px;
+}
+
 .checkout-modal__form {
   display: contents;
 }