@charset "UTF-8";
@font-face {
  font-family: "Montserrat VF";
  font-style: normal;
  font-weight: 100 900;
  src: url("/static/fonts/Montserrat-VF.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Montserrat VF";
  font-style: italic;
  font-weight: 100 900;
  src: url("/static/fonts/Montserrat-Italic-VF.woff2") format("woff2");
  font-display: block;
}
:root {
  --font-family: "Montserrat VF", sans-serif;
  --logo-height: 36px;
  --logo-width: 76px;
  --logo-crop: auto;
  --above-header-background: #000;
  --above-header-text: #fff;
  --admin-default-border: #6a7a8c;
  --admin-editor-bg: #e3f4ff;
  --admin-main-bg: #f6f7fb;
  --admin-order-warning: rgba(255, 165, 0, 0.8);
  --admin-sidebar-bg: #233242;
  --admin-text-color: #6a7a8c;
  --admin-white-border: #e9ecef;
  --b-color: var(--main-color);
  --banner-hover-color: #ffffff;
  --banner-label-background: rgba(0, 0, 0, .5);
  --base-color: #000;
  --black-border-color: #000;
  --black-box-shadow: #000;
  --blue-border-color: #1189cb;
  --blue-svg-color: #1189cb;
  --border-color: #303030;
  --btn-text-color: #ffffff;
  --btn-text-hover: #ffffff;
  --btn-text-selected: #ffffff;
  --bubble-background: #fff;
  --builder-cart-btn: #ffffff;
  --builder-cart-color: #ffffff;
  --builder-cart-info-background: #000000;
  --builder-cart-info: #ffffff;
  --builder-floating-btn: #000000;
  --builder-floating-mobile-inverse-border: #000000;
  --builder-roster-table-cell-border: #9e9e9e;
  --builder-setting-block-border: #000000;
  --builder-setting-color-preview: #000000;
  --builder-settings-background: #ffffff;
  --builder-switch-btn-background: #000000;
  --card-background: #fff;
  --card-background-some: #eee;
  --card-border: var(--base-color);
  --cart-builder-roster-action: #da2128;
  --cart-discount-btn-color: #ffffff;
  --cart-discount-input-color: #ffffff;
  --cart-info-link-active: #000000;
  --cart-info-link: #bfbfbf;
  --cart-roster-btn-color: #262626;
  --cart-roster-btn-hover-color: #ffffff;
  --cart-table-link-color:var(--base-color);
  --cart-text-color: black;
  --cart-warning-color: #da2128;
  --color-popup-bg: #fff;
  --color-scheme: light;
  --contrast-text-color: #000;
  --danger-color: #fd3c3c;
  --dark-grey-text-color: #999999;
  --darker-base-color: #000000;
  --default-builder-settings-bg: #f3f3f3;
  --default-dropdown-bg: #f3f3f3;
  --default-input-bg: #fff;
  --default-input-border: #444444;
  --default-option-background: #f3f3f3;
  --default-scrollbar-color: #f3f3f3;
  --text-color: black;
  --design-dropdown-border: #000000;
  --design-dropdown-icon: url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");
  --design-package-background: #a4a4a4;
  --disable-color: #777777;
  --disabled-border-color: #a4a4a4;
  --disabled-color: #303030;
  --draft-saved-btn-color-bg: #ffffff;
  --dropdown-bg: #d4d5d5;
  --email-footer-background: white;
  --email-footer-text: black;
  --error-color: #ee5672;
  --exclude-color: #ce776b;
  --faq-content-item-bg: #9b9b9b;
  --faq-item-bg: #bdbdbd;
  --faq-item-color: #000000;
  --faq-item-data-bg: var(--card-background);
  --faq-table-bg: var(--faq-content-item-bg);
  --faq-table-border: #000000;
  --faq-table-chart: #000000;
  --feedback-icon-hover: var(--light-grey-border);
  --feedback-icon: #ffffff;
  --focus-color: #1189cb;
  --footer-bg-color: #000000;
  --footer-ui-color: #DEDBD4;
  --form-label-color: #000000;
  --green-border-color: #89cb11;
  --green-svg-color: #89cb11;
  --grey-background: #999999;
  --grey-box-shadow: #999999;
  --grey-text-color: #808080;
  --header-border: var(--base-color);
  --header-menu-bg: var(--main-bg-color);
  --header-menu-item-color: var(--base-color);
  --heading-text-color: #ededed;
  --highlight-color: var(--main-color);
  --include-color: #77ce6b;
  --info-alert-color: #1189cb;
  --info-color: #777;
  --inner-dropdown-bg: #3c3c3c;
  --input-border: #767676;
  --input-placeholder-color: #6b6b6b;
  --inverse-bg-color: #b4b4b4;
  --light-border: #cccccc;
  --light-grey-border: #bfbfbf;
  --lighter-base-color: #212121;
  --lighter-error-color: #f1778e;
  --lighter-grey-border-color: #8c8c8c;
  --lighter-success-color: #78f19a;
  --link-border: var(--light-grey-border);
  --loading-color: var(--base-color);
  --loading-margin: 60px auto;
  --loading-size: 100px;
  --loading-thickness: calc(var(--loading-size) * 0.13);
  --main-bg-color: #ffffff;
  --main-color: #000000;
  --menu-color: var(--main-color);
  --menu-dropdown-background: #ededed;
  --menu-hover-color: #4a4a4a;
  --menu-icon: url("/static/bar-icon-black.png");
  --menu-text-color: #000;
  --modal-border: #00cee5;
  --modal-close-border: var(--lighter-grey-border-color);
  --modal-fade-background: #000;
  --order-according-border-hover: var(--main-color);
  --order-according-border: var(--main-color);
  --order-according-color: var(--heading-text-color);
  --order-according-info: var(--base-color);
  --order-according-shipment-link: var(--heading-text-color);
  --order-according-shipment: var(--heading-text-color);
  --pagination-border: var(--light-grey-border);
  --payment-card-border: var(--light-grey-border);
  --popup-background: var(--main-bg-color);
  --product-page-background: #ededed;
  --promocode-card-btn: #444444;
  --promocode-card: #cbcbcb;
  --promocode-popup-card-background: #d3d3d3;
  --promocode-table-heading-text: #ffffff;
  --purchase-list-detail-header-bg:#2b2b2b;
  --purchase-list-detail-inner-bg:#626262;
  --purchase-order-select-icon: url('data:image/svg+xml,<svg width= "24" height="24" xmlns="http://www.w3.org/2000/svg"><path style="fill: black" d="m0,6l12,12l12,-12l-24,0z" /><path fill="none" d="m0,0l24,0l0,24l-24,0l0,-24z"/></svg>');
  --purple-border-color: #bbbbee;
  --purple-color: #bbbbee;
  --quantity-btn: #000000;
  --red-background: #F54646;
  --red-border-color: #F54646;
  --red-text-color: #F54646;
  --scrollbar-color: #d8d8d8;
  --semi-black-bg: rgba(0, 0, 0, .1);
  --semi-dark-shadow: rgba(0, 0, 0, .7);
  --semi-disabled-color: rgba(48, 48, 48, .4);
  --semi-transparent-shadow: rgba(0, 0, 0, .3);
  --semi-white-border: rgba(255, 255, 255, .1);
  --shortlink-copy-background: #bfbfbf;
  --sidebar-active-color: var(--focus-color);
  --sidebar-bg:#ffffff;
  --sidebar-entry-border: rgba(111, 111, 111, 0.2);
  --star-color: var(--base-color);
  --store-btn-color-disabled: #A4A4A4;
  --store-btn-color: #00000;
  --success-color: #57ee81;
  --sum-text-color: #000000;
  --table-active-text: #9f9f9f;
  --table-header-bg: #000000;
  --table-info-border: var(--light-grey-border);
  --table-row-bg-a: #e0e0e0;
  --table-row-bg-b: #f0f0f0;
  --table-tr-border: #707070;
  --toggle-color-after: #000000;
  --toggle-color-bg: #A4A4A4;
  --toggle-color: #000000;
  --toggle-width: 12vw;
  --upload-preview-background: #bfbfbf;
  --warning-color: #ffa500;
  --active-swatch-outline: #000;
}

:root {
  --above-header-height: 50px;
  --header-height: 50px;
  --sidebar-width: 250px;
  --dashboard-padding: 16px 24px;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
@media (max-width: 250px) {
  :root {
    --sidebar-width: 100vw;
  }
}

body {
  color-scheme: var(--color-scheme);
  background: var(--main-bg-color);
  color: var(--text-color);
}

body, button, input, select, textarea {
  font-family: var(--font-family);
  font-size: 16px;
}
@media (max-width: 800px) {
  body, button, input, select, textarea {
    font-size: 14px;
  }
}

button, input, select, textarea {
  background-color: transparent;
}

button {
  color: var(--base-color);
}

input, select, textarea {
  color: var(--text-color);
  border: 1px solid var(--default-input-border);
  border-radius: 2px;
  padding: 0.3em;
}

select {
  padding: 0.38em;
  -webkit-appearance: menulist;
}

option {
  background: var(--default-option-background);
}

a {
  color: var(--highlight-color);
  text-decoration: underline;
  cursor: pointer;
}

a:where(:has(svg):has(span)) {
  text-decoration: none;
}

a:where(:has(svg):has(span):hover) span {
  text-decoration: underline;
}

html, body, div, section {
  scrollbar-width: thin;
  scrollbar-color: var(--main-color) var(--default-scrollbar-color);
}

*::-webkit-scrollbar {
  background: var(--default-scrollbar-color);
}

*::-webkit-scrollbar-thumb {
  background: var(--main-color);
}

*:focus-visible {
  outline: 2px solid var(--focus-color);
}

a:focus-visible {
  outline-offset: 5px;
}

.icon {
  --size: 1em;
  --check-opacity: 0;
  width: var(--size);
  height: var(--size);
  margin: 0;
}
.icon--checked {
  --check-opacity: 1;
}

.above-header {
  width: 100%;
  background-color: var(--above-header-background);
  --submenu-bg: var(--above-header-background);
  color: var(--above-header-text);
  display: flex;
  justify-content: space-between;
  height: var(--above-header-height);
  flex-wrap: nowrap;
  position: relative;
  z-index: 600;
}
.above-header__left, .above-header__right {
  width: 25%;
  display: flex;
}
.above-header__right {
  justify-content: flex-end;
}
.above-header__center {
  width: 50%;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.above-header__center span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  text-align: center;
}
.above-header__center span a {
  color: var(--above-header-text);
}
@media (max-width: 1000px) {
  .above-header__left {
    display: none;
  }
  .above-header__center {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .above-header__center span {
    text-align: left;
  }
}

.account-avatar {
  --size: 35px;
  display: flex;
  width: var(--size);
  height: var(--size);
  flex: 0 0 var(--size);
  background: transparent no-repeat center;
  background-size: cover;
  padding-top: 2px;
  color: white;
  border-radius: 50%;
  font-size: calc(var(--size) * 0.3);
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-weight: 600;
}

.account-access-editor ul {
  list-style: none;
}
.account-access-editor__groups {
  margin: -12px 0;
  padding: 0;
  column-count: auto;
  column-width: 300px;
}
.account-access-editor__groups > li {
  display: inline-block;
  width: 100%;
  margin: 4px 0;
}
.account-access-editor__groups > li h3 {
  line-height: 1.1;
  font-size: 16px;
  font-weight: normal;
}
.account-access-editor__groups > li p {
  font-size: 14px;
}
.account-access-editor__groups > li h3, .account-access-editor__groups > li p, .account-access-editor__groups > li ul {
  margin: 8px 0;
}
@media (max-width: 500px) {
  .account-access-editor__groups {
    column-width: auto;
    column-count: 1;
  }
}
.account-access-editor__group {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.account-access-editor__item {
  position: relative;
  padding-left: 4px;
}
.account-access-editor__item .checkbox {
  --size: 14px;
  --padding: 1px;
  --font-size: 14px;
}
.account-access-editor__item--with-info .checkbox__text {
  border-bottom: 1px dashed rgba(127, 127, 127, 0.5);
}
.account-access-editor__info {
  position: absolute;
  bottom: 120%;
  background: #555;
  font-size: 12px;
  color: white;
  width: max-content;
  max-width: 100%;
  padding: 4px 6px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s 0.5s;
}
.account-access-editor__item:hover .account-access-editor__info, .account-access-editor__item:focus-within .account-access-editor__info {
  opacity: 1;
}

.address-form {
  display: flex;
  gap: 16px;
  flex-direction: column;
}
.address-form__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.address-form__row--name {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 1fr 50px;
}
@media (max-width: 400px) {
  .address-form__row--name {
    grid-template-columns: 50px 1fr 50px 1fr 50px;
    grid-template-areas: "p f f m m" "l l l l s";
  }
  .address-form__input--name_prefix {
    grid-area: p;
  }
  .address-form__input--first_name {
    grid-area: f;
  }
  .address-form__input--middle_name {
    grid-area: m;
  }
  .address-form__input--last_name {
    grid-area: l;
  }
  .address-form__input--name_suffix {
    grid-area: s;
  }
}

.alert {
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 250px;
  max-width: 600px;
}
.alert__body {
  margin: 0 0 20px;
  width: 100%;
}
.alert__body--left {
  text-align: left;
}
.alert__body input[type=text] {
  width: 100%;
}
.alert__body img {
  max-width: 100%;
}
.alert__checkbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.alert__icon {
  width: 20px;
  position: absolute;
  top: 10px;
  left: 10px;
}
.alert__icon--error {
  color: var(--error-color);
}
.alert__icon--warning {
  color: var(--warning-color);
}
.alert__icon--info {
  color: var(--info-alert-color);
}
.alert__actions button, .alert__button {
  color: var(--base-color);
  border: 1px solid var(--base-color);
  background: transparent;
  padding: 10px calc((50% - 10px) / 6);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.alert__actions button:first-child, .alert__button:first-child {
  color: var(--btn-text-color);
  background-color: var(--base-color);
}
.alert__actions button:hover, .alert__button:hover {
  color: var(--btn-text-hover);
  background: var(--base-color);
}
.alert__actions {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.alert__actions button {
  margin: 0 5px 0 0;
  text-align: center;
  width: calc(50% - 0px);
}
.alert__actions button:last-child {
  margin: 0 0 0 5px;
}
@media (max-width: 340px) {
  .alert__actions button {
    padding: 5px 10px;
  }
}

.site .alert .roster-editor-table__name, .site .alert .roster-editor-table__alias, .site .alert .roster-editor-table__number {
  max-width: 225px;
  margin: 0 auto;
}
.site .alert .roster-editor-table__flag {
  margin: 0 auto;
}
.site .alert .roster-editor-table__flag .country-picker {
  position: unset;
  width: unset;
  margin: unset;
  border: unset;
  border-color: unset;
}
.site .alert .roster-editor-table__flag .country-picker:after {
  position: unset;
  right: unset;
  top: unset;
  width: unset;
  bottom: unset;
  content: unset;
  text-align: unset;
  display: unset;
  align-items: unset;
  justify-content: unset;
  color: unset;
  font-size: unset;
  border-left: unset;
  pointer-events: unset;
  background: unset;
}
.site .alert .roster-editor-table__cell {
  padding: 4px 0;
  min-height: unset;
}

.artwork-browser__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.artwork-browser__artwork {
  width: 200px;
  margin: 0;
  padding: 10px;
}
.artwork-browser__artwork-image {
  display: flex;
  width: 180px;
  height: 180px;
  justify-content: center;
  align-items: center;
  background: url("/static/checkers.png");
}
.artwork-browser__artwork-image img {
  max-width: 180px;
  max-height: 180px;
}
.artwork-browser__artwork-details {
  text-align: center;
}
.artwork-browser__artwork-actions {
  text-align: center;
}
.artwork-browser__artwork-actions button {
  border: 1px solid var(--black-border-color);
  border-radius: 4px;
  background: transparent;
}
.artwork-browser__artwork-actions button svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 500px) {
  .artwork-browser__artwork {
    width: 50%;
  }
  .artwork-browser__artwork-image {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
  }
  .artwork-browser__artwork-image img {
    max-width: 100%;
    max-height: 50vw;
  }
}

.builder-cart-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 10px 14px 40px;
}
.builder-cart-block__warning {
  color: var(--cart-warning-color);
  font-size: 15px;
}
.builder-cart-block__warning a {
  color: inherit;
}
.builder-cart-block__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.builder-cart-block__row p {
  margin: 0;
}
.builder-cart-block__extra {
  font-size: 12px;
  margin: 0;
  line-height: 10px;
}
.builder-cart-block__quantity-input {
  min-width: 50px;
  width: 50px;
}
.builder-cart-block__add-button {
  padding: 0 16px;
  background: var(--base-color);
  border: none;
  color: var(--builder-cart-color);
  cursor: pointer;
  outline: 0 solid var(--base-color);
  height: 50px;
  margin-bottom: 25px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-end;
}
.builder-cart-block__add-button:disabled {
  background: var(--grey-text-color);
}
.builder-cart-block__add-button svg {
  width: 24px;
  height: 24px;
}
.builder-cart-block__info {
  border: none;
  padding: 0 3.5px;
  font-size: 12px;
  color: var(--builder-cart-info);
  background: var(--builder-cart-info-background);
  border-radius: 100%;
  vertical-align: text-bottom;
  cursor: pointer;
  transition: all 0.2s ease;
}
.builder-cart-block__info:hover {
  background: #888888;
  color: black;
}
.builder-cart-block .roster-editor, .builder-cart-block .roster-editor-sizes {
  margin: 0;
}

.button {
  transition: opacity 0.5s ease-in;
  position: relative;
}
.button--submitting {
  opacity: 0.75;
  cursor: wait;
}
.button--success:after, .button--failure:after {
  position: absolute;
  content: "";
  opacity: 0.2;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.button--success:after {
  background: var(--success-color);
}
.button--failure:after {
  background: var(--error-color);
}

.cart-radio-group, .cart-table {
  width: 100%;
  border: 1px solid var(--text-color);
  background: var(--default-option-background);
}
.cart-radio-group__row, .cart-table__row {
  display: flex;
  align-items: center;
  padding: 10px;
  column-gap: 20px;
  line-height: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid var(--text-color);
}
.cart-radio-group__row span, .cart-table__row span {
  min-width: 60px;
}
.cart-radio-group__row span img, .cart-table__row span img {
  width: 50px;
  margin-right: 5px;
}
.cart-radio-group__row span img.paypal, .cart-table__row span img.paypal {
  width: 170px;
}
.cart-radio-group__row-price, .cart-radio-group__row-logo, .cart-table__row-price, .cart-table__row-logo {
  margin-left: auto;
  text-align: end;
}
.cart-radio-group__row-main, .cart-table__row-main {
  display: flex;
}
.cart-radio-group__row--margin, .cart-table__row--margin {
  margin: 10px 0;
}
.cart-radio-group__row-action, .cart-table__row-action {
  cursor: pointer;
}
.cart-radio-group__row--po-wrapper, .cart-table__row--po-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.cart-radio-group__row-po, .cart-table__row-po {
  display: flex;
  gap: 20px;
}
.cart-radio-group__row-error, .cart-table__row-error {
  margin: 8px 0;
  color: var(--danger-color);
}
.cart-radio-group__row-form, .cart-table__row-form {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  grid-template-columns: 100px 1fr;
  align-items: center;
  width: 100%;
}
.cart-radio-group__row-form label, .cart-table__row-form label {
  grid-column: 1;
}
.cart-radio-group__row-form input, .cart-table__row-form input {
  border: 1px solid var(--input-border);
}
.cart-radio-group__row-form input[type=text], .cart-table__row-form input[type=text] {
  width: 150px;
}
.cart-radio-group__row--error, .cart-table__row--error {
  color: var(--danger-color);
}
.cart-radio-group__row:last-child, .cart-table__row:last-child {
  border-bottom: none;
}

.checkbox {
  --size: 16px;
  --font-size: var(--size);
  --line-height: calc(var(--font-size) * 1.1);
  --padding: 2px;
  --radius: 0;
  position: relative;
}
.checkbox:has(:focus-visible) {
  outline: 2px solid var(--focus-color);
}
.checkbox--radio {
  --radius: 50%;
}
.checkbox__label {
  display: flex;
  flex-direction: row;
  align-items: start;
  cursor: pointer;
  width: fit-content;
  gap: 8px;
  font-size: var(--font-size);
  min-height: var(--line-height);
  line-height: var(--line-height);
}
.checkbox__label--no-transform {
  text-transform: none;
}
.checkbox__label a {
  color: inherit;
  text-decoration: inherit;
}
.checkbox__label > *:not(:first-child) {
  flex: 1 1 fit-content;
}
.checkbox__visual {
  display: flex;
  flex: 0 0 var(--size);
  width: var(--size);
  height: var(--size);
  border: 1px solid var(--text-color);
  border-radius: var(--radius);
  overflow: hidden;
  transition: 0.3s all;
}
.checkbox__visual::before {
  position: absolute;
  content: "";
  font-size: 1px;
  width: calc(var(--size) - var(--padding) * 2 - 2px);
  height: calc(var(--size) - var(--padding) * 2 - 2px);
  left: calc(var(--padding) + 1px);
  top: calc(var(--padding) + 1px);
  transform: scale(0);
  overflow: hidden;
  display: block;
  background: var(--text-color);
  border-radius: var(--radius);
  transition: 0.3s all;
}
.checkbox__input {
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 0;
  width: 4px;
  height: 4px;
}
.checkbox__input:checked ~ .checkbox__label .checkbox__visual::before {
  transform: scale(1);
}
.checkbox__input:disabled ~ .checkbox__label {
  color: var(--disable-color);
}
.checkbox__input:disabled ~ .checkbox__label .checkbox__visual {
  border-color: var(--disable-color);
}
.checkbox__input:disabled ~ .checkbox__label .checkbox__visual::before {
  background: var(--disable-color);
}
.checkbox--changing .checkbox__label {
  cursor: wait;
}
.checkbox--changing .checkbox__visual {
  background: rgba(192, 192, 192, 0.5);
}
.checkbox--changing .checkbox__visual ::before {
  opacity: 0.5;
}

.colorpicker__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  max-width: 400px;
}
.colorpicker___custom-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 200px;
  width: 200px;
  position: relative;
}
.colorpicker__input {
  width: 180px;
  color: var(--text-color);
  display: flex;
  justify-content: stretch;
}
.colorpicker__input input[type=text] {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: 6px 4px;
  color: inherit;
  text-align: center;
  font-size: 10px;
  font-family: monospace;
  width: 50%;
  opacity: 0.5;
}
.colorpicker__input input:focus {
  background: var(--default-input-bg) !important;
  color: var(--text-color) !important;
}
.colorpicker__input button {
  background: transparent;
  border: 0;
  color: inherit;
}
.colorpicker__input button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.colorpicker__input-button--hidden {
  opacity: 0;
}
.colorpicker__label {
  font-size: 80%;
  color: var(--info-color);
  width: 100%;
  padding: 0 8px;
  margin: 2px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.colorpicker__delete {
  padding: 0;
}
.colorpicker__delete svg {
  display: block;
}
.colorpicker__switch {
  cursor: pointer;
  user-select: none;
}
.colorpicker canvas {
  display: block;
  margin-top: -8px;
  margin-bottom: -3px;
  width: 200px;
  height: 150px;
}
.colorpicker__popular {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
}
.colorpicker__popular-option {
  padding: 0;
  margin: 2px;
  box-shadow: var(--grey-box-shadow) 0 0 3px;
  cursor: pointer;
  border-radius: 4px;
  height: auto;
  width: clamp(12px, 12%, 22px);
}
.colorpicker__popular-option::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.colorpicker__popular-option--selected {
  box-shadow: var(--black-box-shadow) 0 0 3px;
}
.colorpicker__popular-option--custom {
  background: url("/static/color.png");
  background-size: cover;
}
.colorpicker__popular span {
  display: block;
  flex: 0 0 24px;
  margin: 1px 1px 0 0;
}

.content-editable {
  width: fit-content;
  min-width: 150px;
  position: relative;
  text-align: left;
  margin-right: 25px;
  max-width: 65%;
  cursor: text;
  margin-top: 10px;
}
.content-editable svg {
  width: 16px;
  position: absolute;
  top: 0px;
  margin: 0 10px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  left: 100%;
}
.content-editable--main-color svg {
  color: var(--main-color);
}
.content-editable:hover svg {
  transform: scale(1.5);
}

.country-picker {
  position: relative;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--input-border);
  border-color: #767676;
}
.country-picker select {
  border: none;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  margin: 0;
  display: block;
  width: 100%;
  padding: 7px 55px 12px 9px;
}
.country-picker:after {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 50px;
  bottom: 1px;
  content: ">";
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7e7878;
  font-size: 24px;
  border-left: 1px solid #585555;
  pointer-events: none;
  background: inherit;
}
.country-picker:focus-within {
  border-color: var(--focus-color);
  outline: 1px solid var(--focus-color);
}
.country-picker__label {
  position: absolute;
  pointer-events: none;
  transition: 0.2s ease all;
  text-transform: uppercase;
  top: 0;
  bottom: 10px;
  left: 10px;
  font-size: 11px;
  opacity: 0.5;
}
.country-picker--error {
  border-color: var(--red-text-color);
}
.country-picker__error {
  position: absolute;
  pointer-events: none;
  transition: 0.2s ease all;
  top: 0;
  bottom: 10px;
  left: 10px;
  font-size: 11px;
  opacity: 0.8;
  color: var(--red-text-color);
}

.dash-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dash-form__color-preview {
  background: var(--main-color);
}
.dash-form__select-group {
  position: relative;
  height: fit-content;
}
.dash-form__select-group select {
  width: 100%;
  cursor: pointer;
}
.dash-form__select-group label {
  display: block;
  position: absolute;
  width: 12px;
  height: fit-content;
  right: 10px;
  top: 50%;
  transform: translate(0, -50%);
  pointer-events: none;
}
.dash-form__select-group label svg {
  width: 100%;
}
.dash-form__inputs-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dash-form__inputs-group--email {
  grid-template-columns: 1fr max-content;
}
.dash-form__inputs-group--name {
  grid-template-columns: 80px 1fr 1fr 1fr 80px;
}
.dash-form__checkbox-grid {
  display: grid;
  grid-template-columns: repeat(var(--column-count), max-content);
  gap: 8px;
  align-items: center;
}
.dash-form__checkbox-grid-label {
  grid-column: 1;
}
.dash-form__grid {
  display: grid;
  max-width: 800px;
  grid-template-columns: minmax(max-content, 200px) 1fr;
  gap: 16px 24px;
  margin: 8px 0;
  align-items: baseline;
}
.dash-form__grid > * {
  grid-column: 2;
}
.dash-form__grid select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.dash-form__grid--wide {
  grid-template-columns: 300px 1fr;
}
.dash-form__grid .dash-form__hr {
  grid-column: 1/3;
}
.dash-form__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}
.dash-form__rows > :not(label) {
  margin: 0 0 8px 0;
}
.dash-form__rows select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.dash-form__checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}
.dash-form__checkbox-list > :not(label) {
  margin: 0 0 8px 0;
}
.dash-form__checkbox-list select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.dash-form__checkbox-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.dash-form__label {
  font-size: 15px;
  color: var(--form-label-color);
  grid-column: 1;
}
.dash-form__label::after {
  content: ":";
}
.dash-form__label--highlight {
  font-weight: bold;
}
.dash-form__input, .dash-form__textarea {
  border: 0;
  border-bottom: 1px solid var(--main-color);
  background: transparent;
  padding: 6px;
  border-radius: 0;
  outline-offset: 4px;
}
.dash-form__input--file {
  position: absolute;
  top: 0px;
  left: 10px;
  overflow: hidden;
  width: 100%;
  bottom: 0px;
  opacity: 0;
  color: var(--main-color);
}
.dash-form__input--attachment {
  width: 100%;
  padding: 7px;
}
.dash-form__input--column {
  width: 100%;
}
.dash-form__input--hidden {
  display: none;
}
.dash-form__input-ctor {
  display: flex;
  flex-direction: column;
}
.dash-form__row-field {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dash-form__note {
  font-size: 12px;
}
.dash-form__avatar-upload {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dash-form__avatar-upload .account-avatar {
  --size: 60px;
}
.dash-form__avatar-upload input[type=file] {
  max-width: 150px;
}
.dash-form__avatar-upload button {
  border: 0;
}
.dash-form__hr {
  height: 0;
  border-bottom: 1px solid var(--border-color);
  opacity: 0.5;
  margin: 20px 0;
}
.dash-form__submit {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}
.dash-form__submit .loading {
  --loading-size: 30px;
  --loading-margin: 0;
  --loading-thickness: 10px;
}
.dash-form__btn {
  color: var(--btn-text-color);
  display: inline-flex;
  border: 1px solid var(--base-color);
  padding: 10px;
  border-radius: 2px;
  font-weight: 600;
  background: var(--base-color);
  min-width: 100px;
  cursor: pointer;
  text-align: center;
  justify-content: center;
  gap: 8px;
  align-items: center;
  text-decoration: none;
}
.dash-form__btn--minor, .dash-form__btn--danger {
  border: 0;
  background: transparent;
}
.dash-form__btn--minor {
  color: var(--text-color);
  min-width: auto;
}
.dash-form__btn--danger {
  color: var(--error-color);
}
.dash-form__btn:disabled {
  opacity: 0.5;
}
.dash-form__btn--draft, .dash-form__btn-theme, .dash-form__btn-publish, .dash-form__btn-visit-store {
  color: var(--store-btn-color);
  border-color: var(--store-btn-color);
  cursor: pointer;
  transition: all 0.2s linear;
  margin: 0 10px 0 0;
  font-size: 1vw;
  text-align: center;
  vertical-align: middle;
  width: 8vw;
  height: 40px;
  border: 1px solid var(--toggle-color-bg);
  border-radius: 0px;
  background-color: var(--draft-saved-btn-color-bg);
  opacity: 1;
}
.dash-form__btn--draft:hover:not([disabled]), .dash-form__btn-theme:hover:not([disabled]), .dash-form__btn-publish:hover:not([disabled]), .dash-form__btn-visit-store:hover:not([disabled]) {
  color: var(--store-btn-color);
  background: var(--main-color);
  border-color: var(--main-color);
}
.dash-form__btn--draft:disabled, .dash-form__btn-theme:disabled, .dash-form__btn-publish:disabled, .dash-form__btn-visit-store:disabled {
  color: var(--store-btn-color-disabled);
  border-color: var(--disabled-border-color);
}
.dash-form__btn-visit-store {
  color: white;
  display: inline-block;
  width: 10vw;
  cursor: pointer;
  transition: all 0.2s linear;
  margin: 0 10px 0 0;
  line-height: 30px;
  background-color: var(--base-color);
  border-color: var(--base-color);
}
.dash-form__btn-visit-store svg {
  width: 1vw;
  margin-left: 8px;
  vertical-align: baseline;
  transition: transform 0.3s ease-in-out;
}
.dash-form__btn-visit-store:hover {
  color: var(--text-color);
  background: var(--main-color);
}
.dash-form__btn-visit-store:hover svg {
  transform: scale(1.3);
}
.dash-form__btn-publish {
  cursor: pointer;
  color: white;
  width: 10vw;
  background-color: var(--base-color);
  border-color: var(--base-color);
}
.dash-form__btn-theme {
  cursor: pointer;
  width: 13vw;
  background-color: var(--main-color);
  border-color: var(--main-color);
}
.dash-form__btn-theme-group {
  position: relative;
}
.dash-form__btn-theme-picker {
  width: 100%;
  height: 150px;
  position: absolute;
  top: 45px;
  left: 0;
  overflow: hidden;
  bottom: 0px;
  color: var(--main-color);
}
.dash-form__error {
  color: var(--error-color);
}
.dash-form__success {
  color: var(--success-color);
}
@media (max-width: 800px) {
  .dash-form__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dash-form__label {
    margin-top: 8px;
  }
  .dash-form__inputs-group {
    display: flex;
    flex-direction: column;
  }
}

.design-package-card {
  background: var(--default-option-background);
  flex-shrink: 0;
  width: calc(20% - 40px);
  max-width: 250px;
  min-width: 210px;
  cursor: pointer;
  border: 3px solid var(--main-bg-color);
  transition: box-shadow 0.2s ease;
  position: relative;
}
.design-package-card:after {
  display: block;
  opacity: 0;
  background-color: var(--base-color);
  width: 13%;
  height: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
  content: "";
  position: absolute;
  top: -3px;
  right: 3%;
  transition: height 0.2s ease-in;
}
.design-package-card:hover, .design-package-card--selected {
  box-shadow: 0 0 0 1px var(--base-color);
}
.design-package-card--selected:after {
  opacity: 1;
  height: 45px;
}
.design-package-card__title {
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--base-color);
}
.design-package-card__price-line {
  background: var(--base-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
.design-package-card__price {
  color: var(--heading-text-color);
  font-weight: 800;
  font-size: 25px;
  margin: 0;
  line-height: 1;
}
.design-package-card__price-text {
  margin: 0;
  color: var(--b-color);
}
.design-package-card__options {
  list-style: none;
  color: var(--grey-text-color);
  padding: 0 20px;
  font-size: 14px;
}
.design-package-card__option:not(:last-child) {
  margin-bottom: 10px;
  line-height: 1;
}

.error-message {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.error-message .icon {
  --size: 32px;
  color: var(--error-color);
  flex: 0 0 auto;
  margin-top: 8px;
}

.footer__row {
  background-color: var(--footer-bg-color);
  display: flex;
  flex-direction: row;
  padding: 2vw 8vw;
  gap: 2vw 8vw;
  align-items: stretch;
  justify-content: stretch;
  flex-wrap: wrap;
}
@media (max-width: 461px) {
  .footer__row {
    flex-direction: column;
  }
}
@media (max-width: 1200px) {
  .footer__row {
    gap: 5vw;
  }
}
@media (max-width: 980px) {
  .footer__row {
    padding: 7vw 5vw 0 5vw;
  }
}
.footer__column {
  flex: 1 1 10%;
  min-width: 120px;
  text-align: center;
}
.footer__column-heading {
  color: var(--footer-ui-color);
  text-align: left;
}
@media (max-width: 1200px) {
  .footer__column-heading {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 20px;
  }
}
.footer__column--brand {
  display: flex;
  align-items: center;
}
@media (max-width: 461px) {
  .footer__column--brand {
    order: 5;
    justify-content: center;
  }
}
.footer__column--buttons {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 71px;
}
@media (max-width: 666px) {
  .footer__column--buttons {
    flex-direction: row !important;
    padding-top: 0;
  }
}
@media (max-width: 461px) {
  .footer__column--buttons {
    justify-content: flex-start;
    flex-direction: column !important;
    align-items: center;
    margin-top: 13px;
  }
}
.footer__logo {
  width: 13vw;
  max-width: initial !important;
}
.footer__button {
  border: 2px solid var(--footer-ui-color);
  padding: 5px;
  color: var(--footer-ui-color);
  font-size: 0.7vw;
  width: 100%;
  max-width: 150px;
  text-decoration: none;
}
@media (max-width: 1200px) {
  .footer__button {
    font-size: 12px;
  }
}
@media (max-width: 461px) {
  .footer__button {
    max-width: 100% !important;
    padding: 19px;
  }
}
.footer-navbar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.3vw;
  text-align: left;
  margin: 0;
  padding-left: 0;
}
.footer-navbar__item {
  list-style-type: none;
  font-family: var(--font-family);
  font-weight: 200;
}
.footer-navbar__link {
  color: var(--footer-ui-color);
  text-decoration: none;
  text-transform: capitalize;
}
@media (max-width: 1200px) {
  .footer-navbar__link {
    font-size: 14px;
  }
}
.footer__copyright {
  margin: 0;
  font-size: 0.6vw;
  padding: 10px 30px;
  background-color: var(--footer-bg-color);
  color: var(--footer-ui-color);
  text-align: center;
}
@media (max-width: 1200px) {
  .footer__copyright {
    font-size: 14px;
  }
}
@media (max-width: 1202px) {
  .footer__column--brand {
    flex: 1 0 100%;
    margin-top: 16px;
  }
  .footer__column--buttons {
    padding-top: 50px;
  }
  .footer__logo {
    width: 20vw;
  }
}

@keyframes bounce-avatar {
  from {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-2px);
  }
  75% {
    transform: translateY(2px);
  }
  to {
    transform: translateY(0);
  }
}
.header {
  position: relative;
  height: var(--header-height);
  background: var(--main-bg-color);
  --submenu-bg: var(--main-bg-color);
  margin: auto;
  display: flex;
  width: 100%;
  transition: all 0.2s ease;
  border-bottom: 2px solid var(--header-border);
  padding: 0 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--menu-text-color);
  z-index: 500;
}
.site--fixed .header {
  box-shadow: 0 1px 8px var(--semi-transparent-shadow);
}

@media (max-width: 872px) {
  .header .header-top-menu {
    display: none;
  }
}
.header .header-logo, .header .header-icons {
  flex: 1 1 200px;
}

.header-top-menu {
  flex: 1 1 auto;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
  gap: 1vw;
}
.header-top-menu__item {
  display: flex;
}
.header-top-menu__item > a {
  outline-offset: -5px;
}
.header-top-menu__item--submenu {
  position: relative;
}
.header-top-menu__item:hover:not(.header-top-menu__item--closed) .header-top-menu__mega, .header-top-menu__item--open .header-top-menu__mega {
  height: auto;
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  transition: transform 0.4s ease, opacity 0ms, visibility 0ms;
}
.header-top-menu__item:hover:not(.header-top-menu__item--closed) .header-submenu, .header-top-menu__item--open .header-submenu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}
.header-top-menu__link {
  text-decoration: none;
  padding: 0 10px;
  color: inherit;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: capitalize;
}
.header-top-menu__link svg {
  width: 5px;
}
.header-top-menu__link:hover {
  color: var(--menu-hover-color);
}
.header-top-menu__mega {
  position: absolute;
  left: 0;
  top: 100%;
  display: flex;
  gap: 6vw;
  visibility: hidden;
  opacity: 0;
  align-items: baseline;
  justify-content: center;
  width: 100vw;
  height: 0;
  padding-bottom: 2vw;
  right: 0;
  background: var(--header-menu-bg);
  transition: transform 0.1s ease, opacity 0ms linear 0.1s, visibility 0ms linear 0.1s;
  transform-origin: top center;
  transform: scaleY(0);
}
.header-top-menu__mega-column {
  text-align: left;
}
.header-top-menu__mega-column h5 {
  margin: 0;
  font-weight: 700;
}
.header-top-menu__mega-group {
  list-style-type: none;
  padding: 0;
  line-height: 32px;
}
.header-top-menu__mega-item a {
  text-decoration: none;
  text-transform: capitalize;
  font-weight: 500;
  font-size: 14px;
  color: var(--header-menu-item-color);
}
.header-top-menu__mega-item a:hover {
  text-decoration: underline;
}

.header-logo {
  height: var(--header-height);
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 8px;
}
.header-logo__menu {
  text-align: center;
  display: block;
  align-items: center;
  justify-content: center;
  background: var(--menu-icon) no-repeat center;
  width: 30px;
  height: 45px;
  padding: 0 8px;
  background-size: 16px;
  border: none;
  cursor: pointer;
}
@media (max-width: 400px) {
  .header .header-logo__link {
    overflow: hidden;
    width: var(--logo-crop);
  }
}

.header-logo__img {
  width: var(--logo-width);
  height: var(--logo-height);
}

.header-icons {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
  margin-left: auto;
  justify-content: flex-end;
  align-items: center;
}
.header-icons__cart {
  margin-left: 4px;
}
.header-icons__item {
  display: flex;
  line-height: 45px;
  position: relative;
}
.header-icons__item > a {
  outline-offset: -5px;
}
.header-icons__item:hover:not(.header-icons__item--closed) .header-submenu, .header-icons__item--open .header-submenu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}
.header-icons__unread {
  display: block;
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--focus-color);
  color: white;
  font-size: 10px;
  margin-left: auto;
  padding: 2px 4px;
  border-radius: 2px;
  text-decoration: none;
  line-height: 1;
}
.header-icons__link {
  text-decoration: none;
  padding: 0 10px;
  color: inherit;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-icons__link svg {
  width: 25px;
  height: 25px;
}
.header-icons__link:hover {
  color: var(--menu-hover-color);
}
.header-icons__link--avatar {
  padding: 5px;
}
.header-icons__link--avatar .account-avatar {
  --size: 35px;
}
.header-icons__link--bounce {
  animation: 0.3s 6 ease-in-out bounce-avatar;
}
.header-icons__link--cart {
  display: flex;
}
.header-icons__link--hamburger {
  align-self: center;
  border-right: 1px solid var(--base-color);
}
.header-icons__link--hamburger-pw {
  border-right: 1px solid var(--menu-text-color);
}
.header-icons__contacts {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 10px;
  padding-right: 0;
}
.header-icons__contacts-right {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  align-items: start;
}
.header-icons__contacts-title {
  font-weight: normal;
}
.header-icons__contacts-phone {
  font-size: 17px;
}

.header-submenu {
  position: absolute;
  z-index: -1;
  top: 100%;
  visibility: hidden;
  width: 200px;
  margin: 0;
  padding: 0;
  opacity: 0;
  border-top: 3px solid var(--base-color);
  background: var(--submenu-bg);
  color: inherit;
  text-align: start;
  transition: all 0.5s, visibility 0.3s;
}
.header-submenu--under-icon {
  right: 0;
}
@media (max-width: 400px) {
  .header-submenu--under-icon {
    right: 50%;
    transform: translate(50%, 0);
  }
}
.header-submenu--rightmost {
  right: 0;
  width: 300px;
}
.header-submenu--under-text {
  left: 0;
}
.header-submenu__item {
  border-bottom: 1px solid var(--light-grey-border);
  list-style: none;
  line-height: 20px;
  padding: 5px;
}
.header-submenu__item--no-border {
  border-bottom: 0;
}
.header-submenu__item .account-avatar {
  --size: 24px;
  margin: -4px;
}
.header-submenu__cart-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
}
.header-submenu__cart-contents img {
  height: 64px;
  object-fit: contain;
}
.header-submenu__link {
  display: flex;
  padding: 5px 10px;
  font-size: 12px;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}
.header-submenu__link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.header-submenu__link span:not(.account-avatar) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.header-submenu__link:hover span:not(.account-avatar) {
  text-decoration: underline;
}
.header-submenu__link--email {
  text-transform: lowercase;
}
.header-submenu__link--inner {
  padding: 11px 25px;
}
.header-submenu__unread {
  background: var(--focus-color);
  color: white;
  font-size: 10px;
  display: block;
  margin-left: auto;
  padding: 2px 4px;
  border-radius: 2px;
  text-decoration: none;
  line-height: 1;
}
.header-submenu__icon {
  display: inline-block;
  transform: rotateZ(-90deg);
  transition: all 0.2s ease;
}
.header-submenu--under-icon .header-submenu:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10.5px;
  right: 3.2px;
  width: 0;
  height: 0;
  transform: rotate(45deg);
  border: 0 solid var(--base-color);
  border-bottom: 15px solid transparent;
  border-left-width: 15px;
  transition: all 0.2s ease;
}
.header-submenu--inner {
  position: unset;
  right: 0;
  visibility: visible;
  overflow: hidden;
  max-height: 0;
  transform: translateY(0) !important;
  border-top: 0;
  background: var(--inner-dropdown-bg);
  box-shadow: none;
}
.header-submenu--hidden {
  visibility: hidden !important;
  opacity: 0 !important;
}

hr {
  overflow: hidden;
  height: 1px;
  max-width: 50vw;
  background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0)), color-stop(0.5, #414243), to(rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #414243, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #414243, rgba(0, 0, 0, 0));
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0), #414243, rgba(0, 0, 0, 0));
  background: linear-gradient(left, rgba(0, 0, 0, 0), #414243, rgba(0, 0, 0, 0));
  border: 0;
}
hr:after {
  display: block;
  content: "";
  height: 30px;
  background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 116, color-stop(0%, #414243), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-radial-gradient(center top, farthest-side, #414243 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -moz-radial-gradient(center top, farthest-side, #414243 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-radial-gradient(center top, farthest-side, #414243 0%, rgba(255, 255, 255, 0) 100%);
  background-image: radial-gradient(farthest-side at center top, #414243 0%, rgba(255, 255, 255, 0) 100%);
}

.labeled-input {
  position: relative;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--input-border);
  outline: none;
}
.labeled-input:focus-within {
  border-color: var(--focus-color);
  outline: 1px solid var(--focus-color);
}
.labeled-input__input {
  font-size: 14px;
  width: 100%;
  border: 0;
  outline: none;
  display: block;
  line-height: 1;
}
.labeled-input__input--text {
  padding: 15px 6px 4px 6px;
}
.labeled-input__input--select {
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  margin: 0;
  padding: 15px 12px 4px 6px;
  text-overflow: ellipsis;
}
.labeled-input--select::after {
  position: absolute;
  right: 2px;
  bottom: 10px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: currentColor transparent transparent transparent;
}
.labeled-input__label {
  position: absolute;
  pointer-events: none;
  left: 6px;
  right: 0;
  top: 15px;
  line-height: 1;
  transition: 0.2s ease all;
  opacity: 0.5;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.labeled-input__label-error {
  opacity: 0;
  transition: 0.2s ease all;
}
.labeled-input--value .labeled-input__label, .labeled-input__input:placeholder-shown ~ .labeled-input__label, .labeled-input__input:focus ~ .labeled-input__label {
  top: 0;
  font-size: 11px;
  opacity: 0.5;
}
.labeled-input--error {
  border-color: var(--red-text-color);
}
.labeled-input__error {
  position: absolute;
  pointer-events: none;
  transition: 0.2s ease all;
  top: 0;
  bottom: 15px;
  left: 10px;
  font-size: 11px;
  opacity: 0.8;
  color: var(--red-text-color);
}
.labeled-input__input:not(:placeholder-shown) ~ .labeled-input__error, .labeled-input__input:focus ~ .labeled-input__error {
  opacity: 0;
  top: -20px;
}
.labeled-input--error .labeled-input__input:not(:placeholder-shown) ~ .labeled-input__label, .labeled-input--error .labeled-input__input:focus ~ .labeled-input__label {
  color: var(--red-text-color);
  opacity: 0.8;
}
.labeled-input--error .labeled-input__input:not(:placeholder-shown) ~ .labeled-input__label .labeled-input__label-error, .labeled-input--error .labeled-input__input:focus ~ .labeled-input__label .labeled-input__label-error {
  opacity: 0.8;
}

.loading,
.loading:after {
  border-radius: 50%;
  width: var(--loading-size);
  height: var(--loading-size);
}

.loading {
  --color: var(--loading-color);
  margin: var(--loading-margin);
  position: relative;
  border-top: var(--loading-thickness) solid transparent;
  border-right: var(--loading-thickness) solid var(--color);
  border-bottom: var(--loading-thickness) solid transparent;
  border-left: var(--loading-thickness) solid var(--color);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loading--503 {
  --color: gray;
  animation-duration: 3s;
}
.loading--hit {
  animation-play-state: paused;
  --color: var(--base-color);
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.payment-form {
  width: 100%;
}
.payment-form__action-row {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}
.payment-form__submit {
  display: none;
  width: 100%;
  padding: 5px;
  border: 0;
  font-size: 20px;
  line-height: 40px;
  background: var(--grey-background);
  color: var(--main-bg-color);
  border-radius: 2px;
  font-weight: bold;
  cursor: pointer;
  --loading-size: 40px;
  --loading-margin: 0 auto;
  --loading-color: var(--main-bg-color);
  --loading-thickness: 10px;
}
.payment-form__submit--visible {
  display: block;
}
.payment-form__submit--active {
  background: var(--base-color);
}
.payment-form__paypal {
  display: none;
  width: 100%;
  text-align: center;
}
.payment-form__paypal--visible {
  display: block;
}
.payment-form hr {
  border-color: #808080;
  width: calc(100% - 20px);
  margin: 0 auto;
}
@media (max-width: 576px) {
  .payment-form--transparent {
    background: transparent;
  }
}

.popup-screen {
  position: fixed;
  z-index: 999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--semi-black-bg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  position: relative;
  background: var(--popup-background);
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--semi-dark-shadow);
  padding: 24px;
  margin: auto;
  max-width: calc(100vw - 100px);
  max-height: calc(100vh - 100px);
  overflow-x: hidden;
  overflow-y: auto;
}
@media (max-width: 500px) {
  .popup {
    max-width: calc(100vw - 50px);
  }
}
.popup h2 {
  margin: 0;
}
.popup--roster {
  width: 700px;
}
.popup--share {
  width: 500px;
}
.popup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.popup__close svg {
  display: block;
  width: 24px;
  height: 24px;
}
.popup__faq {
  padding: 16px;
}
.popup__faq .faq-item h3 {
  font-size: 18px;
}
.popup__faq .faq-item {
  font-size: 16px;
}
.popup__faq-link {
  margin: 8px 0;
  font-size: 18px;
}
.popup .rating {
  width: 80vw;
}

.design-preview {
  position: relative;
  display: flex;
  align-items: center;
}
.design-preview canvas {
  display: block;
  width: 100%;
  position: relative;
  z-index: 10;
}
.design-preview__selection {
  position: absolute;
  z-index: 20;
  outline: 2px dashed var(--purple-color);
  top: 50%;
  left: 50%;
}
.design-preview__selection-actions {
  position: absolute;
  right: -4px;
  top: -32px;
  z-index: 30;
}
.design-preview__selection-actions button {
  width: 24px;
  height: 24px;
  border: 0;
  background: var(--purple-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: zoom-in;
}
.design-preview__selection-actions svg {
  width: 20px;
  height: 20px;
}
.design-preview__selection-resizer {
  position: absolute;
  z-index: 25;
  width: 12px;
  height: 12px;
  background: var(--purple-color);
}

.design-preview-vector {
  position: absolute;
  display: none;
}

.product-card {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  position: relative;
  padding: 10px;
  font-size: 13px;
  font-weight: 400;
  gap: 10px;
  container-type: inline-size;
}
.product-card__bottom {
  flex: 1 1 auto;
}
.product-card__bottom-row {
  margin: 0;
  text-transform: capitalize;
  text-decoration: none;
  line-height: 1.2;
}
.product-card__bottom-row--name {
  font-weight: 600;
  margin-bottom: 4px;
}
.product-card__bottom-row--name:hover {
  text-decoration: underline;
}
@media only screen and (max-width: 400px) {
  .product-card__bottom-row-tmi {
    display: none;
  }
}
.product-card__actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.product-card__action {
  display: flex;
  gap: 8px;
  padding: 8px;
  margin: 0 -8px -8px;
  text-decoration: none;
  color: var(--base-color);
  align-items: center;
  line-height: 1.1;
}
.product-card__action svg {
  width: 20px;
  height: 20px;
}
.product-card__action:hover span {
  text-decoration: underline;
}
@media only screen and (max-width: 450px) {
  .product-card__action {
    padding: 4px;
    margin: -4px;
    gap: 4px;
  }
  .product-card__action svg {
    width: 16px;
    height: 16px;
  }
  .product-card__action-tmi {
    display: none;
  }
}
@container (width < 250px) {
  .product-card__action-tmi {
    display: none;
  }
}
.product-card__image {
  aspect-ratio: 0.75;
  background: var(--card-background);
}
.product-card__image-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 0.75;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.product-card__image-img {
  width: 100%;
  position: relative;
  z-index: 1;
  aspect-ratio: var(--product-aspect-ratio);
}
@media screen and (max-width: 450px) {
  .product-card {
    font-size: 11px;
    padding: 4px;
  }
}

.product-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 43%;
  left: 1%;
  pointer-events: none;
  z-index: 0;
  clip-path: polygon(1% 30%, 99% 30%, 99% 70%, 1% 70%);
}

.product-slider {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px inset var(--main-bg-color);
  max-width: 100%;
}
.product-slider h2 {
  text-align: center;
}
.product-slider__content {
  display: flex;
  overflow: auto;
  scrollbar-width: none;
  cursor: pointer;
  padding: 0 8px;
}
.product-slider__content--short {
  justify-content: center;
}
.product-slider__content::-webkit-scrollbar {
  display: none;
}
.product-slider__product {
  padding: 0 6px;
}
.product-slider__product--filler {
  width: 1px !important;
  flex: 0 0 1px !important;
}
.product-slider__product img {
  max-width: 100%;
}
.product-slider--portrait .product-slider__product {
  width: 140px;
  flex: 0 0 140px;
}
.product-slider--landscape .product-slider__product {
  width: 208px;
  flex: 0 0 208px;
}
.product-slider__arrow {
  position: absolute;
  top: calc(50% - 32px);
  height: 64px;
  width: 64px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  cursor: pointer;
}
.product-slider__arrow--left {
  left: 16px;
}
.product-slider__arrow--right {
  right: 16px;
}
.product-slider__arrow svg {
  width: 16px;
  height: 16px;
}
@media (min-width: 1000px) {
  .product-slider__arrow--visible {
    opacity: 1;
    pointer-events: all;
  }
}

.rating-stars {
  --size: 20px;
  position: relative;
  aspect-ratio: 5.4;
  height: var(--size);
}
.rating-stars:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(100% * (1 - var(--rating-value) / 5));
  background: url("/static/stars/gray.svg") repeat-x right;
  background-size: auto 100%;
}
.rating-stars:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(100% * var(--rating-value) / 5);
  background: url("/static/stars/orange.svg") repeat-x;
  background-size: auto 100%;
}
.rating-stars--null {
  opacity: 0.5;
}

.review {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: center;
}
.review__info {
  font-size: 16px;
  margin: 0;
  font-weight: normal;
}
.review__text {
  grid-column: 1/span 2;
  font-size: 14px;
  white-space: pre-wrap;
}
.review__response {
  grid-column: 1/span 2;
  font-size: 14px;
  white-space: pre-wrap;
  padding-left: 16px;
}
.review__ratings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.review__ratings-breakdown {
  position: absolute;
  top: 100%;
  left: -8px;
  opacity: 0;
  background: var(--main-bg-color);
  pointer-events: none;
  transition: opacity 0.5s;
  padding: 8px;
  width: auto;
}
.review__ratings:hover .review__ratings-breakdown, .review__ratings:focus-within .review__ratings-breakdown {
  opacity: 1;
}
.review__rating {
  display: flex;
  font-size: 10px;
  justify-content: flex-start;
  gap: 4px;
  align-items: center;
}
.review__rating .rating-stars {
  --size: 10px;
}
.review__rating--overall .rating-stars {
  --size: 24px;
  opacity: 1;
}
.review__photos {
  grid-column: 1/span 2;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.review__photos a {
  display: flex;
  flex: 1 1 auto;
  max-width: 300px;
  max-height: 300px;
}
.review__photos img {
  width: 100%;
  min-width: 0;
  max-width: 300px;
  max-height: 300px;
  object-fit: cover;
  margin: 0;
}

.roster-editor {
  display: flex;
  flex-direction: column;
}
.roster-editor__row {
  display: flex;
  justify-content: flex-end;
  color: var(--base-color);
  margin-bottom: auto;
  margin-right: 30px;
  height: 39px;
}
.roster-editor__row > * {
  margin-right: 10px;
}
.roster-editor__row > *:last-child {
  margin: 0;
}
.roster-editor__row-input-num-rows {
  width: 100px;
  text-align: center;
  border: 1px solid var(--base-color);
  color: var(--base-color);
  border-radius: 0;
}
.roster-editor__row-btn {
  height: 100%;
  border: 1px solid;
  cursor: pointer;
  white-space: nowrap;
}
.roster-editor__row-btn-clear {
  width: 160px;
}
.roster-editor__row-btn-add-rows {
  width: 100px;
}
.roster-editor__upload {
  width: 100%;
  -webkit-appearance: textfield;
  appearance: none;
  cursor: pointer;
}
.roster-editor__upload-title {
  margin-bottom: 20px;
}
.roster-editor__upload-wrapper {
  position: relative;
}
.roster-editor__upload-wrapper:after {
  content: "▼";
  font-size: 15px;
  color: #fff;
  position: absolute;
  top: 60px;
  right: 10px;
  transform: translate(0, -50%);
  pointer-events: none;
}
.roster-editor__heading {
  text-transform: uppercase;
  color: var(--base-color);
  font-size: 25px;
  line-height: 30px;
  text-align: left;
  margin: 0;
  outline: none;
  margin-left: 10px;
}
.roster-editor__heading-placeholder {
  top: 0;
  position: absolute;
  opacity: 1;
  color: var(--base-color);
  font-size: 25px;
}
.roster-editor__header-row {
  padding-top: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  cursor: pointer;
  margin-bottom: auto;
}
.roster-editor__header-row button {
  border: 1px solid var(--base-color);
  margin-right: 16px;
  padding: 8px 45px;
  background: var(--base-color);
  color: #fff;
  cursor: pointer;
}
.roster-editor__header-row button:last-child {
  margin: 0;
}
.roster-editor__description {
  margin-left: 10px;
}
.roster-editor-table {
  border-collapse: separate;
  border-spacing: 10px;
  text-align: center;
  margin: 0 -10px;
}
.roster-editor-table__heading {
  font-weight: 700;
  color: var(--menu-color);
  text-decoration: none;
  white-space: nowrap;
  font-size: 12px;
  min-width: 20px;
}
.roster-editor-table__heading a {
  text-decoration-style: dotted;
}
.roster-editor-table__heading svg {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  fill: var(--menu-color);
}
.roster-editor-table__cell {
  white-space: nowrap;
  font-size: 15px;
  border: 1px solid var(--builder-roster-table-cell-border);
  line-height: 22px;
  font-weight: 700;
  min-height: 40px;
  text-transform: capitalize;
  color: var(--menu-color);
  text-decoration: none;
}
.roster-editor-table__cell:focus-within {
  outline: 1px solid var(--focus-color);
}
.roster-editor-table__cell--actions {
  transition: all 0.2s ease;
  width: 20px;
  border: none;
}
.roster-editor-table__cell--actions button {
  border: none;
  cursor: pointer;
  color: var(--menu-color);
}
.roster-editor-table__cell--actions button:hover {
  color: var(--base-color);
}
.roster-editor-table__cell--actions svg {
  width: 12px;
}
.roster-editor-table__input {
  border: none;
  width: 100%;
  outline: none;
  text-align: center;
}
.roster-editor-table__input--number::-webkit-outer-spin-button, .roster-editor-table__input--number::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  margin: 0;
}
.roster-editor-table__preview-icon {
  border: none;
  width: 21px;
  color: var(--menu-color);
  cursor: pointer;
}
.roster-editor-table__preview-icon:hover {
  color: var(--base-color);
}
.roster-editor-table__preview-icon svg {
  width: 21px;
}
.roster-editor-table__size, .roster-editor-table__quantity {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}
.roster-editor-table__size input, .roster-editor-table__size button, .roster-editor-table__size select, .roster-editor-table__quantity input, .roster-editor-table__quantity button, .roster-editor-table__quantity select {
  text-align: center;
  min-width: 25px;
  margin: 0;
}
.roster-editor-table__size svg, .roster-editor-table__quantity svg {
  width: 10px;
  margin-left: 5px;
}
.roster-editor-table__flag {
  width: 70px;
  max-width: 70px;
}
.roster-editor-table__flag .icon {
  --size: 10px;
}
.roster-editor-table__name, .roster-editor-table__alias {
  min-width: 145px;
}
.roster-editor-table__number {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  text-align: center;
}
.roster-editor-table__number input {
  text-align: center;
}
.roster-editor-table__size {
  position: relative;
}
.roster-editor-table__size select {
  appearance: none;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  height: 40px;
  width: 100%;
  border: none;
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.roster-editor-table__size select span:last-child {
  display: none;
}
.roster-editor-table__size select:focus span:first-child {
  display: none;
}
.roster-editor-table__size select:focus span:last-child {
  display: block;
}
.roster-editor-table__size select option[data-oos=true] {
  color: var(--disabled-color);
}
.roster-editor-table__flag-selector-wrapper {
  position: relative;
  display: flex;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.roster-editor-table__flag-selector-wrapper .labeled-input {
  border: 0;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.roster-editor-table__flag-selector-wrapper .labeled-input select {
  appearance: none;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  height: 100%;
  width: 100%;
}
.roster-editor-table__flag-selector-wrapper img {
  max-width: 50px;
  max-height: 25px;
  pointer-events: none;
}
.roster-editor-table__flag-selector-wrapper .icon {
  pointer-events: none;
}
.roster-editor-table__quantity-inner {
  width: 100%;
  display: flex;
  align-items: center;
}
.roster-editor-table__quantity-inner button, .roster-editor-table__quantity-inner input {
  font-weight: bold;
}
.roster-editor__btn {
  border: none;
  cursor: pointer;
  background: var(--base-color);
  color: var(--text-color);
  padding: 4px 25px;
  text-decoration: none;
}
.roster-editor__btn--save {
  display: block;
  margin-left: auto;
  margin-right: 10px;
}
.roster-editor__btn:disabled {
  color: var(--disabled-border-color);
  cursor: not-allowed;
}
.roster-editor__adjust {
  border: none;
  width: 30px;
  text-align: center;
  padding: 0;
  height: 25px;
  background: transparent;
  color: var(--base-color);
}
.roster-editor .country-picker {
  opacity: 0;
  border: none;
}
.roster-editor-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 8px 0;
}
.roster-editor-sizes__group {
  display: flex;
  flex-direction: column;
}
.roster-editor-sizes__group-sizes {
  display: flex;
  gap: 4px;
}
.roster-editor-sizes__size {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.roster-editor-sizes__entry {
  display: flex;
  align-items: stretch;
}
.roster-editor-sizes__input {
  width: 35px;
  font-weight: bold;
  border: 1px solid #ccc;
  text-align: center;
  padding: 0;
  height: 25px;
}

.alert__actions button {
  min-width: 100px;
}

.sidebar {
  position: fixed;
  z-index: 700;
  background: var(--sidebar-bg);
  width: 0;
  left: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.25s, outline 0.25s, box-shadow 0.25s, visibility 0.25s;
  max-height: 100vh;
  height: 100vh;
  white-space: nowrap;
  outline: 1px solid transparent;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0);
  visibility: hidden;
}
.sidebar__header {
  padding: 0 10px;
  display: flex;
  width: var(--sidebar-width);
}
.sidebar__close {
  border: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  padding: 0;
}
.sidebar__close svg {
  width: 30px;
}
.sidebar__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  flex-direction: column;
  overflow: hidden;
  width: var(--sidebar-width);
}
.sidebar__menu--level-0 {
  border-top: 1px solid var(--sidebar-entry-border);
  margin-bottom: 20px;
}
@media (min-width: 873px) {
  .sidebar__menu--mobile-only {
    display: none;
  }
}
@media (min-width: 873px) {
  .sidebar__entry--mobile-only {
    display: none;
  }
}
.sidebar__entry:focus-visible {
  outline: 0;
}
.sidebar__entry:focus-visible span {
  outline: 2px solid var(--focus-color);
  outline-offset: -3px;
}
.sidebar__heading {
  display: flex;
  align-items: center;
  line-height: 20px;
  color: var(--menu-color);
  max-height: 40px;
  overflow: hidden;
  transition: all 0.2s;
  border-bottom: 1px solid var(--sidebar-entry-border);
  padding: 4px 8px 2px;
  gap: 4px;
  font-size: 12px;
}
.sidebar__heading .account-avatar {
  --size: 16px;
  font-size: 8px;
  padding: 0;
}
.sidebar__heading > svg {
  width: 12px;
  height: 12px;
  margin-bottom: -2px;
}
.sidebar__row {
  display: flex;
  align-items: center;
  line-height: 20px;
  font-size: calc(16px - 1px * var(--level));
  padding: calc(5px - 2px * var(--level));
  padding-left: calc(25px + var(--level) * 10px);
  color: var(--menu-color);
  max-height: 40px;
  overflow: hidden;
  transition: all 0.2s;
  border-bottom: 1px solid var(--sidebar-entry-border);
}
.sidebar__row--has-entries {
  cursor: pointer;
}
.sidebar__row--has-entries::before {
  content: "";
  position: relative;
  left: -5px;
  display: block;
  width: 0;
  height: 0;
  margin: -4px 0 -4px -6px;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
  transform: rotate(0deg);
  transition: transform 0.3s;
}
.sidebar__row--active {
  color: var(--sidebar-active-color);
}
.sidebar__row--active::before {
  transform: rotate(90deg);
}
.sidebar__menu:not(.sidebar__menu--level-0):not(.sidebar__menu--active) .sidebar__entry {
  border: 0;
}
.sidebar__menu:not(.sidebar__menu--level-0):not(.sidebar__menu--active) .sidebar__row {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0 solid var(--sidebar-entry-border);
  transition: all 0.2s;
  visibility: hidden;
}
.sidebar__link {
  color: inherit;
  font-weight: calc(700 - 100 * var(--level));
  text-decoration: none;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}
.sidebar__link span {
  display: inline-block;
  padding: 5px;
}
.sidebar__link-aside {
  margin-left: auto;
}
.sidebar__link[href]:hover .sidebar__link-text {
  text-decoration: underline;
}
.sidebar__link:focus-visible {
  outline: 0;
}
.sidebar__link:focus-visible span {
  outline: 2px solid var(--focus-color);
  outline-offset: -3px;
}
.sidebar__link > svg {
  width: 20px;
  height: 20px;
}
.sidebar__row--no-entries .sidebar__link {
  flex: 1 1 auto;
}
.sidebar--visible {
  width: var(--sidebar-width);
  left: 0;
  outline: 1px solid black;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.5);
  transition: width 0.25s, outline 0.25s, box-shadow 0.25s, visibility 0;
  visibility: visible;
}
.site--sidebar-locked .sidebar__header {
  visibility: hidden;
}

@media (min-width: 873px) {
  .site--sidebar-locked .sidebar {
    background: var(--main-bg-color);
    z-index: 400;
  }
}

.full-width-page, .builder {
  position: relative;
  left: 0;
  transition: left 0.3s, margin-left 0.3s;
}
@media (max-width: 872px) {
  .site--sidebar-shown .full-width-page, .site--sidebar-shown .builder {
    left: var(--sidebar-width);
  }
}
@media (min-width: 873px) {
  .site--sidebar-locked.site--sidebar-shown .full-width-page, .site--sidebar-locked.site--sidebar-shown .builder {
    margin-left: var(--sidebar-width);
  }
  .site--sidebar-shown:not(.site--sidebar-locked) .full-width-page, .site--sidebar-shown:not(.site--sidebar-locked) .builder {
    left: var(--sidebar-width);
  }
}

.centered-page, .unsubscribe-page, .stores, .single-product, .order-item-preview, .order-page, .join-league, .giftcard-order, .faq, .digitize-order-item, .design-package, .create-account--page, .blog, .site-simple-page {
  width: calc(100vw - 32px);
  max-width: 1200px;
  margin: 16px auto;
}
@media (max-width: 1700px) {
  .centered-page, .unsubscribe-page, .stores, .single-product, .order-item-preview, .order-page, .join-league, .giftcard-order, .faq, .digitize-order-item, .design-package, .create-account--page, .blog, .site-simple-page {
    position: relative;
    left: 0;
    transition: left 0.3s, margin-left 0.3s;
  }
  .site--sidebar-shown .centered-page, .site--sidebar-shown .unsubscribe-page, .site--sidebar-shown .stores, .site--sidebar-shown .single-product, .site--sidebar-shown .order-item-preview, .site--sidebar-shown .order-page, .site--sidebar-shown .join-league, .site--sidebar-shown .giftcard-order, .site--sidebar-shown .faq, .site--sidebar-shown .digitize-order-item, .site--sidebar-shown .design-package, .site--sidebar-shown .create-account--page, .site--sidebar-shown .blog, .site--sidebar-shown .site-simple-page {
    left: var(--sidebar-width);
    left: min(var(--sidebar-width), var(--sidebar-width) - (100vw - 1200px) / 2);
  }
}

.site {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: scroll;
  overflow-x: hidden;
  min-height: 100vh;
}
.site--init * {
  transition: none !important;
}
.site--builder {
  overflow-y: hidden;
}
.site__warning {
  display: flex;
  justify-content: space-between;
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 950;
  background: var(--error-color);
  padding: 10px 20px 10px 5px;
  box-shadow: 0 0 10px var(--black-box-shadow);
  transition: transform 0.3s ease;
  transform: translate(-50%, 100%);
}
.site__warning svg {
  width: 50px;
  position: absolute;
  top: -55px;
  background: var(--error-color);
  padding: 5px 5px 20px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  border-radius: 10px;
}
.site__warning:hover {
  transform: translate(-50%, 0);
}
@media (max-width: 400px) {
  .site__warning {
    width: 90%;
  }
}
.site__wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-y: visible;
  overflow-x: auto;
}
.site__footer {
  margin-top: auto;
}

.site-nav {
  position: sticky;
  z-index: 900;
  left: 0;
  top: 0;
}
@media (max-width: 872px) {
  .site-nav .above-header {
    display: none;
  }
  .site-nav .header-icons__contacts-right {
    display: none;
  }
}
@media (min-width: 873px) {
  .site--double-header .site-nav {
    top: calc(-1 * var(--above-header-height));
  }
  .site--double-header .site-nav .header .header-icons--right .header-icons__item:not(.header-icons__item--contact) {
    display: none;
  }
  .site--double-header .site-nav .above-header .header-icons--right .header-icons__item--contact {
    display: none;
  }
  .site--double-header.site--scrolled .site-nav .header .header-icons--right .header-icons__item:not(.header-icons__item--contact) {
    display: flex;
  }
  .site--double-header.site--scrolled .site-nav .header-icons__contacts-right {
    display: none;
  }
  .site--double-header.site--scrolled .site-nav .header-icons--user .header-icons__contacts {
    display: none;
  }
}

/* Reusable class for simple utility pages. */
.size-chart {
  width: 100%;
  overflow-x: auto;
}
.size-chart h2 {
  margin: 0 0 10px;
  color: var(--base-color);
}
.size-chart__table {
  min-width: 300px;
  width: 100%;
  border-spacing: 6px;
  border-collapse: separate;
}
.size-chart__table td {
  padding: 5px;
  background: var(--card-background);
}
.size-chart__table td:first-child {
  font-weight: bolder;
}
.size-chart__table th {
  font-size: 17px;
  font-weight: bolder;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip__tooltiptext {
  visibility: hidden;
  min-width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip__tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltip__tooltiptext {
  visibility: visible;
  opacity: 1;
}

.auth {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 32px 16px;
}
.auth__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 500px;
}
.auth__form > p {
  margin: 0;
}
.auth__form--hidden {
  display: none;
}
.auth__field {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.auth__field--hidden {
  display: none;
}
.auth__error {
  display: flex;
  gap: 16px;
  align-items: center;
}
.auth__error .icon {
  --size: 32px;
  color: var(--error-color);
  flex: 0 0 auto;
}
@media (min-width: 450px) {
  .auth p > span, .auth h1 span, .auth__error span {
    display: inline-block;
    hyphens: auto;
  }
}
.auth__input {
  font-size: 16px;
  padding: 8px;
}
.auth__input--code {
  font-size: 20px;
  letter-spacing: 4px;
}
.auth__submit {
  color: var(--btn-text-color);
  border: 1px solid var(--base-color);
  padding: 8px;
  border-radius: 2px;
  font-weight: 600;
  background: var(--base-color);
  cursor: pointer;
  font-size: 18px;
}
.auth__submit:disabled {
  opacity: 0.5;
}
.auth__alt-actions {
  display: flex;
  gap: 14px;
}
.auth__alt-btn {
  color: var(--text-color);
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 6px;
  border-radius: 2px;
  font-weight: 400;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.auth__alt-btn--right {
  margin-left: auto;
}
.auth__alt-btn:disabled {
  opacity: 0.5;
}
.auth__social-row, .auth__social {
  display: flex;
  gap: 8px;
  align-items: center;
}
.auth__social .icon {
  --size: 32px;
  cursor: pointer;
}
.auth__accounts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 0;
}
.auth__account {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: 12px;
  align-items: center;
  text-align: left;
}
.auth__account-main-name {
  font-weight: 400;
}
.auth__account-email {
  font-size: 14px;
}
.auth__account-last {
  font-size: 12px;
}
.auth__account-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth__account .account-avatar {
  --size: 50px;
}
.auth__account .icon {
  --size: 24px;
}
.auth h1 {
  margin: 0;
  font-size: 20px;
}
.popup .auth {
  margin: 0;
  padding: 0;
}

.blog-categories__title {
  font-weight: bold;
}
.blog-categories__dropdown {
  font-weight: bold;
  width: 215px;
  border: 2px solid var(--design-dropdown-border);
  appearance: none;
  background: var(--design-dropdown-icon) no-repeat right;
  background-position-x: 180px;
}
.blog-index-entry {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 2vw 0;
}
.blog-index-entry__author-name {
  font-weight: bold;
}
.blog-index-entry__image {
  flex: 1 1 100%;
}
.blog-index-entry__image img {
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
  object-position: left;
}
.blog-index-entry__content {
  flex: 1 1 100%;
}
.blog-index-entry__title {
  margin-top: -10px;
}
.blog-index-entry__title a {
  text-decoration: none;
  font-size: 40px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--highlight-color);
}
.blog-index-entry__detail {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
}
.blog-index-entry__btn {
  text-decoration: none;
  padding: 10px 20px;
  background: black;
  color: white;
  border-radius: 2px;
}
.blog-index-entry .item--rows {
  margin: 20px 0;
}
.blog-index-entry .item--html {
  height: 11rem;
  overflow-y: scroll;
}
.blog__index-link {
  padding: 0 2vw;
}
.blog__index-link a {
  text-decoration: none;
}
.blog__index-link svg {
  width: 22px;
  margin-right: 10px;
}
.blog__index-link span {
  font-weight: 600;
}
.blog .blog-post {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 2vw;
}
.blog .blog-post__title {
  font-size: 50px;
  font-weight: 800;
  color: var(--highlight-color);
  text-align: left;
}
.blog .blog-post__date-author {
  display: flex;
  gap: 20px;
  align-items: center;
}
.blog .blog-post__date-author > div:not(:first-child)::before {
  content: "";
  border-left: 1px solid currentColor;
  position: relative;
  left: -10px;
}
.blog .blog-post__date-value {
  font-weight: bold;
}
.blog .blog-post__author-name {
  font-weight: bold;
}
.blog .blog-post__image {
  width: 100%;
}
.blog .blog-post__image img {
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
  object-position: left;
}
.blog .blog-post__content {
  padding: 0 2vw 2vw;
}
.blog__prev-next-link {
  display: flex;
  justify-content: space-between;
  padding: 0 2vw;
}
.blog__prev-link {
  text-decoration: none;
}
.blog__prev-link svg {
  width: 22px;
  margin-right: 10px;
}
.blog__prev-link span {
  font-weight: bold;
}
.blog__next-link {
  text-decoration: none;
}
.blog__next-link svg {
  width: 22px;
  margin-left: 10px;
}
.blog__next-link span {
  font-weight: bold;
}

@media (max-width: 1398px) {
  .blog {
    width: fit-content;
  }
  .blog__headline {
    font-size: 3rem !important;
  }
  .blog-index-entry {
    gap: 25.6px;
    height: fit-content;
  }
  .blog-index-entry__image {
    aspect-ratio: 16/9;
    background: lightgray;
  }
  .blog-index-entry__image > img {
    width: 100%;
    height: 100%;
  }
  .blog-index-entry__abstract .item--html > p {
    margin-block: 12.8px;
    font-size: 0.42rem;
  }
  .blog-index-entry__date, .blog-index-entry__author {
    font-size: 0.8rem;
  }
}
@media (max-width: 872px) {
  .blog {
    padding-inline: 20px;
  }
  .blog__headline {
    font-size: 3rem !important;
  }
  .blog-index-entry {
    flex-direction: column;
    padding: 20px 0;
  }
  .blog-index-entry__image {
    width: 100%;
  }
  .blog-index-entry__content {
    display: flex;
    flex-direction: column;
  }
  .blog-index-entry__action {
    text-align: center;
  }
  .blog-index-entry__title {
    font-size: 1.68rem;
    margin-bottom: 3.2px;
    text-align: center;
  }
  .blog-index-entry__detail {
    justify-content: center;
  }
  .blog__prev-next-link {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}
@media (max-width: 640px) {
  .blog__headline {
    font-size: 1.8rem !important;
  }
}
@keyframes fly-up {
  0% {
    opacity: 0;
    transform: translateY(75%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-75%);
  }
}
.builder {
  flex: 0 1 100vh;
  display: grid;
  grid-template-columns: 1fr 423px;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 0 10px 10px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.builder > .loading {
  grid-column: 1/3;
  grid-row: 2;
}
.builder__columns {
  flex: 1 1 auto;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  height: 0;
  position: relative;
}
.builder__floating-action {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  position: absolute;
  margin: 5px;
  cursor: pointer;
  z-index: 500;
  border: 1px solid var(--base-color);
  display: flex;
  align-items: stretch;
}
.builder__floating-action-button {
  font-size: 14px;
  width: auto;
  display: inline-flex;
  padding: 0 8px;
  justify-content: center;
  align-items: center;
  border: 0;
  border-right: 1px solid var(--base-color);
  cursor: pointer;
  background: var(--main-bg-color);
}
.builder__floating-action-button:last-child {
  border: 0;
}
.builder__floating-action-button svg {
  display: block;
  width: 20px;
  height: 20px;
}
.builder__floating-action-button span {
  margin-left: 8px;
}
.builder__floating-action-button--designs svg {
  width: 36px;
  height: 36px;
}
.builder__floating-action-switch {
  width: 96px;
  background: var(--builder-switch-btn-background);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.builder__floating-action-switch-inner {
  flex: 1 1 auto;
  background: var(--default-builder-settings-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--base-color);
}
.builder__floating-action-switch--left {
  padding-left: 16px;
}
.builder__floating-action-switch--right {
  padding-right: 16px;
}
.builder__floating-action--hide-settings {
  display: none;
}
.builder__floating-action--invert {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: auto;
}
.builder__floating-action--mobile-invert {
  width: 40px;
  height: 40px;
  display: flex;
  overflow: hidden;
  border-radius: 100%;
  border: 1px solid var(--builder-floating-mobile-inverse-border);
}
.builder__floating-action--mobile-invert::before {
  width: 50%;
  height: 100%;
  content: "";
  background: #000;
}
.builder__floating-action--mobile-invert::after {
  width: 50%;
  height: 100%;
  content: "";
  background: #fff;
}
.builder__floating-action--designs {
  top: 0;
  left: 0;
  width: auto;
}
.builder__floating-action--side {
  width: auto;
}
.builder__floating-action--side-bottom {
  top: unset;
  bottom: 0;
  left: 130px;
}
.builder__floating-action--zoom {
  top: 0;
  right: 0;
}
.builder__design-column {
  flex: 1 1 50%;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  background: var(--card-background);
}
.builder__design-column-inner {
  scrollbar-width: thin;
  flex: 1 1 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 16px 32px 8px;
}
.builder__design-column-inner--zoom {
  overflow: hidden;
  padding: 0;
  position: relative;
}
.builder__design-column-inner .roster-editor {
  margin: 32px auto;
  max-width: 1000px;
}
.builder__design-column--inverted {
  background: var(--inverse-bg-color);
}
.builder__product-switch {
  flex: 1 1 50%;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  background: var(--card-background);
}
.builder__product-switch-inner {
  scrollbar-width: thin;
  flex: 1 1 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.builder__product-switch-inner::-webkit-scrollbar {
  height: initial;
  width: 8px;
}
.builder__product-switch-info {
  text-align: center;
  color: var(--info-color);
  margin: 16px;
}
.builder__product-switch-actions {
  text-align: center;
  margin: 16px;
}
.builder__product-switch-action {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  background: transparent;
  font-size: 16px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--base-color);
  border: 1px solid var(--base-color);
  padding: 0 4px;
}
.builder__product-switch-action svg {
  width: 24px;
  height: 24px;
}
.builder__product-switch-action svg + span, .builder__product-switch-action span + svg {
  margin-left: 4px;
}
.builder__product-switch__upload {
  appearance: none;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  min-width: 150px;
  width: 100%;
}
.builder__design-preview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 900px;
  margin: 16px auto;
  border-radius: 4px;
}
.builder__design-preview--two-sided .design-preview {
  max-width: 100%;
}
.builder__design-preview--two-sided .design-preview--portrait {
  width: 384px;
}
.builder__design-preview--two-sided .design-preview--landscape {
  width: 512px;
}
.builder__design-preview--one-sided .design-preview {
  width: calc((100vh - 250px) * var(--product-aspect-ratio));
  max-width: 100%;
}
.builder__design-preview-inner {
  margin: 10px;
  padding: 10px;
  max-width: 100%;
}
.builder__design-preview-inner--hidden {
  display: none;
}
.builder__design-preview-inner-no-design {
  border: 1px solid var(--base-color);
  min-width: 250px;
  width: 300px;
  height: 400px;
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--base-color);
}
.builder__design-zoom {
  position: absolute;
  top: 0;
  left: 0;
}
.builder__settings-column {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 700;
  scrollbar-color: var(--base-color) var(--scrollbar-color);
  min-height: 0;
}
.builder__settings-column::-webkit-scrollbar {
  background: var(--scrollbar-color);
}
.builder__actions {
  grid-column: 1/3;
  background: var(--default-builder-settings-bg);
  position: relative;
  display: flex;
  z-index: 10;
}
.builder__actions-price {
  margin-left: auto;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  padding: 0 8px;
}
.builder__actions-button {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  background: transparent;
  font-size: 16px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--base-color);
  border: 1px solid var(--base-color);
  padding: 0 4px;
  text-decoration: none;
}
.builder__actions-button svg {
  width: 24px;
  height: 24px;
}
.builder__actions-button svg + span, .builder__actions-button span + svg {
  margin-left: 4px;
}
.builder__actions-button--roster {
  color: var(--cart-builder-roster-action);
  border-color: var(--cart-builder-roster-action);
}
.builder__actions-button--main {
  background: var(--base-color);
  color: var(--builder-cart-btn);
}
.builder__actions-button--dropdown {
  color: var(--base-color);
}
.builder__actions-button--dropdown select {
  color: var(--base-color);
  border: none;
  outline: none;
}
.builder__design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 192px);
  gap: 10px;
  padding: 16px;
  justify-content: space-evenly;
}
.builder__design-grid-cell {
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.builder__design-grid-cell-out-of-stock {
  opacity: 0.3;
}
.builder__design-grid-cell .design-preview {
  flex: 1 0 auto;
  cursor: pointer;
}
.builder__design-grid-info {
  text-align: center;
}
@media (max-width: 1050px) {
  .builder__design-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 400px) {
  .builder__design-grid {
    grid-template-columns: repeat(auto-fill, calc((100vw - 55px) / 2));
  }
}
.builder__mobile-popup {
  scrollbar-width: thin;
  background: var(--popup-background);
  position: relative;
  flex: 0 0 auto;
  padding: 16px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.builder__mobile-popup::-webkit-scrollbar {
  height: initial;
  width: 8px;
}
.builder__mobile-popup h2 {
  margin: 0;
}
.builder__mobile-popup h2 a {
  font-size: 16px;
  margin-left: 8px;
}
.builder__mobile-popup .roster-editor {
  scrollbar-width: thin;
  height: 30vh;
  overflow: auto;
}
.builder__mobile-popup .roster-editor::-webkit-scrollbar {
  height: initial;
  width: 8px;
}
.builder__mobile-popup-close {
  position: absolute;
  top: 16px;
  right: 8px;
}
.builder__mobile-popup-close svg {
  width: 24px;
  height: 24px;
  fill: var(--info-color);
}
@media (max-width: 800px) {
  .builder__mobile-popup .roster-editor__header-row button {
    padding: 8px 0px;
    width: 50%;
  }
}
@media (max-width: 680px) {
  .builder__mobile-popup .roster-editor__row {
    margin-right: 0px;
  }
}
.builder__auth .auth {
  margin: 0;
  padding: 0;
}
.builder__auth .auth h1 {
  font-size: 16px;
}
.builder__auth-continue {
  text-align: center;
}
.builder__auth-continue button {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  background: transparent;
  font-size: 16px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: gray;
  border: 1px solid gray;
  padding: 0 4px;
}
.builder__auth-continue button svg {
  width: 24px;
  height: 24px;
}
.builder__auth-continue button svg + span, .builder__auth-continue button span + svg {
  margin-left: 4px;
}
@media (max-width: 1200px) {
  .builder {
    grid-template-columns: 1fr 33vw;
  }
}

.builder-settings {
  overflow-y: scroll;
}
.builder-settings__inner {
  background: var(--builder-settings-background);
}
.builder-settings__block {
  margin-bottom: 8px;
  background: var(--card-background);
  border: 1px solid var(--builder-setting-block-border);
  padding: 0 5px 5px;
}
.builder-settings__block-header {
  padding: 8px 4px;
  display: flex;
  cursor: pointer;
  font-size: 18px;
  justify-content: space-between;
  align-items: center;
}
.builder-settings__block-header-title {
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-settings__block-header-title h1 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  display: inline;
}
.builder-settings__block-header-previews {
  display: flex;
  max-width: 120px;
}
.builder-settings__block-header-previews .builder-settings__color-preview:not(:first-child) {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.builder-settings__block-header-previews .builder-settings__color-preview:not(:last-child) {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.builder-settings__block-header svg {
  width: 24px;
  height: 24px;
  fill: var(--text-color);
}
.builder-settings__block-header svg:first-child {
  margin-right: 4px;
}
.builder-settings__wait {
  padding: 0 8px;
}
.builder-settings__color-presets-featured {
  display: flex;
  flex-wrap: wrap;
}
.builder-settings__color-presets-featured-color {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  flex: 0 0 48px;
}
.builder-settings__color-presets-featured-color--active {
  position: relative;
  overflow: visible;
}
.builder-settings__color-presets-featured-color--active::before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
  pointer-events: none;
  border: 1px solid var(--active-swatch-outline);
  border-radius: 2px;
}
.builder-settings__color-presets-list {
  display: flex;
  flex-wrap: wrap;
}
.builder-settings__show-presets {
  display: block;
  padding: 8px 4px;
}
.builder-settings__colors {
  display: flex;
  flex-wrap: wrap;
  padding: 2px 4px;
}
.builder-settings__color-circles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.builder-settings__color-circle {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  cursor: pointer;
  border: 2px solid transparent;
}
.builder-settings__color-circle--commands {
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
  max-width: 32px;
  max-height: 32px;
}
.builder-settings__color-circle--commands div {
  flex: 1;
}
.builder-settings__color-circle--texture {
  background-size: 32px;
  background-position: center;
  filter: contrast(1.5);
}
.builder-settings__color-circle--current, .builder-settings__color-circle:hover {
  border-color: var(--default-input-border);
}
.builder-settings__color-preview {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  flex: 0 0 48px;
}
.builder-settings__color-preview--active {
  position: relative;
  overflow: visible;
}
.builder-settings__color-preview--active::before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
  pointer-events: none;
  border: 1px solid var(--active-swatch-outline);
  border-radius: 2px;
}
.builder-settings__color-preview--unused {
  transform: scale(0.6);
}
.builder-settings__color-preview--transparent {
  background: url("/static/no-color.svg") center no-repeat;
  background-size: 32px;
}
.builder-settings__color-preview--small {
  width: 24px;
  height: 24px;
  flex: 0 1 24px;
  margin: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 16px;
}
.builder-settings__color-pie {
  width: 36px;
  height: 36px;
  margin: 4px;
  padding: 2px;
  cursor: pointer;
  overflow: hidden;
}
.builder-settings__color-pie:hover {
  border: 2px solid #fff;
  border-radius: 100%;
}
.builder-settings__color-popup {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  background: var(--color-popup-bg);
  padding: 4px;
  box-shadow: 0 0 5px var(--semi-transparent-shadow);
}
.builder-settings__color-popup-close {
  position: absolute;
  top: -4px;
  right: -36px;
  padding: 4px;
  background: var(--color-popup-bg);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--semi-transparent-shadow);
}
.builder-settings__color-popup-close svg {
  width: 24px;
  height: 24px;
}
.builder-settings__color-images {
  display: flex;
  flex-wrap: wrap;
  padding: 2px 4px;
}
.builder-settings__color-images-image {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  background-size: cover;
}
.builder-settings__color-images-image--active {
  position: relative;
  overflow: visible;
}
.builder-settings__color-images-image--active::before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
  pointer-events: none;
  border: 1px solid var(--active-swatch-outline);
  border-radius: 2px;
}
.builder-settings__add-logo {
  padding: 8px;
}
.builder-settings__add-logo-buttons {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}
.builder-settings__add-logo-error {
  color: var(--danger-color);
}
.builder-settings__add-logo p {
  margin: 0.3em 0;
}
.builder-settings__add-logo p:last-child {
  margin-bottom: 0;
}
.builder-settings__add-text, .builder-settings__browse-artwork {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  background: transparent;
  font-size: 16px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--base-color);
  border: 1px solid var(--base-color);
  padding: 0 4px;
}
.builder-settings__add-text svg, .builder-settings__browse-artwork svg {
  width: 24px;
  height: 24px;
}
.builder-settings__add-text svg + span, .builder-settings__add-text span + svg, .builder-settings__browse-artwork svg + span, .builder-settings__browse-artwork span + svg {
  margin-left: 4px;
}
.builder-settings__switches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 4px;
}
.builder-settings__switches label {
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.builder-settings__switches label input {
  margin-right: 4px;
}
.builder-settings__switches input[type=text], .builder-settings__switches select {
  margin: 0 4px;
  font-size: 14px;
}
.builder-settings__font-picker {
  max-width: 120px;
}
.builder-settings__logo {
  display: grid;
  grid-template-columns: 200px 1fr;
}
.builder-settings__logo-preview {
  background: url("/static/checkers.png");
  height: 100px;
  padding: 5px;
}
.builder-settings__logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.builder-settings__logo-colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.builder-settings__logo-colors .colorpicker__input {
  width: 100%;
}
.builder-settings__logo-colors .colorpicker__input input:not(:focus) {
  color: transparent;
}
.builder-settings__logo-colors-checkbox {
  width: 40px;
  padding: 4px;
  cursor: pointer;
}
.builder-settings__logo-colors-checkbox input {
  display: block;
  margin: 0;
  width: 14px;
  height: 14px;
}
.builder-settings__move-part, .builder-settings__remove-part {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  margin: 4px 0;
  padding: 0 8px;
}
.builder-settings__move-part svg, .builder-settings__remove-part svg {
  width: 16px;
  height: 16px;
}
.builder-settings__remove-part {
  color: var(--danger-color);
}
.builder-settings__text-input input {
  border-radius: 24px;
  font-size: 20px;
  height: 48px;
  width: calc(100% - 8px);
  margin: 4px;
}
.builder-settings__part-list {
  display: flex;
  flex-wrap: wrap;
}
.builder-settings__part-list-logo-error {
  font-size: 14px;
  color: var(--danger-color);
}
.builder-settings__part-list .logo-upload label {
  color: var(--text-color);
  border: 0;
  background: var(--card-background);
  display: flex;
  justify-content: flex-start;
}
.builder-settings__part-list .logo-upload label svg {
  margin-right: 8px;
}
.builder-settings__part-switch {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 calc(50% - 8px);
  background: var(--card-background);
  padding: 0 7px;
}
.builder-settings__part-switch svg, .builder-settings__part-switch img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  flex: 0 0 24px;
}
.builder-settings__part-switch span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-settings__part-switch--add-buttons {
  justify-content: space-between;
}
@media (max-width: 320px) {
  .builder-settings__part-switch-icons {
    display: none;
  }
}
.builder-settings__mobile-nav {
  display: flex;
  justify-content: stretch;
  align-items: center;
  background: var(--card-background);
}
.builder-settings__mobile-nav-btn {
  width: 48px;
  border: 0;
  margin: 0;
  padding: 8px;
  background: transparent;
}
.builder-settings__mobile-nav-btn svg {
  width: 24px;
  height: 24px;
}
.builder-settings__mobile-nav-title {
  flex: 1 1;
  font-weight: bold;
  text-align: center;
}
.builder-settings__product {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.builder-settings__product-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.builder-settings__description {
  margin: 0;
}
.builder-settings__embroidery-colors {
  display: flex;
  align-items: self-start;
  padding: 4px;
}
.builder-settings__embroidery-colors-list {
  flex: 0 0 55%;
}
.builder-settings__embroidery-colors-pick {
  flex: 0 0 45%;
}
.builder-settings__embroidery-colors-pick--inactive {
  pointer-events: none;
}
.builder-settings__embroidery-colors-list-label, .builder-settings__embroidery-colors-pick-label {
  margin: 0 4px;
}
.builder-settings__embroidery-colors-list-grid, .builder-settings__embroidery-colors-pick-grid {
  display: flex;
  flex-wrap: wrap;
}
.builder-settings__embroidery-colors-list .builder-settings__color-preview, .builder-settings__embroidery-colors-pick .builder-settings__color-preview {
  margin: 2px;
}
.builder-settings__color-count-note {
  padding: 0 8px;
}
.builder-settings__color-count-note p {
  margin: 2px 0;
}
.builder-settings select {
  background: transparent;
}

.logo-upload {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  border: inherit;
  padding: 0;
}
.logo-upload input {
  display: block;
  width: 0;
  height: 0;
  clip: rect(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -200px;
}
.logo-upload label {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  background: transparent;
  font-size: 16px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--base-color);
  border: 1px solid var(--base-color);
  padding: 0 4px;
}
.logo-upload label svg {
  width: 24px;
  height: 24px;
}
.logo-upload label svg + span, .logo-upload label span + svg {
  margin-left: 4px;
}
.logo-upload--active label svg {
  animation: fly-up 0.8s -0.4s infinite linear;
}

@media (max-width: 1000px) {
  .builder__actions-button {
    flex-direction: column;
    height: 48px;
    width: 48px;
    text-align: center;
    margin: 0;
    border: 0;
    padding: 2px 0;
  }
  .builder__actions-button svg {
    margin: 0;
    width: 20px;
    height: 20px;
  }
  .builder__actions-button span {
    font-size: 10px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .builder__actions-button--dropdown {
    margin-left: 5px;
    min-width: 64px;
    max-width: 96px;
  }
  .builder__actions-button--dropdown svg {
    margin-top: 2px;
  }
  .builder__actions-button select {
    font-size: 10px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: -2px;
  }
}
@media (max-width: 800px) {
  .builder__floating-action {
    max-width: 55vw;
  }
  .builder__floating-action-button {
    font-size: 12px;
  }
  .builder__floating-action--designs {
    border: none;
    left: 50%;
    transform: translate(-57%, 0);
    background: transparent;
  }
  .builder__floating-action--designs .builder__floating-action-button {
    border: none;
    color: #fff;
  }
  .builder__floating-action--side {
    left: auto;
    right: 10px;
    border: none;
    font-size: 32px;
    line-height: 1;
  }
  .builder__floating-action--side-right {
    left: unset;
    right: 15px;
  }
  .builder__floating-action--hide-settings {
    display: flex;
    top: auto;
    left: auto;
    bottom: 0;
    right: 10px;
  }
  .builder__design-column--with-design .builder__design-column-inner {
    overflow: hidden;
  }
  .logo-upload {
    flex: auto;
    position: inherit;
    overflow: hidden;
    border: 1px solid var(--builder-setting-color-preview);
  }
  .logo-upload label {
    padding: 0;
  }
}
@media (max-width: 800px) and (orientation: portrait) {
  .builder {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .builder__actions {
    grid-column: 1;
  }
  .builder__floating-action {
    max-width: 55vw;
  }
  .builder__floating-action-button {
    font-size: 12px;
  }
  .builder__floating-action--designs {
    border: none;
    left: 51.5%;
    transform: translate(-57%, 0);
    background: transparent;
    margin-top: 5px;
  }
  .builder__floating-action--designs .builder__floating-action-button {
    border: none;
    color: var(--builder-floating-btn);
  }
  .builder__columns {
    flex-direction: column;
  }
  .builder__design-column-inner {
    padding: 40px 0 0 0;
  }
  .builder__settings-column {
    overflow-x: visible;
    overflow-y: auto;
    max-height: 40vh;
  }
  .builder__settings-column--hidden {
    display: none;
  }
  .builder__design-grid {
    padding: 0;
  }
  .builder__design-preview-inner {
    margin: 0;
    padding: 0;
  }
  .builder__design-preview .design-preview {
    width: calc((100vh - 300px) * var(--product-aspect-ratio));
    margin: 0 auto;
  }
  .builder-settings__inner {
    width: auto;
    max-width: none;
  }
  .builder-settings__colors {
    padding: 0;
  }
  .builder-settings__description {
    max-height: 120px;
    overflow: auto;
  }
  .builder-settings__logo {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  .builder {
    grid-template-columns: 64px 3fr minmax(200px, 2fr);
    grid-template-rows: auto;
  }
  .builder__actions {
    grid-column: 1;
    flex-direction: column;
  }
  .builder__actions-button {
    flex-direction: column;
  }
  .builder__actions-button svg {
    width: 16px;
    height: 16px;
  }
  .builder__actions-button span {
    font-size: 10px;
    margin: 0;
  }
  .builder__columns {
    height: auto;
    width: 0;
  }
  .builder__settings-column {
    overflow: hidden;
  }
  .builder__floating-action {
    max-width: 50%;
  }
  .builder__floating-action-button {
    font-size: 12px;
  }
  .builder__floating-action--side {
    left: auto;
    right: 10px;
    border: none;
    font-size: 32px;
    line-height: 1;
    user-select: none;
  }
  .builder__mobile-popup {
    max-height: none;
  }
  .builder__design-preview-inner {
    margin: 0;
    padding: 0;
  }
  .builder__design-preview .design-preview {
    width: calc((100vh - 100px) * var(--product-aspect-ratio));
  }
  .builder-settings {
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
  }
  .builder-settings__mobile-nav {
    flex: 0 0 42px;
  }
  .builder-settings__mobile-nav-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 12px;
  }
  .builder-settings__inner {
    scrollbar-width: thin;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .builder-settings__inner::-webkit-scrollbar {
    height: initial;
    width: 8px;
  }
  .builder-settings__part-switch {
    flex: 1 1 100%;
  }
  .builder-settings__part-list .logo-upload {
    flex: 1 1 100%;
  }
  .builder-settings__logo {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .builder-settings__logo-preview {
    width: 100%;
  }
}
@media (max-height: 450px) and (max-width: 600px) and (orientation: landscape) {
  .builder__floating-action-button span {
    display: none;
  }
}
@media (max-width: 500px) {
  .builder__actions-price {
    display: none;
  }
  .builder__actions-button--roster {
    margin-left: auto;
  }
}
@media (max-width: 420px) {
  .builder__actions-button--unimportant {
    display: none;
  }
}
@media (max-height: 370px) {
  .builder__actions-button--unimportant {
    display: none;
  }
}
.color-preset {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
}

.builder-share {
  min-width: 300px;
}
.builder-share__link {
  display: flex;
}
.builder-share__link input {
  flex: 1 1 100%;
}
.builder-share__link button {
  border: 0;
  background: transparent;
}
.builder-share__link button svg {
  width: 24px;
  height: 24px;
}
.builder-share__download {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  background: transparent;
  font-size: 16px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--base-color);
  border: 1px solid var(--base-color);
  padding: 0 4px;
  margin-top: 16px;
}
.builder-share__download svg {
  width: 24px;
  height: 24px;
}
.builder-share__download svg + span, .builder-share__download span + svg {
  margin-left: 4px;
}

.builder-save-all {
  text-align: center;
}
.builder-save-all__previews {
  display: flex;
  margin: 10px;
  opacity: 0.1;
  justify-content: center;
}
.builder-save-all__previews .design-preview {
  width: 100px;
}

.cart .base-color {
  color: var(--base-color);
}
.cart__switch-cart {
  width: 35vw;
}
.cart__select {
  border: 2px solid rgb(118, 118, 118);
  padding: 2px;
  width: 140px;
}
.cart__email-estimate {
  margin-left: 10px;
  width: 20px;
  border: 0;
}
.cart__name {
  display: flex;
  gap: 10px;
  font-size: 21px;
  cursor: pointer;
  border: 0;
  user-select: text;
}
.cart--main {
  display: flex;
  padding: 10px 0;
  --default-transition: .3s ease;
}
.cart__heading {
  padding: 0 60px;
  display: block;
}
@media (max-width: 1100px) {
  .cart__heading {
    padding: 0 20px;
  }
}
.cart__heading-right {
  margin-left: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 38px;
}
@media (max-width: 840px) {
  .cart__heading-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .cart__heading-right-cart-buttons {
    padding-top: 10px;
  }
  .cart__heading-right-cart-buttons .cart__btn--sm:last-of-type {
    margin-right: 0;
  }
}
.cart__heading-right-col--action {
  width: 359px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
@media (max-width: 1100px) {
  .cart__heading-right-col--action {
    width: 330px;
  }
}
.cart__heading-right-col--name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 2 1 auto;
}
@media (max-width: 840px) {
  .cart__heading-right-col--name {
    width: 100%;
    flex: inherit !important;
    align-items: flex-end !important;
  }
}
.cart__heading-right-col--name svg {
  cursor: pointer;
  width: 15px;
}
.cart__heading-right-col--flex-end {
  justify-content: flex-end;
}
.cart__heading-right a, .cart__heading-right button {
  font-weight: bold;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.cart__empty {
  width: auto;
  align-self: auto;
  color: var(--text-color);
  padding: 0 60px;
}
@media (max-width: 1100px) {
  .cart__empty {
    padding: 0 20px;
  }
}
@media (max-width: 980px) {
  .cart__empty {
    padding: 0px;
  }
}
.cart__empty--header {
  display: none;
}
@media (max-width: 980px) {
  .cart__empty--header {
    display: block;
  }
}
.cart__empty--left {
  display: none;
}
@media (min-width: 981px) {
  .cart__empty--left {
    display: block;
  }
}
.cart__btn {
  background-color: var(--base-color);
  padding: 16px 30px;
  color: var(--main-bg-color);
  border-radius: 2px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  border: 0;
  cursor: pointer;
}
@media (max-width: 1279px) {
  .cart__btn {
    font-size: 18px;
  }
}
.cart__btn:disabled {
  background: var(--disabled-border-color);
}
.cart__btn--grey {
  background-color: var(--grey-background);
}
.cart__btn--action button {
  width: 300px;
}
.cart__btn--sm {
  padding: 5px;
}
.cart__btn--save-load-cart {
  padding: 5px 12px;
  margin-right: 8px;
  font-size: 12px;
  border-radius: 0px;
}
.cart__return {
  text-decoration: none;
  color: inherit;
}
.cart__header-menu {
  margin: 0 auto;
  width: 50%;
}
.cart__header-menu .cart__info-logo {
  cursor: pointer;
  width: auto;
  text-align: center;
}
.cart__header-menu .cart__breadcrumbs {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 576px) {
  .cart__header-menu .cart__breadcrumbs {
    width: auto;
  }
}
@media (max-width: 980px) {
  .cart__header-menu {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .cart__header-menu .cart__info-logo {
    display: none;
  }
}
.cart__left {
  width: 40%;
  flex: 0 0 40%;
  border-right: 1px solid var(--main-color);
  transition: width var(--default-transition);
  padding-top: 120px;
}
@media (max-width: 980px) {
  .cart__left {
    width: 100%;
    border-right: none;
    padding-top: 0;
  }
}
.cart--cart .cart__left {
  width: calc(100% - 440px);
  flex: 0 0 calc(100% - 440px);
  border-right: none;
  padding-top: 0;
}
@media (max-width: 1100px) {
  .cart--cart .cart__left {
    width: calc(100% - 370px);
    flex: 0 0 calc(100% - 370px);
  }
}
@media (max-width: 980px) {
  .cart--cart .cart__left {
    width: auto;
    padding: 20px;
  }
}
.cart--cart .cart__right {
  width: 440px;
  flex: 0 0 440px;
}
@media (max-width: 1100px) {
  .cart--cart .cart__right {
    width: 370px;
    flex: 0 0 370px;
  }
}
@media (max-width: 980px) {
  .cart--cart .cart__right {
    width: auto;
  }
}
.cart__right {
  padding: 0 60px 20px 20px;
  width: 60%;
  transition: width var(--default-transition);
  flex: 0 0 60%;
}
@media (max-width: 1100px) {
  .cart__right {
    padding: 0 20px 20px;
  }
}
@media (max-width: 980px) {
  .cart__right {
    padding: 20px;
  }
}
.cart__info, .cart__shipping, .cart__payment {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 0 auto;
  row-gap: 20px;
  color: var(--cart-text-color);
  font-weight: 500;
}
@media (max-width: 576px) {
  .cart__info, .cart__shipping, .cart__payment {
    width: 100%;
  }
}
.cart__info h2, .cart__shipping h2, .cart__payment h2 {
  width: 100%;
  margin: 0;
}
.cart__info-logo {
  width: 100px;
  color: var(--base-color);
  margin: 0 auto;
}
.cart__info-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  column-gap: 30px;
}
.cart__info-row input, .cart__info-row select {
  font-weight: 500;
  color: var(--cart-text-color);
}
.cart__info-row--jc-start {
  justify-content: start;
}
.cart__info-row--jc-start span {
  cursor: pointer;
}
@media (max-width: 576px) {
  .cart__info-row--jc-start {
    flex-direction: column;
  }
  .cart__info-row--jc-start .cart__btn {
    width: 100%;
    margin-bottom: 15px;
  }
}
@media (max-width: 576px) {
  .cart__info-row--country-picker-wrapper {
    row-gap: 20px;
    flex-direction: column;
  }
}
.cart__info-row-btn {
  background: var(--b-color);
  border: 1px solid #767676;
  height: 100%;
  padding: 10px;
}
.cart__info .labeled-input, .cart__info .country-picker {
  background: var(--default-option-background);
}
.cart__info-link {
  text-decoration: none;
  color: var(--cart-info-link);
}
.cart__info-link--active {
  color: var(--cart-info-link-active);
}
.cart__info-divider {
  width: 100%;
  height: 1px;
  border: 1px solid var(--default-input-border);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cart__info-divider:after {
  background: rgb(20, 20, 20);
  content: "OR";
  padding: 20px;
  font-size: 16px;
  line-height: 16px;
}
.cart__info-error {
  font-size: 16px;
  color: var(--red-text-color);
}
@media (max-width: 376px) {
  .cart__info-error {
    font-size: 14px;
  }
}
@media (max-width: 576px) {
  .cart__info {
    width: 100%;
  }
}
.cart__payment .auth {
  margin: 0;
  padding: 0;
  max-width: none;
}
.cart__payment .auth__field, .cart__payment .auth__submit {
  max-width: 500px;
}
.cart__payment-delete-checkbox {
  margin: 16px 0;
}
.cart__express-checkout {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px 22px;
  border: 1px solid var(--default-input-border);
  width: 100%;
  margin-bottom: 20px;
}
.cart__express-checkout:after {
  content: "Express Checkout";
  font-size: 16px;
  line-height: 16px;
  background: rgb(20, 20, 20);
  padding: 0 10px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cart__express-checkout-btn {
  padding: 10px 0;
  margin: 10px 0;
  border: none;
}
.cart__express-checkout-btn svg {
  max-height: 30px;
}
.cart__express-checkout-btn--yellow {
  background: #FFC439;
}
.cart__express-checkout-btn--white {
  background: #FFFFFF;
}
.cart__express-checkout-btn--black {
  background: #000000;
}
.cart__express-checkout-btn--blue {
  background: #008CFF;
}
.cart__breadcrumbs {
  width: 100%;
}
.cart__breadcrumbs ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}
.cart-listing {
  --preview-width: 300px;
  padding: 0px 20px 20px 60px;
}
@media (max-width: 1279px) {
  .cart-listing {
    --preview-width: 150px;
  }
}
@media (max-width: 1100px) {
  .cart-listing {
    padding: 0 20px 20px;
  }
}
@media (max-width: 980px) {
  .cart-listing {
    padding: 0;
  }
}
.cart-listing__item {
  display: grid;
  grid-template-columns: var(--preview-width) 1fr 1fr 20px;
  grid-template-rows: repeat(4, auto) 1fr;
  column-gap: 40px;
  row-gap: 0;
  align-items: start;
  margin-bottom: 40px;
}
@media (max-width: 1200px) {
  .cart-listing__item {
    column-gap: 20px;
  }
}
@media (max-width: 800px) {
  .cart-listing__item {
    column-gap: 14px;
  }
}
.cart-listing__item p {
  margin: 0;
}
.cart-listing__item-preview {
  grid-column: 1;
  grid-row: 1/span 7;
}
.cart-listing__item-name {
  grid-column: 2/span 2;
  grid-row: 1;
  font-size: 20px;
  font-weight: bold;
}
.cart-listing__item-name a:not(:hover) {
  text-decoration: none;
}
.cart-listing__item-total {
  grid-column: 3/span 2;
  grid-row: 4;
  text-align: right;
  font-weight: bold;
  font-size: 22px;
  align-self: end;
}
@media (max-width: 1279px) {
  .cart-listing__item-total {
    font-size: 19px;
  }
}
.cart-listing__item-info-left {
  grid-column: 2;
}
.cart-listing__item-info-left-quantity input {
  width: 4em;
  margin-left: 0.5em;
  border: 1px solid #767676;
}
@media (max-width: 1279px) {
  .cart-listing__item-info-left-quantity input {
    font-size: 14px;
  }
}
.cart-listing__item-info-left-fabric {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  align-items: center;
}
.cart-listing__item-info-left-fabric select {
  padding: 0;
  border: none;
  max-width: 100%;
}
.cart-listing__item-info-right {
  grid-column: 3/span 2;
  text-align: right;
  align-self: end;
}
.cart-listing__item-info-description {
  grid-column: 2/span 3;
  grid-row: 5;
  font-size: 14px;
}
.cart-listing__item-info-description p {
  margin: 8px 0;
}
@media (max-width: 600px) {
  .cart-listing__item-info-description {
    grid-row: 9;
    grid-column: 1/5;
  }
}
.cart-listing__item-delete {
  grid-column: 4;
}
.cart-listing__item-roster-container {
  grid-column: 2/span 3;
  margin-top: 12px;
  margin-right: auto;
  grid-row: 5;
  justify-self: end;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-base-color: transparent;
  border: 1px solid #777777;
  border-radius: 13px;
  padding: 10px;
}
@media (max-width: 1400px) {
  .cart-listing__item-roster-container--table {
    grid-row: 9;
    grid-column: 1/5;
  }
}
.cart-listing__item-roster {
  width: 100%;
}
.cart-listing__item-roster::-webkit-scrollbar {
  height: 12px;
  scrollbar-base-color: transparent;
}
.cart-listing__item-roster::-webkit-scrollbar-track {
  border-radius: 100px;
}
.cart-listing__item-roster::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 4px solid transparent;
  background-clip: content-box;
}
.cart-listing__item-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 8px 8px 8px 0;
}
.cart-listing__item-preview img {
  width: 100%;
}
.cart-listing__item-preview a {
  margin-top: 0.5em;
  text-decoration: none;
}
.cart-listing__item-preview a svg {
  width: 15px;
}
.cart-listing__item-preview a span {
  margin-left: 10px;
}
.cart-listing__item-design-preview {
  display: flex;
}
.cart-listing__item-design-preview img {
  max-width: 100%;
}
.cart-listing__item-errors {
  font-size: 16px;
  color: var(--red-text-color);
}
@media (max-width: 376px) {
  .cart-listing__item-errors {
    font-size: 14px;
  }
}
.cart-listing__item-roster-heading {
  display: flex;
  cursor: pointer;
  padding: 0;
  justify-content: space-between;
}
.cart-listing__item-roster-heading-content {
  border: 0;
  color: var(--dark-grey-text-color);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cart-listing__item-roster-fold {
  height: 0;
  overflow: hidden;
}
.cart-listing__item-roster-fold--active {
  height: auto;
  overflow: visible;
}
.cart-listing__item-roster-fold .roster-editor-table {
  margin: 0;
}
.cart-listing__item-roster-fold .roster-editor__row {
  margin-right: 40px;
  margin-bottom: 10px;
}
@media (max-width: 1279px) {
  .cart-listing__item-roster-fold .roster-editor-table__input, .cart-listing__item-roster-fold .roster-editor-table__size {
    font-size: 14px;
  }
  .cart-listing__item-roster-fold .roster-editor__row {
    height: 32px;
  }
  .cart-listing__item-roster-fold .roster-editor-table__flag-selector-wrapper img {
    max-width: 25px;
  }
}
@media (max-width: 1200px) {
  .cart-listing__item-roster-fold .roster-editor__row-btn {
    padding: 5px 30px;
  }
}
@media (max-width: 1024px) {
  .cart-listing__item-roster-fold .roster-editor__row {
    width: auto;
  }
  .cart-listing__item-roster-fold .roster-editor__row-btn {
    padding: 5px 40px;
  }
}
.cart-listing__item-roster .cart-listing__item-errors {
  margin-left: 10px;
}
.cart-listing__item-delete button {
  border: 0;
  background: transparent;
  padding: 4px;
  margin: -4px -4px -4px 4px;
  cursor: pointer;
}
.cart-listing__item-delete button svg {
  width: 16px;
  height: 16px;
  fill: var(--base-color);
}
.cart-listing__hr {
  width: 100%;
  border-color: var(--cart-text-color);
  margin-top: 10px;
}
.cart-listing__separate {
  margin-bottom: 50px;
  text-align: center;
}
.cart-listing__text-wrapper {
  width: 100%;
  color: var(--cart-text-color);
  font-weight: bold;
  font-size: 18px;
}
@media (max-width: 1279px) {
  .cart-listing__text-wrapper {
    font-size: 16px;
  }
}
.cart-listing__row {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 576px) {
  .cart-listing .roster-editor__row {
    margin-right: auto;
    margin-left: auto;
  }
}
.cart-listing--side {
  padding-right: 32px;
  --preview-width: 200px;
}
.cart-listing--side .cart-listing__item-delete {
  display: none;
}
.cart-listing--side .cart-listing__item-name {
  grid-column: 2/span 4;
}
.cart-listing--side .cart-listing__item-savings {
  flex-direction: column;
}
@media (max-width: 1300px) {
  .cart-listing--side {
    --preview-width: 100px;
  }
  .cart-listing--side .cart-listing__item-name {
    grid-column: 1/span 5;
    order: -1;
  }
  .cart-listing--side .cart-listing__item-preview {
    grid-row: 2/span 6;
  }
}
@media (max-width: 700px) {
  .cart-listing--side {
    padding-right: 32px;
  }
  .cart-listing--main .cart-listing__item {
    --preview-width: 150px;
  }
  .cart-listing--main .cart-listing__item-name {
    grid-column: 1/span 4;
    order: -1;
    margin-bottom: 8px;
  }
  .cart-listing--main .cart-listing__item-preview {
    grid-row: 2/span 6;
  }
  .cart-listing--main .cart-listing__item-delete {
    grid-row: 1;
  }
}
@media (max-width: 576px) {
  .cart-listing__item-info-left, .cart-listing__item-info-right {
    grid-column: 2/span 3;
  }
}
.cart__summary {
  max-width: 360px;
  color: var(--main-color);
  display: flex;
  flex-direction: column;
  margin: 0;
  margin-left: auto;
}
@media (max-width: 980px) {
  .cart__summary {
    max-width: 100%;
  }
}
@media (max-width: 576px) {
  .cart__summary {
    width: 100%;
  }
}
.cart__summary-textarea {
  margin: 0 0 10px;
  background: var(--card-background);
  border-color: rgb(118, 118, 118);
}
@media (max-width: 1279px) {
  .cart__summary-textarea {
    font-size: 14px;
  }
}
.cart__summary-row {
  color: var(--cart-text-color);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 0 10px;
}
.cart__summary-row span:last-child {
  justify-self: end;
}
.cart__summary-row--start {
  justify-content: flex-start;
  column-gap: 10px;
}
.cart__summary-row--item {
  flex-wrap: wrap;
}
.cart__summary-row--item span:last-child {
  margin-left: auto;
}
.cart__summary-row--total {
  font-size: 24px;
}
.cart__summary-row--total span:last-child {
  font-size: 28px;
}
@media (max-width: 1279px) {
  .cart__summary-row--total span:last-child {
    font-size: 24px;
  }
}
@media (max-width: 1279px) {
  .cart__summary-row--total {
    font-size: 21px;
  }
}
.cart__summary-row--note span:last-child {
  font-size: 14px;
}
.cart__summary-row--heading {
  width: 100%;
  padding: 5px;
  text-align: center;
  background: var(--card-background);
}
.cart__summary-row--heading span {
  font-size: 24px;
  color: var(--cart-text-color);
  font-weight: bold;
}
@media (max-width: 1279px) {
  .cart__summary-row--heading span {
    font-size: 21px;
  }
}
.cart__summary-row a {
  font-weight: bold;
  color: var(--cart-text-color);
  font-size: 15px;
  text-decoration: none;
}
.cart__summary-row.add-margin {
  margin: 0 0 40px;
}
.cart__summary-row-action {
  border: 0;
  background: transparent;
  padding: 4px;
  margin: -4px -2px -4px -4px;
  cursor: pointer;
}
.cart__summary-row-action svg {
  width: 1em;
  height: 1em;
  color: var(--cart-text-color);
}
.cart__summary-row-discount-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart__summary-row-discount-code input {
  width: 85%;
  padding: 10px;
  background: var(--cart-discount-input-color);
  border: 1px solid #767676;
}
@media (max-width: 1279px) {
  .cart__summary-row-discount-code input {
    font-size: 14px;
  }
}
.cart__summary-row-discount-code button {
  width: 120px;
  text-align: center;
  margin-left: 10px;
  color: var(--cart-discount-btn-color);
  background-color: var(--base-color);
  cursor: pointer;
}
@media (max-width: 1279px) {
  .cart__summary-row-discount-code button {
    font-size: 14px;
  }
}
@media (max-width: 400px) {
  .cart__summary-row {
    flex-direction: column !important;
    align-items: initial !important;
    gap: 5px !important;
  }
}
.cart__summary hr {
  height: 1px;
  width: 100%;
  margin: 0 0 10px;
  opacity: 0.5;
}
.cart__summary h2 {
  margin: 0;
}
.cart__summary-card-icons {
  align-self: center;
}
.cart__summary-card-icons img {
  width: 60px;
  height: 40px;
  margin-top: 10px;
  margin-right: 8px;
}
@media (max-width: 1100px) {
  .cart__summary-card-icons img {
    width: 48px;
    height: 32px;
  }
}
@media (max-width: 980px) {
  .cart__summary-card-icons img {
    width: 80px;
    height: 54px;
    margin-right: 20px;
  }
}
@media (max-width: 630px) {
  .cart__summary-card-icons img {
    width: 60px;
    height: 40px;
    margin-right: 10px;
  }
}
.cart__summary-card-icons img:last-of-type {
  margin-right: 0;
}
.cart__left-toggle {
  background: var(--card-background);
  text-align: left;
  width: 100%;
  border: 0;
  display: none;
  padding: 5px;
  margin: 0;
}
.cart__shipping-contact, .cart__shipping-methods {
  width: 100%;
  border: 1px solid;
  background: var(--b-color);
}
.cart__shipping-contact-row, .cart__shipping-methods-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  column-gap: 20px;
}
.cart__shipping-contact-row span, .cart__shipping-methods-row span {
  min-width: 60px;
}
.cart__shipping-contact-row span:last-child, .cart__shipping-methods-row span:last-child {
  margin-left: auto;
  text-align: end;
}
.cart__shipping-contact hr, .cart__shipping-methods hr {
  width: calc(100% - 20px);
  margin: 0 auto;
}
.cart__shipping-methods-row {
  cursor: pointer;
  border-bottom: 1px solid;
}
.cart__shipping-methods-row:last-child {
  border-bottom: none;
}
.cart__shipping h2 {
  width: 100%;
}
.cart__shipping-error {
  font-size: 16px;
  color: var(--red-text-color);
}
@media (max-width: 376px) {
  .cart__shipping-error {
    font-size: 14px;
  }
}
.cart__shipping-notice {
  display: flex;
  gap: 8px;
}
.cart__shipping-notice .icon {
  --size: 32px;
  margin: 4px 0;
}
.cart__shipping-notice > div {
  min-height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cart__shipping-notice p {
  margin: 0;
}
.cart__shipping-notice--warning .icon {
  fill: var(--warning-color);
}
.cart__stripe {
  display: none;
}
.cart__stripe--visible {
  display: block;
}
.cart__stripe-card {
  margin: 0 0 8px 0;
  padding: 0 8px 8px;
  border: none;
}
.cart__stripe-button--hidden {
  display: none;
}
.cart__stripe-icons {
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}
.cart__stripe-icons img {
  max-width: 18%;
}
.cart__stripe-card-error {
  margin: 8px 0;
  color: var(--danger-color);
  font-size: 14px;
}
.cart__stripe-card-checkbox-container {
  border-bottom: 1px solid var(--default-input-border);
  padding: 0 8px 8px;
}
.cart__gift-card {
  display: none;
  width: 100%;
}
.cart__summary-block {
  cursor: pointer;
  width: 100%;
}
.cart__summary-block svg {
  width: 15px;
}
.cart__spoiler-content {
  display: none;
  width: 100%;
  flex-direction: column;
}
.cart__spoiler-content--visible {
  display: flex;
}
.cart__spoiler-input {
  width: 85%;
  padding: 10px;
  background: var(--b-color);
  border: 1px solid #767676;
}
.cart__spoiler-item {
  padding: 15px 15px 23px;
}
.cart__spoiler-item button {
  width: 120px;
  text-align: center;
  margin-left: 10px;
  color: #000;
  background-color: var(--base-color);
}
.cart__spoiler-item + hr {
  margin-bottom: 0;
  margin-top: 0;
}
.cart__spoiler-row {
  display: flex;
  align-items: center;
  margin: 10px 0;
  column-gap: 20px;
}
.cart__spoiler-row--sb {
  flex-grow: 1;
  justify-content: space-between;
}
.cart__spoiler-col {
  display: flex;
  flex-direction: column;
}
.cart__spoiler-typo--big {
  font-size: 19px;
  font-weight: bold;
}
.cart-toggle {
  transform: rotate(-90deg);
  color: #777777;
  width: 15px;
  margin: 0 5px 4px;
  transition: transform var(--default-transition);
}
.cart-toggle--open {
  transform: rotate(0);
}
@media (max-width: 1279px) {
  .cart {
    font-size: 14px;
  }
}
@media (max-width: 980px) {
  .cart--main {
    flex-direction: column;
    justify-content: space-between;
  }
  .cart__heading {
    flex-direction: row;
  }
  .cart:not(.cart--cart) .cart__left-toggle {
    display: block;
    z-index: 20;
    position: relative;
    padding: 8px 0;
    background-color: var(--base-color);
    color: var(--main-bg-color);
  }
  .cart:not(.cart--cart) .cart__left-toggle span {
    font-size: 18px;
  }
  .cart:not(.cart--cart) .cart__left {
    overflow: hidden;
  }
  .cart:not(.cart--cart) .cart__left .cart-listing {
    overflow: hidden;
    max-height: 0;
    transform: translateY(-100%) scaleY(0);
    clip-path: inset(100% 0 0 0);
    transition: transform var(--default-transition), clip-path var(--default-transition), max-height 0.3s step-end;
    z-index: 10;
    margin: 0;
    padding: 0 20px;
  }
  .cart:not(.cart--cart) .cart__left--show .cart-listing {
    max-height: 100000px;
    padding: 20px 40px;
    clip-path: inset(0 0 0 0);
    transition: transform var(--default-transition), clip-path var(--default-transition), max-height 0.3s step-start;
    transform: translateY(0);
  }
  .cart__left, .cart__right {
    width: auto !important;
    flex: 1 1 auto !important;
  }
}
@media (max-width: 576px) {
  .cart__gift-card {
    display: block;
  }
}

.payment__stripe-card .ElementsApp .Icon-fill {
  fill: #ffffff;
}

.dashboard-commissions {
  width: 100%;
}
.dashboard-commissions__wrapper {
  width: 100%;
}
.dashboard-commissions__title {
  font-size: 19px;
  color: var(--base-color);
  margin-bottom: 50px;
}
.dashboard-commissions__table {
  margin: 50px 0;
}
.dashboard-commissions__table thead {
  background: var(--base-color);
  color: var(--heading-text-color);
  border: 1px solid var(--base-color);
}
.dashboard-commissions__table thead tr {
  border-bottom: 1px solid #707070;
}
.dashboard-commissions__table thead tr:last-child {
  border-bottom: 1px solid var(--base-color);
}
.dashboard-commissions__table th {
  padding: 5px 0;
  position: relative;
  min-width: 90px;
}
.dashboard-commissions__table th:first-child {
  min-width: unset;
  cursor: default;
}
.dashboard-commissions__table th.active-level {
  color: var(--table-active-text);
}
.dashboard-commissions__table th.active-level:before {
  padding: 5px;
  content: attr(data-label);
  background: var(--base-color);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate(0, -100%);
  color: var(--table-active-text);
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .dashboard-commissions__table th.active-level:before {
    font-size: 10px;
  }
}
.dashboard-commissions__table th.active-amount {
  color: var(--table-active-text);
}
.dashboard-commissions__item-info {
  display: none;
  border: 1px solid var(--main-color);
}
.dashboard-commissions__item-info--visible {
  display: table-row;
}
.dashboard-commissions__item-info td {
  width: 100%;
  padding: 10px;
}
.dashboard-commissions__listing {
  display: flex;
  flex-flow: row wrap;
}
.dashboard-commissions__item-order {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.dashboard-commissions__item-order p {
  margin: 0;
}
.dashboard-commissions__info {
  line-height: 24px;
}
.dashboard-commissions__row {
  border: 1px solid var(--main-color);
  background: var(--dropdown-bg);
}
.dashboard-commissions__row td {
  text-align: center;
  padding: 5px 0;
}
.dashboard-commissions__row td:first-child {
  text-align: left;
  width: 15vw;
  min-width: 200px;
  max-width: 15vw;
  white-space: nowrap;
  font-size: 14px;
  padding-left: 10px;
}
.dashboard-commissions__row a {
  color: inherit;
  text-decoration: none;
}
.dashboard-commissions__row:hover a {
  text-decoration: underline;
}
.dashboard-commissions__row svg {
  transform: rotate(-90deg);
  width: 20px;
  margin-right: 10px;
  transition: transform 0.2s linear;
}
.dashboard-commissions__row--expands {
  cursor: pointer;
}
.dashboard-commissions__row--sub td {
  font-size: 14px;
}
.dashboard-commissions__row--sub td:first-child {
  padding-left: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-commissions__row--active svg {
  transform: rotate(0deg);
}
.dashboard-commissions__price {
  font-size: 14px;
  opacity: 0.5;
}
.dashboard-commissions__price--active {
  opacity: 1;
}
.dashboard-commissions__top-row {
  width: 90%;
  min-width: 1164px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.dashboard-commissions__bottom {
  width: 80%;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  padding: 10px 0;
}
.dashboard-commissions__levels-table, .dashboard-commissions__sales-table {
  width: calc(80% - 40px);
}
.dashboard-commissions__levels-table thead, .dashboard-commissions__sales-table thead {
  background: var(--base-color);
  color: var(--heading-text-color);
  border: 1px solid var(--base-color);
}
.dashboard-commissions__levels-table thead th, .dashboard-commissions__sales-table thead th {
  padding: 5px 0;
}
.dashboard-commissions__levels-table tr, .dashboard-commissions__sales-table tr {
  border: 1px solid var(--main-color);
  background: var(--dropdown-bg);
}
.dashboard-commissions__levels-table tr td, .dashboard-commissions__sales-table tr td {
  padding: 5px 0;
  text-align: center;
}
.dashboard-commissions__sales-table {
  width: 20%;
}
.dashboard-commissions__sales-table tr {
  min-height: 142px;
  height: 142px;
}
.dashboard-commissions__sales-table tr td {
  font-size: 25px;
  font-weight: bolder;
}
.dashboard-commissions__item-btn {
  border: none;
  color: var(--text-color);
  background: var(--b-color);
  cursor: pointer;
  transition: filter 0.2s ease;
  padding: 10px;
  margin: 3px 10px;
  display: block;
  width: fit-content;
}
.dashboard-commissions__item-btn:hover {
  filter: brightness(1.3);
}
.dashboard-commissions__item-btn:active {
  filter: brightness(1.1);
}
.dashboard-commissions__order-btn {
  border: none;
  text-decoration: none;
  color: var(--text-color);
  background: var(--base-color);
  cursor: pointer;
  transition: filter 0.2s ease;
  padding: 10px;
  margin: 0;
}
.dashboard-commissions__order-btn:hover {
  filter: brightness(1.3);
}
.dashboard-commissions__order-btn:active {
  filter: brightness(1.1);
}
.dashboard-commissions__single-block {
  background: var(--dropdown-bg);
}
.dashboard-commissions__single-block-wrapper {
  margin-top: 25px;
  margin-bottom: 50px;
  width: 350px;
}
.dashboard-commissions__single-block-header {
  background: var(--base-color);
  color: var(--heading-text-color);
  border: 1px solid var(--base-color);
  text-align: center;
}
.dashboard-commissions__single-block-main {
  display: grid;
  padding: 50px 0;
  justify-items: center;
  font-size: 36px;
  border: 1px solid var(--main-color);
  border-top: none;
}
.dashboard-commissions__single-block-link {
  color: inherit;
}
.dashboard-commissions__single-block-link-row {
  width: 100%;
  text-align: center;
  padding: 10px;
}
@media (max-width: 1000px) {
  .dashboard-commissions__wrapper--responsive {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .dashboard-commissions__bottom {
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: column;
  }
  .dashboard-commissions__levels-table, .dashboard-commissions__sales-table, .dashboard-commissions__table {
    width: 100%;
    min-width: 500px;
  }
}
@media (max-width: 872px) {
  .dashboard-commissions__header {
    flex-direction: column;
  }
  .dashboard-commissions__header-select {
    width: 100%;
  }
}

.design-package {
  z-index: 1;
}
.design-package__options {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.design-package__option {
  cursor: pointer;
  justify-content: stretch;
  align-items: center;
  width: 100%;
  margin: 0 0 26px;
}
.design-package__option:hover {
  z-index: 1;
}
.design-package__option:hover .design-package__option-btn {
  background: var(--base-color);
  color: var(--text-color);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.design-package__option--selected {
  z-index: 1;
}
.design-package__option-name {
  font-size: 20px;
  display: flex;
  justify-content: flex-start;
  background: var(--design-package-background);
  align-items: center;
  width: 100%;
}
.design-package__option-price {
  font-size: 35px;
  float: right;
  width: 30%;
  text-align: end;
}
.design-package__option-title {
  font-weight: bold;
  background: var(--base-color);
  color: var(--main-bg-color);
  margin: 0;
  text-align: center;
  padding: 10px;
  width: 26%;
  align-self: stretch;
  line-height: 50px;
}
.design-package__option-description {
  margin: 0;
  padding: 12px;
  text-align: center;
  font-size: 15px;
  line-height: 27px;
  width: 25%;
}
.design-package__option-btn {
  color: var(--base-color);
  border: 1px solid var(--base-color);
  padding: 10px;
  text-transform: uppercase;
  border-radius: 2px;
  width: 95px;
  margin: 15px auto;
}
.design-package__option-btn:hover {
  cursor: pointer;
  background: var(--base-color);
  color: var(--btn-text-hover);
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
.design-package__option-btn--selected {
  background: var(--base-color);
  color: var(--btn-text-selected);
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
.design-package__attachment-wrapper {
  cursor: pointer;
  width: 100%;
  padding: 70px;
  text-align: center;
  border: 2px solid var(--b-color);
}
.design-package__attachment-wrapper svg {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
}
.design-package__attachment-upload {
  display: none;
}
.design-package__attachment-preview {
  border: 2px dashed var(--b-color);
  background: var(--upload-preview-background);
  padding: 10px;
  margin: 29px 0;
}
.design-package__attachment-info {
  text-align: center;
  color: var(--b-color);
}
.design-package__products-text {
  color: var(--base-color);
}
.design-package__products label input {
  margin-right: 8px;
}
.design-package__products label input:checked {
  background: var(--base-color);
}
.design-package__items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.design-package__item {
  display: grid;
  background: var(--default-option-background);
  grid-template-columns: min-content 1fr 100px;
  gap: 12px;
  padding: 12px;
  align-items: center;
}
.design-package__item--selected {
  outline: 4px solid var(--focus-color);
}
.design-package__item--disabled {
  opacity: 0.8;
}
.design-package__item input {
  width: 24px;
  height: 24px;
}
.design-package__item-info {
  grid-column: 2;
  font-size: 18px;
  line-height: 20px;
}
.design-package__item-price {
  font-size: 12px;
  margin-top: 12px;
}
.design-package__item img {
  max-width: 100px;
  max-height: 100px;
  grid-column: 3;
  justify-self: center;
}
.design-package__logo {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.design-package__comment textarea {
  border: 2px solid var(--b-color);
  background: transparent;
  padding: 4px 10px;
  border-radius: 2px;
  width: 100%;
  height: 150px;
}
.design-package__add-to-cart {
  margin: 16px auto;
  font-size: 24px;
  padding: 16px;
  color: var(--base-color);
  border: 1px solid var(--base-color);
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  width: 100%;
  font-weight: 500;
}
.design-package__add-to-cart:hover {
  cursor: pointer;
  background: var(--base-color);
  color: var(--btn-text-hover);
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
.design-package__title {
  font-weight: 700;
  font-size: 40px;
  color: var(--base-color);
  text-align: center;
  margin: 0;
  text-transform: uppercase;
}
.design-package__title--position-right {
  text-align: right;
}
.design-package__subtitle {
  font-weight: 400;
  font-size: 18px;
  color: var(--base-color);
  text-align: center;
}
.design-package__subtitle--right {
  margin-left: auto;
  width: 50%;
  text-align: left;
}
.design-package__row {
  display: flex;
  align-items: center;
}
.design-package__list {
  list-style: none;
  padding: 0;
  text-align: center;
  color: var(--base-color);
}
.design-package__list--right {
  margin-left: auto;
  width: fit-content;
  text-align: left;
  list-style: disc;
}
.design-package__starter-pack {
  width: 40%;
}
.design-package__stores {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 50px;
}
.design-package__stores img {
  width: 100%;
}
.design-package__raster-to-vector {
  display: block;
  margin: 50px auto;
}
.design-package__section {
  margin-bottom: 100px;
}
@media (max-width: 900px) {
  .design-package {
    padding: 0;
  }
  .design-package .design-package__items {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .design-package__option-name {
    flex-direction: column;
  }
  .design-package__option-title {
    width: 100%;
  }
  .design-package__option-description {
    width: 100%;
  }
  .design-package__option-price {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 650px) {
  .design-package .design-package__items {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .design-package__title--position-right {
    text-align: center !important;
  }
  .design-package__row {
    flex-direction: column;
  }
  .design-package__starter-pack {
    width: 100%;
  }
  .design-package__subtitle--right {
    width: 100%;
  }
  .design-package__raster-to-vector {
    width: 100%;
  }
}

.design-packages-page__section {
  padding: 50px 40px;
  width: 100%;
  position: relative;
}
.design-packages-page__cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.digitize-order-item__row {
  display: flex;
  flex-wrap: wrap;
}
.digitize-order-item__column {
  flex: calc(50% - 16px) 1 1;
  min-width: 400px;
  padding: 8px;
}
.digitize-order-item__error {
  color: var(--danger-color);
}
.digitize-order-item__download {
  margin-bottom: 15px;
}
.digitize-order-item__download a {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  background: transparent;
  font-size: 16px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--base-color);
  border: 1px solid var(--base-color);
  padding: 0 4px;
}
.digitize-order-item__download a svg {
  width: 24px;
  height: 24px;
}
.digitize-order-item__download a svg + span, .digitize-order-item__download a span + svg {
  margin-left: 4px;
}
.digitize-order-item__threads {
  border-spacing: 4px;
  border-collapse: separate;
}
.digitize-order-item__threads tr:nth-child(2n) {
  background: var(--card-background);
}
.digitize-order-item__threads td {
  padding: 4px 8px;
}
.digitize-order-item__threads td:nth-child(2), .digitize-order-item__threads td:nth-child(4) {
  font-family: monospace;
}
.digitize-order-item__threads-color {
  width: 80px;
}
.digitize-order-item__preview {
  max-width: 500px;
}

.error {
  padding: 10vh 10vw;
  display: flex;
  min-height: 100vh;
  justify-content: center;
}
.error small {
  opacity: 0.3;
}
.error__message {
  margin: 0 auto;
  text-align: center;
  background: var(--card-background);
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.error__message h1 {
  font-size: 20px;
  font-weight: normal;
  margin: 0;
  opacity: 0.8;
  color: var(--contrast-text-color);
}
.error__logo {
  position: absolute;
  top: 20px;
  left: 20px;
}
.error__logo img {
  width: 100px;
}
.error__image {
  position: relative;
  background: url(/static/err.png) no-repeat center;
  height: 50vw;
  max-height: 50vh;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media (max-width: 400px) {
  .error__image {
    height: 40vh;
  }
}
.error__image code {
  font-size: 50px;
  font-size: clamp(15px, 8vmin, 75px);
  font-weight: 700;
  color: white;
  opacity: 0.9;
  display: block;
  height: fit-content;
  position: relative;
  top: -15%;
}
.error__image .loading {
  position: relative;
  top: -15%;
  font-size: 12px;
}
.error__splash {
  height: 50vw;
  max-height: 50vh;
  margin-bottom: 5vh;
}
@media (max-width: 400px) {
  .error__splash {
    height: 40vh;
  }
}
.error__btn {
  color: var(--base-color);
  border: 1px solid var(--base-color);
  font-size: 15px;
  padding: 10px 20px;
  font-weight: 600;
  margin: 0 15px 0 0;
  text-decoration: none;
  min-width: 120px;
  display: inline-block;
  cursor: pointer;
}
.error__btn:last-child {
  margin: 0;
}
.error__btn:hover {
  color: var(--main-bg-color);
  background: var(--base-color);
}
@media (max-width: 330px) {
  .error__btn {
    padding: 5px 10px;
    min-width: 100px;
  }
}
.error small {
  margin: 10px 0;
}
.error__action {
  display: flex;
  justify-content: center;
  width: 80vw;
  max-width: 600px;
}
.error__trace {
  white-space: pre-wrap;
  font-size: 12px;
  text-align: left;
  margin: 16px 0;
}
.error__trace-copy {
  border: 0;
  padding: 2px 4px;
  margin: -2px 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.error__trace-copy--success {
  background: rgba(127, 255, 127, 0.2);
}

.faq {
  z-index: 1;
}
.faq h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px;
  background: var(--base-color);
  padding: 5px 15px;
  color: var(--main-bg-color);
}
.faq__link-to {
  visibility: hidden;
  display: block;
}
.faq__link-to svg {
  display: block;
  margin: 0;
  width: 24px;
  height: 24px;
  fill: var(--main-bg-color);
  opacity: 0.5;
}
h2:hover .faq__link-to {
  visibility: visible;
}
.faq__body {
  margin: 10px;
}
.faq__container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 0;
}
.faq__container h1 {
  text-align: center;
  text-transform: uppercase;
}
.faq__section {
  border: 2px solid var(--base-color);
  border-radius: 4px;
}
.faq__table {
  display: block;
  white-space: nowrap;
  overflow-x: auto;
}
.faq__table-heading {
  width: 150px;
}
.faq-content-item {
  margin: 0 auto;
  position: relative;
  background: var(--faq-content-item-bg);
}
.faq-content-item__columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
}
.faq-content-item__columns > * {
  min-width: 250px;
  align-items: center;
  justify-content: center;
}
.faq-content-item__grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.faq-content-item__grid .item {
  min-width: 200px;
  text-align: center;
}
.faq-content-item__html, .faq-content-item__image {
  padding: 0 16px;
}
.faq-content-item img {
  max-width: 100%;
}

.faq-item {
  color: var(--faq-item-color);
  margin: 10px 0px;
  background: var(--faq-item-bg);
}
.faq-item > .item--rows {
  padding: 5px 20px;
  background: var(--faq-item-data-bg);
  color: var(--contrast-text-color);
  text-align: justify;
}
@media (max-width: 500px) {
  .faq-item > .item--rows {
    padding: 5px;
    text-align: left;
  }
}
.faq-item h3 {
  cursor: pointer;
  margin: 0px;
  padding: 10px;
  font-weight: normal;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-item h3 svg {
  height: 15px;
  width: 15px;
}
.faq-item p {
  padding: 10px;
  margin: 0px;
  background: var(--faq-item-data-bg);
}
.faq-item table {
  display: table;
  width: 100%;
  border-spacing: 10px;
  border-collapse: separate;
  background: var(--faq-table-bg);
}
.faq-item table td {
  padding: 4px;
  color: var(--faq-table-chart);
  border: 1px solid var(--faq-table-border);
  border-radius: 2px;
  text-align: center;
}
.faq-item--closed .faq-item__answer {
  display: none;
}

.dyn-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.dyn-form--page {
  padding: 32px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.dyn-form__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dyn-form__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  gap: 4px;
  --size: 300px;
}
.dyn-form__field input[type=text], .dyn-form__field select, .dyn-form__field textarea {
  margin-top: 4px;
  width: var(--size);
  max-width: 100%;
  border-color: var(--light-grey-border);
  padding: 12px;
}
.dyn-form__field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.dyn-form__field textarea {
  min-height: 100px;
}
.dyn-form__field--checkbox .dyn-form__label {
  font-size: 16px;
}
.dyn-form__field-label {
  font-size: 18px;
  line-height: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
}
.dyn-form__field-label small {
  font-size: 12px;
}
.dyn-form__field-label--optional small {
  opacity: 0.5;
}
.dyn-form__field-required {
  position: absolute;
  top: 0;
  left: -20px;
  line-height: 24px;
  font-size: 24px;
  user-select: none;
}
.dyn-form__field-required--error {
  color: var(--error-color);
}
.dyn-form__field-description {
  font-size: 14px;
}
.dyn-form__submit {
  margin-top: 32px;
}
.dyn-form__submit button {
  background-color: var(--base-color);
  padding: 16px 30px;
  color: var(--main-bg-color);
  border-radius: 2px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bolder;
  border: 0;
  cursor: pointer;
}

.giftcard-order {
  z-index: 1;
}
.giftcard-order__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.giftcard-order h1, .giftcard-order p {
  text-align: center;
  text-transform: uppercase;
}
.giftcard-order__option {
  width: 275px;
  text-align: center;
  margin: 8px;
  padding: 16px 8px;
  background: transparent;
  border: 2px solid var(--base-color);
  transition: transform 330ms ease-in-out;
}
.giftcard-order__option:hover {
  transform: scale(1.04) translate(-5px);
  z-index: 1;
}
.giftcard-order__option-amount {
  font-size: 48px;
  padding: 8px;
  color: var(--base-color);
}
.giftcard-order__option-custom-amount {
  padding: 8px;
}
.giftcard-order__option-custom-amount input {
  width: 115px;
  font: inherit;
  font-size: 48px;
  padding: 0;
  text-align: center;
  color: var(--light-grey-text-color);
  border: 1px solid var(--lighter-grey-border-color);
}
.giftcard-order__option-custom-amount span {
  color: var(--base-color);
  font-size: 48px;
  margin-right: 7px;
}
.giftcard-order__option-add-to-cart {
  color: var(--base-color);
  border: 1px solid var(--base-color);
  margin-top: 28px;
  padding: 10px;
  text-transform: uppercase;
  border-radius: 2px;
}
.giftcard-order__option-add-to-cart:hover {
  cursor: pointer;
  background: var(--base-color);
  color: var(--text-color);
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
.giftcard-order__option-add-to-cart svg {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}

.join-league {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 32px 16px;
}
.join-league h1 a {
  color: inherit;
}
.join-league__welcome {
  margin: 20px 0;
}
.join-league__join {
  background-color: var(--base-color);
  padding: 16px 30px;
  color: var(--main-bg-color);
  border-radius: 2px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bolder;
  border: 0;
  cursor: pointer;
}
.join-league .auth {
  margin: 0;
  padding: 0;
  max-width: none;
}
.join-league .auth__field, .join-league .auth__submit {
  max-width: 500px;
}

.league-invite-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: start;
}
.league-invite-actions > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.league-invite-actions > div input {
  width: 500px;
  max-width: 100%;
}
.league-invite-actions > div button {
  padding: 6px;
}

.league-action {
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
}
.league-action svg {
  width: 20px;
  height: 20px;
  margin: 0;
}
.league-action--remove {
  color: var(--danger-color);
}
.league-action--warning {
  color: var(--warning-color);
}

.order-item-preview__previews {
  display: flex;
  flex-wrap: wrap;
}
.order-item-preview__previews .design-preview {
  width: 384px;
}
.order-item-preview__roster {
  margin-top: 16px;
}
.order-item-preview__roster td {
  padding: 4px;
}
.order-item-preview__roster em {
  color: var(--danger-color);
}

.payouts {
  width: 100%;
}
.payouts__wrapper {
  width: 98%;
}
.payouts__header {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.payouts__title {
  font-size: 19px;
  color: var(--base-color);
}
.payouts-content__filter {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}
.payouts-content__dropdown select {
  font-weight: bold;
  width: 255px;
  border: 2px solid var(--design-dropdown-border);
  appearance: none;
  background: var(--design-dropdown-icon) no-repeat right;
  background-position-x: 215px;
}
.payouts-content__dropdown select:focus-visible {
  border-color: var(--focus-color);
}
.payouts-content__datepicker {
  font-weight: bold;
  border: 2px solid var(--design-dropdown-border);
  width: 215px;
}
.payouts-content__datepicker:focus-within {
  border-color: var(--focus-color);
}
.payouts__table {
  width: 100%;
  margin-bottom: 50px;
  text-align: center;
  white-space: nowrap;
}
.payouts__table thead {
  background: var(--base-color);
  color: var(--heading-text-color);
}
.payouts__table thead tr {
  border-bottom: 1px solid #707070;
}
.payouts__table thead tr:last-child {
  border-bottom: 1px solid var(--base-color);
}
.payouts__table th {
  padding: 5px 10px;
  position: relative;
  min-width: 90px;
}
.payouts__table th:nth-child(1) {
  min-width: unset;
}
.payouts__row {
  border: 1px solid var(--main-color);
  background: var(--dropdown-bg);
}
.payouts__row td {
  text-align: center;
  padding: 10px 0;
  font-size: 13px;
  white-space: nowrap;
}
.payouts__bottom {
  width: 50%;
  display: flex;
  column-gap: 150px;
}
.payouts__single-block {
  font-weight: bold;
  background: var(--dropdown-bg);
}
.payouts__single-block-wrapper {
  margin-bottom: 100px;
  width: 350px;
}
.payouts__single-block-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--base-color);
  color: var(--heading-text-color);
  border: 1px solid var(--base-color);
  height: 30px;
  font-size: 15px;
  cursor: pointer;
}
.payouts__single-block-main {
  display: grid;
  padding: 18px 0;
  justify-items: center;
  font-size: 25px;
  border: 1px solid var(--main-color);
  border-bottom: none;
  line-height: 1.25;
}
.payouts__popup {
  display: grid;
  grid-template-columns: auto max-content;
  gap: 8px;
  align-items: center;
  text-align: right;
  padding-top: 16px;
}
.payouts__popup input {
  width: 100px;
  text-align: right;
}
.payouts__popup .dash-form__btn--minor {
  justify-self: right;
}
@media (max-width: 1000px) {
  .payouts__bottom {
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: column;
  }
  .payouts__table {
    width: 100%;
    min-width: 500px;
  }
}
@media (max-width: 872px) {
  .payouts {
    padding: 0 10px;
  }
  .payouts__header {
    width: 97%;
  }
  .payouts__bottom {
    width: 97%;
    margin-top: 35px;
  }
  .payouts__header {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .payouts__single-block-wrapper {
    width: 100% !important;
  }
  .payouts-content__filter {
    flex-direction: column;
  }
  .payouts__wrapper {
    overflow-x: auto;
  }
  .payouts-content__datepicker {
    width: 100%;
  }
  .payouts-content__dropdown select, .payouts .sales_orders-content__dropdown-status-filter select {
    width: 100%;
    background-position-x: 99%;
  }
}
.products-page {
  width: 100%;
}
.products-page__filter {
  text-align: right;
  margin-bottom: 15px;
}
.products-page__dropdown {
  width: 274px;
  background: transparent;
  color: var(--light-grey-text-color);
  text-transform: uppercase;
  padding: 5px 10px;
  text-align: center;
  border-color: var(--light-grey-border);
}
.products-page__dropdown--active {
  color: var(--main-color);
}
.products-page__option {
  background: var(--menu-dropdown-background);
  padding: 10px;
}
.products-page__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  grid-gap: 25px;
}
.products-page__grid p {
  text-align: center;
  color: var(--light-grey-text-color);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.products-page__action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.products-page__btn--price {
  font-size: 10px;
  padding: 5px 15px;
  color: var(--main-color);
  font-weight: 700 !important;
  background: transparent;
  border: 1px solid var(--main-color);
  cursor: pointer;
  transition: all 0.2s ease;
}
.products-page__btn--price:hover {
  border: 1px solid var(--builder-settings-background);
  color: var(--b-color);
  background: var(--main-color);
}
.products-page__header {
  width: 100%;
  text-align: center;
  padding: 10px 0 0 0;
  background: var(--card-background);
}
.products-page__nav {
  width: 100%;
  display: flex;
  gap: 16px;
  padding: 8px;
}
.products-page__nav-btn {
  display: flex;
  align-items: center;
  border: none;
  cursor: pointer;
  font-size: 16px;
  gap: 8px;
}
.products-page__nav-btn span {
  text-align: left;
}
.products-page__nav-btn--sortby {
  color: var(--base-color);
}
.products-page__nav-btn--sortby select {
  border: none;
  padding: 0 20px 0 0;
  font-size: 16px;
  color: var(--base-color);
  appearance: none;
  background: var(--design-dropdown-icon) no-repeat right;
  background-size: 14px;
  text-align: right;
}
.products-page__nav-btn--sortby select option {
  font-size: 14px;
}
.products-page__nav-btn--hide {
  width: 225px;
}
.products-page__nav-btn--filter {
  display: none;
}
.products-page__nav-btn--invisible {
  display: none;
}
.products-page__nav-search {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.products-page__nav-search input {
  border: 0;
  border-bottom: 1px solid var(--main-color);
  background: transparent;
  padding: 0 6px;
  border-radius: 0;
  outline-offset: 2px;
}
.products-page__nav-search button {
  border: 0;
  padding: 0;
}
.products-page__subheader {
  padding: 20px;
  margin: 0 0 20px;
  display: flex;
  justify-content: flex-end;
}
.products-page__subheader span, .products-page__subheader button {
  border: 1px solid;
  padding: 10px 44px;
  text-transform: uppercase;
}
.products-page__subheader button {
  text-transform: capitalize;
  color: var(--text-color);
}
.products-page__body {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0 10px;
}
.products-page__filters {
  width: 250px;
}
.products-page__filters--animate {
  transform: scaleX(0);
}
.products-page__filters--d_none {
  display: none;
}
.products-page__filters hr {
  width: 95%;
  margin: 0 auto;
}
.products-page__filters-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.products-page__reset-filters {
  border: none;
  color: var(--toggle-color);
  width: fit-content;
  cursor: pointer;
  margin: 0 0 0 auto;
  padding: 0;
  font-size: 13px;
  transition: color 0.3s ease;
}
.products-page__reset-filters:hover {
  color: var(--base-color);
}
.products-page__filter-group {
  position: relative;
  width: 90%;
  margin: 0 auto 20px;
}
.products-page__filter-group:first-child .products-page__filter-group-title {
  margin: 0;
}
.products-page__filter-group:first-child .products-page__filters-header {
  margin: 0 0 20px;
}
.products-page__filter-group-title {
  text-transform: capitalize;
}
.products-page__filter-group-info {
  margin-left: 6px;
  margin-top: -4px;
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.products-page__filter-group-info svg {
  width: 16px;
  height: 16px;
  color: var(--text-color);
}
.products-page__filter-group-btn {
  border: none;
  color: var(--text-color);
  min-width: 15px;
  max-width: 15px;
  outline: none;
  padding: 0;
  margin: 0 10px 0 0;
  transition: color 0.3s ease;
  cursor: pointer;
}
.products-page__filter-group-btn:hover {
  color: var(--base-color);
}
.products-page__filter-group .checkbox--empty {
  opacity: 0.5;
}
.products-page__filter-group .checkbox--empty .checkbox__visual {
  opacity: 0.5;
}
.products-page__filter-group--collapsed > .checkbox:not(.checkbox--checked) {
  display: none;
}
.products-page__main {
  width: 100%;
}
.products-page__cat-info {
  padding: 0 10px;
  margin: 20px 0;
}
.products-page__cat-info h1 {
  margin: 0 0 20px;
  line-height: 1em;
}
.products-page__products-block {
  margin: 0 auto 50px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24%, 1fr));
  grid-gap: 15px;
  align-content: start;
  transition: 0.3s opacity;
}
.products-page__products-block--loading {
  opacity: 0.75;
}
.products-page__info-popup-body {
  max-width: 500px;
}
.products-page .checkbox__label {
  text-transform: capitalize;
}

@media only screen and (max-width: 1422px) {
  .products-page__products-block {
    grid-template-columns: repeat(auto-fill, minmax(24%, 1fr));
  }
}
@media only screen and (max-width: 1199px) {
  .products-page__products-block {
    grid-template-columns: repeat(auto-fill, minmax(32%, 1fr));
  }
  .products-page__nav-btn--hide {
    display: none;
  }
  .products-page__nav-btn--filter {
    display: flex;
    width: auto;
  }
  .products-page__nav-btn--sortby {
    display: flex;
  }
  .products-page__filters {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .products-page__nav {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr;
    justify-content: space-between;
  }
  .products-page__nav-btn {
    width: 100%;
    font-size: 12px;
  }
  .products-page__nav-btn--filter {
    display: flex;
  }
  .products-page__nav-btn--filter {
    display: flex;
  }
  .products-page__nav-btn--sortby select {
    width: 100%;
    font-size: 12px;
    padding-right: 12px;
    background-size: 8px;
  }
  .products-page__nav-search {
    width: 100%;
  }
  .products-page__nav-search input {
    width: 100%;
  }
  .products-page__filters {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .products-page {
    margin: 0;
    padding: 5px;
  }
  .products-page__grid {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
  .products-page__dropdown {
    width: 100%;
  }
}
@media only screen and (max-width: 730px) {
  .products-page__image {
    padding: 10px;
  }
  .products-page__product-color-icon {
    width: 21%;
    left: -5px;
    top: -5px;
  }
  .products-page__product {
    padding-bottom: 191%;
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .products-page__grid {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
  }
  .products-page__image {
    min-height: 0;
  }
}
.purchases-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  min-width: 260px;
  max-width: 1600px;
  overflow: hidden;
}
.purchases-list__item {
  border: 1px solid var(--order-according-border);
  width: 100%;
  overflow: hidden;
}
.purchases-list__item--hover {
  border: 1px solid var(--order-according-border-hover);
}
.purchases-list-header {
  background-color: var(--purchase-list-detail-header-bg);
  display: flex;
  justify-content: flex-start;
  color: var(--order-according-color);
}
.purchases-list-header--hover {
  background-color: var(--base-color);
  color: var(--heading-text-color);
}
.purchases-list-header__column {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 300px;
}
.purchases-list-header__column--actions {
  margin-left: auto;
  justify-content: flex-end;
}
.purchases-list-header__info {
  margin: 0;
  font-size: 13px;
}
.purchases-list-header__info a {
  color: inherit;
  text-decoration: none;
}
.purchases-list-header__info a:hover {
  text-decoration: underline;
}
.purchases-list-header__info--order-no {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
.purchases-list-header__info--link {
  color: var(--order-according-color);
}
.purchases-list-header__info--hover {
  color: var(--heading-text-color);
}
.purchases-list-header__info--value {
  font-weight: 600;
}
@media (max-width: 800px) {
  .purchases-list-header {
    flex-direction: column;
    justify-content: stretch;
    padding: 5px 0;
  }
  .purchases-list-header__column {
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    padding: 5px 10px;
  }
  .purchases-list-header__column p:first-child:not(:last-child) {
    width: 150px;
    max-width: 50%;
  }
}
.purchases-list-detail-header {
  background-color: var(--purchase-list-detail-inner-bg);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.purchases-list-detail-header__column {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.purchases-list-detail-header__items {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
  gap: 4px;
  padding: 4px;
  align-items: center;
}
.purchases-list-detail-header__items img {
  max-width: 48px;
}
.purchases-list-detail-header__info {
  margin: 0;
  font-size: 15px;
  text-align: center;
  color: var(--btn-text-selected);
  transition: transform 0.3s ease;
}
.purchases-list-detail-header__info--link {
  color: var(--btn-text-color);
}
.purchases-list-detail-header__info--icon {
  height: 30px;
  width: 30px;
}
.purchases-list-detail-header__info--close {
  transform: rotate(-90deg);
}
.purchases-list-detail-content {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
}
.purchases-list-detail-content__column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.purchases-list-detail-content__info {
  margin: 0;
  font-size: 13px;
  color: var(--order-according-info);
}
.purchases-list-detail-content__info--title {
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--order-according-info);
}
.purchases-list-detail-content__info--link {
  color: var(--order-according-info);
}
.purchases-list-detail-content__info--icon {
  height: 30px;
  width: 30px;
}
.purchases-list-detail-content__info--image {
  width: 40px;
  margin-right: 10px;
}
.purchases-list-detail-content__group {
  display: flex;
  gap: 80px;
  margin-bottom: 3px;
  justify-content: space-between;
}
.purchases-list-detail-content-wrapper__d-none {
  display: none;
}
@media (max-width: 800px) {
  .purchases-list-detail-content {
    flex-direction: column;
    justify-content: stretch;
  }
}
.purchases-list-shipment-header {
  background-color: var(--purchase-list-detail-header-bg);
  display: flex;
  justify-content: space-between;
  min-height: 80px;
}
.purchases-list-shipment-header__column {
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.purchases-list-shipment-header__info {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--order-according-shipment);
}
.purchases-list-shipment-header__info--link {
  color: var(--order-according-shipment-link);
}
.purchases-list-shipment-header__info--icon {
  height: 30px;
  width: 30px;
}
.purchases-list-shipment-content-item {
  display: flex;
}
.purchases-list-shipment-content-item__column {
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
}
.purchases-list-shipment-content-item__column--full-width {
  flex-grow: 1;
}
@media (max-width: 800px) {
  .purchases-list-shipment-content-item {
    flex-direction: column;
    justify-content: stretch;
  }
}
.purchases-list-shipment-content-product {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.purchases-list-shipment-content-product__image {
  width: 300px;
  max-width: 100%;
}
.purchases-list-shipment-content-product__info {
  margin: 0;
  font-size: 13px;
  color: var(--btn-text-selected);
}
.purchases-list-shipment-content-product__info--title {
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--btn-text-selected);
}
.purchases-list-shipment-content-product__info--link {
  color: var(--base-color);
  cursor: pointer;
}
.purchases-list-shipment-content-product__info--feedback {
  color: var(--disable-color);
  margin: 20px 0 8px 0;
  cursor: pointer;
  text-decoration: none;
}
.purchases-list-shipment-content-product__info--icon {
  height: 30px;
  width: 30px;
}
.purchases-list-shipment-content-product__info--image {
  width: 40px;
  margin-right: 10px;
}
.purchases-list-shipment-content-description {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.purchases-list-shipment-content-description__info {
  margin: 0;
  font-size: 15px;
  color: var(--order-according-info);
}
.purchases-list-shipment-content-description__info--price {
  font-size: 22px;
}
.purchases-list-shipment-content-description__info--title {
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--order-according-info);
}
.purchases-list-shipment-content-description__info--link {
  color: var(--base-color);
}
.purchases-list-shipment-content-description__info--feedback {
  color: var(--disable-color);
  margin: 20px 0 8px 0;
}
.purchases-list-shipment-content-description__info--icon {
  height: 30px;
  width: 30px;
}
.purchases-list-shipment-content-description__info--image {
  width: 40px;
  margin-right: 10px;
}
.purchases-list-shipment-content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.purchases-list-shipment-content-actions-button {
  display: flex;
  gap: 4px;
  align-items: center;
  border: none;
  cursor: pointer;
  background: var(--purchase-list-detail-header-bg);
  color: var(--order-according-shipment);
  padding: 4px 8px;
  font-size: 14px;
  text-decoration: none;
}
.purchases-list-shipment-content-actions-button svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: var(--order-according-shipment);
}
.purchases-list-shipment-content-actions-button--highlight svg {
  fill: var(--focus-color);
}
.purchases-list-shipment-content-roster {
  margin-right: auto;
  border: 2px solid var(--b-color);
  border-radius: 12px;
  padding: 10px;
}
.purchases-list-shipment-content-roster__info {
  margin: 0;
  font-size: 13px;
  color: var(--btn-text-selected);
}
.purchases-list-shipment-content-roster__info--link {
  text-decoration: none;
  color: var(--base-color);
}
.purchases-list-shipment-content-roster__info--icon {
  cursor: pointer;
  color: var(--disable-color);
}
.purchases-list-shipment-content-roster__info--icon svg {
  width: 18px;
  margin-top: -2px;
  margin-right: 5px;
}
.purchases-list-shipment-content-roster__info--close svg {
  transform: rotate(-90deg);
}
.purchases-list-shipment-content-roster__header {
  display: flex;
  justify-content: space-between;
}
.purchases-list-shipment-content-roster__table {
  display: table;
  width: 100%;
  border-spacing: 10px;
  border-collapse: separate;
}
.purchases-list-shipment-content-roster__table-responsive .roster-editor__row, .purchases-list-shipment-content-roster__table-responsive .roster-editor-table__cell--actions {
  display: none;
}
.purchases-list-shipment-content-roster__table-responsive .roster-editor-table__cell {
  pointer-events: none;
}
.purchases-list-shipment-content-roster__table thead th {
  font-size: 14px;
  font-weight: 100;
  text-transform: capitalize;
}
.purchases-list-shipment-content-roster__table tbody td {
  border: 1px solid var(--disable-color);
  color: var(--base-color);
  text-align: center;
}
.purchases-list-shipment-content-roster__table-name, .purchases-list-shipment-content-roster__table-alias {
  min-width: 240px;
  padding: 0 10px;
}
.purchases-list-shipment-content-roster__table-number, .purchases-list-shipment-content-roster__table-size, .purchases-list-shipment-content-roster__table-quantity, .purchases-list-shipment-content-roster__table-flag {
  min-width: 100px;
  padding: 0 10px;
}
.purchases-list-shipment-content-roster__table tfoot td {
  border: 0;
  text-align: center;
  font-size: 10px;
}
.purchases-list-shipment-content-roster__table--cancel {
  border: 0 !important;
  text-align: left !important;
}
.purchases-list-shipment-content-roster__table--cancel svg {
  transform: scale(1.1) !important;
}
.purchases-list-shipment-content-roster__table--action {
  border: 1px solid var(--base-color) !important;
}
.purchases-list-shipment-content-roster__table--width-28 {
  width: 28%;
}
.purchases-list-shipment-content-roster__table--d-none {
  display: none;
}
.purchases-list-prepared {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  gap: 20px;
}
.purchases-list-prepared__text {
  flex: 1 1 auto;
  font-size: 14px;
}
.purchases-list-prepared__text span {
  display: inline-block;
  hyphens: auto;
}
.purchases-list-prepared__actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 10px;
}
.purchases-list-prepared__button {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  align-items: center;
  background: transparent;
  border: 1px solid currentColor;
  font-size: 14px;
}
.purchases-list-prepared__button:disabled {
  color: var(--grey-text-color);
}
.purchases-list-prepared__button:not(:disabled) {
  cursor: pointer;
}
@media (max-width: 500px) {
  .purchases-list-prepared {
    flex-direction: column;
    gap: 10px;
  }
}
.purchases-list-approval {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 20px;
  gap: 20px;
}
.purchases-list-approval h4 {
  margin-top: 0;
}
.purchases-list-approval__billing-text p {
  margin: 0;
}
.purchases-list-approval__billing-form {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  color: var(--cart-text-color);
}
.purchases-list-approval__payment {
  flex: 100% 1 1;
  max-width: 600px;
}
.purchases-list-approval__button {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid currentColor;
  font-size: 14px;
  margin-top: 12px;
  cursor: pointer;
  align-self: flex-start;
}

.single-product {
  margin-inline: auto;
}
.single-product header {
  margin-top: 35px;
}
.single-product ul {
  padding-left: 40px;
}
.single-product__logo {
  aspect-ratio: 4/3;
  object-fit: contain;
  object-position: center;
  width: 150px;
  background: url("/static/checkers.png");
}
.single-product__logo-wrapper {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
}
.single-product__logo-wrapper button {
  cursor: pointer;
  border: 0;
  padding: 4px;
}
.single-product__attachment {
  color: var(--text-color);
}
.single-product__attachment h2 {
  font-size: 32px;
}
.single-product__attachment-wrapper {
  cursor: pointer;
  padding: 70px;
  text-align: center;
  border: 2px solid var(--base-color);
}
.single-product__attachment-wrapper svg {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
}
.single-product__attachment-upload {
  display: none;
}
.single-product__attachment-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border: 2px dashed var(--base-color);
  background: var(--upload-preview-background);
  padding: 20px;
  margin: 29px 0;
  max-height: 400px;
  overflow: auto;
}
.single-product__attachment-info {
  text-align: center;
}
.single-product__specification {
  color: var(--text-color);
}
.single-product__specification h2 {
  font-size: 32px;
}
.single-product__products {
  color: var(--text-color);
}
.single-product__products h2 {
  font-size: 32px;
}
.single-product__products label input:checked {
  background: var(--base-color);
}
.single-product__package-colors {
  color: var(--text-color);
}
.single-product__package-colors h2 {
  font-size: 32px;
}
.single-product__package-colors-pickers {
  display: flex;
  flex-wrap: wrap;
}
.single-product__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.single-product__item {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content 1fr;
  gap: 8px;
  padding: 8px;
  align-content: start;
  align-items: center;
  transition: 0.3s background-color;
  border: 2px solid var(--default-option-background);
  font-size: 14px;
  position: relative;
}
.single-product__item--selected {
  background: var(--default-option-background);
}
.single-product__item--disabled {
  opacity: 0.8;
}
.single-product__item--wide {
  grid-column: 1/-1;
  font-size: 22px;
  grid-template-columns: min-content max-content 1fr;
}
.single-product__item--group {
  grid-column: 1/-1;
  font-size: 22px;
  margin-top: 16px;
  grid-template-rows: min-content;
}
.single-product__item input {
  width: 24px;
  height: 24px;
}
.single-product__item-info {
  grid-column: 2;
  line-height: 20px;
}
.single-product__item-price {
  font-size: 12px;
  margin-top: 12px;
}
.single-product__item-demo-link {
  position: absolute;
  bottom: 16px;
  right: 16px;
  color: var(--text-color);
  background: var(--main-bg-color);
  padding: 4px 6px;
  border-radius: 4px;
  display: flex;
  gap: 4px;
  align-items: center;
  text-decoration: none;
  font-size: 12px;
}
.single-product__item-demo-link:hover span {
  text-decoration: underline;
}
.single-product__item img {
  width: 100%;
  min-height: 150px;
  max-height: 250px;
  grid-column: 1/span 2;
  object-fit: contain;
}
.single-product__item--template {
  grid-template-columns: min-content 1fr;
}
.single-product__item--template img {
  grid-column: 2;
  width: 256px;
  height: auto;
}
.single-product__item-image-set {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  opacity: 0.5;
  filter: grayscale(0.9);
  transition: 0.3s all;
  margin: 5px;
}
.single-product__item-image-set:hover {
  opacity: 1;
  filter: grayscale(0);
}
.single-product__item-image-set img {
  width: 50px;
  height: 50px;
  margin: -15px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));
}
@media (max-width: 1000px) {
  .single-product__item--wide {
    grid-template-columns: min-content 1fr;
  }
  .single-product__item-image-set {
    grid-column: 1/-1;
    justify-content: center;
  }
}
.single-product__comment {
  display: flex;
}
.single-product__comment textarea {
  border: 2px solid var(--base-color);
  background: transparent;
  border-radius: 2px;
  width: 100%;
  height: 150px;
}
.single-product__add-to-cart {
  margin: 16px auto;
  font-size: 24px;
  padding: 16px;
  border: 2px solid var(--text-color);
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  width: 100%;
  font-weight: 500;
}
.single-product__add-to-cart:hover {
  cursor: pointer;
  background: var(--base-color);
  color: var(--btn-text-hover);
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
.single-product__header {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 20px 40px;
  width: 100%;
}
.single-product__images {
  grid-column: 1;
  grid-row: 1/span 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  flex: 1 1 auto;
}
.single-product__image {
  width: 100%;
  height: 600px;
  max-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-product__image img {
  max-width: 100%;
  height: 600px;
  max-height: 60vh;
  object-fit: contain;
}
.single-product__thumbnail-list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.single-product__thumbnail-list__item {
  cursor: pointer;
  width: auto;
  background-color: var(--card-background-some);
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-product__thumbnail-list__item img {
  max-width: 120px;
  max-height: 90px;
}
.single-product__description, .single-product__details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 auto;
}
.single-product__unavailable {
  font-weight: bold;
}
.single-product__title {
  font-size: 35px;
  font-weight: 700;
  margin: 0;
  line-height: 40px;
}
.single-product__rating {
  display: flex;
  gap: 8px;
  position: relative;
  align-items: center;
}
.single-product__rating .single-product__rating-stars .rating-stars {
  display: block;
  margin: 0;
  height: 20px;
}
.single-product__rating .single-product__rating-review {
  color: var(--text-color);
  font-size: 17.53px;
  margin-right: 8px;
}
.single-product__rating .single-product__bar {
  height: 27px;
  position: relative;
  bottom: 5px;
  left: -3px;
  border-right: 1px solid var(--text-color);
  top: 1px;
}
.single-product__rating .single-product__link {
  text-decoration: none;
  color: var(--base-color);
  font-size: 17.53px;
}
.single-product__paragraph {
  min-height: 112px;
  width: auto;
  font-size: 19px;
  line-height: 30px;
  margin-bottom: 16px;
}
.single-product__button {
  cursor: pointer;
  border: none;
  background-color: #00d3c8;
  color: #000000;
  font-size: 32.22px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.single-product__hashtag {
  font-size: 23px;
  margin: 5px 0;
}
.single-product__pricing-title {
  font-size: 20px;
  font-weight: bold;
}
.single-product__pricing-table {
  max-width: 100%;
  overflow: auto;
}
.single-product__pricing-table table {
  margin: -6px 0 6px -16px;
}
.single-product__pricing-table table th {
  font-weight: 600;
  padding: 6px 16px;
}
.single-product__pricing-table table th:first-child {
  text-align: left;
}
.single-product__pricing-table table td {
  padding: 6px 16px;
  border: 1px solid var(--base-color);
}
.single-product__size {
  display: flex;
  flex-direction: column;
}
.single-product__size .single-product__size__title {
  font-size: 20.25px;
  font-weight: bold;
  margin-bottom: 6.34px;
}
.single-product__size .single-product__sizes__options {
  display: flex;
  flex-wrap: wrap;
  font-size: 17.81px;
  margin-bottom: 16px;
  gap: 16px;
  align-items: center;
}
.single-product__size .single-product__sizes__options .single-product__sizes__options__bar {
  height: 26px;
  width: 2px;
  position: relative;
  top: 0px;
  background-color: var(--base-color);
}
.single-product__size .single-product__links .single-product__links__item:first-child {
  color: #63b2e4;
  font-size: 21.15px;
  margin-right: 5px;
}
.single-product__size .single-product__links .single-product__links__item:last-child {
  color: #63b2e4;
  font-size: 21.15px;
  margin-left: 5px;
}
.single-product__size .single-product__links .single-product__sizes__links__bar {
  border-right: 2px solid var(--base-color);
  margin: 0 10px;
}
.single-product__colors__title {
  font-size: 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.single-product__colors__title .single-product__colors__title__toggle-btn {
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
}
.single-product__colors__title .single-product__colors__title__toggle-btn .switch {
  position: relative;
  display: inline-block;
  width: 47.91px;
  height: 25.7px;
  margin-left: 16px;
}
.single-product__colors__title .single-product__colors__title__toggle-btn .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.single-product__colors__title .single-product__colors__title__toggle-btn .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.single-product__colors__title .single-product__colors__title__toggle-btn .slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.single-product__colors__title .single-product__colors__title__toggle-btn input:checked + .slider {
  background-color: #2196f3;
}
.single-product__colors__title .single-product__colors__title__toggle-btn input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}
.single-product__colors__title .single-product__colors__title__toggle-btn input:checked + .slider:before {
  transform: translateX(22px);
}
.single-product__colors__title .single-product__colors__title__toggle-btn .slider.round {
  border-radius: 34px;
}
.single-product__colors__title .single-product__colors__title__toggle-btn .slider.round:before {
  border-radius: 50%;
}
.single-product__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}
.single-product__color {
  display: flex;
  height: 30px;
  width: 30px;
  border-radius: 15px;
  cursor: pointer;
  border: 2px solid gray;
  justify-content: stretch;
  align-items: stretch;
  overflow: hidden;
}
.single-product__color span {
  flex: 1 1 auto;
}
.single-product__form__wrapper .single-product__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.single-product__form__wrapper .single-product__form label {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.single-product__form__wrapper .single-product__form input {
  height: 53.58px;
  border: 1px solid #707070;
  background: transparent;
  padding: 2px 5px;
  color: white;
}
.single-product__form__wrapper .single-product__form__btn {
  margin-top: 16px;
  width: 100%;
  cursor: pointer;
  height: 53.58px;
  border: none;
  background-color: var(--base-color);
  color: var(--main-bg-color);
  font-size: 32.22px;
  font-weight: bold;
}
.single-product-overview {
  display: flex;
  flex-direction: column;
}
.single-product-overview__title {
  margin: 40px 0 20px 0;
  font-size: 32px;
}
.single-product-overview__features {
  flex: 0.75;
  line-height: 24px;
}
.single-product-overview__features .single-product-overview__title {
  font-size: 52.5px;
  margin-bottom: 35px;
}
.single-product-overview__features .single-product-overview__feature-caption {
  font-size: 18.33px;
}
.single-product-overview__features .single-product-overview__feature-list {
  font-size: 19px;
  margin-top: 16px;
  list-style: none;
}
.single-product-overview__features .single-product-overview__feature-list li:before {
  content: "•";
  font-size: 10px;
}
.single-product-overview__features .single-product-overview__feature-list__item {
  line-height: 30px;
}
.single-product-overview__additional {
  flex: 1;
  font-size: 19px;
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.single-product-overview__additional .single-product-overview__additional__title {
  font-size: 18.33px;
}
.single-product-overview__additional .single-product-overview__delivery-title {
  font-size: 18.33px;
  margin-bottom: 8px;
}
.single-product-overview__additional .single-product-overview__other-title {
  font-size: 18.33px;
}
.single-product-overview__additional .single-product-overview__minimum-title {
  margin-top: 16px;
  font-size: 18.33px;
}
.single-product-overview__additional .single-product-overview__delivery-list {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}
.single-product-overview__additional .single-product-overview__delivery-list li:before {
  content: "•";
  font-size: 10px;
  margin-right: 5px;
}
.single-product__information {
  margin-block: 20px;
  display: flex;
  flex-direction: column;
}
.single-product__information__title {
  font-size: 32px;
  margin: 20px 0;
}
.single-product__information__paragraph {
  font-size: 19px;
  line-height: 25px;
}
.single-product__information__paragraph--small {
  line-height: 23px;
  font-size: 15.2px;
}
.single-product__reviews-inner {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
@media (max-width: 800px) {
  .single-product__reviews-inner {
    grid-template-columns: 1fr;
  }
}
.single-product__footer__wrapper {
  margin-left: 600px;
  margin-block: 100px;
}
.single-product__footer__wrapper .single-product__footer {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.single-product__footer__wrapper .single-product__footer__title {
  font-size: 35.58px;
  font-weight: 400;
  margin-bottom: 10px;
}
.single-product__footer__wrapper .single-product__footer__description {
  font-size: 18.14px;
  margin: 10px 0;
}
.single-product__footer__wrapper .single-product__footer__support {
  font-size: 23.52px;
  margin: 10px 0;
}
.single-product__footer__wrapper .single-product__footer__support .single-product__footer__chat-btn {
  border: 1.7px solid var(--base-color);
  background-color: transparent;
  cursor: pointer;
  font-size: 19px;
  border-radius: 10px;
  width: 148.1px;
  height: 58.85px;
  margin-left: 18px;
}
.single-product__photo-popup {
  min-width: 60vw;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-product__photo-popup img {
  width: 100%;
  max-width: 90vw;
  max-height: 120vh;
  object-fit: contain;
}
@media (max-width: 872px) {
  .single-product__header {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .single-product__images {
    width: 100%;
  }
  .single-product__description {
    width: 100%;
  }
  .single-product__footer__wrapper {
    margin-left: 0;
  }
}

.store {
  z-index: 1;
  --main-color: var(--base-color);
  font-weight: bold;
}
.store-success-popup__actions {
  display: flex;
  column-gap: 10px;
  padding: 10px;
}
.store-success-popup__actions button {
  height: 36px;
  border-radius: 2px;
  margin: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--builder-setting-color-preview);
  background: transparent;
  font-size: 16px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--base-color);
  border: 1px solid var(--base-color);
  padding: 0 4px;
}
.store-success-popup__actions button svg {
  width: 24px;
  height: 24px;
}
.store-success-popup__actions button svg + span, .store-success-popup__actions button span + svg {
  margin-left: 4px;
}
.store-design-editor {
  min-width: 23vw;
  max-width: 600px;
}
.store-design-editor h2 {
  margin-top: -16px;
}
.store-design-editor__row {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}
.store-design-editor__card {
  border: 1px solid var(--grey-box-shadow);
  text-align: center;
  width: 50%;
}
.store-design-editor__card--title {
  border: 1px solid var(--grey-box-shadow);
  text-align: center;
  margin: 0;
  color: var(--heading-text-color);
  background: var(--main-color);
}
.store-design-editor__card--amount {
  font-size: 25px;
  font-weight: bold;
  margin: 15px;
}
.store-design-editor__preview {
  position: relative;
  max-width: 30vmin;
  margin: 10px auto;
}
.store-design-editor__preview picture {
  width: 100%;
}
.store-design-editor__preview picture source, .store-design-editor__preview picture img {
  width: 100%;
}
.store-banner {
  flex-basis: 100%;
  position: relative;
  border-top: 3px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
}
.store-banner__icons {
  display: flex;
  justify-content: center;
}
.store-banner:hover .store-banner__label {
  opacity: 1;
}
.store-banner__img {
  width: 100%;
  min-height: 150px;
  max-height: 646px;
  object-fit: cover;
}
.store-banner__label {
  position: absolute;
  z-index: 2;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease-in;
  background: var(--banner-label-background);
  color: var(--banner-hover-color);
}
.store-banner__label p {
  font-size: 20px;
  font-weight: bolder;
  line-height: 15px;
}
.store-banner__label svg {
  width: 35px;
  filter: drop-shadow(0px 0px 16px var(--black-box-shadow));
  transition: all 0.3s ease-in;
  margin: 0 50px 0 0;
}
.store-banner__label svg:only-child {
  margin: 0;
}
.store-banner__label svg:hover {
  transform: scale(1.1);
}
.store-banner__label button {
  background: transparent;
  border: none;
  width: 35px;
  padding: 0;
  margin: 0;
  color: var(--text-color);
  cursor: pointer;
}
.store-banner__label button svg {
  width: 100%;
  filter: drop-shadow(0px 0px 16px var(--black-box-shadow));
  transition: all 0.3s ease-in;
  margin: 0 50px 0 0;
}
.store-banner__input {
  display: none;
}
.store-banner__placeholder {
  grid-column: 1/-1;
  height: 98px;
  background: transparent;
  border: 1px solid var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.store-banner__info {
  margin: 0px;
  color: var(--main-color);
  text-transform: capitalize;
  line-height: 20px;
}
.store-banner-draft {
  max-width: 288px;
  border: 2px solid var(--main-color);
  margin-bottom: 15px;
}
.store-banner-draft__img {
  min-height: unset;
  max-height: 350px;
}
.store-shipping-info {
  width: 100%;
  text-align: center;
  padding: 5px;
  font-size: 25px;
  margin: 0;
  background: var(--main-color);
  color: var(--heading-text-color);
  font-weight: bolder;
}
.store-toggle, .store-toggle-gridlist, .store-toggle-live {
  display: inline-block;
  margin: 0 10px 0 0;
  position: relative;
  width: var(--toggle-width);
  padding: 0;
  vertical-align: middle;
  height: 100%;
  font-size: 1vw;
}
.store-toggle__left, .store-toggle-gridlist__left, .store-toggle-live__left {
  position: absolute;
  top: 50%;
  left: calc(var(--toggle-width) * 0.25);
  text-align: center;
  transform: translateY(-50%) translateX(-50%);
  color: var(--toggle-color);
  z-index: 1;
}
.store-toggle__right, .store-toggle-gridlist__right, .store-toggle-live__right {
  position: absolute;
  top: 50%;
  left: calc(var(--toggle-width) * 0.75);
  text-align: center;
  transform: translateY(-50%) translateX(-50%);
  color: var(--toggle-color);
}
.store-toggle__right--disabled {
  color: var(--toggle-color-bg);
}
.store-toggle-gridlist {
  --toggle-width: 112px;
}
.store-toggle-gridlist svg {
  height: 1.4vw;
  margin-top: -2px;
}
.store-brand {
  display: grid;
  grid-row-gap: 13px;
}
.store-brand-group {
  display: grid;
  grid-template-columns: 28px auto 33px;
}
.store-brand-group__brand {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-brand-group__brand--error-message {
  color: var(--error-color);
}
.store-brand-group__brand--text {
  background: transparent;
  padding: 4px 2px;
  font-size: 12px;
  border: 1px solid var(--border-color);
  color: var(--menu-color);
  width: unset;
  line-height: 15px;
  outline: none;
}
.store-brand-group__brand--add {
  border: 1px solid var(--main-color);
  padding: 5px;
  margin-left: 5px;
  cursor: pointer;
  transition: all 0.2s linear;
}
.store-brand-group__brand--add--full-width {
  width: 100%;
  margin: 0 0 5px;
}
.store-brand-group__brand--add:hover {
  background: var(--main-color);
}
.store-brand-group__brand--add:hover svg {
  color: var(--text-color);
}
.store-brand-group__brand svg {
  width: 18px;
  color: var(--main-color);
}
.store-brand-group__icon {
  width: 18px;
}
.store-image-preview {
  width: 100%;
}
.store-image-preview__img {
  width: 100%;
}
.store-card {
  border: 1px solid var(--card-border);
  background: var(--card-background);
  padding: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 395px;
}
.store-card__badges {
  display: flex;
  align-items: center;
  position: relative;
  height: 20px;
}
.store-card__badge {
  border: 0;
  background: transparent;
  color: var(--text-color);
  width: 20px;
  cursor: pointer;
}
.store-card__badge:hover::after {
  content: attr(title);
  position: absolute;
  z-index: 100;
  left: 0;
  top: -100%;
  background: var(--card-background);
  border: 1px solid var(--card-border);
  font-weight: normal;
  text-decoration: none;
  white-space: pre-line;
  font-size: 12px;
  padding: 2px 8px;
  pointer-events: none;
}
.store-card__badge--hidden {
  color: var(--main-color);
}
.store-card__badge--unavailable {
  color: var(--warning-color);
}
.store-card__badge--side, .store-card__badge--recover {
  margin-left: auto;
}
.store-card__badge--side:hover::after, .store-card__badge--recover:hover::after {
  left: auto;
  right: 0;
}
.store-card__badge--fee, .store-card__badge--discontinued {
  color: var(--danger-color);
}
.store-card--draggable {
  cursor: move;
}
.store-card--deleted {
  background: var(--semi-disabled-color);
}
.store-card--deleted .store-card__action, .store-card--deleted .store-card__name, .store-card--deleted img {
  opacity: 0.3;
}
.store-card--selected {
  opacity: 0.2;
}
.store-card__caption {
  margin: auto 0;
  text-align: center;
  position: relative;
}
.store-card__caption--wear {
  padding-top: 134%;
}
.store-card__img {
  width: 100%;
  object-fit: contain;
  z-index: 1;
}
.store-card__img--logo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: contain;
  background: url("/static/checkers.png");
}
.store-card__img--wear {
  position: relative;
  cursor: pointer;
}
.store-card__image {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1 1 auto;
}
.store-card__action {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 36px;
}
.store-card__btn {
  flex-basis: 33%;
  margin: 0px;
  padding: 0px;
}
.store-card__btn--check {
  position: absolute;
  bottom: -10%;
  left: 60%;
  width: 15px;
}
.store-card__btn--check svg {
  fill: var(--focus-color);
  stroke: var(--card-background);
  stroke-width: 16px;
}
.store-card__btn--icon {
  width: 21px;
  background: transparent;
  color: var(--main-color);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.store-card__btn--icon:disabled {
  color: var(--semi-disabled-color);
}
.store-card__btn--icon > svg {
  color: var(--main-color);
}
.store-card__btn--price {
  font-size: 10px;
  padding: 3px 15px;
  color: var(--base-color);
  font-weight: 700 !important;
  border: 1px solid var(--base-color);
}
.store-card__add {
  border: 1px solid var(--base-color);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 350px;
}
.store-card__add:hover svg {
  transform: scale(1.2);
}
.store-card__add svg {
  width: 40%;
  position: absolute;
  color: var(--base-color);
  transition: transform 0.3s ease;
}
.store-card__add img {
  position: absolute;
}
.store-card__add--draft {
  border: 1px solid var(--main-color);
}
.store-card__add--draft svg {
  width: 50px;
  color: var(--main-color);
  transition: transform 0.3s ease-in-out;
}
.store-card__add--draft:hover svg {
  transform: scale(1.5);
}
.store-card__name {
  font-size: 13px;
  text-align: center;
  margin: 10px 0px;
  overflow: hidden;
  white-space: pre-wrap;
}
.store-card__product-name {
  text-transform: uppercase;
  font-size: 12.38px;
  text-align: center;
  margin: 10px 0px 5px 0px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: var(--light-grey-text-color);
  line-height: 16px;
  font-weight: 600;
}
.store-card__product-price {
  text-align: center;
  margin: 0px;
  color: var(--main-color);
  font-size: 11.7px;
  border: 1px solid var(--main-color);
  padding: 5px 14px;
  font-family: "Helvetica", sans-serif;
  font-weight: 500 !important;
  background: transparent;
  transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
  align-self: center;
}
.store-card__product-price:focus {
  border: 1px solid var(--main-color);
  outline: 0px;
  box-shadow: none;
}
.store-card__product-price:hover {
  cursor: pointer;
  background: var(--main-color);
  color: var(--text-color);
}
.store-draft {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  grid-gap: 20px;
}
.store-content {
  width: 83%;
  margin: 40px auto auto;
}
.store-content--full {
  width: 100%;
}
.store-content__heading {
  margin: 0 0 20px 0;
  color: var(--base-color);
  text-transform: capitalize;
  font-size: 15px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
}
.store-content__heading--design {
  font-size: 12px;
}
.store-content-payment {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(auto-fit, 80px);
  grid-gap: 10px;
}
.store-content-payment__card {
  display: grid;
  height: max-content;
  width: 100%;
  border: 1px solid var(--payment-card-border);
  padding: 5px;
  align-items: center;
  justify-content: center;
}
.store-content-payment__img {
  width: 60px;
}
.store-content-payment__btn {
  color: var(--base-color);
  border: 1px solid var(--base-color);
  font-size: 12px;
  background: transparent;
  cursor: pointer;
}
.store-content-tab {
  grid-column: 1/2;
}
.store-content-tab-list {
  margin: 0px;
  padding: 0px;
  list-style: none;
  max-height: fit-content;
  text-align: start;
  position: relative;
}
.store-content-tab__item {
  display: block;
  padding: 5px 0px;
}
.store-content-tab__link {
  padding: 5px;
  font-size: 15px;
  display: inline-block;
  width: 100%;
  line-height: 17px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.store-content-tab__link--active {
  color: var(--base-color);
  border: 1px solid var(--link-border);
  position: relative;
}
.store-content-tab__link--active:after {
  content: "";
  position: absolute;
  right: -2px;
  top: 0px;
  bottom: 0px;
  border: 1px solid var(--main-bg-color);
}
.store-content__about {
  width: 100%;
  margin: 0 0 50px;
}
.store-content__product {
  display: grid;
  grid-template-columns: 158px 1fr;
  grid-auto-rows: min-content;
  margin-bottom: 30px;
}
.store-content__product--table-mode {
  overflow: auto;
  grid-template-columns: 1fr;
}
.store-column--video {
  display: grid;
}
.store-column--design {
  background: transparent;
}
.store-column--left {
  display: block;
}
.store-column--product {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 2/5;
  margin-left: 35px;
  align-items: start;
}
.store-column--mobile {
  display: none;
}
.store-product-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  grid-gap: 25px 25px;
}
.store-product-group__heading {
  grid-column: 1/-1;
  text-transform: uppercase;
  text-align: center;
  font-size: 15.7px;
  margin: 25px 0px 0px 0px;
}
.store-group {
  grid-column: 1/-1;
}
.store-group .store-social-list__item:not(.store-social-list__item--mobile):last-child {
  margin: 10px 0;
}
.store-group--mobile .store-social-list__item {
  flex-direction: row;
  margin: 15px 0;
}
.store-group--mobile .store-social-list__item:last-child {
  padding: 0 10px;
}
.store-group--desktop .store-social-list__item:last-child svg {
  margin: 0 5px 0 0;
}
.store-group--desktop .store-social-list__item:last-child .store-brand-group__brand--add svg {
  margin: 0;
}
.store-group__heading {
  text-transform: uppercase;
  background: var(--main-color);
  color: var(--heading-text-color);
  font-family: "Helvetica", sans-serif;
  padding: 1.9px 0px;
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
  border-radius: 0px;
  display: block;
  position: relative;
}
.store-group__heading button {
  margin: 0;
  border: none;
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  line-height: 0;
  cursor: pointer;
  padding: 1px;
}
.store-group__heading button svg {
  width: 15px;
  color: var(--heading-text-color);
}
.store-group__img {
  width: 100%;
  margin: 0px 0px 15px 0px;
}
.store-cat-list {
  text-align: left;
  padding: 0px;
  margin: 0px 0px 20px 0px;
}
.store-cat-list__item {
  list-style: none;
  line-height: 15px;
}
.store-cat-list__item--draggable {
  cursor: grab;
}
.store-cat-list__item--draggable:active {
  cursor: grabbing;
}
.store-cat-list__item--collection {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.store-cat-list__item--collection button {
  border: none;
  padding: 0 5px;
  cursor: pointer;
}
.store-cat-list__item--collection button svg {
  width: 13px;
}
.store-cat-list__item svg {
  width: 16px;
  padding-bottom: 4px;
}
.store-cat-list__actions {
  display: flex;
}
.store-cat-list__actions svg {
  color: var(--main-color);
}
.store-cat-list__actions--recover {
  color: var(--main-color);
  font-size: 20px;
}
.store-cat-list__link {
  color: var(--text-color);
  text-decoration: none;
  font-family: "Helvetica", sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: capitalize;
  transition: color 0.3s ease-in-out;
  cursor: pointer;
  padding-right: 6px;
}
.store-cat-list__link--active {
  color: var(--main-color);
}
.store-cat-list__link:hover {
  color: var(--main-color);
}
.store-cat-list__link--deleted {
  opacity: 0.3;
}
.store-detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.store-detail > .store-detail__input-group {
  max-width: 100%;
}
.store-detail__input-group {
  width: fit-content;
  min-width: 130px;
  position: relative;
  text-align: left;
  margin-right: 25px;
  max-width: 65%;
}
.store-detail__input-group svg {
  width: 16px;
  position: absolute;
  top: 4px;
  margin: 0 10px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  left: 100%;
}
.store-detail__input-group--main-color svg {
  color: var(--main-color);
}
.store-detail__input-group:hover svg {
  transform: scale(1.5);
}
.store-detail__heading {
  color: var(--main-color);
  font-size: 28px;
  line-height: 30px;
  text-align: left;
  max-width: 65%;
}
.store-detail__heading-placeholder {
  top: 0;
  position: absolute;
  opacity: 0.4;
  color: var(--main-color);
}
.store-detail__paragraph {
  text-align: justify;
  margin-bottom: 20px;
  font-size: 12px !important;
  line-height: 15px !important;
  font-family: "Helvetica", sans-serif;
  font-weight: 500 !important;
}
.store-detail__paragraph-placeholder {
  top: 0;
  position: absolute;
  opacity: 0.4;
  font-size: 12px;
}
.store-video {
  padding: 0px;
  margin: 0px;
}
.store-video__img {
  border: 1px solid var(--modal-border);
  margin-top: -60px;
  width: 400px;
  object-fit: fill;
}
.store-video__img:hover {
  cursor: pointer;
}
.store-modal {
  display: none;
  position: absolute;
  top: 20%;
  left: 30%;
  width: 40%;
  border: 2px solid var(--modal-border);
  background: var(--modal-border);
  z-index: 1002;
  overflow: visible;
}
.store-modal__fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: var(--modal-fade-background);
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.store-modal__close {
  cursor: pointer;
  color: var(--text-color);
  border: 1px solid var(--modal-close-border);
  border-radius: 3px;
  background: var(--popup-background);
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 1002;
  opacity: 0.9;
}
.store-modal__close:before {
  content: "×";
}
.store-social-list {
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: flex-end;
  align-items: center;
}
.store-social-list__link-community {
  text-decoration: none;
  display: flex;
  flex-direction: row;
}
.store-social-list__link-community svg {
  width: 25px;
  min-width: 25px;
  color: var(--main-color);
  margin: 0 5px 0 0;
  height: 25px;
}
.store-social-list__item {
  list-style: none;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px 0 0;
}
.store-social-list__item:last-child {
  margin: 0;
}
.store-social-list__item:last-child svg {
  margin: 0;
}
.store-social-list__item-community {
  padding: 0;
  margin: 10px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.store-social-list__item--mobile {
  text-decoration: none;
}
.store-social-list__item--mobile svg {
  width: 50px;
  color: var(--main-color);
  margin: 0 5px 0 0;
}
.store-social-list__item--mobile:last-child {
  margin: 0 10px 0 0;
}
.store-social-list__item--mobile:last-child svg {
  margin: 0 5px 0 0;
}
.store-social-list__item--mobile input {
  text-align: center;
}
.store-social-list__item--mobile button {
  width: 100%;
  margin-bottom: 15px;
}
.store-social-list__item--media:last-child {
  padding: 0 0 0 10px;
}
.store-social-list__hostname {
  font-size: 12px;
  color: var(--menu-color);
  text-decoration: none;
}
.store-social-list__hostname--borderless {
  border: none;
  width: 70%;
}
.store-social-list__hostname--borderless:focus {
  border-bottom: 1px solid grey;
}
.store-social-list__img {
  width: 30px;
}
.store-social-list svg {
  width: 39px;
  height: 39px;
  color: var(--main-color);
}
.store-media {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.store-media .store-social-list__item:last-child {
  padding: 0;
}
.store-media__img--design {
  flex-basis: 78px;
}
.store__banner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.store__banner img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.store h1 {
  margin: 0;
}
.store__collection-form {
  padding: 15px;
  margin-top: 1.5em;
  display: flex;
  flex-direction: column;
}
.store__collection-form input {
  margin: 0 0 15px;
}
.store__collection-form button {
  border: 1px solid var(--base-color);
  cursor: pointer;
  color: var(--btn-text-color);
  background-color: var(--base-color);
  height: 3em;
}
.store__collection-form-title {
  padding-left: 1em;
  font-weight: bold;
  margin-bottom: 1.5em;
}
.store__collection-form-name, .store__collection-form-password {
  padding-right: 1em;
  margin-bottom: 1.5em;
}
.store__collection-form-name label, .store__collection-form-password label {
  padding-right: 1em;
}
.store__collection-form-password {
  display: flex;
  justify-content: space-between;
}
.store__collection-form-password-checkbox {
  margin-bottom: 1.5em;
}
.store__collection-form-password-checkbox label {
  padding-left: 0.5em;
}
.store__collection-visible svg {
  width: 20px;
}
.store__button-group {
  display: flex;
}
.store__description {
  white-space: pre-wrap;
}
.store__items {
  display: flex;
  flex-wrap: wrap;
}
.store__embed {
  width: calc(100vw - 64px);
  max-width: 1200px;
  height: 56vw;
  max-height: 500px;
  margin: 16px auto;
}
.store-pagination {
  padding: 0px;
  margin: auto 10px 10px auto;
  width: fit-content;
  border: 1px solid var(--pagination-border);
}
.store-pagination__item {
  display: inline-block;
  line-height: 15px;
}
.store-pagination__link {
  align-items: center;
  text-decoration: none;
  color: var(--menu-color);
  text-transform: capitalize;
  display: block;
  padding: 7px 8px;
  background: transparent;
  cursor: pointer;
  border: none;
}
.store-pagination__link--active {
  color: var(--base-color);
}
.store-pagination__link--prev {
  border-right: 1px solid var(--light-grey-border);
}
.store-pagination__link--next {
  border-left: 1px solid var(--light-grey-border);
}
.store-publish-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 0 15px 0;
}
.store-input-checkbox {
  position: relative;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--toggle-color-bg);
  transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2);
  width: 100%;
  z-index: 1;
  height: 40px;
  border-radius: 0;
}
.store-input-checkbox::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: var(--toggle-color-after);
  transform: translateX(0);
  transition: 0.2s ease;
  opacity: 0.4;
  z-index: 1;
}
.store-input-checkbox:checked::after {
  transform: translateX(100%);
}
.store-input-checkbox:checked {
  border: 1px solid var(--base-color);
}
.store-input-checkbox:focus-within {
  border-color: var(--focus-color);
}
.store__table {
  border: 1px solid;
  min-width: 1200px;
  width: 100%;
}
.store__table-price:not(.store__table-price:focus):before {
  content: "$";
}
.store__table-head {
  border: 1px solid;
  background: #343434;
  color: #ffffff;
}
.store__table-head th {
  padding-top: 16px;
  padding-bottom: 16px;
  max-width: 150px;
  min-width: 100px;
}
.store__table-head th:first-child {
  min-width: 20px;
  width: 20px;
}
.store__table-editable-head {
  background: var(--main-color);
  max-width: 200px;
}
.store__table-editable-head--first {
  border-left: 1px solid;
}
.store__table-editable-head--last {
  border-right: 1px solid;
}
.store__table td {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  max-width: 150px;
  min-width: 100px;
}
.store__table td:first-child {
  min-width: 20px;
  width: 20px;
}
.store__table tr {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.store__table-editable-cell {
  max-width: 100px;
}
.store__table-editable-cell input {
  border: none;
  text-align: center;
  max-width: 100%;
}
.store__table-editable-cell--first {
  border-left: 1px solid;
}
.store__table-editable-cell--last {
  border-right: 1px solid;
}
.store__table-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  max-width: 100%;
  cursor: pointer;
}
.store__table-label svg {
  width: 16px;
  transform: translateY(-100%) translateX(5px);
}
.store__table-label svg.store__table-label-lock {
  margin-left: 4px;
  transform: none;
  cursor: default;
}
.store__table-label--select {
  display: flex;
  align-items: center;
}
.store__table-label--select svg {
  pointer-events: none;
  width: 8px;
  transform: translate(-10px, 0);
}
.store__table-label--select:after {
  content: "";
}
.store__table-label--select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: fit-content;
  margin: 0 auto;
  cursor: pointer;
  padding-right: 16px;
  text-align: center;
}
.store__table-label div {
  cursor: text;
}
.store__table-wrapper {
  position: relative;
}
.store__table-loading {
  position: absolute;
  display: grid;
  place-items: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.draft .popup__close {
  top: 17px !important;
  right: 20px !important;
  cursor: pointer;
}

@media (min-width: 2000px) {
  .store-content--full {
    width: 100%;
  }
}
@media (max-width: 1200px) {
  .store-banner-draft {
    max-width: 100% !important;
  }
  .store-content--full {
    width: 100%;
  }
  .store-draft {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
  }
  .store-publish-group {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .store__button-group {
    display: block;
    margin: 0 0 15px;
  }
  .store-toggle-live {
    margin: 0 0 5px 0;
    width: 100%;
    font-size: 15px;
  }
  .store-toggle-live__left {
    left: 25%;
  }
  .store-toggle-live__right {
    left: 75%;
  }
  .store-toggle-responsive {
    display: flex;
    gap: 10px;
  }
  .store-toggle-gridlist {
    margin: 5px 0 5px 0;
    --toggle-width: 100%;
  }
  .store-toggle-gridlist svg {
    height: 20px;
    margin-top: 0px;
  }
}
@media (max-width: 1100px) {
  .store-content--full {
    width: 100%;
  }
  .store-draft {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}
@media (max-width: 1050px) {
  .store-content--full {
    width: 100%;
  }
  .store-product {
    width: 100%;
    margin: auto;
  }
}
@media (max-width: 1024px) {
  .store-content {
    width: 80%;
  }
  .store-content--full {
    width: 100%;
  }
  .store-modal {
    width: 80%;
    left: 10%;
    top: 20%;
  }
}
@media (max-width: 950px) {
  .store-content--full {
    width: 100%;
  }
  .store-draft {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}
@media (max-width: 872px) {
  .store-container {
    display: grid;
    grid-template-columns: 1fr;
  }
  .store-content {
    width: 100%;
    grid-column: 1/-1;
  }
  .store-content--full {
    width: 100%;
  }
  .store-card__name {
    font-size: 11px;
  }
  .store-draft {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }
  .store-product-header {
    grid-template-columns: 90px 1fr;
  }
}
@media (max-width: 780px) {
  .store-product-header {
    grid-template-columns: 90px 1fr;
  }
}
@media (max-width: 767px) {
  .store-content--full {
    width: 100%;
  }
  .store-content-tab {
    grid-column: 1/-1;
  }
  .store-content-tab__link--active:after {
    display: none;
  }
  .store-brand-group {
    grid-template-columns: 28px auto 28px;
  }
  .store-brand-group__brand--add {
    grid-column: 2/4;
    margin-left: 0px;
    margin-top: 13px;
  }
  .store-brand-group--discord {
    grid-template-columns: 28px auto;
  }
}
@media (max-width: 691px) {
  .store-content--full {
    width: 100%;
  }
  .store-draft {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    grid-gap: 10px;
  }
}
@media (max-width: 530px) {
  .store-content--full {
    width: 100%;
  }
  .store-draft {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }
}
@media (max-width: 440px) {
  .store__input-group {
    font-size: 10px;
  }
}
@media (max-width: 420px) {
  .store-card__name {
    font-size: 9px;
  }
  .store-product-header {
    grid-template-columns: 80px 1fr;
  }
}
@media (min-width: 1441px) {
  .store-content {
    width: 1400px;
    margin: 40px auto auto;
  }
  .store-content--full {
    width: 100%;
  }
  .store-content__product {
    grid-template-columns: 230px 1fr;
    grid-auto-rows: min-content;
    margin-top: 25px;
  }
  .store-content__product--table-mode {
    grid-template-columns: 1fr;
  }
  .store-video__img {
    width: 500px;
    margin-top: -111px;
  }
  .store-column {
    margin-bottom: 25px;
  }
  .store-column--left {
    grid-column: 1/1;
  }
  .store-column--product {
    grid-template-columns: 1fr;
  }
  .store-card__product-name {
    font-size: 14px;
    margin: 15px 0px 10px 0px;
  }
  .store-card__product-price {
    font-size: 15px;
    padding: 5px 15px;
  }
  .store-product-group__heading {
    font-size: 21.7px;
    margin: 25px 0px 0px 0px;
  }
  .store-group__heading {
    font-size: 16.5px;
    padding: 6px 0px;
  }
  .store-detail__paragraph {
    font-size: 17px !important;
    line-height: 22px !important;
    margin-top: 0;
    border-bottom: 1px solid transparent;
  }
  .store-detail__heading {
    font-size: 36px;
    margin-top: 0;
    border-bottom: 1px solid transparent;
    margin-bottom: 25px;
  }
  .store-social__img--design {
    flex-basis: 78px;
  }
  .store-social-list {
    margin: 0px;
  }
  .store-social-list__item {
    padding: 0 10px 0 0;
  }
  .store-cat-list__item {
    line-height: 22px;
  }
  .store-cat-list__link {
    font-size: 16px;
  }
  .store__media .store-social-list__item--community:last-child {
    padding: 0;
  }
}
@media (max-width: 1440px) {
  .store-content {
    width: 83%;
    margin: 20px auto auto;
  }
  .store-content--full {
    width: 100%;
  }
  .store-video__img {
    width: 350px;
  }
  .store__product {
    margin-top: 25px;
  }
  .store__product--table-mode {
    grid-template-columns: 1fr;
  }
  .store-card__caption:after {
    height: 60px;
  }
  .store-media .store-social-list__item:last-child {
    padding: 0;
  }
}
@media (max-width: 1439px) {
  .store-content {
    width: 1000px;
  }
  .store-content--full {
    width: 100%;
  }
}
@media (max-width: 1366px) {
  .store-content {
    width: 1000px;
    padding: 10px 0px;
    margin: auto;
    background: transparent;
  }
  .store-content--full {
    width: 100%;
  }
  .store-video__img {
    width: 363px;
  }
  .store-modal {
    width: 60%;
    left: 20%;
    top: 20%;
  }
}
@media (max-width: 1280px) {
  .store-content {
    width: 80%;
  }
  .store-content--full {
    width: 100%;
  }
  .store-video__img {
    width: 350px;
  }
}
@media (max-width: 960px) {
  .store-content {
    width: 80%;
  }
  .store-content--full {
    width: 100%;
  }
  .store-card__caption:after {
    height: 40px;
  }
}
@media (max-width: 854px) {
  .store-content--full {
    width: 100%;
  }
  .store-content__product {
    grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
  }
  .store-column--product {
    grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
  }
  .store-video__img {
    width: 300px;
    margin-top: 60px;
  }
  .store-modal {
    width: 80%;
    left: 10%;
    top: 50px;
  }
}
@media (max-width: 823px) {
  .store-content {
    width: 80%;
  }
  .store-content--full {
    width: 100%;
  }
  .store-content__product {
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  }
  .store-column--product {
    grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
  }
  .store-video__img {
    margin-top: 62px;
    width: 300px;
  }
  .store-modal {
    width: 70%;
    left: 15%;
    top: 30px;
  }
}
@media (max-width: 812px) {
  .store-content {
    width: 80%;
  }
  .store-content--full {
    width: 100%;
  }
}
@media (max-width: 800px) {
  .store-content {
    width: 80%;
  }
  .store-content--full {
    width: 100%;
  }
  .store-column--product {
    grid-template-columns: repeat(2, minmax(127px, 1fr));
  }
  .store-video__img {
    width: 280px;
    margin-top: 46px;
  }
  .store-card__caption:after {
    height: 35px;
  }
}
@media (max-width: 768px) {
  .store-content {
    width: 80%;
  }
  .store-content--full {
    width: 100%;
  }
  .store-column--product {
    grid-template-columns: repeat(auto-fit, minmax(127px, 1fr));
  }
  .store-modal {
    width: 70%;
    left: 15%;
    top: 100px;
  }
  .store-social-list__item {
    padding: 0px 5px;
  }
  .store-media .store-social-list__item:last-child {
    padding: 0 5px;
  }
}
@media (max-width: 767px) {
  .store-modal {
    top: 30px;
    left: 10%;
    width: 80%;
  }
  .store-detail {
    margin-top: 19px;
  }
  .store-detail__heading {
    font-size: 24px;
  }
  .store-content {
    width: 80%;
  }
  .store-content--full {
    width: 100%;
  }
  .store-content__product {
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  }
  .store-column--product {
    grid-template-columns: repeat(auto-fit, minmax(147px, 1fr));
  }
  .store-large {
    text-align: center;
  }
  .store-list {
    width: calc(100% - 0px);
    margin: 0px;
  }
  .store-list__img {
    width: 20px;
  }
  .store-social__img--design {
    flex-basis: 78px;
  }
  .store-video__img {
    width: 250px;
    margin-top: 60px;
  }
}
@media (max-width: 732px) {
  .store-card__caption:after {
    height: 40px;
  }
}
@media (max-width: 653px) {
  .store-social-list {
    margin: 8px 0px;
  }
  .store-social-list__item {
    padding: 0px 5px;
  }
  .store-social-list__img {
    width: 24px;
  }
}
@media (max-width: 640px) {
  .store__content {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  .store-card__caption:after {
    bottom: -7px;
    height: 50px;
  }
  .store-social-list {
    margin: 8px 0px;
  }
  .store-social-list__item {
    padding: 0px 5px;
  }
  .store-social-list__img {
    width: 24px;
  }
}
@media (max-width: 600px) {
  .store-content {
    width: 90%;
  }
  .store-content--full {
    width: 100%;
  }
  .store__content {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .store__column--design {
    padding: 0px;
  }
  .store-detail__heading {
    font-size: 23px;
    margin-top: 20px;
    text-align: center;
  }
  .store-social__img--design {
    flex-basis: 78px;
  }
  .store-social__list__item--mobile:last-child {
    margin: 0 10px 0 0;
  }
  .store-social__list__item--mobile:last-child svg {
    margin: 0 5px 0 0;
  }
  .store-video__img {
    width: 100%;
    margin: 30px 0px 0px;
  }
  .store-modal {
    width: 90%;
    left: 5%;
    right: 5%;
    top: 30%;
  }
  .store-column--video {
    grid-column: 1/-1;
  }
  .store-column--detail {
    grid-column: 1/-1;
  }
  .store-column--left {
    grid-column: 1/-1;
  }
  .store-column--product {
    grid-column: 1/-1;
    grid-template-columns: 1fr;
    margin: 0px;
  }
  .store-column--mobile {
    display: block;
    grid-column: 1/-1;
    margin-top: 50px;
  }
  .store-group--desktop {
    display: none;
  }
  .store-list {
    width: calc(100% - 0px);
    margin: 0px;
  }
  .store-list__img {
    width: 35px;
  }
  .store-content--full {
    width: 100%;
  }
  .store-content__product {
    grid-template-columns: 164px 1fr;
  }
  .store-card__caption:after {
    height: 97px;
    bottom: -9px;
  }
  .store-social-list {
    margin: 8px 0px;
  }
  .store-social-list__item {
    padding: 0px 10px;
  }
  .store-social-list__img {
    width: 30px;
  }
  .store-media .store-social-list__item:last-child {
    padding: 0 10px;
  }
}
@media (max-width: 599px) {
  .store-card {
    min-height: 360px;
  }
  .store-product-group {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-gap: 10px 10px;
  }
  .store-content--full {
    width: 100%;
  }
  .store-content__about {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .store-content__product {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .store-column--left {
    grid-column: 1/-1;
    grid-gap: 0px;
    margin: 20px 0px 0px;
  }
  .store-column--product {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-column: 1/-1;
    grid-gap: 1px;
    margin: 0px;
  }
  .store__heading {
    margin-bottom: 30px;
  }
  .store__about {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .store-video__info {
    width: 100%;
    height: 200px;
    margin: 0px;
  }
  .store-modal {
    top: 20px;
  }
  .store-detail {
    text-align: center;
  }
  .store-detail__heading {
    margin-top: 15px;
    font-size: 24px;
  }
  .store-card__product-price {
    font-size: 10px;
    padding: 4px 14px;
  }
  .store-card__product-name {
    grid-column: 1/1;
    font-size: 11px;
    margin: 15px 0px 7px 0px;
  }
  .store-card__heading {
    grid-column: 1/1fr;
  }
  .store-card__caption:after {
    width: 50%;
    bottom: 10px;
  }
}
@media (max-width: 568px) {
  .store-card__caption:after {
    height: 40px;
  }
}
@media (max-width: 533px) {
  .store-card__caption:after {
    height: 40px;
  }
}
@media (max-width: 480px) {
  .store-toggle-live {
    font-size: 12px !important;
  }
  .store-modal {
    top: 100px;
  }
  .store-video__img {
    margin-top: 18px;
  }
  .store-card__caption:after {
    height: 75px;
    bottom: -5px;
  }
}
@media (max-width: 412px) {
  .store-card__caption:after {
    height: 33px;
  }
}
@media (max-width: 411px) {
  .store-card__caption:after {
    height: 60px;
    bottom: 10px;
  }
}
@media (max-width: 384px) {
  .store-column--product {
    grid-gap: 0px;
  }
  .store-card__caption:after {
    width: 60%;
    height: 70px;
    bottom: 0px;
  }
}
@media (max-width: 320px) {
  .store-list__img {
    width: 25px;
  }
  .store-card__caption:after {
    height: 60px;
  }
  .store-social-list {
    margin: 8px 0px;
  }
  .store-social-list__item {
    padding: 0px 5px;
  }
  .store-group--mobile .store-social-list__item:last-child {
    padding: 0 5px;
  }
}
@media (max-width: 280px) {
  .store-content--full {
    width: 100%;
  }
  .store-content__product {
    padding: 0px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
  .store-column--product {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
  .store-social-list {
    margin: 8px 0px;
  }
  .store-social-list__item {
    padding: 0px 5px;
  }
  .store-social-list__img {
    width: 22px;
  }
}
/*--------------------------- mixins ----------------------*/
/*--------------------------- scss code ----------------------*/
.store-product {
  font-size: 18px;
  color: var(--text-color);
  line-height: 27px;
  z-index: 1;
  /*--- elements ---*/
}
.store-product__link:not(:hover) {
  text-decoration: none;
}
.store-product__banner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 16px 0 16px;
}
.store-product__banner img {
  max-width: 100%;
  border: 2px solid var(--main-color);
}
.store-product__content {
  display: grid;
  grid-template-rows: repeat(1, auto);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.store-product-small--thumbnail img {
  width: 45px;
  border: 1px solid var(--b-color);
  margin: 0px 5px 5px 0px;
  padding: 3px;
}
.store-product-small--thumbnail img:hover {
  cursor: pointer;
}
.store-product-small--thumbnail--active {
  border-color: var(--main-color) !important;
}
.store-product-form__group {
  margin-bottom: 7px;
  width: unset;
  display: block;
  max-width: 222px;
  margin: 0 3px 7px 0;
}
.store-product-form__group--design {
  display: flex;
  padding: 15px 0px;
  flex-direction: row;
  flex-wrap: wrap;
}
.store-product-form__entries {
  display: flex;
  flex-wrap: wrap;
}
.store-product-form__entries .store-product-form__group {
  max-width: 180px;
  width: unset;
  flex: 1 80px;
}
.store-product-form__entries .store-product-form__group--number {
  max-width: 80px;
}
.store-product-form__entries .store-product-form__group input {
  text-align: left;
  cursor: text;
}
.store-product-form__options {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 20px 0;
}
.store-product-form__options .store-product-form__group--design {
  width: unset;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 2px 0 0;
  padding: 0;
}
.store-product-form__options input {
  width: calc(100% - 52px);
}
.store-product-form__label {
  -webkit-text-transform: uppercase;
  -moz-text-transform: uppercase;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--text-color);
  margin-bottom: 8px;
  font-weight: 700;
}
.store-product-form__label--flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0px;
}
.store-product-form__select {
  background: transparent;
  border: 1px solid var(--b-color);
  color: var(--light-grey-text-color);
  vertical-align: bottom;
  width: 100%;
  height: 26px;
  font-size: 11px;
}
.store-product-form__select:focus {
  border-color: var(--b-color);
  border-radius: 0px;
  box-shadow: none;
}
.store-product-form__select:hover {
  cursor: pointer;
}
.store-product-form__select option {
  color: var(--text-color);
}
.store-product-form__select option[data-oos=true] {
  color: var(--disabled-color);
}
.store-product-form__question--primary {
  background: var(--main-color);
  height: 16px;
  width: 16px;
  border-radius: 2px;
  color: var(--text-color);
  font-size: 14px;
  text-align: center;
  margin-top: 4px;
  line-height: 17px;
}
.store-product-form__btn--decrease, .store-product-form__btn--increase {
  height: 26px;
  width: 26px;
  background: transparent;
  border: 1px solid var(--b-color);
  color: var(--text-color);
  padding: 0;
}
.store-product-form__btn--decrease:hover, .store-product-form__btn--increase:hover {
  cursor: pointer;
}
.store-product-form__btn--decrease:focus, .store-product-form__btn--increase:focus {
  border-color: var(--b-color);
  border-radius: 0px;
  box-shadow: none;
}
.store-product-form__btn--submit {
  border: 1px solid var(--main-color);
  background: transparent;
  color: var(--text-color);
  width: 100%;
  font-size: 18px;
  padding: 14px 20px;
  box-sizing: border-box;
  -webkit-text-transform: uppercase;
  -moz-text-transform: uppercase;
  text-transform: uppercase;
  border-radius: 2px;
  margin-bottom: 50px;
  transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}
.store-product-form__btn--submit:focus {
  border-color: var(--main-color);
  border-radius: 0;
}
.store-product-form__btn--submit:hover {
  background: var(--main-color);
  color: var(--text-color);
  cursor: pointer;
}
.store-product-form__btn--submit svg {
  width: 20px;
  margin: -5px 5px 0px 0px;
}
.store-product-form__input {
  text-align: center;
  height: 26px;
  background: transparent;
  border: 1px solid var(--b-color);
  box-shadow: none;
  color: var(--light-grey-text-color);
  border-left: 0px;
  border-right: 0px;
}
.store-product-form__input--full-border {
  border: 1px solid var(--b-color);
  width: 100%;
}
.store-product-form__input:focus {
  outline: 0px;
  box-shadow: none;
}
.store-product-form__input:hover {
  cursor: pointer;
}
.store-product__heading {
  -webkit-text-transform: uppercase;
  -moz-text-transform: uppercase;
  text-transform: uppercase;
  color: var(--text-color);
  font-size: 35px;
  text-align: center;
  line-height: 34px;
  margin: 40px 0px 65px 0px;
}
.store-product__column {
  box-sizing: border-box;
}
.store-product__column--design {
  padding: 0px 25px;
}
.store-product__column--image {
  padding: 0px 25px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-items: center;
}
.store-product-info__heading {
  -webkit-text-transform: uppercase;
  -moz-text-transform: uppercase;
  text-transform: uppercase;
  margin: 0px 0px 10px 0px;
  line-height: 28px;
  font-size: 19px;
  color: var(--text-color);
}
.store-product-info__price {
  color: var(--text-color);
  margin: 16px 0px;
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.store-product-info__price small {
  font-weight: 300;
  font-size: 13px;
}
.store-product-info__description {
  font-size: 16px;
  line-height: 18px;
  margin: 8px 0px 16px 0px;
  text-align: justify;
  color: var(--light-grey-text-color);
}
.store-product-info__description--secondary {
  font-size: 14px;
  line-height: 16px;
}
.store-product-info__description p {
  margin: 10px 0;
}
.store-product-large {
  width: 450px;
  max-width: 100%;
}
.store-product-large__img {
  width: 100%;
}
.store-product-small {
  display: flex;
  flex-wrap: wrap;
  padding: 30px 0px;
  text-align: center;
  justify-content: center;
}

/*media css code*/
@media (min-width: 1441px) {
  .store-product__main {
    width: 1140px;
    margin: auto;
  }
}
@media (max-width: 1440px) {
  .store-product__main {
    width: 1200px;
    margin: auto;
  }
}
@media (max-width: 1439px) {
  .store-product__main {
    width: 1000px;
  }
}
@media (max-width: 1366px) {
  .store-product__main {
    width: 1000px;
    margin: auto;
  }
}
@media (max-width: 1280px) {
  .store-product__main {
    width: 1000px;
  }
}
@media (max-width: 1024px) {
  .store-product__main {
    width: 80%;
  }
}
@media (max-width: 960px) {
  .store-product__main {
    width: 80%;
  }
}
@media (max-width: 823px) {
  .store-product__main {
    width: 80%;
  }
  .store-product__column--design {
    padding: 0px;
  }
}
@media (max-width: 812px) {
  .store-product__main {
    width: 80%;
  }
}
@media (max-width: 800px) {
  .store-product__main {
    width: 80%;
  }
}
@media (max-width: 768px) {
  .store-product__main {
    width: 80%;
  }
}
@media (max-width: 767px) {
  .store-product__heading {
    margin-bottom: 50px;
  }
}
@media (max-width: 600px) {
  .store-product__main {
    width: 90%;
  }
}
@media (max-width: 384px) {
  .store-product__heading {
    font-size: 28px;
  }
}
@media (max-width: 280px) {
  .store-product__heading {
    font-size: 24px;
  }
}
.store_products {
  width: 100%;
}
.store_products__wrapper {
  width: 98%;
}
.store_products__header {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.store_products__title {
  font-size: 19px;
  color: var(--base-color);
}
.store_products-content__filter {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}
.store_products-content__dropdown select {
  font-weight: bold;
  width: 255px;
  border: 2px solid var(--design-dropdown-border);
  appearance: none;
  background: var(--design-dropdown-icon) no-repeat right;
  background-position-x: 215px;
}
.store_products-content__dropdown select:focus-visible {
  border-color: var(--focus-color);
}
.store_products-content__datepicker {
  font-weight: bold;
  border: 2px solid var(--design-dropdown-border);
  width: 215px;
}
.store_products__table {
  width: 100%;
  margin-bottom: 50px;
  text-align: center;
  white-space: nowrap;
}
.store_products__table thead {
  background: var(--base-color);
  color: var(--heading-text-color);
}
.store_products__table thead tr {
  border-bottom: 1px solid #707070;
}
.store_products__table thead tr:last-child {
  border-bottom: 1px solid var(--base-color);
}
.store_products__table th {
  padding: 5px 10px;
  position: relative;
  min-width: 90px;
}
.store_products__table th:nth-child(1) {
  min-width: unset;
}
.store_products__row {
  border: 1px solid var(--main-color);
  background: var(--dropdown-bg);
}
.store_products__row td {
  text-align: center;
  padding: 10px 0;
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .store_products__table {
    width: 100%;
    min-width: 500px;
  }
}
@media (max-width: 872px) {
  .store_products__header {
    flex-direction: column;
    width: 97%;
  }
}

@media (max-width: 767px) {
  .store_products {
    padding: 0 10px;
  }
  .store_products-content__filter {
    flex-direction: column;
  }
  .store_products__wrapper {
    overflow-x: auto;
  }
  .store_products-content__datepicker {
    width: 100%;
  }
  .store_products-content__dropdown select, .store_products .sales_orders-content__dropdown-status-filter select {
    width: 100%;
    background-position-x: 99%;
  }
}
.stores h1, .stores h2 {
  margin: 0;
}
.stores__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.stores__store {
  width: 350px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stores__store-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 150px;
}
.stores__store-banner img {
  width: 350px;
  height: 150px;
  object-fit: cover;
}
.stores__store-name {
  display: block;
  padding: 8px 0;
  text-align: center;
  color: var(--menu-color);
  text-decoration: none;
}
.stores__store--no-banner .stores__store-name {
  font-size: 32px;
}

.unsubscribe-page {
  min-height: calc(100vh - 132px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.unsubscribe-page__title {
  margin: 0;
  margin-bottom: 10px;
  font-size: 25px;
}
.unsubscribe-page__textarea {
  display: block;
  width: 60%;
  min-width: 300px;
  margin: 16px auto;
  padding: 8px;
}
.unsubscribe-page__button {
  cursor: pointer;
  color: var(--btn-text-color);
  border: 1px solid var(--base-color);
  margin-top: 28px;
  padding: 10px;
  grid-column: 1/-1;
  border-radius: 2px;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  background-color: var(--base-color);
  transition: background-color 0.2s ease-in;
}
.unsubscribe-page__button:hover {
  background-color: var(--lighter-base-color);
}
.unsubscribe-page__button:active {
  transition: background-color 0.1s linear;
  background-color: var(--darker-base-color);
  border-color: var(--darker-base-color);
}

.vendor-order {
  z-index: 1;
  --main-color: var(--base-color);
}
.vendor-order-font-style, .vendor-order-form__btn, .vendor-order-form__label, .vendor-order-form__input {
  font-weight: 700;
  font-size: 15px;
  text-transform: capitalize;
  color: var(--menu-color);
  text-decoration: none;
}
.vendor-order-wrapper {
  display: flex;
  flex-direction: column;
}
.vendor-order-form {
  max-width: 90%;
}
.vendor-order-form__color-preview {
  background: var(--main-color);
}
.vendor-order-form-setting, .vendor-order-form-setup {
  grid-column: 1/2;
}
.vendor-order-form-group {
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: repeat(2, auto);
}
.vendor-order-form-group--row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
}
.vendor-order-form-group--info, .vendor-order-form-group--setup {
  display: flex;
  margin-bottom: 10px;
}
.vendor-order-form-group--info select, .vendor-order-form-group--setup select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.vendor-order-form-group .shipping-address-wrapper {
  width: 90%;
  border: 1px solid var(--light-grey-border);
  margin-left: 12px;
  margin-bottom: 10px;
  padding: 20px;
}
.vendor-order-form__label, .vendor-order-form__input {
  margin-bottom: 0px;
  white-space: nowrap;
  grid-column: 1/-1;
  font-size: 15px;
  text-transform: unset;
  opacity: 0.7;
}
.vendor-order-form__label--info, .vendor-order-form__label--setup {
  width: 170px;
}
.vendor-order-form__input {
  border: 1px solid var(--light-grey-border);
  background: transparent;
  padding: 4px 10px;
  border-radius: 2px;
}
.vendor-order-form__input--info, .vendor-order-form__input--setup {
  width: calc(100% - 150px);
  padding: 10px;
}
.vendor-order-form__input--info.pre, .vendor-order-form__input--setup.pre {
  white-space: pre;
}
.vendor-order-form__input::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
.vendor-order-form__btn {
  color: var(--base-color);
  border: 1px solid var(--base-color);
  margin-top: 28px;
  padding: 10px;
  text-transform: uppercase;
  grid-column: 1/-1;
  border-radius: 2px;
  margin-bottom: 0px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
}
.vendor-order-form__btn--setting, .vendor-order-form__btn--setup {
  width: calc(100% - 150px);
  margin-top: 0px;
  margin-left: auto;
}
.vendor-order-form__btn--draft {
  color: var(--main-color);
  border-color: var(--main-color);
  cursor: pointer;
  transition: all 0.2s linear;
  margin: 0 10px 0 0;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
}
.vendor-order-form__btn--draft:hover:not([disabled]) {
  color: var(--text-color);
  background: var(--main-color);
}
.vendor-order-form__btn--draft:disabled {
  color: var(--disabled-color);
  border-color: var(--disabled-border-color);
}

.vendor-order-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vendor-order-item > section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.vendor-order-item__notes {
  white-space: pre-wrap;
}
.vendor-order-item__heading {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}
.vendor-order-item__roster {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.vendor-order-item__roster-previews {
  display: flex;
  gap: 8px;
}
.vendor-order-item__roster-data {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vendor-order-item__roster-data dl {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 4px 8px;
}
.vendor-order-item__roster-data dl dt, .vendor-order-item__roster-data dl dd {
  margin: 0;
}
.vendor-order-item__roster-preview {
  width: 384px;
}
@media (max-width: 768px) {
  .vendor-order-item__roster-preview {
    width: 200px;
  }
}
.vendor-order-item-roster-preview-btn {
  border: 1px solid transparent;
  color: inherit;
  cursor: pointer;
}
.vendor-order-item-roster-preview-btn .icon {
  transition: opacity 0.2s;
  --size: 16px;
  color: var(--focus-color);
}
.vendor-order-item-roster-preview-btn:not(.vendor-order-item-roster-preview-btn--active) .icon {
  opacity: 0;
}
.vendor-order-item__print-file-previews {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.vendor-order-item__print-file-preview {
  max-width: 100%;
  width: 500px;
}
@media (max-width: 768px) {
  .vendor-order-item__print-file-preview {
    width: 200px;
  }
}
.vendor-order-item__photos {
  display: grid;
  align-self: stretch;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 15px;
}
.vendor-order-item__photo-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 190px;
}
.vendor-order-item__photo {
  max-width: 100%;
  object-fit: cover;
  object-position: top;
}
.vendor-order-item__photo--removed {
  opacity: 0.6;
}
.vendor-order-item__photo--removed span {
  display: none;
}
.vendor-order-item__photo--removed:hover {
  opacity: 1;
}
.vendor-order-item__photo-visible {
  margin: 5px 0 10px;
}
.vendor-order-item__remove-photo {
  display: block;
  position: absolute;
  width: 24px;
  right: 0;
  top: 0;
  color: #ff0000;
  cursor: pointer;
  transform: translate(50%, -50%);
  transition: color 0.2s ease;
}
.vendor-order-item__remove-photo:hover {
  color: #6c0000;
}

.ts-landing {
  background-color: var(--base-color);
}
.ts-landing__section {
  background: #fff;
  padding: 40px 10%;
}
.ts-landing__section-heading {
  font-size: 54px;
  font-weight: bold;
  background: transparent;
  padding: 20px 0;
  width: fit-content;
  margin-bottom: 20px;
}
.ts-landing__section-heading--center {
  margin: 0 auto;
}
.ts-landing__section-heading--with-subtitle {
  padding: 10px 0;
}
.ts-landing__section-heading--with-border {
  border-top: 1px solid var(--base-color);
  border-bottom: 1px solid var(--base-color);
  padding: 5px 0;
  font-size: 30px;
  width: fit-content;
  text-align: center;
  text-transform: uppercase;
  margin-top: 50px;
  margin-bottom: 90px;
}
.ts-landing__section-heading--with-border .ts-landing__section-title {
  font-weight: 200;
}
.ts-landing__section-title {
  color: var(--base-color);
  margin: 0;
  line-height: 1;
  font-size: 54px;
}
.ts-landing__section-subtitle {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  color: var(--base-color);
}
@media (max-width: 800px) {
  .ts-landing__section-title {
    font-size: 28px;
  }
  .ts-landing__section {
    padding: 20px 3% 5px;
  }
  .ts-landing__section-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    padding: 20px 0;
    font-size: 28px;
  }
  .ts-landing__section-heading--with-border {
    font-size: 22px;
  }
  .ts-landing__section-subtitle {
    font-size: 18px;
  }
}
@media (max-width: 420px) {
  .ts-landing__section-heading--with-border {
    font-size: 18px;
  }
}

.ts-landing-hero {
  display: flex;
}
.ts-landing-hero__left, .ts-landing-hero__right {
  width: 50%;
}
.ts-landing-hero__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ts-landing-hero__right {
  place-items: center;
  display: grid;
  background-color: white;
  border: 15px solid var(--base-color);
  background-image: url("/static/ts/right-hero-bg.png");
  background-size: 100%;
}
.ts-landing-hero__title {
  width: 80%;
  color: #fff;
  font-size: 36px;
}
.ts-landing-hero__buttons {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: 50px;
  font-size: 20px;
  font-weight: bold;
  text-transform: capitalize;
}
.ts-landing-hero__button {
  text-decoration: none;
  border: 1px solid;
  padding: 15px 40px;
  border-radius: 50px;
  color: #fff;
}
.ts-landing-hero__button--inverted {
  background: #fff;
  color: var(--base-color);
}
.ts-landing-hero__image {
  width: 50%;
}
@media (max-width: 1270px) {
  .ts-landing-hero__buttons {
    column-gap: 30px;
    font-size: 14px;
  }
  .ts-landing-hero__button {
    padding: 5px 15px;
  }
}
@media (max-width: 900px) {
  .ts-landing-hero__title {
    font-size: 24px;
  }
}
@media (max-width: 800px) {
  .ts-landing-hero {
    flex-direction: column-reverse;
    padding-bottom: 40px;
  }
  .ts-landing-hero__left, .ts-landing-hero__right {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .ts-landing-hero__title {
    font-size: 20px;
  }
  .ts-landing-hero__buttons {
    font-size: 10px;
  }
  .ts-landing-hero__button {
    padding: 5px 10px;
  }
}

.ts-landing-sports {
  padding: 40px 5%;
}
.ts-landing-sports__list {
  display: flex;
  list-style: none;
  align-items: end;
  column-gap: 6%;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0;
  row-gap: 100px;
}
.ts-landing-sports__list-item {
  min-width: 100px;
  max-width: 150px;
}
.ts-landing-sports__list-item svg {
  width: 50%;
  margin: 0 auto;
  display: block;
}
.ts-landing-sports__link {
  text-align: center;
  text-decoration: none;
}
.ts-landing-sports__list-title {
  display: block;
  width: 100%;
  padding-top: 20px;
  font-size: 20px;
}
@media (max-width: 420px) {
  .ts-landing-sports__list-item svg {
    width: 100%;
  }
}

.ts-landing-nav {
  padding: 50px 10% 10px;
}
.ts-landing-nav__title {
  width: 100%;
  text-align: center;
  font-size: 54px;
  color: var(--base-color);
  text-transform: capitalize;
}
.ts-landing-nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.ts-landing-nav__item {
  background: var(--base-color);
  font-size: 24px;
  font-weight: bold;
  width: calc(25% - 40px);
}
.ts-landing-nav__link {
  color: #fff;
  text-decoration: none;
  text-transform: capitalize;
  padding: 18px;
  width: 100%;
  text-align: center;
  display: block;
}
@media (max-width: 1270px) {
  .ts-landing-nav__item {
    font-size: 18px;
    width: calc(25% - 20px);
  }
  .ts-landing-nav__link {
    padding: 12px;
  }
}
@media (max-width: 900px) {
  .ts-landing-nav__item {
    font-size: 16px;
    width: calc(25% - 18px);
  }
  .ts-landing-nav__link {
    padding: 10px;
  }
}
@media (max-width: 800px) {
  .ts-landing-nav {
    padding: 20px 3%;
  }
  .ts-landing-nav__title {
    font-size: 28px;
  }
}
@media (max-width: 680px) {
  .ts-landing-nav {
    padding: 20px 3%;
    position: relative;
  }
  .ts-landing-nav__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .ts-landing-nav__item {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .ts-landing-nav__list {
    grid-template-columns: 1fr;
  }
}

.ts-landing-tools {
  display: flex;
  flex-direction: column;
  row-gap: 50px;
}
.ts-landing-tools__row {
  display: flex;
  align-items: center;
  column-gap: 2%;
  width: 100%;
}
.ts-landing-tools__description {
  margin: 0;
}
.ts-landing-tools__heading {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.ts-landing-tools__title {
  font-weight: bold;
  text-transform: uppercase;
  margin: 0;
}
.ts-landing-tools__icon-container {
  width: 15%;
  display: block;
}
.ts-landing-tools__icon-container--in-heading {
  display: none;
}
.ts-landing-tools__icon {
  width: 100%;
}
.ts-landing-tools__text {
  width: 83%;
}
@media (max-width: 480px) {
  .ts-landing-tools__text {
    width: 100%;
  }
  .ts-landing-tools__heading {
    font-size: 15px;
    width: 100%;
  }
  .ts-landing-tools__icon-container {
    display: none;
  }
  .ts-landing-tools__icon-container--in-heading {
    display: block;
  }
}

.ts-landing-pricing__list-item {
  font-size: 28px;
  font-weight: bold;
}
.ts-landing-pricing a {
  text-decoration: none;
  color: var(--info-alert-color);
}
.ts-landing-pricing a:hover {
  text-decoration: underline;
}
@media (max-width: 480px) {
  .ts-landing-pricing__list {
    width: 100%;
    padding: 0 5%;
  }
  .ts-landing-pricing__list-item {
    font-size: 18px;
  }
}

.ts-landing-process__articles {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.ts-landing-process__article {
  display: flex;
  flex-direction: column;
  max-width: calc(25% - 20px);
  justify-content: start;
  align-items: center;
}
.ts-landing-process__article-title {
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 20px;
  font-size: 22px;
}
.ts-landing-process__article-description {
  width: 100%;
  font-size: 18px;
  margin-top: 0;
}
.ts-landing-process a {
  text-decoration: none;
  color: var(--info-alert-color);
}
.ts-landing-process a:hover {
  text-decoration: underline;
}
@media (max-width: 1300px) {
  .ts-landing-process__articles {
    flex-flow: row wrap;
  }
  .ts-landing-process__article {
    max-width: calc(50% - 20px);
  }
}
@media (max-width: 800px) {
  .ts-landing-process__articles {
    flex-direction: column;
  }
  .ts-landing-process__article {
    max-width: 100%;
  }
}

.ts-landing-fabric__list-item {
  font-size: 28px;
  font-weight: bold;
}
@media (max-width: 480px) {
  .ts-landing-fabric__list {
    width: 100%;
    padding: 0 5%;
  }
  .ts-landing-fabric__list-item {
    font-size: 18px;
  }
}

/*# sourceMappingURL=ts.css.map */