@charset "UTF-8";
:root {
  --s-0: 3%;
  --s-1: 13%;
  --s-2: 30%;
  --s-3: 80%;
  --l-0: 20%;
  --l-1: 25%;
  --l-2: 35%;
  --l-25: 55%;
  --l-3: 65%;
  --l-4: 87%;
  --l-5: 94%;
  --l-6: 97%;
  --info-h: 193deg;
  --success-h: 101deg;
  --danger-h: 15deg;
  --warning-h: 35deg;
  --surface-h: 195deg;
  --default-h: var(--surface-h);
  --grey-h: var(--surface-h);
  --brand-s: 65%;
  --coll-status-width: 28px;
  --breakpoint-20: 750px;
  --breakpoint-40: 1550px;
  --query-spacer: 32px;
  --grid-item-height: 500px;
  --list-item-height: 180px;
  --funnel-accent-teal: #01a2c6;
  --funnel-accent-teal-hover: #017691;
  --funnel-accent-teal-hover-fill: rgb(1 162 198 / 12%);
  --funnel-heading-ink: hsl(196deg 22% 16%);
}

/* Portal rails: chroma from theme info (`$info-*`, `--info-h`); tracks MSP/ETR theme. */
/* Collapsed cart rail: wider than `$panel-collapsed-width` so step rings + totals fit without clipping. */
/*
 * Cart rail surface: mid `$info` only (`--l-3` → `--l-4`). No fade to light stops — that washed the panel
 * and broke white type; matches “lighter than `$info-0`” without leaving the teal family.
 */
/* Cart scroll well + zebra: same `$info` family as `.categories-container` (no grey `$surface-5` / `$white`). */
:root {
  --brand-h: 353deg;
  --info-h: 193deg;
  --surface-h: 28deg;
  --success-h: 130.2deg;
}

.cms-dynamic-page--loading {
  min-height: 800px;
}

/* stylelint-disable-next-line keyframes-name-pattern */
@keyframes toggle-panel-collapse {
  0% {
    background: hsl(var(--brand-h), var(--s-3), var(--l-3));
    color: hsl(var(--brand-h), var(--s-3), var(--l-1));
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.5);
  }
  100% {
    background: hsl(var(--surface-h), var(--s-1), var(--l-4));
    color: hsl(var(--surface-h), var(--s-1), var(--l-6));
    transform: scale(1);
  }
}
/* stylelint-disable-next-line keyframes-name-pattern */
@keyframes toggle-panel-uncollapse {
  0% {
    background: hsl(var(--brand-h), var(--s-3), var(--l-3));
    color: hsl(var(--brand-h), var(--s-3), var(--l-1));
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.5);
  }
  100% {
    background: hsl(var(--surface-h), var(--s-1), var(--l-4));
    color: hsl(var(--surface-h), var(--s-1), var(--l-6));
    transform: scale(1);
  }
}
.c-order-items {
  background: #fff;
  flex: 1;
  width: 100%;
}
.c-order-items .empty-cart {
  align-items: center;
  border-bottom: 2px dashed hsl(var(--grey-h), var(--s-0), var(--l-3));
  border-top: 2px dashed hsl(var(--grey-h), var(--s-0), var(--l-3));
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  display: flex;
  flex-direction: column;
  font-weight: 600;
  justify-content: center;
  padding: 24px 0;
  padding-inline-start: 4px;
}
.c-order-items .empty-cart button.c-button.icon-order {
  cursor: default;
}
.c-order-items .empty-cart button.c-button.icon-order, .c-order-items .empty-cart button.c-button.icon-order:hover {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  border-color: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-order-items .empty-cart button.c-button.icon-order svg, .c-order-items .empty-cart button.c-button.icon-order:hover svg {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-order-items.step-0 .product-name {
  cursor: pointer;
}
.c-order-items.step-0 .product-name:hover {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
@media (max-width: 600px) {
  .c-order-items .product-line .product-name {
    max-width: 170px;
  }
}

/* Shared by `.c-dropdown .dropdown-body` and `.c-search-site .suggestions` (header menus).
   Uses theme `info` (`--info-h`, shared saturation/lightness steps) so MSP/ETR blues stay aligned with cart/rails. */
/* Wide site-search mega-panel stacks above sibling controls in `.bar-search` / `.bar-header`. */
.c-pricelist-download.btn-header {
  margin-inline-start: 16px;
}
.c-pricelist-download.btn-header .btn-download {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.14);
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  box-shadow: none;
  color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-pricelist-download.btn-header .btn-download:hover:not([disabled], .disabled) {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 14px rgba(0, 8, 18, 0.38);
}
.c-pricelist-download.btn-header .btn-download .c-button-text,
.c-pricelist-download.btn-header .btn-download svg {
  color: #fff;
}
.c-pricelist-download .dropdown-body.pricelist-body {
  backdrop-filter: blur(14px);
  background: hsl(var(--info-h), var(--s-3), var(--l-0), 94%);
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 32%);
  box-shadow: 0 16px 44px hsl(var(--info-h), var(--s-3), var(--l-0), 42%);
  border-radius: 8px;
  max-height: min(70vh, 520px);
  max-width: min(420px, 100vw - 32px);
  min-width: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  z-index: 100019;
}
.c-pricelist-download .dropdown-body.pricelist-body .dropdown-body-header {
  align-items: center;
  background: hsl(var(--info-h), var(--s-3), var(--l-1), 58%);
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 28%);
  color: hsl(var(--info-h), var(--s-2), var(--l-6), 96%);
  display: flex;
  flex-direction: row;
  font-size: 0.85rem;
  font-weight: 600;
  justify-content: flex-start;
  padding: 8px 12px;
}
.c-pricelist-download .dropdown-body.pricelist-body .dropdown-body-header svg {
  color: inherit;
  flex-shrink: 0;
}
.c-pricelist-download .dropdown-body.pricelist-body .dropdown-body-header .title {
  color: inherit;
  flex: 1;
  margin-inline-start: 4px;
}
.c-pricelist-download .dropdown-body.pricelist-body .options {
  color: rgba(255, 255, 255, 0.92);
  padding: 8px;
}
.c-pricelist-download .dropdown-body.pricelist-body .options .field label,
.c-pricelist-download .dropdown-body.pricelist-body .options .c-radio-group > label {
  color: rgba(255, 255, 255, 0.9);
}
.c-pricelist-download .dropdown-body.pricelist-body .options .field label .validation {
  color: hsl(var(--info-h), var(--s-2), var(--l-5), 95%);
}
.c-pricelist-download .dropdown-body.pricelist-body .options .field .help,
.c-pricelist-download .dropdown-body.pricelist-body .options .c-radio-group .help {
  color: rgba(255, 255, 255, 0.58);
}
.c-pricelist-download .dropdown-body.pricelist-body .options .c-radio-group .item label {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}
.c-pricelist-download .dropdown-body.pricelist-body .options .c-checkbox label {
  color: rgba(255, 255, 255, 0.88);
}
.c-pricelist-download .dropdown-body.pricelist-body .options .c-field-select .control select {
  background: hsl(var(--info-h), var(--s-3), var(--l-1), 72%);
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 38%);
  border-radius: 4px;
  color: #fff;
}
.c-pricelist-download .dropdown-body.pricelist-body .options .c-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.c-pricelist-download .dropdown-body.pricelist-body .options .c-button-group .c-button:not(.type-info, [disabled], .disabled) {
  backdrop-filter: blur(8px);
  background: hsl(var(--info-h), var(--s-2), var(--l-3), 24%);
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4), 38%);
  color: rgba(255, 255, 255, 0.92);
}
.c-pricelist-download .dropdown-body.pricelist-body .options .c-button-group .c-button:not(.type-info, [disabled], .disabled):hover {
  background: hsl(var(--info-h), var(--s-2), var(--l-3), 36%);
  border-color: hsl(var(--info-h), var(--s-2), var(--l-4), 48%);
  color: #fff;
}
.c-pricelist-download .dropdown-body.pricelist-body .options .c-button-group .c-button:not(.type-info, [disabled], .disabled) .c-button-text,
.c-pricelist-download .dropdown-body.pricelist-body .options .c-button-group .c-button:not(.type-info, [disabled], .disabled) svg {
  color: inherit;
}
.c-pricelist-download .dropdown-body.pricelist-body .selected-products {
  align-items: center;
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  cursor: pointer;
  display: flex;
  font-style: italic;
  height: 48px;
  padding-inline-start: 8px;
}
.c-pricelist-download .dropdown-body.pricelist-body .selected-products svg {
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  margin-inline-end: 8px;
}
.c-pricelist-download .dropdown-body.pricelist-body .selected-products svg:hover {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-pricelist-download .dropdown-body.pricelist-body .selected-products:hover {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-pricelist-download .dropdown-body.pricelist-body .selected-products:hover svg {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-pricelist-download .dropdown-body.pricelist-body .btn-download {
  margin-top: 8px;
}

html.mobile .c-pricelist-download,
html.tablet .c-pricelist-download {
  /* Icon-only trigger; keep labels on buttons inside `.dropdown-body`. */
}
html.mobile .c-pricelist-download > .c-button span,
html.tablet .c-pricelist-download > .c-button span {
  display: none;
}

.c-search-site {
  display: flex;
  flex: 1;
  overflow: visible;
  position: relative;
}
.c-search-site .search-box {
  align-items: center;
  display: flex;
  height: 48px;
  position: relative;
  width: 100%;
}
.c-search-site .search-box .btn {
  color: hsl(var(--default-h), var(--s-1), var(--l-4));
}
.c-search-site .search-box .btn[disabled] {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-search-site .search-box .btn:not([disabled]):hover {
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-search-site .search-box input {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  box-shadow: none;
  box-sizing: border-box;
  color: #fff;
  min-height: 48px;
  opacity: 1;
  outline: none;
  padding: 8px 32px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-search-site .search-box input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}
.c-search-site .search-box input:hover:not(:focus) {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.48);
}
.c-search-site .search-box input:focus {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 14px rgba(0, 8, 18, 0.38);
}
.c-search-site .suggestions {
  backdrop-filter: blur(14px);
  background: hsl(var(--info-h), var(--s-3), var(--l-0), 94%);
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 32%);
  box-shadow: 0 16px 44px hsl(var(--info-h), var(--s-3), var(--l-0), 42%);
  border-inline-start: 0;
  border-radius: 0 0 8px 8px;
  border-top: 0;
  border-top: none;
  box-shadow: 0 0.8px 2px hsla(0, 0%, 0%, 0.2);
  cursor: default;
  display: flex;
  flex: 1;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 62px;
  top: 100%;
  transition: opacity 0.3s ease;
  visibility: hidden;
  z-index: 100020;
}
.c-search-site .suggestions .suggestion-type .search-header {
  background: hsl(var(--info-h), var(--s-3), var(--l-1), 58%);
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 28%);
  color: hsl(var(--info-h), var(--s-2), var(--l-6), 96%);
}
.c-search-site .suggestions .suggestion-type .search-header .tip {
  color: rgba(255, 255, 255, 0.45);
}
.c-search-site .suggestions .suggestion-type .search-header .tip.highlight {
  color: hsl(var(--info-h), var(--s-2), var(--l-5), 92%);
}
.c-search-site .suggestions .suggestion-matches .suggestion {
  color: hsl(var(--info-h), var(--s-2), var(--l-6), 92%);
}
.c-search-site .suggestions .suggestion-matches .suggestion .parent.children {
  color: hsl(var(--info-h), var(--s-2), var(--l-5), 48%);
}
.c-search-site .suggestions .suggestion-matches .suggestion .parent.no-children {
  color: hsl(var(--info-h), var(--s-2), var(--l-6), 90%);
}
.c-search-site .suggestions .suggestion-matches .suggestion:hover, .c-search-site .suggestions .suggestion-matches .suggestion.active, .c-search-site .suggestions .suggestion-matches .suggestion.selected {
  background: hsl(var(--info-h), var(--s-2), var(--l-3), 34%);
  color: #fff;
}
.c-search-site .suggestions .suggestion-matches .suggestion:hover .parent, .c-search-site .suggestions .suggestion-matches .suggestion.active .parent, .c-search-site .suggestions .suggestion-matches .suggestion.selected .parent {
  color: #fff;
}
.c-search-site .suggestions .suggestion-type {
  display: flex;
  flex-direction: column;
  width: 350px;
}
.c-search-site .suggestions .suggestion-type .search-header {
  align-items: center;
  display: flex;
  flex: 1;
  font-weight: 600;
  height: 50px;
  max-height: 50px;
  min-height: 50px;
  padding: 8px;
}
.c-search-site .suggestions .suggestion-type .search-header .tip {
  align-items: center;
  color: hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  flex: 1;
  font-size: 0.8rem;
  font-style: italic;
  justify-content: flex-end;
  opacity: 0;
  text-align: end;
  transition: opacity 0.3s ease;
}
.c-search-site .suggestions .suggestion-type .search-header .tip.highlight {
  color: #fff;
}
.c-search-site .suggestions .suggestion-type .search-header .tip.active {
  opacity: 1;
}
.c-search-site .suggestions .suggestion-type .search-header .tip svg {
  margin-inline-end: 4px;
}
.c-search-site .suggestions .suggestion-type .suggestion-matches {
  max-height: 320px;
  overflow-y: scroll;
  position: relative;
  text-transform: capitalize;
}
.c-search-site .suggestions .suggestion-type .suggestion-matches .suggestion {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  height: 32px;
  padding: 0 8px;
  text-transform: capitalize;
  width: 100%;
}
.c-search-site .suggestions .suggestion-type .suggestion-matches .suggestion .parent {
  pointer-events: none;
}
.c-search-site .suggestions .suggestion-type .suggestion-matches .suggestion .parent.no-children {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-search-site .suggestions .suggestion-type .suggestion-matches .suggestion .parent.children {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
}
.c-search-site .suggestions .suggestion-type .suggestion-matches .suggestion .name {
  display: inline-block;
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-search-site .suggestions .suggestion-type .suggestion-matches .suggestion.selected {
  background: hsl(var(--brand-h), var(--s-3), var(--l-4));
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-search-site .suggestions .suggestion-type .suggestion-matches .suggestion.selected .parent {
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-search-site .suggestions .suggestion-type .suggestion-matches .suggestion.active {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-search-site .suggestions .suggestion-type .suggestion-matches .suggestion:hover {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-search-site.active .suggestions {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 750px) {
  .c-search-site {
    margin-inline-end: 0;
  }
  .c-search-site .suggestions {
    flex-direction: column;
    inset-inline-start: 0;
    max-height: calc(var(--app-height) - 48px);
    width: 100%;
  }
  .c-search-site .suggestions .suggestion-type {
    width: 100%;
  }
  .c-search-site .suggestions .suggestion-type .suggestion-matches {
    max-height: 200px;
  }
}

.c-carousel.c-carousel-giveaway .c-carousel-slides .item {
  height: 100%;
  width: 100%;
}
.c-carousel.c-carousel-giveaway .c-carousel-slides .item .slide-header {
  align-items: center;
  backdrop-filter: blur(2px);
  background: hsl(var(--info-h), var(--s-1), var(--l-1), 50%);
  bottom: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 80px;
  justify-content: center;
  position: absolute;
  width: 100%;
}
.c-carousel.c-carousel-giveaway .c-carousel-slides .item .slide-header .title {
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.c-carousel.c-carousel-giveaway .c-carousel-slides .item .slide-subtitle {
  background: #f00;
}
.c-carousel.c-carousel-giveaway .c-carousel-slides .item img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.c-carousel.c-carousel-giveaway .body {
  padding: 0;
}

.c-promotion-terms {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  cursor: pointer;
  user-select: none;
}
.c-promotion-terms:hover {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}

.c-dialog.c-dialog-promotion .dialog {
  max-height: unset;
  max-width: 1200px;
  position: relative;
  width: 100%;
}
.c-dialog.c-dialog-promotion .dialog .body {
  padding: 0;
  position: relative;
}
.c-dialog.c-dialog-promotion .dialog .body .c-carousel-giveaway {
  aspect-ratio: 12/8;
}
.c-dialog.c-dialog-promotion .dialog .body .c-carousel-giveaway .c-carousel-slides {
  position: unset;
}
.c-dialog.c-dialog-promotion .dialog .body .c-carousel-giveaway .slide-header {
  display: none;
}
.c-dialog.c-dialog-promotion .dialog .body .l-promotion {
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 8px;
  position: absolute;
  width: 100%;
  z-index: 100000;
}
.c-dialog.c-dialog-promotion .dialog .body .l-promotion .wrapper {
  backdrop-filter: blur(2px);
  background: hsl(var(--grey-h), var(--s-0), var(--l-1), 70%);
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-3));
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  max-width: 500px;
  padding: 16px;
  width: 60%;
}
.c-dialog.c-dialog-promotion .dialog .body .l-promotion .wrapper .promotion-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-5));
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 16px;
}
.c-dialog.c-dialog-promotion .dialog .body .l-promotion .wrapper .c-promotion-terms {
  align-self: flex-end;
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
  font-weight: 600;
  margin-top: 4px;
  padding: 4px;
  z-index: 1;
}
.c-dialog.c-dialog-promotion .dialog .body .l-promotion .wrapper .c-promotion-terms:hover {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-dialog.c-dialog-promotion .dialog .body .l-promotion .incentive-hurry {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  font-weight: 600;
  margin-top: 8px;
}
@media (max-width: 750px) {
  .c-dialog.c-dialog-promotion .dialog {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
  }
  .c-dialog.c-dialog-promotion .dialog .title .title-text {
    font-size: 1rem;
  }
  .c-dialog.c-dialog-promotion .dialog .body {
    flex: 1;
  }
  .c-dialog.c-dialog-promotion .dialog .body .l-promotion .wrapper {
    width: 100%;
  }
}

.c-field-token-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.c-field-token-items .collected {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  padding: 8px;
}
.c-field-token-items .collected .description {
  align-items: center;
  display: flex;
  flex: 1;
  font-weight: 600;
  text-transform: uppercase;
}
.c-field-token-items .collected .token-stats {
  align-items: center;
  display: flex;
  margin-inline-end: 8px;
}
.c-field-token-items .collected .token-stats .token-summarize.draft,
.c-field-token-items .collected .token-stats .token.draft {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
}
.c-field-token-items .collected .token-stats .token-summarize.redeemable,
.c-field-token-items .collected .token-stats .token.redeemable {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-field-token-items .collected .token-stats .token-summarize.selected,
.c-field-token-items .collected .token-stats .token.selected {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-field-token-items .collected .token-stats .token-summarize {
  position: relative;
}
.c-field-token-items .collected .token-stats .token-summarize .amount {
  bottom: -8px;
  font-size: 0.8rem;
  font-weight: 600;
  inset-inline-end: 0;
  position: absolute;
  z-index: 100;
}
.c-field-token-items .token-item-wrapper {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  padding: 8px;
}
.c-field-token-items .token-item-wrapper .gifts-label {
  align-items: center;
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  margin-bottom: 8px;
}
.c-field-token-items .token-item-wrapper .gifts-label span {
  align-items: center;
  display: flex;
  gap: 4px;
  text-transform: uppercase;
}
.c-field-token-items .token-item-wrapper .token-item {
  cursor: pointer;
  display: flex;
  font-weight: 600;
  padding: 8px;
}
.c-field-token-items .token-item-wrapper .token-item .description {
  flex: 1;
}
.c-field-token-items .token-item-wrapper .token-item .description .tokens-required {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-field-token-items .token-item-wrapper .token-item .description .tokens-required .icon-token {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-field-token-items .token-item-wrapper .token-item .amount {
  align-items: center;
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  border-radius: 50%;
  display: flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.c-field-token-items .token-item-wrapper .token-item .actions {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: center;
}
.c-field-token-items .token-item-wrapper .token-item.selected {
  background: hsl(var(--success-h), var(--s-2), var(--l-2));
  color: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-field-token-items .token-item-wrapper .token-item.selected .amount {
  background: hsl(var(--default-h), var(--s-1), var(--l-4));
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-field-token-items .token-item-wrapper .token-item.selected:not(.disabled) .tokens-required svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
}
.c-field-token-items .token-item-wrapper .token-item.selected.disabled .tokens-required svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
}
.c-field-token-items .token-item-wrapper .token-item:not(.selected) .amount {
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-field-token-items .token-item-wrapper .token-item:not(.selected):not(.disabled) {
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-field-token-items .token-item-wrapper .token-item:not(.selected).disabled {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
}
.c-field-token-items .token-item-wrapper .token-item:not(.selected).disabled .tokens-required svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
}

.countdown {
  margin-top: 16px;
}

.countdown__time {
  border: 3px solid #fff;
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
  display: inline-block;
  font-size: 14pt;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

.countdown__catch {
  font-size: 14pt;
  font-weight: bold;
}

.countdown__unsold {
  font-size: 10pt;
  font-style: italic;
  font-weight: normal;
}

.c-widget-latest-orders .stock-status {
  align-items: center;
  display: flex;
  z-index: 100;
}

.dashboard-list-image {
  border-radius: 50%;
  height: 50px;
  object-fit: contain;
  padding: 4px;
  width: 50px;
}

.text-light.specs {
  font-size: 11px;
}

td.price {
  font-size: 13px;
  width: 90px;
}

.c-widget-special-offers tr:hover,
.c-widget-new-in-stock tr:hover {
  background-color: #f9f9f9;
}

.product-widget-item .info .image {
  aspect-ratio: 4/3;
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  border: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-5));
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  cursor: default;
  overflow: hidden;
  padding: 2px;
  width: 100px;
}
.product-widget-item .info .image img {
  background: #fff;
  border: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-5));
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  height: 75px;
  object-fit: scale-down;
  width: auto;
}
.product-widget-item .info .image .image-placeholder {
  height: 100%;
  padding: 8px;
  width: 100%;
}
.product-widget-item .description {
  flex: 1;
  overflow: hidden;
  padding: 8px;
}
.product-widget-item .description .name {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-weight: 600;
  width: 100%;
}
.product-widget-item .description .name:hover {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.product-widget-item .description .arriving {
  font-style: italic;
}
.product-widget-item .price {
  align-items: center;
  display: flex;
  font-weight: 600;
  justify-content: flex-end;
}
.product-widget-item .price .c-changed {
  align-items: flex-end;
  flex-direction: column;
  gap: unset;
}
.product-widget-item .price .c-changed .old-new {
  flex-direction: column;
}
.product-widget-item .specs {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  font-size: 0.8rem;
}
.product-widget-item.carousel-active .info .image {
  cursor: zoom-in;
}

.c-widget .widget-list img {
  animation: fade 800ms ease-in;
}

@keyframes fade {
  0% {
    opacity: 0.05;
  }
  100% {
    opacity: 1;
  }
}
.c-spotlight-widget {
  margin-bottom: 24px;
}
.c-spotlight-widget .items {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
.c-spotlight-widget .items .item {
  align-items: center;
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  border: 1px solid hsl(var(--surface-h), var(--s-1), var(--l-4));
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 2px;
  transition: all 0.2s ease;
}
.c-spotlight-widget .items .item:hover {
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
}
.c-spotlight-widget .items .item:first-child {
  margin-inline-start: 0;
}
.c-spotlight-widget .items .item:last-child {
  margin-inline-end: 0;
}
.c-spotlight-widget .items .item .product-info {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
  display: flex;
  font-size: 1rem;
  text-align: center;
  width: 100%;
}
.c-spotlight-widget .items .item .product-info .specs {
  flex: 1;
  font-size: 0.85rem;
  padding: 4px;
}
.c-spotlight-widget .items .item .product-info .specs .excise {
  font-size: 0.7rem;
}
.c-spotlight-widget .items .item .product-info .c-changed {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  flex-direction: column;
  justify-content: center;
  width: 96px;
}
.c-spotlight-widget .items .item .product-info .c-changed .previous {
  color: hsl(var(--brand-h), var(--s-3), var(--l-4));
}
.c-spotlight-widget .items .item .product-info .c-changed .current {
  color: #fff;
  font-size: 1.05rem;
}
.c-spotlight-widget .items .item .product-info:hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-spotlight-widget .items .item .image {
  align-items: center;
  aspect-ratio: 4/3;
  display: flex;
  height: 200px;
  position: relative;
  text-align: center;
  width: 100%;
}
.c-spotlight-widget .items .item .image .c-product-ribbon {
  align-items: center;
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  color: #fff;
  display: flex;
  font-size: 0.7rem;
  font-weight: 900;
  inset-inline-start: -35px;
  justify-content: center;
  padding: 8px;
  position: absolute;
  text-align: center;
  top: 20px;
  transform: rotate(-45deg);
  width: 150px;
}
.c-spotlight-widget .items .item .image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.c-spotlight-widget .items .item .product-image-container {
  border: 2px solid hsl(var(--info-h), var(--s-3), var(--l-2));
  border-radius: 50%;
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  height: 150px;
  margin: 8px 0;
  object-fit: cover;
  width: 150px;
}
.c-spotlight-widget .items .item .product-image-container.placeholder {
  border: none;
  box-shadow: none;
}
.c-spotlight-widget .items .item .product-image-container.placeholder svg {
  border: 2px solid hsl(var(--info-h), var(--s-3), var(--l-1));
  border-radius: 50%;
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  height: 150px;
  margin: 0;
  object-fit: cover;
  width: 150px;
}

.c-breadcrumbs {
  align-items: center;
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  border-bottom: 2px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  min-height: 56px;
  overflow: visible;
  padding-inline-end: max(16px, (100% - min(100%, 1200px)) / 2);
  padding-inline-start: max(16px, (100% - min(100%, 1200px)) / 2);
  position: relative;
}
.c-breadcrumbs .main-navigation {
  display: flex;
  margin-inline-end: 24px;
  padding-inline-end: 24px;
  position: relative;
}
.c-breadcrumbs .main-navigation::after {
  background: hsl(var(--default-h), var(--s-1), var(--l-4));
  content: "";
  height: 1.125rem;
  inset-inline-end: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}
.c-breadcrumbs .main-navigation .breadcrumb,
.c-breadcrumbs .main-navigation svg {
  height: 24px;
}
.c-breadcrumbs .main-navigation a.breadcrumb {
  cursor: pointer;
}
.c-breadcrumbs .main-navigation a.breadcrumb:hover {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-breadcrumbs .main-navigation a.breadcrumb.current:hover {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-breadcrumbs .main-navigation .breadcrumb {
  align-items: center;
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
  display: flex;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.c-breadcrumbs .main-navigation .breadcrumb.current {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-breadcrumbs .c-dropdown > .c-button {
  color: hsl(var(--surface-h), var(--s-1), var(--l-3));
  font-weight: 500;
  text-transform: uppercase;
}
.c-breadcrumbs .c-dropdown > .c-button svg {
  color: hsl(var(--surface-h), var(--s-1), var(--l-3));
}
.c-breadcrumbs .c-dropdown .dropdown-body {
  backdrop-filter: blur(14px);
  background: hsl(var(--info-h), var(--s-3), var(--l-0), 90%);
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 32%);
  border-radius: 8px;
  box-shadow: 0 16px 44px hsl(var(--info-h), var(--s-3), var(--l-0), 42%);
  min-width: 180px;
  overflow-y: scroll;
}
.c-breadcrumbs .c-dropdown .dropdown-body .sub-menu {
  align-items: center;
  background: transparent;
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 24%);
  color: hsl(var(--surface-h), var(--s-1), var(--l-6));
  cursor: pointer;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 8px 16px;
  white-space: nowrap;
}
.c-breadcrumbs .c-dropdown .dropdown-body .sub-menu:first-child {
  border-radius: 8px 8px 0 0;
}
.c-breadcrumbs .c-dropdown .dropdown-body .sub-menu:last-child {
  border-radius: 0 0 8px 8px;
}
.c-breadcrumbs .c-dropdown .dropdown-body .sub-menu .count {
  color: rgba(255, 255, 255, 0.52);
}
.c-breadcrumbs .c-dropdown .dropdown-body .sub-menu:hover, .c-breadcrumbs .c-dropdown .dropdown-body .sub-menu.active {
  background: hsl(var(--info-h), var(--s-2), var(--l-3), 34%);
  color: hsl(var(--surface-h), var(--s-1), var(--l-4));
  user-select: none;
}
.c-breadcrumbs .c-dropdown .dropdown-body .sub-menu:hover .count, .c-breadcrumbs .c-dropdown .dropdown-body .sub-menu.active .count {
  color: rgba(255, 255, 255, 0.88);
}
.c-breadcrumbs .menu {
  align-items: center;
  align-self: center;
  background: transparent;
  display: flex;
  height: 48px;
  padding: 16px;
  transition: background 0.3s ease, color 0.3s ease;
}
.c-breadcrumbs .menu:not(.active):hover {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-breadcrumbs .menu:not(.active):hover > .c-icon,
.c-breadcrumbs .menu:not(.active):hover > svg {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-breadcrumbs .menu.active, .c-breadcrumbs .menu.active-child {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-breadcrumbs .menu.active .c-button-text,
.c-breadcrumbs .menu.active .c-icon,
.c-breadcrumbs .menu.active svg,
.c-breadcrumbs .menu.active span, .c-breadcrumbs .menu.active-child .c-button-text,
.c-breadcrumbs .menu.active-child .c-icon,
.c-breadcrumbs .menu.active-child svg,
.c-breadcrumbs .menu.active-child span {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}

.shop-layout .c-breadcrumbs {
  padding-inline-end: var(--query-spacer);
  padding-inline-start: var(--query-spacer);
}

html.mobile .c-breadcrumbs {
  display: none;
}

.c-total-costs {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  display: flex;
  flex-direction: column;
  width: 100%;
}
.c-total-costs hr {
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  margin: 0;
}
.c-total-costs .subtotal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 16px;
}
.c-total-costs .subtotal .header {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: space-between;
}
.c-total-costs .subtotal .header .description {
  align-items: center;
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
  display: flex;
  font-weight: 600;
}
.c-total-costs .subtotal .header .description svg {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  margin-inline-end: 4px;
}
.c-total-costs .subtotal .header .amount {
  align-items: center;
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  display: flex;
  font-weight: 600;
}
.c-total-costs .subtotal .header .amount .c-changed.type-warning .previous {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-total-costs .subtotal .header .amount .c-changed.type-warning .current {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-total-costs .subtotal .details.details-units-line {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  display: flex;
  flex: 1;
  font-size: 0.7rem;
  justify-content: flex-end;
  width: 100%;
}
.c-total-costs .subtotal .details.details-units-line .details-units-line-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  justify-content: flex-end;
  line-height: 1.35;
  text-align: end;
}
.c-total-costs .subtotal .details.details-units-line .units-pair {
  align-items: baseline;
  display: inline-flex;
  gap: 0.2em;
  white-space: nowrap;
}
.c-total-costs .subtotal .details.details-units-line .units-label {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: lowercase;
}
.c-total-costs .subtotal .details.details-units-line .units-sep {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
  user-select: none;
}
.c-total-costs .subtotal .details.details-units-line .totals-units-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.c-total-costs .subtotal .details.details-units-line .totals-units-changed.c-changed {
  display: inline-flex;
  flex-direction: row;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  gap: 0.25em;
}
.c-total-costs .subtotal .details.details-units-line .totals-units-changed.c-changed .previous {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  font-weight: 500;
  text-decoration: line-through;
}
.c-total-costs .subtotal .details.details-units-line .totals-units-changed.c-changed .current,
.c-total-costs .subtotal .details.details-units-line .totals-units-changed.c-changed .current-value {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
  font-weight: 700;
}
.c-total-costs .subtotal.total {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-top: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  padding: 8px;
}
.c-total-costs.warning {
  background: hsl(var(--warning-h), var(--s-3), var(--l-6));
  border-bottom-color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-total-costs.warning hr {
  border-bottom-color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-total-costs.collapsed .subtotal {
  margin: 0;
  padding: 0 8px;
}
.c-total-costs.collapsed .subtotal .header {
  align-items: center;
  flex-direction: column;
}
.c-total-costs.collapsed .subtotal .header .description svg {
  margin-inline-end: 0;
}
.c-total-costs.collapsed .subtotal .header .description span {
  display: none;
}
.c-total-costs.collapsed .subtotal .header .details {
  display: none;
}
.c-total-costs.collapsed .c-total-costs-collapsed-tip {
  display: block;
  max-width: 100%;
}
.c-total-costs.collapsed .c-total-costs-collapsed-tip-trigger {
  align-items: center;
  cursor: help;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.c-total-costs.collapsed .details {
  display: none;
}

.c-incentive {
  align-items: center;
  border-bottom: 2px solid;
  display: flex;
  flex-direction: row;
  padding: 8px;
  position: relative;
  width: 100%;
}
.c-incentive.promotion {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-incentive.promotion .incentive-header {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-incentive.promotion .incentive-header:hover {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-incentive.promotion .text {
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
  flex: 1;
}
.c-incentive.transport {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-incentive.transport .incentive-header {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-incentive.transport .text {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-incentive .incentive-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-inline-end: 8px;
}

.incentives {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.c-messroom {
  align-items: center;
  background-color: #000;
  background-image: url("/common/img/landing-messroom.jpg");
  background-size: cover;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100%;
}
.c-messroom .messroom-dialog {
  backdrop-filter: blur(4px);
  background: hsl(var(--info-h), var(--s-1), var(--l-1), 70%);
  border-radius: 8px;
  color: #fff;
  max-width: 400px;
  padding: 16px;
}
.c-messroom .messroom-dialog .title {
  align-items: center;
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
  display: flex;
  font-size: 1rem;
  gap: 8px;
  margin-bottom: 8px;
}
.c-messroom .messroom-dialog .description {
  margin-bottom: 8px;
}
.c-messroom .messroom-dialog .team {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
  font-weight: 600;
}
.c-messroom .messroom-dialog .steps {
  margin: 16px 0;
}
.c-messroom .messroom-dialog .steps .step {
  align-items: center;
  display: flex;
  gap: 8px;
  height: 24px;
}
.c-messroom .messroom-dialog .steps .step .c-icon {
  margin-inline-end: 0;
}
.c-messroom .messroom-dialog .steps .step.active {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-messroom .messroom-dialog .steps-status {
  align-items: center;
  display: flex;
  gap: 8px;
}
.c-messroom .messroom-dialog .steps-status.completed {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}

.app .l-main-col .c-dashboard.view-container.view-fw {
  max-height: calc(var(--app-height) - var(--header-size));
  padding-inline-end: unset;
}
.app .l-main-col .c-dashboard.view-container.view-fw .c-collection-carousel {
  margin-bottom: 40px;
}
.app .l-main-col .c-dashboard.view-container.view-fw .highlight-title {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  font-size: 1.5rem;
  margin: 16px 0;
  padding-bottom: 8px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}
.app .l-main-col .c-dashboard.view-container.view-fw .highlight-title::after {
  background-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  bottom: -4px;
  content: "";
  height: 2px;
  left: calc((100% - 125px) / 2);
  position: absolute;
  right: calc((100% - 125px) / 2);
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 48px;
  max-width: 100%;
  overflow: hidden;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row.row-2 .c-widget-latest-orders,
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row.row-2 .c-widget-offers,
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row.row-2 .l-widget-column {
  flex: 1;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget {
  flex: 1;
  margin-bottom: 16px;
  width: 100%;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget.no-border {
  border: 0;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .c-widget-title {
  align-items: center;
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
  display: flex;
  font-size: 1rem;
  font-weight: 600;
  gap: 4px;
  height: 48px;
  line-height: 40px;
  padding: 0 8px;
  vertical-align: middle;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .c-widget-title .c-icon {
  color: hsl(var(--surface-h), var(--s-1), var(--l-3));
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .c-widget-body .loading {
  align-items: center;
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  display: flex;
  justify-content: center;
  min-height: 200px;
  padding: 8px;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .c-widget-body .loading svg {
  height: 36px;
  width: 36px;
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .c-empty-message {
  font-style: italic;
  font-weight: 600;
  margin: 16px 8px;
  padding: 8px;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .price {
  font-size: 0.8rem;
  text-align: end;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .c-widget-footer {
  padding: 8px;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .c-widget-footer a {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
  display: inline-block;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .c-widget-footer a:hover {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget table {
  margin-bottom: 12px;
  padding: 0;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget table td {
  height: 80px;
  max-width: 300px;
  padding: 6px;
  vertical-align: top;
  vertical-align: middle;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget table td.thumb {
  border: 0;
  padding: 0;
  width: 60px;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .quick-action {
  align-items: center;
  background-color: hsl(var(--grey-h), var(--s-0), var(--l-5));
  border: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-4));
  border-radius: 32px;
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  display: flex;
  flex-direction: column;
  flex-direction: row;
  height: 100%;
  justify-content: center;
  max-width: 600px;
  min-height: 150px;
  text-decoration: none;
  transition: background-color 0.5s, color 0.3s;
  width: 100%;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .quick-action[disabled] {
  background-color: hsl(var(--grey-h), var(--s-0), var(--l-6));
  border: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-5));
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .quick-action[disabled]:hover {
  cursor: not-allowed;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .quick-action:not([disabled]):hover {
  background-color: hsl(var(--info-h), var(--s-2), var(--l-3));
  color: hsl(var(--grey-h), var(--s-0), var(--l-5));
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .quick-action .icon {
  font-size: 62px;
  padding-inline-start: 20px;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .quick-action .text {
  font-family: monospace;
  font-size: 18px;
  font-weight: 700;
  padding-inline-start: 20px;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .quick-action.promotion {
  background-color: #cc0;
  box-shadow: inset 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  flex-direction: row;
  transition: background-color 0.5s, box-shadow 0.3s;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .quick-action.promotion:hover {
  background-color: #dd0;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.1);
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .quick-action.promotion:active {
  box-shadow: inset 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.1s;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .quick-action.promotion .icon {
  padding-inline-start: 20px;
}
.app .l-main-col .c-dashboard.view-container.view-fw .l-widget-row .c-widget .quick-action.promotion .text {
  font-size: 18px;
  padding-inline-start: 20px;
}

.widget-loading {
  align-items: center;
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  display: flex;
  justify-content: center;
  padding: 8px;
}
.widget-loading.placeholder-d {
  min-height: 250px;
}
.widget-loading.placeholder-s {
  min-height: 120px;
}
.widget-loading svg {
  height: 36px;
  width: 36px;
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}

.widget-list .widget-item {
  cursor: pointer;
  display: flex;
  height: 100px;
  padding: 8px;
  transition: visibility 0.3s linear, opacity 0.3s linear;
}
.widget-list .widget-item:nth-child(even) {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
}
.widget-list .widget-item:hover {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.widget-list .widget-item .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.widget-list .widget-item .description {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.widget-list .widget-item .actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

@media (max-width: 1400px) {
  .l-widget-row {
    flex-direction: column;
  }
}
@media (max-width: 750px) {
  .c-dashboard .c-spotlight-widget .items .item .product-image-container {
    height: 100px;
    width: 100px;
  }
  .c-dashboard .l-favourites-widget {
    display: none;
  }
}
.c-checkout .bar-checkout {
  align-items: center;
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
  border-bottom: 2px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.c-checkout .bar-checkout .bar-header {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: flex-start;
}
.c-checkout .bar-checkout .bar-header .title {
  align-items: center;
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
  display: flex;
  font-size: 1.05rem;
  line-height: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.c-checkout .bar-checkout .bar-header .page-icon {
  align-items: center;
  background: hsl(var(--success-h), var(--s-2), var(--l-2));
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
  display: flex;
  height: 64px;
  justify-content: center;
  margin-inline-end: var(--query-spacer);
  padding: 8px;
  width: 50px;
}
.c-checkout .no-issues {
  align-items: center;
  background: hsl(var(--success-h), var(--s-2), var(--l-2));
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 16px 32px;
}
.c-checkout .vouchers {
  margin-bottom: 16px;
}
.c-checkout .alert {
  margin-top: 16px;
  margin-top: 0;
  width: 100%;
}
.c-checkout .alert button {
  margin-top: 8px;
}
.c-checkout .popover-question {
  margin-inline-start: 24px;
}
.c-checkout .finalize-cart {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  overflow: auto;
  padding-bottom: 64px;
}
.c-checkout .finalize-cart .c-order-items .break-line {
  align-items: center;
  display: flex;
  gap: 8px;
  height: 64px;
  padding: 12px;
  text-transform: uppercase;
}

/*
 * Shared overlay/backdrop/cart-toggle + tablet FAB dock live in `scss/shop/_grid.scss`
 * (bottom-right on tablet; was previously top-anchored here, which fought `bottom` in `_grid.scss`).
 */
.c-my-portal-email.landing .fieldset {
  margin-bottom: unset;
}
.c-my-portal-email.landing .c-campaign-preferences .campaigns {
  gap: 8px;
  margin-bottom: unset;
}
.c-my-portal-email.landing .c-campaign-preferences .campaigns .campaign {
  flex-direction: column;
}
.c-my-portal-email.landing .c-campaign-preferences .campaigns .campaign .campaign-info {
  flex-direction: row;
  justify-content: center;
  padding: 4px;
}
.c-my-portal-email.landing .c-campaign-preferences .campaigns .campaign .campaign-info .header {
  align-items: center;
  display: flex;
  flex: 1 0 100px;
  justify-content: center;
  margin-bottom: 0;
  padding: unset;
}
.c-my-portal-email.landing .c-campaign-preferences .campaigns .campaign .campaign-info .header .title {
  font-size: 0.8rem;
  text-align: center;
}
.c-my-portal-email.landing .c-campaign-preferences .campaigns .campaign .campaign-info .description {
  font-size: 0.7rem;
  padding: unset;
}
.c-my-portal-email.landing .c-campaign-preferences .campaigns .campaign .actions {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  justify-content: flex-end;
  padding: 4px;
  width: 100%;
}

/* Same footer teal as `.landing-footer` (content_view.scss); soft greys like WhatsApp secondary text. */
.page-content .text-container,
.page-content .view-prose--narrow {
  padding: 16px;
}
.page-content .text-container h1,
.page-content .view-prose--narrow h1 {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  font-size: 1.05rem;
  margin-bottom: 32px;
}
.page-content .text-container h2,
.page-content .view-prose--narrow h2 {
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
  font-size: 0.85rem;
  margin-bottom: 4px;
  margin-top: 24px;
}
.page-content .text-container h3,
.page-content .view-prose--narrow h3 {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  font-size: 0.85rem;
  margin-bottom: 0;
  margin-top: 16px;
}
.page-content .text-container em,
.page-content .view-prose--narrow em {
  font-weight: 600;
}
.page-content .title {
  margin-top: 0;
}
.page-content {
  /*
   * Do not restyle component grids (e.g. LinkCardGrid) — only plain prose lists.
   */
}
.page-content ul:not(.link-card-grid-list) {
  list-style-position: inside;
  list-style-type: initial;
  padding-inline-start: 8px;
}

.c-layout-landing .page-content {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 16px;
  max-height: 400px;
  max-width: 470px;
  overflow-y: scroll;
}
.c-layout-landing .page-content .text-container,
.c-layout-landing .page-content .view-prose--narrow {
  background: none;
  box-shadow: none;
  overflow-y: scroll;
  padding: 16px;
}

/* Funnel embed: let My portal fill the content column so the tab panel scrolls inside the viewport */
.l-main-col.cms-layout .c-content-frame > .frame-content > .content > .c-my-portal.c-tabs.type-nested-view-vertical {
  flex: 1;
  min-height: 0;
}

.c-my-portal {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 16px;
  width: 100%;
}
.c-my-portal h3 {
  margin-top: 0;
}
.c-my-portal .form {
  max-width: 500px;
}
.c-my-portal {
  /*
   * Vertical tabs: rail title = same idea as landing `.c-tile-container > h3.tile-container-title` (teal bar + bold type on white).
   */
}
.c-my-portal.c-tabs.type-nested-view-vertical {
  gap: 40px;
  margin-inline: -16px;
  padding-top: 16px;
  width: calc(100% + 32px);
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container {
  align-self: flex-start;
  backdrop-filter: none;
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  border: 1px solid hsl(var(--surface-h), var(--s-1), var(--l-4));
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  box-shadow: none;
  overflow: visible;
  padding: 16px 8px 8px;
  position: sticky;
  top: 24px;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .header {
  align-items: center;
  background: transparent;
  border: none;
  border-inline-start: 4px solid #006d82;
  border-radius: 0;
  box-shadow: none;
  color: #415a63;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  gap: 8px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 16px;
  min-height: 0;
  padding-block: 0.15em;
  padding-inline-end: 0;
  padding-inline-start: 24px;
  text-transform: none;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .header svg {
  color: #006d82;
  flex-shrink: 0;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .tabs {
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px 8px;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab {
  background: transparent;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  color: #667781;
  cursor: pointer;
  font-weight: 500;
  justify-content: flex-start;
  min-height: 0;
  padding: 8px 16px;
  text-align: start;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  width: 100%;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab .c-button-text {
  color: inherit;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab svg {
  color: #667781;
  transition: color 0.15s ease;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab:focus-visible {
  outline: 2px solid #006d82;
  outline-offset: 2px;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab:not(.disabled, .active):hover {
  background: rgba(0, 0, 0, 0.04);
  color: #415a63;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab:not(.disabled, .active):hover svg {
  color: #415a63;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab.active {
  background: rgba(0, 109, 130, 0.09);
  box-shadow: inset 0 0 0 1px rgba(0, 109, 130, 0.12);
  color: #006d82;
  font-weight: 600;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab.active svg {
  color: #006d82;
}
.c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab.active:not(.disabled):hover {
  background: rgba(0, 109, 130, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 109, 130, 0.16);
}
.c-my-portal.c-tabs.type-nested-view-vertical .panels {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 1550px) {
  .c-my-portal.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab {
    min-width: min(100%, 10rem);
    width: auto;
  }
  .c-my-portal.c-tabs.type-nested-view-vertical .panels {
    border: none;
    border-radius: 0;
  }
}
.c-my-portal {
  /* Section title: footer teal bar + softer body text (not heavy $info-0). */
}
.c-my-portal .tile-container-title {
  border-inline-start: 4px solid #006d82;
  color: #415a63;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 24px;
  padding-block: 0.15em;
  padding-inline-end: 0;
  padding-inline-start: 24px;
}
.c-my-portal {
  /* Single column: card + primary action share the same width (settings + profile + email form) */
}
.c-my-portal .c-my-portal-preferences.flex-form,
.c-my-portal .c-my-portal-profile.flex-form,
.c-my-portal .c-my-portal-settings.flex-form,
.c-my-portal .c-my-portal-email.flex-form {
  max-width: 36rem;
}
.c-my-portal .flex-form {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  width: 100%;
}
.c-my-portal .flex-form .field label,
.c-my-portal .flex-form .c-radio-group > label {
  color: #415a63;
}
.c-my-portal .flex-form .field .help,
.c-my-portal .flex-form .c-radio-group .help {
  color: #667781;
}
.c-my-portal .flex-form .fieldset-group {
  margin-bottom: 0;
  max-width: none;
  width: 100%;
}
.c-my-portal .flex-form .fieldset {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  max-width: none;
  padding: 0 0 24px;
}
.c-my-portal .flex-form .fieldset .field {
  margin-bottom: 24px;
}
.c-my-portal .flex-form .fieldset .field .input-wrapper {
  flex-wrap: wrap;
}
.c-my-portal .flex-form .fieldset .field .help {
  flex-basis: 100%;
  margin-top: 4px;
  position: static;
  white-space: normal;
}
.c-my-portal .flex-form .fieldset .c-radio-group .help {
  margin-top: 4px;
}
.c-my-portal .flex-form {
  /* Card treatment: each fieldset section gets a soft container matching the sidebar card */
}
.c-my-portal .flex-form .fieldset-group > .fieldset,
.c-my-portal .flex-form > .fieldset:not(.fieldset-group .fieldset) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
  padding: 24px;
}
.c-my-portal .flex-form .fieldset-group > .fieldset .field,
.c-my-portal .flex-form > .fieldset:not(.fieldset-group .fieldset) .field {
  margin-bottom: 16px;
}
.c-my-portal .flex-form .fieldset-group > .fieldset > *:last-child,
.c-my-portal .flex-form > .fieldset:not(.fieldset-group .fieldset) > *:last-child {
  margin-bottom: 0;
}
.c-my-portal .flex-form .fieldset-group > .fieldset .btn-submit,
.c-my-portal .flex-form > .fieldset:not(.fieldset-group .fieldset) .btn-submit {
  margin-top: 16px;
}
.c-my-portal .flex-form .btn-submit {
  align-self: stretch;
  max-width: none;
  width: 100%;
}
.c-my-portal {
  /* Radios: use global `_checkbox.scss` ($brand-3 / $brand-4) — do not override with footer teal. */
}

.c-promotions {
  background: #fff;
  border: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-6));
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  display: flex;
  max-width: 900px;
  position: relative;
}
.c-promotions .content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 12px;
}
.c-promotions .content .header {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  padding-top: 12px;
}
.c-promotions .content .header .title {
  align-items: center;
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  display: flex;
  font-size: 1.05rem;
}
.c-promotions .content .header .title .c-icon {
  margin-inline-end: 4px;
}
.c-promotions .content .header .subtitle {
  font-weight: 600;
}
.c-promotions .content .header .subtitle.grace-warning {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-promotions .content > .description {
  flex: 1;
  line-height: 1.05rem;
}
.c-promotions .carousel-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.c-promotions .carousel-wrapper .terms {
  background: hsl(var(--default-h), var(--s-3), var(--l-6), 90%);
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 10;
}
.c-promotions .carousel-wrapper .terms .btn-close {
  inset-inline-end: 8px;
  position: absolute;
  top: 8px;
  z-index: 1000;
}
.c-promotions .carousel-wrapper .terms .content {
  height: 100%;
  overflow-y: scroll;
  padding: 8px;
  position: absolute;
  width: 100%;
}
.c-promotions .carousel-wrapper .terms .content .title {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  font-size: 1rem;
  font-weight: 600;
}
.c-promotions .carousel-wrapper .terms .content .subtitle {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-promotions .carousel-wrapper .terms .content ul {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
  line-height: 1.7rem;
  list-style: square;
  padding: 16px;
}
.c-promotions .carousel-wrapper .c-carousel-giveaway .c-carousel-slides {
  height: 500px;
}
@media (max-width: 600px) {
  .c-promotions .promotion-info .title {
    font-size: 1rem;
  }
  .c-promotions .carousel-wrapper .c-carousel-giveaway .c-carousel-slides {
    height: 300px;
    width: 100%;
  }
}
@media (max-width: 750px) {
  .c-promotions {
    flex-direction: column;
  }
}

.c-my-portal-settings .danger-zone {
  background: hsl(var(--danger-h), var(--s-3), var(--l-6));
  border: 1px solid hsl(var(--danger-h), var(--s-3), var(--l-5));
  border-radius: 16px;
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
}
.c-my-portal-settings .danger-zone .btn-removal {
  flex: 0 0 auto;
  padding: 0;
  width: auto;
}

.c-my-portal-profile .btn-removal {
  align-items: center;
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
  display: flex;
  flex: 1;
  font-weight: 600;
  justify-content: flex-end;
  padding: 8px 0;
  width: 100%;
}

/*
 * Offer list: tablet vs cart FAB visibility (position + bottom anchor live in `scss/shop/_grid.scss`).
 * Viewport via `@media` (not `html.tablet`) for SSR-consistent first paint.
 */
/* Tablet: two-button dock; mobile + desktop: single cart FAB in the non-tablet column */
.shop-surface-toggles-tablet {
  display: none;
}

@media (min-width: 750px) and (max-width: 1549px) {
  .shop-surface-toggles-desktop {
    display: none;
  }
  .shop-surface-toggles-tablet {
    display: block;
  }
}
.c-offer-item-amount {
  align-items: center;
  display: flex;
  gap: 4px;
}

.c-dialog-offer img.popup-image {
  max-height: 70vh;
  object-fit: contain;
  padding-bottom: 16px;
  width: 100%;
}
.c-dialog-offer p {
  font-size: 1rem;
  white-space: pre-wrap;
}
.c-dialog-offer .modal-actions {
  display: flex;
  justify-content: space-between;
}
.c-dialog-offer button {
  font-size: 1rem;
}

@keyframes c-panel-menu-enter {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.c-panel-menu-backdrop {
  background: rgba(0, 0, 0, 0);
  inset: 0;
  pointer-events: none;
  position: fixed;
  transition: background 0.3s ease;
  z-index: 100007;
}

.c-panel-menu-backdrop--visible {
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

/*
 * Top-anchored panel menu (hamburger): slides down from under the header — bottom overlays slide up from
 * the thumb row (`shop/_grid.scss` `.shop-overlay-bottom`).
 */
.c-panel-menu {
  background: #006d82;
  /* Match bottom-panel top corners (cart/filters): leading edge is the top here. */
  border-radius: 16px 16px 0 0;
  bottom: 0;
  box-shadow: 0 12px 40px rgba(0, 35, 45, 0.22);
  display: flex;
  flex-direction: column;
  left: 0;
  min-height: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: calc(var(--header-size) + 48px);
  transform: translateY(-100%);
  visibility: hidden;
  z-index: 100008;
}
@media (min-width: 750px) {
  .c-panel-menu {
    display: none;
  }
}

.c-panel-menu--open {
  animation: c-panel-menu-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .c-panel-menu--open {
    animation-duration: 0.01ms;
  }
}
.c-panel-menu-body {
  align-items: stretch;
  background: #fff;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.c-panel-menu-mobile-controls {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  padding: 0;
  width: 100%;
}

.c-panel-menu-mobile-controls .c-panel-menu-collapse-bar {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  min-height: 40px;
  padding: 4px 0;
  width: 100%;
}
.c-panel-menu-mobile-controls .c-panel-menu-collapse-bar .c-icon,
.c-panel-menu-mobile-controls .c-panel-menu-collapse-bar svg {
  color: #fff;
}
.c-panel-menu-mobile-controls .c-panel-menu-collapse-bar:active {
  background: rgba(255, 255, 255, 0.2);
}
.c-panel-menu-mobile-controls .c-panel-menu-collapse-bar:focus-visible {
  outline: 2px solid hsl(var(--info-h), var(--s-2), var(--l-3));
  outline-offset: -2px;
}

.c-panel-menu-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
}

.c-panel-menu-block {
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.c-panel-menu-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.c-panel-menu-label {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 0.8rem;
  font-weight: 600;
}

.c-panel-menu-offers .c-button {
  justify-content: flex-start;
}

.c-panel-menu-body .c-panel-menu-language.bar-language-dropdown {
  max-width: 100%;
  width: 100%;
}
.c-panel-menu-body .c-panel-menu-language.bar-language-dropdown > .bar-language-trigger {
  align-items: center;
  background: hsl(var(--info-h), var(--s-3), var(--l-6));
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 44px;
  padding: 4px 16px;
  width: 100%;
}
.c-panel-menu-body .c-panel-menu-language.bar-language-dropdown > .bar-language-trigger .bar-language-trigger-flag {
  flex-shrink: 0;
}
.c-panel-menu-body .c-panel-menu-language.bar-language-dropdown > .bar-language-trigger .bar-language-trigger-chevron {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  flex-shrink: 0;
}
.c-panel-menu-body .c-panel-menu-language.bar-language-dropdown > .bar-language-trigger:hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-5));
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-panel-menu-body .c-panel-menu-language.bar-language-dropdown .dropdown-body {
  background: #fff;
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 35, 45, 0.14);
  inset-inline-end: auto !important;
  inset-inline-start: 0 !important;
  margin-top: 8px;
  max-height: min(60vh, 360px);
  overflow-y: auto;
  position: relative;
  top: auto !important;
  width: 100%;
  z-index: 2;
}
.c-panel-menu-body .c-panel-menu-language.bar-language-dropdown .dropdown-body .sub-menu.bar-language-option {
  align-items: center;
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  display: flex;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
}
.c-panel-menu-body .c-panel-menu-language.bar-language-dropdown .dropdown-body .sub-menu.bar-language-option:last-child {
  border-bottom: none;
}
.c-panel-menu-body .c-panel-menu-language.bar-language-dropdown .dropdown-body .sub-menu.bar-language-option.active {
  background: hsl(var(--info-h), var(--s-3), var(--l-6));
  font-weight: 600;
}

.c-panel-menu-pricelist {
  width: 100%;
}

@media (max-width: 749px) {
  .l-main-col.portal-mobile-shop-no-breadcrumbs .c-panel-menu {
    top: var(--header-size);
  }
}

@media (max-width: 749px) {
  .l-main-col.shop-layout .c-shell-header .c-bar-categories-portal {
    display: none;
  }
}
/*
 * Mobile (< $breakpoint-20 / 750 px): bottom sheet mode.
 *
 * The sheet expand/collapse behaviour is driven by the outer
 * `.shop-overlay-bottom` container in the page views (offer_list,
 * favourites, order_checkout). Chevron direction (down vs right) is
 * handled in the shared panel_cart.scss via the @media block inside
 * `.cart-mobile-sheet-collapse-bar`.
 *
 * Add mobile-specific panel overrides here as needed.
 */
/* @use "elements/portal-hero-chrome/tokens" as *; */
.c-panel-cart .c-total-costs {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 4px;
}
.c-panel-cart .c-total-costs hr {
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 22%);
  margin: 4px 16px;
  opacity: 1;
}
.c-panel-cart .c-total-costs .subtotal {
  gap: 2px;
  padding: 8px 16px;
}
.c-panel-cart .c-total-costs .subtotal .header {
  gap: 8px;
  min-height: 0;
}
.c-panel-cart .c-total-costs .subtotal .header .description {
  align-items: center;
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  display: flex;
  font-size: 0.8rem;
  font-weight: 600;
  gap: 4px;
  letter-spacing: 0.03em;
}
.c-panel-cart .c-total-costs .subtotal .header .description svg,
.c-panel-cart .c-total-costs .subtotal .header .description .c-icon {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
  flex-shrink: 0;
}
.c-panel-cart .c-total-costs .subtotal .header .description span {
  line-height: 1.3;
}
.c-panel-cart .c-total-costs .subtotal .header .amount {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.c-panel-cart .c-total-costs .subtotal .header .amount .c-changed.type-warning .previous {
  color: hsl(var(--info-h), var(--s-3), var(--l-2), 45%);
}
.c-panel-cart .c-total-costs .subtotal .header .amount .c-changed.type-warning .current {
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-panel-cart .c-total-costs .subtotal.total {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
  border-top: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 24%);
  box-shadow: none;
  margin-top: 4px;
  padding: 16px 16px;
}
.c-panel-cart .c-total-costs .subtotal.total .header {
  min-height: 0;
}
.c-panel-cart .c-total-costs .subtotal.total .header .description {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}
.c-panel-cart .c-total-costs .subtotal.total .header .description svg,
.c-panel-cart .c-total-costs .subtotal.total .header .description .c-icon {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-panel-cart .c-total-costs .subtotal.total .header .amount {
  color: hsl(var(--info-h), var(--s-3), var(--l-0));
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-shadow: none;
}
.c-panel-cart .c-total-costs .subtotal.total .header .amount .c-changed.type-warning .previous {
  color: hsl(var(--info-h), var(--s-3), var(--l-2), 48%);
}
.c-panel-cart .c-total-costs .subtotal.total .header .amount .c-changed.type-warning .current {
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-panel-cart .c-total-costs .subtotal {
  /* Cart/booked: label | amount on row 1; units subtitle under amount (col 2) */
}
.c-panel-cart .c-total-costs .subtotal.cart, .c-panel-cart .c-total-costs .subtotal.booked {
  align-items: center;
  column-gap: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  row-gap: 2px;
}
.c-panel-cart .c-total-costs .subtotal.cart > .header, .c-panel-cart .c-total-costs .subtotal.booked > .header {
  display: contents;
}
.c-panel-cart .c-total-costs .subtotal.cart .description, .c-panel-cart .c-total-costs .subtotal.booked .description {
  align-self: center;
  grid-column: 1;
  grid-row: 1;
}
.c-panel-cart .c-total-costs .subtotal.cart .amount, .c-panel-cart .c-total-costs .subtotal.booked .amount {
  align-self: center;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.c-panel-cart .c-total-costs .subtotal.cart > .details.details-units-line, .c-panel-cart .c-total-costs .subtotal.booked > .details.details-units-line {
  align-self: start;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: auto;
}
.c-panel-cart .c-total-costs .subtotal.cart > .details.details-units-line .details-units-line-inner, .c-panel-cart .c-total-costs .subtotal.booked > .details.details-units-line .details-units-line-inner {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  display: flex;
  flex-wrap: wrap;
  font-size: 0.7rem;
  gap: 2px 4px;
  justify-content: flex-end;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: end;
}
.c-panel-cart .c-total-costs .subtotal.cart > .details.details-units-line .units-pair, .c-panel-cart .c-total-costs .subtotal.booked > .details.details-units-line .units-pair {
  align-items: baseline;
  display: inline-flex;
  gap: 0.2em;
  white-space: nowrap;
}
.c-panel-cart .c-total-costs .subtotal.cart > .details.details-units-line .units-label, .c-panel-cart .c-total-costs .subtotal.booked > .details.details-units-line .units-label {
  color: hsl(var(--info-h), var(--s-3), var(--l-2), 72%);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.c-panel-cart .c-total-costs .subtotal.cart > .details.details-units-line .units-sep, .c-panel-cart .c-total-costs .subtotal.booked > .details.details-units-line .units-sep {
  color: hsl(var(--info-h), var(--s-2), var(--l-3), 45%);
  font-weight: 300;
  user-select: none;
}
.c-panel-cart .c-total-costs .subtotal.cart > .details.details-units-line .totals-units-value, .c-panel-cart .c-total-costs .subtotal.booked > .details.details-units-line .totals-units-value {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.c-panel-cart .c-total-costs .subtotal.cart > .details.details-units-line .totals-units-changed.c-changed, .c-panel-cart .c-total-costs .subtotal.booked > .details.details-units-line .totals-units-changed.c-changed {
  display: inline-flex;
  flex-direction: row;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  gap: 0.25em;
}
.c-panel-cart .c-total-costs .subtotal.cart > .details.details-units-line .totals-units-changed.c-changed .previous, .c-panel-cart .c-total-costs .subtotal.booked > .details.details-units-line .totals-units-changed.c-changed .previous {
  color: hsl(var(--info-h), var(--s-3), var(--l-2), 48%);
  font-weight: 500;
  text-decoration: line-through;
}
.c-panel-cart .c-total-costs .subtotal.cart > .details.details-units-line .totals-units-changed.c-changed .current,
.c-panel-cart .c-total-costs .subtotal.cart > .details.details-units-line .totals-units-changed.c-changed .current-value, .c-panel-cart .c-total-costs .subtotal.booked > .details.details-units-line .totals-units-changed.c-changed .current,
.c-panel-cart .c-total-costs .subtotal.booked > .details.details-units-line .totals-units-changed.c-changed .current-value {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
  font-weight: 700;
}
.c-panel-cart .c-total-costs:not(.collapsed) .subtotal.booked .header .description, .c-panel-cart .c-total-costs:not(.collapsed) .subtotal.cart .header .description, .c-panel-cart .c-total-costs:not(.collapsed) .subtotal.total .header .description, .c-panel-cart .c-total-costs:not(.collapsed) .subtotal.vat .header .description {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.c-panel-cart .c-total-costs.warning {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
  border-top-color: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-panel-cart .c-total-costs.warning hr {
  border-bottom-color: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-panel-cart .c-total-costs.warning .subtotal:not(.total) .header .description {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-total-costs.warning .subtotal:not(.total) .header .description svg,
.c-panel-cart .c-total-costs.warning .subtotal:not(.total) .header .description .c-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-panel-cart .c-total-costs.warning .subtotal:not(.total) .header .amount {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-total-costs.warning .subtotal.total {
  background: hsl(var(--warning-h), var(--s-3), var(--l-6));
  border-top: 1px solid hsl(var(--warning-h), var(--s-3), var(--l-3), 28%);
  box-shadow: none;
}
.c-panel-cart .c-total-costs.warning .subtotal.total .header .description {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-total-costs.warning .subtotal.total .header .description svg,
.c-panel-cart .c-total-costs.warning .subtotal.total .header .description .c-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-panel-cart .c-total-costs.warning .subtotal.total .header .amount {
  color: hsl(var(--warning-h), var(--s-3), var(--l-0));
}

/*
 * Primary cart CTA: solid `$info` band + white label — overrides `.type-success` slab.
 */
.c-panel-cart .c-button.btn-confirm-step {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 48px;
  padding: 0 32px;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled) {
  background: hsl(var(--info-h), var(--s-3), var(--l-1)) !important;
  background-image: none !important;
  border: 1px solid hsl(var(--info-h), var(--s-3), var(--l-0), 45%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 2px 16px rgba(0, 22, 34, 0.28);
  color: #fff !important;
  filter: none;
  text-shadow: 0 1px 0 rgba(0, 10, 18, 0.35);
}
.c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled) .c-button-text,
.c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled) svg,
.c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled) .c-icon {
  color: #fff !important;
}
.c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled):hover, .c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled):active {
  background: hsl(var(--info-h), var(--s-3), var(--l-2)) !important;
  border-color: hsl(var(--info-h), var(--s-3), var(--l-1), 55%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 4px 18px rgba(0, 28, 42, 0.28);
  color: #fff !important;
}
.c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled):hover .c-button-text,
.c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled):hover svg,
.c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled):hover .c-icon, .c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled):active .c-button-text,
.c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled):active svg,
.c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled):active .c-icon {
  color: #fff !important;
}
.c-panel-cart .c-button.btn-confirm-step:not([disabled], .disabled):active {
  transform: translateY(1px);
}
.c-panel-cart .c-button.btn-confirm-step[disabled], .c-panel-cart .c-button.btn-confirm-step.disabled {
  background: hsl(var(--info-h), var(--s-3), var(--l-1), 32%) !important;
  background-image: none !important;
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3), 35%) !important;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.48) !important;
  text-shadow: none;
  transform: none;
}
.c-panel-cart .c-button.btn-confirm-step[disabled] .c-button-text,
.c-panel-cart .c-button.btn-confirm-step[disabled] svg,
.c-panel-cart .c-button.btn-confirm-step[disabled] .c-icon, .c-panel-cart .c-button.btn-confirm-step.disabled .c-button-text,
.c-panel-cart .c-button.btn-confirm-step.disabled svg,
.c-panel-cart .c-button.btn-confirm-step.disabled .c-icon {
  color: rgba(255, 255, 255, 0.48) !important;
}

.c-cart-item-actions {
  align-items: center;
  background: linear-gradient(90deg, transparent 0%, hsl(var(--default-h), var(--s-1), var(--l-4)) 28%, hsl(var(--default-h), var(--s-1), var(--l-4)) 100%);
  display: flex;
  gap: 4px;
  height: 100%;
  inset-inline-end: 0;
  justify-content: flex-end;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 20%, rgb(0, 0, 0) 42%, rgb(0, 0, 0) 100%);
  opacity: 0;
  padding: 8px;
  position: absolute;
  transition: none;
  visibility: hidden;
  width: 50%;
  z-index: 10;
}
[dir=rtl] .c-cart-item-actions {
  background: linear-gradient(270deg, transparent 0%, hsl(var(--default-h), var(--s-1), var(--l-4)) 28%, hsl(var(--default-h), var(--s-1), var(--l-4)) 100%);
}
[dir=rtl] .c-cart-item-actions {
  mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 20%, rgb(0, 0, 0) 42%, rgb(0, 0, 0) 100%);
}

.c-dialog.comment-dialog .dialog .c-field-textarea textarea {
  min-height: 120px;
}
.c-dialog.comment-dialog .action-controls {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.product-line:hover .c-cart-item-actions {
  opacity: 1;
  visibility: visible;
}

/* @use "elements/portal-hero-chrome/tokens" as *; */
/*
 * Tablet ($breakpoint-20 – $breakpoint-40 / 750–1549 px): collapsible right panel.
 * When collapsed + minimizable: shrinks to a narrow icon strip showing only
 * the stepper circles and totals. Steps stack vertically; progress line hidden.
 *
 * Also includes the collapsed active-step highlight override (inset ring instead
 * of scale transform, which would clip in the narrow strip).
 */
@media (max-width: 1549px) {
  .c-panel-cart.collapsed.minimizable {
    box-shadow: -2px 0 8px hsl(var(--info-h), var(--s-3), var(--l-0), 8%);
    max-width: 66px;
    min-width: 66px;
  }
  .c-panel-cart.collapsed.minimizable .content .workflow {
    margin-bottom: 8px;
    min-height: 0;
    padding: 8px 8px 16px;
  }
  .c-panel-cart.collapsed.minimizable .content .workflow .c-stepper.horizontal .steps {
    align-items: center;
    flex-direction: column;
    gap: 4px;
  }
  .c-panel-cart.collapsed.minimizable .content .workflow .c-stepper.horizontal .steps .progress-line {
    display: none;
  }
  .c-panel-cart.collapsed.minimizable .content .workflow .c-stepper.horizontal .step,
  .c-panel-cart.collapsed.minimizable .content .workflow .c-stepper.horizontal .step a {
    height: 40px;
    min-width: 40px;
    width: 40px;
  }
  .c-panel-cart.collapsed.minimizable .content .workflow .c-stepper.horizontal .step svg,
  .c-panel-cart.collapsed.minimizable .content .workflow .c-stepper.horizontal .step .c-icon {
    height: 18px;
    width: 18px;
  }
  /* Collapsed active step: inset highlight instead of scale (avoids clipping in the narrow strip). */
  .c-panel-cart.collapsed.minimizable .content .workflow .c-stepper.horizontal .step.active,
  .c-panel-cart.collapsed.minimizable .content .workflow .c-stepper.horizontal .step.active a {
    box-shadow: 0 0 0 1px hsl(var(--info-h), var(--s-3), var(--l-2), 55%), 0 1px 0 rgba(255, 255, 255, 0.88) inset, 0 2px 10px rgba(0, 35, 45, 0.22);
    transform: none;
  }
  .c-panel-cart.collapsed.minimizable .content .workflow .c-stepper.horizontal .step.active:hover,
  .c-panel-cart.collapsed.minimizable .content .workflow .c-stepper.horizontal .step.active:hover a {
    box-shadow: 0 0 0 1px hsl(var(--info-h), var(--s-3), var(--l-2), 62%), 0 1px 0 rgba(255, 255, 255, 0.92) inset, 0 3px 12px rgba(0, 35, 45, 0.26);
    transform: none;
  }
}
/*
 * Desktop (>= $breakpoint-40 / 1550 px): right column, always fully expanded.
 * The collapse toggle is never shown; the narrow-only collapse bar is hidden.
 */
@media (min-width: 1550px) {
  .c-panel-cart {
    border-radius: 0;
  }
  .c-panel-cart .content .cart-mobile-sheet-controls.cart-panel-narrow-only-strip {
    display: none;
  }
}
.c-panel-cart {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1000;
}
.c-panel-cart .panel-title {
  align-items: center;
  background: hsl(var(--info-h), var(--s-3), var(--l-0));
  color: rgba(255, 255, 255, 0.96);
  display: flex;
  font-weight: 700;
  gap: 8px;
  height: 56px;
  padding: 0 16px;
  text-transform: uppercase;
  width: 100%;
}
.c-panel-cart .panel-title svg,
.c-panel-cart .panel-title .c-icon {
  color: rgb(248, 252, 255);
}
.c-panel-cart .tbo-checkbox {
  align-items: center;
  display: flex;
  gap: 4px;
}
.c-panel-cart .c-changed {
  font-weight: 600;
}
.c-panel-cart .c-changed .previous {
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-panel-cart .c-changed .previous,
.c-panel-cart .c-changed .current {
  font-size: 0.85rem;
}
.c-panel-cart .content {
  align-items: center;
  background: #fff;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  width: 100%;
}
.c-panel-cart .content .cart-mobile-sheet-controls {
  flex-shrink: 0;
  padding: 0;
  width: 100%;
}
.c-panel-cart .content .cart-mobile-sheet-controls .cart-mobile-sheet-collapse-bar {
  align-items: center;
  background: rgba(0, 0, 0, 0.12);
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  min-height: 40px;
  padding: 4px 0;
  width: 100%;
}
.c-panel-cart .content .cart-mobile-sheet-controls .cart-mobile-sheet-collapse-bar .cart-mobile-sheet-chevron--tablet {
  display: none;
}
@media (min-width: 750px) and (max-width: 1549px) {
  .c-panel-cart .content .cart-mobile-sheet-controls .cart-mobile-sheet-collapse-bar .cart-mobile-sheet-chevron--mobile {
    display: none;
  }
  .c-panel-cart .content .cart-mobile-sheet-controls .cart-mobile-sheet-collapse-bar .cart-mobile-sheet-chevron--tablet {
    display: block;
  }
}
.c-panel-cart .content .cart-mobile-sheet-controls .cart-mobile-sheet-collapse-bar .c-icon {
  color: #fff;
}
.c-panel-cart .content .cart-mobile-sheet-controls .cart-mobile-sheet-collapse-bar:focus-visible {
  outline: 2px solid hsl(var(--info-h), var(--s-2), var(--l-3));
  outline-offset: -2px;
}
.c-panel-cart .content .workflow {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  display: flex;
  margin-bottom: 2px;
  min-height: 56px;
  width: 100%;
}
.c-panel-cart .content .c-order-items {
  height: 100%;
  overflow-y: scroll;
}
.c-panel-cart .step-help {
  align-items: center;
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  border-bottom: 2px solid hsl(var(--success-h), var(--s-2), var(--l-4));
  display: flex;
  font-style: italic;
  line-height: 1.3rem;
  padding: 8px 32px;
  position: relative;
}
.c-panel-cart .step-help svg {
  inset-inline-start: 4px;
  position: absolute;
}
.c-panel-cart .cart-empty {
  align-items: center;
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  border: 2px dashed hsl(var(--default-h), var(--s-1), var(--l-4));
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
  padding-inline-start: 4px;
}
.c-panel-cart .btn-confirm-step {
  width: 100%;
}
.c-panel-cart .error-quantity {
  margin-bottom: 16px;
}
.c-panel-cart input[type=radio] {
  margin-bottom: 4px;
}
.c-panel-cart .checkbox {
  margin-top: 16px;
}
.c-panel-cart h5 {
  margin-top: 0;
}
.c-panel-cart .confirm-cart-help {
  align-items: center;
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
  display: flex;
  gap: 4px;
  margin-top: 4px;
  padding: 4px;
}
.c-panel-cart .vouchers {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding: 0 8px;
  width: 100%;
}
.c-panel-cart .vouchers .item {
  display: inline-flex;
  gap: 8px;
}
.c-panel-cart .cart-support {
  align-items: center;
  background: hsl(var(--info-h), var(--s-3), var(--l-0));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  height: 56px;
  margin-bottom: 8px;
  margin-top: 8px;
  padding: 8px 16px;
  position: relative;
  width: 100%;
}
.c-panel-cart .cart-support .cart-support-photo {
  background-color: rgba(255, 255, 255, 0.12);
  background-position: center;
  background-size: cover;
  border: 4px solid hsl(var(--info-h), var(--s-3), var(--l-2));
  border-radius: 50%;
  bottom: -8px;
  flex-shrink: 0;
  height: 72px;
  inset-inline-start: 4px;
  position: absolute;
  width: 72px;
  z-index: 1000;
}
.c-panel-cart .cart-support .cart-support-info {
  display: flex;
  flex-direction: column;
  margin-inline-start: 80px;
  min-width: 0;
}
.c-panel-cart .cart-support .cart-support-name {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}
.c-panel-cart .cart-support .cart-support-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-panel-cart .cart-support .cart-support-contact a {
  align-items: center;
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  font-size: 0.7rem;
  gap: 4px;
  text-decoration: none;
}
.c-panel-cart .cart-support .cart-support-contact a:hover {
  color: #fff;
}
.c-panel-cart .cart-support .cart-support-contact a .c-icon {
  flex-shrink: 0;
}
.c-panel-cart .cart-support-role {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
  line-height: 1.2;
}
.c-panel-cart .cart-support-actions {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
}

.shop-overlay-open > .c-panel-cart {
  border-inline-end: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4), 18%);
  border-inline-start-color: hsl(var(--info-h), var(--s-2), var(--l-4), 28%);
  box-shadow: none;
}

.c-panel-cart {
  border-inline-start: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4), 28%);
  box-shadow: -2px 0 12px hsl(var(--info-h), var(--s-3), var(--l-0), 10%);
}
[dir=rtl] .c-panel-cart {
  box-shadow: 2px 0 12px hsl(var(--info-h), var(--s-3), var(--l-0), 10%);
}
.c-panel-cart {
  overflow: hidden;
  position: relative;
}
.c-panel-cart .content {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  z-index: 1;
}
.c-panel-cart .content .cart-mobile-sheet-controls {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0;
}
.c-panel-cart .content .cart-mobile-sheet-controls .cart-mobile-sheet-collapse-bar {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.c-panel-cart .content .cart-mobile-sheet-controls .cart-mobile-sheet-collapse-bar .c-icon {
  color: #fff;
}
.c-panel-cart .content .cart-mobile-sheet-controls .cart-mobile-sheet-collapse-bar:active {
  background: rgba(255, 255, 255, 0.2);
}
.c-panel-cart .content .workflow {
  align-items: center;
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  overflow: hidden;
  padding: 16px 24px 16px;
  position: relative;
}
.c-panel-cart.collapsed .content {
  box-shadow: none;
}
.c-panel-cart .c-order-items {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-panel-cart .c-order-items .break-line {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-inline-start: 3px solid rgba(255, 255, 255, 0.25);
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
  font-weight: 700;
  gap: 8px;
  letter-spacing: 0.06em;
  min-height: 56px;
  padding: 0 16px;
  text-transform: uppercase;
}
.c-panel-cart .c-order-items .break-line svg,
.c-panel-cart .c-order-items .break-line .c-icon {
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
}
.c-panel-cart .c-order-items .break-line.warning {
  background: hsl(var(--warning-h), var(--s-2), var(--l-1), 55%);
  border-bottom-color: rgba(255, 180, 120, 0.38);
  border-inline-start-color: rgba(255, 190, 130, 0.9);
  color: rgba(255, 245, 235, 0.98);
}
.c-panel-cart .c-order-items .break-line.warning svg,
.c-panel-cart .c-order-items .break-line.warning .c-icon {
  color: rgb(255, 220, 195);
}
.c-panel-cart .c-order-items .product-line {
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4), 18%);
  box-shadow: none;
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  gap: 8px;
  margin: 0;
  padding: 8px 16px 8px 8px;
  transition: background 0.2s ease;
  /* Zebra: subtle `$info` tints (`--l-6` / `--l-5`) — aligns with breadcrumb tray, not neutral grey. */
}
.c-panel-cart .c-order-items .product-line:nth-child(odd of .product-line) {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-panel-cart .c-order-items .product-line:nth-child(even of .product-line) {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-panel-cart .c-order-items .product-line:hover {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-panel-cart .c-order-items .product-line .c-cart-item-actions {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, hsl(var(--info-h), var(--s-2), var(--l-6), 88%) 30%, hsl(var(--info-h), var(--s-2), var(--l-6)) 100%);
  border-inline-start: none;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 18%, rgb(0, 0, 0) 38%, rgb(0, 0, 0) 100%);
}
[dir=rtl] .c-panel-cart .c-order-items .product-line .c-cart-item-actions {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, hsl(var(--info-h), var(--s-2), var(--l-6), 88%) 30%, hsl(var(--info-h), var(--s-2), var(--l-6)) 100%);
}
[dir=rtl] .c-panel-cart .c-order-items .product-line .c-cart-item-actions {
  mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 18%, rgb(0, 0, 0) 38%, rgb(0, 0, 0) 100%);
}
.c-panel-cart .c-order-items .product-line:nth-child(even of .product-line) .c-cart-item-actions {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, hsl(var(--info-h), var(--s-2), var(--l-5), 88%) 30%, hsl(var(--info-h), var(--s-2), var(--l-5)) 100%);
}
.c-panel-cart .c-order-items .product-line .quantity-type-icon {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-panel-cart .c-order-items .product-line .quantity {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.c-panel-cart .c-order-items .product-line .product-name {
  cursor: pointer;
  transition: color 0.15s ease;
}
.c-panel-cart .c-order-items .product-line .product-name:hover {
  color: hsl(var(--info-h), var(--s-3), var(--l-0));
}
.c-panel-cart .c-order-items .product-line .group .name {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.c-panel-cart .c-order-items .product-line .group .specs {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}
.c-panel-cart .c-order-items .product-line .costs {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.c-panel-cart .c-order-items .product-line .costs .c-changed .current,
.c-panel-cart .c-order-items .product-line .costs .c-changed .previous {
  font-size: 0.85rem;
  font-weight: 600;
}
.c-panel-cart .c-order-items .product-line.danger {
  color: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.danger:nth-child(odd of .product-line) {
  background: hsl(var(--danger-h), var(--s-3), var(--l-25), 58%);
}
.c-panel-cart .c-order-items .product-line.danger:nth-child(even of .product-line) {
  background: hsl(var(--danger-h), var(--s-3), var(--l-25), 50%);
}
.c-panel-cart .c-order-items .product-line.danger:hover {
  background: hsl(var(--danger-h), var(--s-3), var(--l-25), 68%);
}
.c-panel-cart .c-order-items .product-line.danger .quantity-type-icon {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-panel-cart .c-order-items .product-line.danger .group .name {
  color: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.danger .group .specs {
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-panel-cart .c-order-items .product-line.danger .costs {
  color: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.danger .c-cart-item-actions {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, hsl(var(--danger-h), var(--s-3), var(--l-25), 90%) 30%, hsl(var(--danger-h), var(--s-3), var(--l-25)) 100%);
}
.c-panel-cart .c-order-items .product-line.warning {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.warning:nth-child(odd of .product-line) {
  background: hsl(var(--warning-h), var(--s-3), var(--l-25), 55%);
}
.c-panel-cart .c-order-items .product-line.warning:nth-child(even of .product-line) {
  background: hsl(var(--warning-h), var(--s-3), var(--l-25), 48%);
}
.c-panel-cart .c-order-items .product-line.warning:hover {
  background: hsl(var(--warning-h), var(--s-3), var(--l-25), 62%);
}
.c-panel-cart .c-order-items .product-line.warning .quantity-type-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-panel-cart .c-order-items .product-line.warning .group .name {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.warning .group .specs {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-panel-cart .c-order-items .product-line.warning .costs {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.warning .c-cart-item-actions {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, hsl(var(--warning-h), var(--s-3), var(--l-25), 88%) 30%, hsl(var(--warning-h), var(--s-3), var(--l-25)) 100%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed:nth-child(odd of .product-line) {
  background: hsl(var(--info-h), var(--s-2), 92%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed:nth-child(even of .product-line) {
  background: hsl(var(--info-h), var(--s-2), 89%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed:hover {
  background: hsl(var(--info-h), var(--s-2), 86%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed .quantity-type-icon {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed .group .name {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed .group .specs {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed .costs {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed .c-cart-item-actions {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, hsl(var(--info-h), var(--s-2), 92%, 92%) 30%, hsl(var(--info-h), var(--s-2), 92%) 100%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed:nth-child(even of .product-line) .c-cart-item-actions {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, hsl(var(--info-h), var(--s-2), 89%, 90%) 30%, hsl(var(--info-h), var(--s-2), 89%) 100%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed .costs .c-changed .previous {
  color: hsl(var(--info-h), var(--s-3), var(--l-2), 55%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed .costs .c-changed .current {
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.warning {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.warning:nth-child(odd of .product-line) {
  background: hsl(var(--warning-h), var(--s-3), var(--l-25), 62%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.warning:nth-child(even of .product-line) {
  background: hsl(var(--warning-h), var(--s-3), var(--l-25), 54%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.warning:hover {
  background: hsl(var(--warning-h), var(--s-3), var(--l-25), 72%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.warning .group .name {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.warning .group .specs {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.warning .costs .c-changed .previous {
  color: hsl(var(--info-h), var(--s-3), var(--l-2), 55%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.warning .costs .c-changed .current {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.warning .c-cart-item-actions {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, hsl(var(--warning-h), var(--s-3), var(--l-25), 90%) 30%, hsl(var(--warning-h), var(--s-3), var(--l-25)) 100%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.warning:nth-child(even of .product-line) .c-cart-item-actions {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, hsl(var(--warning-h), var(--s-3), var(--l-25), 88%) 30%, hsl(var(--warning-h), var(--s-3), var(--l-25)) 100%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.error {
  color: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.error:nth-child(odd of .product-line) {
  background: hsl(var(--danger-h), var(--s-3), var(--l-25), 58%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.error:nth-child(even of .product-line) {
  background: hsl(var(--danger-h), var(--s-3), var(--l-25), 50%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.error:hover {
  background: hsl(var(--danger-h), var(--s-3), var(--l-25), 68%);
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.error .group .name {
  color: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.error .group .specs {
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.error .product-warning-icon {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-panel-cart .c-order-items .product-line.cart-item-changed.error .c-cart-item-actions {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, hsl(var(--danger-h), var(--s-3), var(--l-25), 90%) 30%, hsl(var(--danger-h), var(--s-3), var(--l-25)) 100%);
}
.c-panel-cart .c-order-items .product-line.danger .c-changed .previous {
  color: hsl(var(--info-h), var(--s-3), var(--l-2), 55%);
}
.c-panel-cart .c-order-items .product-line.danger .c-changed .current {
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-panel-cart .c-order-items .empty-cart {
  background: hsl(var(--info-h), var(--s-2), var(--l-6), 72%);
  border: 1px dashed hsl(var(--info-h), var(--s-3), var(--l-3), 28%);
  border-radius: 0;
  box-shadow: none;
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-panel-cart .c-cart-errors {
  background: rgba(255, 100, 40, 0.1);
  border-bottom: 1px solid rgba(255, 160, 90, 0.32);
}
.c-panel-cart .c-cart-errors .category .body .product-line .product-name:hover {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-panel-cart .step-help {
  background: rgba(40, 120, 90, 0.22);
  border-bottom: 1px solid rgba(120, 220, 180, 0.28);
  color: rgba(230, 255, 248, 0.95);
}
.c-panel-cart .confirm-cart-help {
  background: rgba(255, 160, 60, 0.12);
  border: 1px solid rgba(255, 200, 120, 0.28);
  color: rgba(255, 240, 220, 0.95);
}
.c-panel-cart .vouchers .label {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-panel-cart {
  /* Final step: light well + white cards so fields don't sit on the teal wash. */
}
.c-panel-cart .vouchers.element {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
  border-top: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4), 18%);
  padding: 16px 16px 8px;
}
.c-panel-cart .confirmations {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
  border-top: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4), 18%);
  gap: 8px;
  padding: 16px 8px;
}
.c-panel-cart .confirmations > .confirmation {
  background: #fff;
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4), 22%);
  border-radius: 8px;
  box-shadow: 0 1px 3px hsl(var(--info-h), var(--s-3), var(--l-0), 6%);
  padding: 16px;
}
.c-panel-cart {
  /*
   * Checkout fields: dark `$info` ink (same language as cart lines + totals).
   */
}
.c-panel-cart .confirmations .confirmation .field label,
.c-panel-cart .confirmations .confirmation .c-checkbox label {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-panel-cart .confirmations .confirmation .field label .validation,
.c-panel-cart .confirmations .confirmation .c-checkbox label .validation {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-panel-cart .confirmations .confirmation .field .help {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  font-style: normal;
  font-weight: 400;
}
.c-panel-cart .confirmations .confirmation .field .help.validation {
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-panel-cart .confirmations .confirmation .field.disabled label,
.c-panel-cart .confirmations .confirmation .field.disabled .help {
  color: hsl(var(--info-h), var(--s-3), var(--l-2), 48%);
}
.c-panel-cart .confirmations .confirmation a {
  color: hsl(var(--info-h), var(--s-3), var(--l-0));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.c-panel-cart .confirmations .confirmation a:hover {
  color: hsl(var(--info-h), var(--s-3), var(--l-0));
}
.c-panel-cart .confirmations .confirmation .c-radio-group .item .count {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}

/* stylelint-enable no-duplicate-selectors */
/*
 * Mobile category bottom sheet — same shell language as filters/cart (`shop/_grid.scss`).
 * Lead with `.c-offer.shop-grid` so styles apply even when `.l-main-col.shop-layout`
 * is missing from the ancestor chain; duplicate selectors keep the layout fallback.
 */
.c-offer.shop-grid > .shop-panel.shop-panel-categories.shop-overlay.shop-overlay-bottom,
.l-main-col.shop-layout .shop-grid > .shop-panel.shop-panel-categories.shop-overlay.shop-overlay-bottom {
  display: flex !important;
  flex-direction: column;
  grid-template-columns: none;
  grid-template-rows: none;
  min-height: 0;
}

.c-offer.shop-grid > .shop-panel.shop-panel-categories.shop-overlay.shop-overlay-bottom .c-panel-categories,
.l-main-col.shop-layout .shop-grid > .shop-panel.shop-panel-categories.shop-overlay.shop-overlay-bottom .c-panel-categories {
  background: #006d82;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.c-offer.shop-grid .shop-panel-categories,
.l-main-col.shop-layout .shop-grid .shop-panel-categories {
  /* Collapse strip: same idea as cart — one full-width row, no title, uniform sheet teal (no inset bar). */
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-controls,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-controls {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  padding: 0;
  width: 100%;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-collapse-bar,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-collapse-bar {
  align-items: center;
  align-self: stretch;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  margin: 0;
  min-height: 40px;
  min-width: 0;
  padding: 4px 0;
  width: 100%;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-collapse-bar .c-icon,
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-collapse-bar svg,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-collapse-bar .c-icon,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-collapse-bar svg {
  color: #fff;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-collapse-bar:active,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-collapse-bar:active {
  background: rgba(255, 255, 255, 0.1);
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-collapse-bar:focus-visible,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-collapse-bar:focus-visible {
  outline: 2px solid hsl(var(--info-h), var(--s-2), var(--l-3));
  outline-offset: -2px;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-scroll,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-scroll {
  background: #fff;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-group,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-group {
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  display: flex;
  flex-direction: column;
  width: 100%;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-group:last-child,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-group:last-child {
  border-bottom: none;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row {
  align-items: center;
  appearance: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 8px;
  justify-content: space-between;
  line-height: 1.35;
  text-align: start;
  width: 100%;
  /* Parent row — same teal-forward tone as mobile filter `.title` bands, lighter touch on white. */
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row:not(.c-panel-categories-sub),
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row:not(.c-panel-categories-sub) {
  background: hsl(var(--info-h), var(--s-3), var(--l-6), 44%);
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4), 14%);
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.012em;
  min-height: 48px;
  padding: 8px 16px;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row:not(.c-panel-categories-sub) .c-panel-categories-count,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row:not(.c-panel-categories-sub) .c-panel-categories-count {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row.c-panel-categories-sub,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row.c-panel-categories-sub {
  background: #fff;
  border-inline-start: 3px solid hsl(var(--info-h), var(--s-2), var(--l-3), 38%);
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4), 10%);
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  font-size: 0.8rem;
  font-weight: 400;
  margin-inline-start: 16px;
  min-height: 44px;
  padding: 4px 16px 4px 16px;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row.c-panel-categories-sub .c-panel-categories-count,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row.c-panel-categories-sub .c-panel-categories-count {
  color: hsl(var(--info-h), var(--s-3), var(--l-2), 78%);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row.active,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row.active {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  border-inline-start-color: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row.active .c-panel-categories-row-label,
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row.active .c-panel-categories-count,
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row.active .c-icon,
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row.active svg,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row.active .c-panel-categories-row-label,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row.active .c-panel-categories-count,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row.active .c-icon,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row.active svg {
  color: #fff;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row.active-child:not(.active),
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row.active-child:not(.active) {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
  border-bottom-color: hsl(var(--info-h), var(--s-2), var(--l-4), 14%);
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-weight: 600;
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row.active-child:not(.active) .c-panel-categories-count,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row.active-child:not(.active) .c-panel-categories-count {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-offer.shop-grid .shop-panel-categories .c-panel-categories-row-label,
.l-main-col.shop-layout .shop-grid .shop-panel-categories .c-panel-categories-row-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.c-incentives-progress .completed {
  align-items: center;
  display: flex;
}
.c-incentives-progress .completed.extended {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
  padding: 8px;
}
.c-incentives-progress .completed.extended .completed-text {
  flex: 1;
}

@keyframes blink {
  0%, 100% {
    background-color: hsl(var(--success-h), var(--s-2), var(--l-4));
  }
  50% {
    background-color: hsl(var(--success-h), var(--s-2), var(--l-5));
  }
}
@keyframes scale-up {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
.c-incentive.promotion.tokens-changed {
  animation: blink 0.5s ease-in-out 5;
}
.c-incentive.promotion.tokens-changed .c-icon {
  animation: scale-up 0.5s ease-in-out 5;
}

.c-incentive-personal-offer {
  align-items: center;
  animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: #fff;
  display: flex;
  font-style: italic;
  min-height: 64px;
  opacity: 0;
  padding: 4px;
}
.c-incentive-personal-offer.inactive {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-incentive-personal-offer .c-icon {
  margin-inline-end: 4px;
  min-width: 36px;
}
.c-incentive-personal-offer .personal-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-content-frame {
  --funnel-accent-teal: #01a2c6;
  --funnel-accent-teal-hover: #017691;
  --funnel-accent-teal-hover-fill: rgb(1 162 198 / 12%);
  --funnel-heading-ink: hsl(196deg 22% 16%);
  background: hsl(var(--info-h), var(--s-3), var(--l-0));
}
.c-content-frame > .frame-content {
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 56px;
  width: 100%;
}
.c-content-frame > .frame-content > .funnel-full-width,
.c-content-frame > .frame-content > .funnel-footer-sticky,
.c-content-frame > .frame-content > .stats-hero-band {
  align-self: stretch;
  max-width: none;
  min-width: 0;
  width: 100%;
}
.c-content-frame > .frame-content > .content {
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-inline: auto;
  max-width: 1200px;
  width: 100%;
}
.c-content-frame > .frame-content > .content > * {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}
.c-content-frame > .frame-content:has(> .content + .landing-footer) {
  gap: 0;
}
.c-content-frame > .frame-content > .landing-footer {
  align-self: stretch;
  margin-top: 0;
  max-width: none;
  min-width: 0;
  width: 100%;
}
.c-content-frame > .frame-content > .funnel-full-width .c-spotlight-widget {
  margin-bottom: 0;
}
.c-content-frame .hero .hero-content h1 {
  margin-bottom: 16px;
}
.c-content-frame .hero .hero-content h1::after {
  background: var(--funnel-accent-teal, #01a2c6);
  border-radius: 2px;
  content: "";
  display: block;
  height: 4px;
  margin: 16px auto 0;
  width: 3rem;
}
.c-content-frame.public .hero {
  width: 100%;
}
.c-content-frame.public .hero::before {
  background: linear-gradient(180deg, rgba(0, 55, 68, 0.28) 0%, rgba(0, 38, 48, 0.58) 100%);
}
.c-content-frame.public .hero .hero-content {
  max-width: 52rem;
  padding-inline-end: 24px;
  padding-inline-start: 24px;
}
.c-content-frame.public .hero .hero-content .hero-subtitle {
  font-weight: 500;
  line-height: 1.55;
  margin-inline: auto;
  max-width: 40rem;
}
.c-content-frame.public .content > .page-content {
  display: flow-root;
  padding-bottom: 3rem;
  padding-top: 0;
}
.c-content-frame.public .content > .page-content > .personal-block {
  margin-top: 0;
}
.c-content-frame.public .content > .page-content > .personal-block .personal-block-title {
  color: var(--funnel-heading-ink);
}
.c-content-frame.public .landing-footer {
  width: 100%;
}
.c-content-frame > .frame-content > .content > .page-content .view-prose--normal {
  margin-inline-end: auto;
  margin-inline-start: 0;
  max-width: min(100%, 720px);
}

/* Full-width sections (movingspirits.eu style) */
.funnel-full-width {
  width: 100%;
}

.funnel-footer-sticky .landing-footer {
  margin-top: 0;
}

/* Stats hero + `.stats-section` (landing): `@bitstillery/common/components/cms/hero_band.scss`. */
.funnel-full-width--hero-band {
  background-color: hsl(var(--info-h), var(--s-3), var(--l-1));
  background-image: url("/img/environment.jpg");
  background-position: center top;
  background-size: cover;
  min-height: 490px;
  padding: 80px 16px;
  position: relative;
}
.funnel-full-width--hero-band::before {
  background: linear-gradient(to bottom, hsl(var(--info-h), var(--s-3), var(--l-2)) 0%, hsl(calc(var(--info-h) + 14deg), var(--s-1), var(--l-5)) 100%);
  content: "";
  inset: 0;
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.funnel-full-width--hero-band .hero-content-block {
  position: relative;
  z-index: 1;
}

.hero {
  align-items: center;
  background-color: hsl(195, 35%, 18%);
  display: flex;
  justify-content: center;
  min-height: 420px;
  overflow: hidden;
  position: relative;
}
@media (width <= 768px) {
  .hero {
    min-height: 280px;
    padding: 48px 24px;
  }
}
.hero {
  /* Two stacked photo layers: crossfade between URLs (see hero_background_image.tsx, HERO_BG_FADE_MS) */
}
.hero .hero-bg-stack {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.hero .hero-bg-stack .hero-bg-layer {
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.4s ease-in-out;
}
.hero .hero-bg-stack .hero-bg-layer:first-child {
  z-index: 0;
}
.hero .hero-bg-stack .hero-bg-layer:last-child {
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-bg-stack .hero-bg-layer {
    transition-duration: 0.01ms;
  }
}
.hero::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.hero .hero-content {
  color: #fff;
  margin-top: 128px;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 3;
}
.hero .hero-content h1 {
  font-size: 2.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 4px;
}
@media (width <= 768px) {
  .hero .hero-content h1 {
    font-size: 2rem;
  }
}
.hero .hero-content .hero-subtitle {
  font-size: 1.125rem;
  margin: 0 0 24px;
  opacity: 0.95;
}
@media (width <= 768px) {
  .hero .hero-content .hero-subtitle {
    font-size: 1rem;
  }
}
.hero .hero-content .btn-cta {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-weight: 600;
  padding: 10px 24px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.hero .hero-content .btn-cta:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.c-landing-footer {
  background-color: hsl(var(--info-h), var(--s-3), var(--l-0));
  border-top: none;
  color: rgba(255, 255, 255, 0.95);
  padding: 0;
}
.c-landing-footer .landing-footer-inner {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0 auto;
  max-width: 1200px;
  padding: 40px 16px;
}
.c-landing-footer .landing-footer-support-manager {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.c-landing-footer .landing-footer-support-manager-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.c-landing-footer .landing-footer-support-manager-icons .c-button {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
}
.c-landing-footer .landing-footer-support-manager-title {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 16px;
}
.c-landing-footer .landing-footer-support-manager-photo {
  background-color: rgba(255, 255, 255, 0.15);
  background-position: center;
  background-size: cover;
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
  flex-shrink: 0;
  height: 120px;
  width: 120px;
}
.c-landing-footer .landing-footer-support-manager-name {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 8px;
}
.c-landing-footer .landing-footer-heading {
  color: hsl(var(--surface-h), var(--s-1), var(--l-4));
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.c-landing-footer .landing-footer-subheading {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 16px 0 8px;
}
.c-landing-footer .landing-footer-intro {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 16px;
}
.c-landing-footer .landing-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-landing-footer .landing-footer-list li {
  margin-bottom: 8px;
}
.c-landing-footer .landing-footer-list .landing-footer-messaging {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 12px;
  padding-top: 12px;
}
.c-landing-footer .landing-footer-list .landing-footer-messaging + .landing-footer-messaging {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.c-landing-footer .landing-footer-list .landing-footer-messaging-label {
  color: rgba(255, 255, 255, 0.75);
  display: inline-block;
  font-size: 0.8em;
  margin-inline-end: 6px;
}
.c-landing-footer .landing-footer-list a {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 8px;
  text-decoration: none;
}
.c-landing-footer .landing-footer-list a:hover {
  color: #fff;
}
.c-landing-footer .landing-footer-list a .c-icon {
  flex-shrink: 0;
}
.c-landing-footer .landing-footer-address {
  font-style: normal;
  margin: 0 0 16px;
}
.c-landing-footer .landing-footer-address .landing-footer-address-link {
  align-items: flex-start;
  color: inherit;
  display: flex;
  gap: 8px;
  text-decoration: none;
}
.c-landing-footer .landing-footer-address .landing-footer-address-link:hover {
  color: #fff;
}
.c-landing-footer .landing-footer-address .landing-footer-address-link .c-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.c-landing-footer .landing-footer-contact-btn {
  background: #fff;
  border: 2px solid #fff;
  border-radius: 4px;
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 16px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.c-landing-footer .landing-footer-contact-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-landing-footer .landing-footer-follow .landing-footer-social {
  align-items: center;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  color: #fff;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  text-decoration: none;
  width: 32px;
}
.c-landing-footer .landing-footer-follow .landing-footer-social:hover {
  background: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.8);
}
.c-landing-footer .landing-footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-landing-footer .landing-footer-links a {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 8px;
  text-decoration: none;
}
.c-landing-footer .landing-footer-links a:hover {
  color: #fff;
}
.c-landing-footer .landing-footer-links a .c-icon {
  flex-shrink: 0;
}
.c-landing-footer .landing-footer-cta {
  margin-top: 16px;
}
.c-landing-footer .landing-footer-fun-fact {
  align-items: center;
  align-self: start;
  display: flex;
  flex-direction: column;
  max-width: 220px;
}
.c-landing-footer .landing-footer-fun-fact-quote {
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  margin: 16px 0 0;
  max-width: 148px;
  /* Reserve two lines so the circle does not shift when a teaser is one vs two lines. */
  min-height: 3em;
  min-height: 2lh;
  overflow-wrap: break-word;
  text-align: center;
  width: 100%;
}
.c-landing-footer .landing-footer-fun-fact-quote::before {
  content: "“";
}
.c-landing-footer .landing-footer-fun-fact-quote::after {
  content: "”";
}
.c-landing-footer .landing-footer-fun-fact-next {
  align-items: center;
  backdrop-filter: blur(4px);
  background: rgba(0, 60, 72, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  bottom: 5px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 32px;
  inset-inline-end: 5px;
  justify-content: center;
  padding: 0;
  position: absolute;
  transition: background 0.2s ease, border-color 0.2s ease;
  width: 32px;
  z-index: 1;
}
.c-landing-footer .landing-footer-fun-fact-next .c-icon {
  color: inherit;
}
.c-landing-footer .landing-footer-fun-fact-next:hover {
  background: rgba(0, 60, 72, 0.88);
  border-color: rgba(255, 255, 255, 0.75);
}
.c-landing-footer .landing-footer-fun-fact-next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.c-landing-footer .landing-footer-fun-fact-visual {
  flex-shrink: 0;
  height: 148px;
  position: relative;
  width: 148px;
}
.c-landing-footer {
  /* Explicit box size — `width: 100%` inside `fit-content` collapsed the circle (no visible image). */
}
.c-landing-footer .landing-footer-fun-fact-photo {
  appearance: none;
  background-color: rgba(255, 255, 255, 0.12);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
  cursor: pointer;
  display: block;
  font: inherit;
  height: 148px;
  padding: 0;
  transition: filter 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  width: 148px;
}
.c-landing-footer .landing-footer-fun-fact-photo:hover {
  border-color: rgba(255, 255, 255, 0.75);
  filter: brightness(1.08);
  transform: scale(1.02);
}
.c-landing-footer .landing-footer-fun-fact-photo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.c-landing-footer .landing-footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  padding: 16px;
  text-align: center;
  user-select: none;
}
.c-landing-footer .landing-footer-copyright-easter {
  display: inline;
}
.c-landing-footer .landing-footer-copyright-mark {
  cursor: help;
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
.c-landing-footer .landing-footer-copyright-mark:hover {
  opacity: 0.95;
}

.c-shell-header-inner {
  backdrop-filter: blur(12px) saturate(108%);
  background: linear-gradient(180deg, hsl(var(--info-h), var(--s-3), var(--l-0), 45%) 0%, hsl(var(--info-h), var(--s-3), var(--l-1), 41%) 100%);
  box-shadow: none;
  isolation: auto;
  overflow: visible;
  position: relative;
  z-index: 5;
  align-items: center;
  display: flex;
  gap: 16px;
  height: 64px;
  padding: 0 var(--query-spacer);
  position: relative;
  user-select: none;
  width: 100%;
  z-index: 1000000;
}
.c-shell-header-inner .bar-logo {
  align-items: center;
  align-self: stretch;
  background: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  height: 150px;
  justify-content: center;
  padding: 8px;
  width: 100px;
}
.c-shell-header-inner .bar-logo img {
  max-height: 100%;
  max-width: 100%;
}
.c-shell-header-inner select {
  border: none;
  outline: none;
}
.c-shell-header-inner button.variant-menu svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-shell-header-inner button.variant-menu.active, .c-shell-header-inner button.variant-menu:hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  border-bottom-color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-shell-header-inner .bar-search {
  align-items: center;
  display: flex;
  flex: 10;
  height: 64px;
  max-width: 604px;
}
.c-shell-header-inner .bar-search .search-box input {
  background: none;
  border: none;
  border-bottom: 1px solid hsl(var(--default-h), var(--s-1), var(--l-3));
  border-radius: 0;
  box-shadow: none;
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
  opacity: 0.7;
  outline: none;
  padding: 0 32px;
  transition: opacity 0.3s ease;
  width: 100%;
}
.c-shell-header-inner .bar-search .search-box input::first-letter {
  text-transform: capitalize;
}
.c-shell-header-inner .bar-search .search-box input::placeholder {
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
  opacity: 1;
}
.c-shell-header-inner .bar-search .search-box input:focus {
  border-bottom: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  opacity: 1;
}
.c-shell-header-inner .bar-search .search-box input:focus ~ button[disabled] svg {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-shell-header-inner .bar-search .btn-search {
  height: 32px;
  width: 32px;
  color: hsl(var(--surface-h), var(--s-1), var(--l-5));
  position: absolute;
}
.c-shell-header-inner .bar-search .btn-clear {
  height: 24px;
  width: 24px;
  color: hsl(var(--surface-h), var(--s-1), var(--l-5));
  inset-inline-end: 8px;
  position: absolute;
}
.c-shell-header-inner .bar-search .btn-search:hover,
.c-shell-header-inner .bar-search .btn-clear:hover {
  color: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-shell-header-inner .action-group {
  align-items: center;
  display: flex;
  gap: 0.8px;
  margin-inline-start: var(--query-spacer);
}
.c-shell-header-inner .action-group .btn-dropdown,
.c-shell-header-inner .action-group .bar-nav-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 0 8px;
}
.c-shell-header-inner .action-group .btn-dropdown svg,
.c-shell-header-inner .action-group .btn-dropdown .c-icon,
.c-shell-header-inner .action-group .bar-nav-item svg,
.c-shell-header-inner .action-group .bar-nav-item .c-icon {
  color: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-shell-header-inner .action-group .btn-dropdown svg.active, .c-shell-header-inner .action-group .btn-dropdown svg:hover,
.c-shell-header-inner .action-group .btn-dropdown .c-icon.active,
.c-shell-header-inner .action-group .btn-dropdown .c-icon:hover,
.c-shell-header-inner .action-group .bar-nav-item svg.active,
.c-shell-header-inner .action-group .bar-nav-item svg:hover,
.c-shell-header-inner .action-group .bar-nav-item .c-icon.active,
.c-shell-header-inner .action-group .bar-nav-item .c-icon:hover {
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-shell-header-inner .action-group .btn-dropdown .c-icon,
.c-shell-header-inner .action-group .bar-nav-item .c-icon {
  margin-inline-start: 2px;
}
.c-shell-header-inner .action-group .btn-dropdown .c-icon:first-child,
.c-shell-header-inner .action-group .bar-nav-item .c-icon:first-child {
  margin-inline-start: 0;
}
.c-shell-header-inner .action-group .bar-shop-cart-trigger {
  gap: 2px;
}
.c-shell-header-inner .action-group .bar-shop-cart-trigger .bar-shop-cart-chevron {
  margin-inline-start: 0;
  opacity: 0.88;
}
.c-shell-header-inner .action-group .dropdown-body {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  border: none;
  min-width: 200px;
}
.c-shell-header-inner .action-group .dropdown-body header {
  align-items: center;
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  color: hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  height: 48px;
  padding: 8px;
}
.c-shell-header-inner .action-group .dropdown-body .divider {
  background: hsl(var(--default-h), var(--s-1), var(--l-4));
  height: 1px;
}
.c-shell-header-inner .action-group .btn-action {
  color: hsl(var(--default-h), var(--s-1), var(--l-4));
  height: 48px;
  transition: all 0.3s ease;
}
.c-shell-header-inner .action-group .btn-action:hover, .c-shell-header-inner .action-group .btn-action.active {
  color: #fff;
  filter: drop-shadow(0 0 4px hsl(var(--info-h), var(--s-3), var(--l-1)));
}
.c-shell-header-inner .action-group .dropdown-my-portal {
  cursor: pointer;
}
.c-shell-header-inner .action-group .dropdown-my-portal .dropdown-body .c-button {
  justify-content: flex-start;
  padding: 8px;
  text-align: start;
  width: 100%;
}
.c-shell-header-inner .action-group .dropdown-cart.has-options {
  cursor: context-menu;
}
.c-shell-header-inner .action-group .dropdown-cart .dropdown-button .amount-unit {
  inset-inline-end: -12px;
  bottom: 8px;
  position: absolute;
}
.c-shell-header-inner .action-group .dropdown-cart .dropdown-body .c-button {
  padding: 8px;
}
.c-shell-header-inner .action-group .dropdown-cart .dropdown-body .cart {
  align-items: center;
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding: 8px;
}
.c-shell-header-inner .action-group .dropdown-cart .dropdown-body .cart .order-details {
  flex: 1;
  margin-inline-start: 8px;
}
.c-shell-header-inner .action-group .dropdown-cart .dropdown-body .cart .cart-items {
  display: flex;
  gap: 4px;
}
.c-shell-header-inner .action-group .dropdown-cart .dropdown-body .cart:hover {
  background: hsl(var(--brand-h), var(--s-3), var(--l-4));
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
  cursor: pointer;
}
.c-shell-header-inner .action-group .dropdown-cart .dropdown-body .cart.active {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-shell-header-inner .bar-header {
  align-items: center;
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}
.c-shell-header-inner .bar-header .title {
  align-items: center;
  display: flex;
  font-size: 1rem;
  font-weight: 600;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.c-shell-header-inner .bar-header .page-icon {
  align-items: center;
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  display: flex;
  height: 100%;
  justify-content: center;
  margin-inline-start: var(--query-spacer);
  width: 50px;
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body {
  backdrop-filter: blur(14px);
  background: hsl(var(--info-h), var(--s-3), var(--l-0), 94%);
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 32%);
  box-shadow: 0 16px 44px hsl(var(--info-h), var(--s-3), var(--l-0), 42%);
  border-radius: 8px;
  min-width: 180px;
  z-index: 100015;
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .sub-menu,
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu {
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  padding: 8px 16px;
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .sub-menu:first-child,
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu:first-child {
  border-radius: 8px 8px 0 0;
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .sub-menu:last-child,
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu:last-child {
  border-radius: 0 0 8px 8px;
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .sub-menu:first-child:last-child,
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu:first-child:last-child {
  border-radius: 8px;
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .sub-menu:hover, .c-shell-header-inner .action-group .c-dropdown .dropdown-body .sub-menu.active,
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu:hover,
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu.active {
  background: hsl(var(--info-h), var(--s-2), var(--l-3), 34%);
  color: #fff;
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu {
  border: none;
  justify-content: flex-start;
  text-align: start;
  width: 100%;
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu:not([disabled], .disabled) .c-button-text {
  color: rgba(255, 255, 255, 0.94);
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu:not(.active, [disabled], .disabled) .c-icon,
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu:not(.active, [disabled], .disabled) svg {
  color: rgba(255, 255, 255, 0.92);
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu:hover:not([disabled], .disabled) {
  background: hsl(var(--info-h), var(--s-2), var(--l-3), 34%);
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu:hover:not([disabled], .disabled) .c-button-text,
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu:hover:not([disabled], .disabled) .c-icon,
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu:hover:not([disabled], .disabled) svg {
  color: #fff;
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu.active {
  background: hsl(var(--info-h), var(--s-2), var(--l-3), 46%);
  border-bottom-color: transparent;
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu.active .c-button-text,
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu.active .c-icon,
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu.active svg {
  color: #fff;
}
.c-shell-header-inner .action-group .c-dropdown .dropdown-body .c-button.variant-menu svg {
  color: inherit;
}
.c-shell-header-inner .action-group .bar-header-soft-btn.c-button.type-info:not([disabled], .disabled) {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.14);
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: none;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-shell-header-inner .action-group .bar-header-soft-btn.c-button.type-info:not([disabled], .disabled):hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 14px rgba(0, 8, 18, 0.38);
  color: #fff;
}
.c-shell-header-inner .action-group .bar-header-soft-btn.c-button.type-info:not([disabled], .disabled) .c-button-text,
.c-shell-header-inner .action-group .bar-header-soft-btn.c-button.type-info:not([disabled], .disabled) svg {
  color: #fff;
}
.c-shell-header-inner .action-group {
  gap: 4px;
  overflow: visible;
}
.c-shell-header-inner .action-group .bar-nav-item,
.c-shell-header-inner .action-group .btn-dropdown {
  color: #fff;
}
.c-shell-header-inner .action-group .bar-nav-item svg,
.c-shell-header-inner .action-group .bar-nav-item .c-icon,
.c-shell-header-inner .action-group .btn-dropdown svg,
.c-shell-header-inner .action-group .btn-dropdown .c-icon {
  color: rgba(255, 255, 255, 0.92);
}
.c-shell-header-inner .action-group .bar-nav-item svg.active, .c-shell-header-inner .action-group .bar-nav-item svg:hover,
.c-shell-header-inner .action-group .bar-nav-item .c-icon.active,
.c-shell-header-inner .action-group .bar-nav-item .c-icon:hover,
.c-shell-header-inner .action-group .btn-dropdown svg.active,
.c-shell-header-inner .action-group .btn-dropdown svg:hover,
.c-shell-header-inner .action-group .btn-dropdown .c-icon.active,
.c-shell-header-inner .action-group .btn-dropdown .c-icon:hover {
  color: #fff;
}
.c-shell-header-inner .action-group .c-dropdown:has(.bar-nav-item) {
  align-items: center;
  display: flex;
  overflow: visible;
}
.c-shell-header-inner .action-group .c-button:not(.bar-nav-item) {
  border-radius: 8px;
  font-weight: 500;
  height: 40px;
  padding: 0 24px;
  transition: all 0.2s ease;
}
.c-shell-header-inner .action-group .btn-action {
  color: #fff;
}
.c-shell-header-inner .action-group .btn-action:hover, .c-shell-header-inner .action-group .btn-action.active {
  color: #fff;
}
.c-shell-header-inner .action-group.is-minimal-shop-chrome .portal-shop-menu-trigger {
  display: none;
}
.c-shell-header-inner .action-group.is-minimal-shop-chrome .portal-shop-desktop-nav {
  align-items: center;
  display: contents;
}
@media (max-width: 749px) {
  .c-shell-header-inner .action-group.is-minimal-shop-chrome .portal-shop-menu-trigger {
    display: flex;
  }
  .c-shell-header-inner .action-group.is-minimal-shop-chrome .portal-shop-desktop-nav {
    display: none;
  }
}
@media (max-width: 749px) {
  .c-shell-header-inner .bar-search .portal-shop-pricelist {
    display: none;
  }
}
@media (max-width: 750px) {
  .c-shell-header-inner .bar-header .title {
    display: none;
  }
}
@media (max-width: 600px) {
  .c-shell-header-inner .bar-header .page-icon {
    display: none;
  }
  .c-shell-header-inner .action-group {
    margin-inline-end: var(--query-spacer);
  }
}

.shop-layout .c-shell-header-inner .bar-logo {
  align-self: unset;
  border-radius: 50%;
  height: 56px;
  width: 56px;
}

.c-shell-header {
  align-items: stretch;
  background-color: hsl(var(--info-h), var(--s-3), var(--l-0));
  display: flex;
  flex-direction: column;
  position: relative;
}
.c-shell-header .portal-header-hero-bg-layer {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.4s ease-in-out;
}

.c-registration .c-stepper .steps .progress-line {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-registration .consent {
  margin-top: 16px;
}
.c-registration .consent .checkbox {
  line-height: 16px;
  margin-bottom: 4px;
}
.c-registration .consent .checkbox label {
  align-items: center;
  display: flex;
}
.c-registration .team-regards {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 1rem;
  margin-bottom: 16px;
  position: relative;
}
.c-registration .team-regards img {
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  max-width: 100%;
}
.c-registration .team-regards span {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  bottom: 0;
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  inset-inline-start: 0;
  padding: 4px;
  padding-inline-start: 0;
  position: absolute;
}
.c-registration p {
  line-height: 1.5rem;
  margin-bottom: 0;
}

.c-auth-login .forgot-pw {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.c-auth-login .otp-options {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: center;
}

.c-order-list .c-collection-view .c-offer-item-amount {
  font-size: 0.8rem;
  font-weight: 300;
}
.c-order-list .c-collection-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-order-card {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  border: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-5));
  border-inline-start: 4px solid hsl(var(--default-h), var(--s-1), var(--l-3));
  border-radius: 8px;
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  cursor: pointer;
  display: flex;
  gap: 16px;
  padding: 16px 24px;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.c-order-card:hover {
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
}
.c-order-card.status-info {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
  border-inline-start-color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-order-card.status-info:hover {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-order-card.status-info .card-icon {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-order-card.status-info .reference {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-order-card.status-info .label {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-order-card.status-success {
  background: hsl(var(--success-h), var(--s-2), var(--l-6));
  border-inline-start-color: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-order-card.status-success:hover {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-order-card.status-success .card-icon {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-order-card.status-success .reference {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-order-card.status-success .label {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-order-card.status-warning {
  background: hsl(var(--warning-h), var(--s-3), var(--l-6));
  border-inline-start-color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-order-card.status-warning:hover {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-order-card.status-warning .card-icon {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-order-card.status-warning .reference {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-order-card.status-warning .label {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-order-card.status-danger {
  background: hsl(var(--danger-h), var(--s-3), var(--l-6));
  border-inline-start-color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-order-card.status-danger:hover {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
}
.c-order-card.status-danger .card-icon {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
}
.c-order-card.status-danger .reference {
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-order-card.status-danger .label {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-order-card .card-icon {
  align-items: center;
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border-radius: 8px;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.c-order-card .card-icon img {
  height: 24px;
  width: 24px;
}
.c-order-card .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.c-order-card .card-body .row-title {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}
.c-order-card .card-body .row-title .reference {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  font-size: 1rem;
  font-weight: 700;
}
.c-order-card .card-body .row-meta {
  align-items: baseline;
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 2px 8px;
}
.c-order-card .card-body .row-meta .name {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-order-card .card-body .row-meta .dot {
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  user-select: none;
}
.c-order-card .card-body .row-meta .push {
  flex: 1;
}
.c-order-card .card-body .row-meta .value {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.c-order-card .card-body .row-meta .invoice {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  white-space: nowrap;
}
@media (max-width: 1400px) {
  .c-order-card .invoice {
    display: none;
  }
}
@media (max-width: 750px) {
  .c-order-card .quantity,
  .c-order-card .value {
    display: none;
  }
}

.c-order-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.c-order-details .c-collection-view .c-changed {
  font-size: 0.8rem;
  font-weight: 300;
}
.c-order-details .soi-group.info > .title {
  background: hsl(var(--info-h), var(--s-3), var(--l-0));
  color: rgba(255, 255, 255, 0.9);
}
.c-order-details .soi-group.info > .title .c-icon,
.c-order-details .soi-group.info > .title svg {
  color: rgba(255, 255, 255, 0.9);
}
.c-order-details .soi-group.success > .title {
  background: hsl(var(--success-h), var(--s-2), var(--l-2));
  color: rgba(255, 255, 255, 0.9);
}
.c-order-details .soi-group.success > .title .c-icon,
.c-order-details .soi-group.success > .title svg {
  color: rgba(255, 255, 255, 0.9);
}
.c-order-details .soi-group.warning > .title {
  background: hsl(var(--warning-h), var(--s-3), var(--l-2));
  color: rgba(255, 255, 255, 0.9);
}
.c-order-details .soi-group.warning > .title .c-icon,
.c-order-details .soi-group.warning > .title svg {
  color: rgba(255, 255, 255, 0.9);
}
.c-order-details .soi-group .c-collection-view + .collection-subtitle {
  margin-top: 24px;
}
.c-order-details .soi-group.info .collection-subtitle {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-inline-start: 3px solid hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  margin: 0;
}
.c-order-details .soi-group.success .collection-subtitle {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  border-inline-start: 3px solid hsl(var(--success-h), var(--s-2), var(--l-2));
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
  margin: 0;
}
.c-order-details .soi-group.warning .collection-subtitle {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
  border-inline-start: 3px solid hsl(var(--warning-h), var(--s-3), var(--l-2));
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
  margin: 0;
}
.c-order-details .order-empty {
  align-items: center;
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  border-radius: 8px;
  display: flex;
  gap: 16px;
  max-width: 450px;
  padding: 16px;
}
.c-order-details .order-empty > .c-icon {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
  flex-shrink: 0;
}
.c-order-details .order-empty .title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.c-order-details .order-empty .description {
  align-items: flex-start;
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-warehouse-status {
  background-color: hsl(var(--info-h), var(--s-2), var(--l-5));
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px;
  width: 100%;
}
.c-warehouse-status .header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.c-warehouse-status .header .title {
  font-size: 1.05rem;
  font-weight: 700;
}
.c-warehouse-status .header .sub-title {
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
}
.c-warehouse-status .c-stepper .steps .step {
  background-color: hsl(var(--grey-h), var(--s-0), var(--l-6));
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  cursor: default;
}
.c-warehouse-status .c-stepper .steps .step.completed {
  background-color: hsl(var(--info-h), var(--s-2), var(--l-3));
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  cursor: default;
}
.c-warehouse-status .c-stepper .steps .step.active {
  background-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: #fff;
  cursor: default;
}

.c-order .view {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.c-order .view-actions {
  margin-bottom: 0;
}
.c-order .order-confirmation {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
  border-inline-start: 3px solid hsl(var(--info-h), var(--s-3), var(--l-0));
  max-width: 600px;
  padding: 16px 24px;
}
.c-order .order-confirmation .title {
  color: hsl(var(--info-h), var(--s-3), var(--l-0));
  font-size: 1.05rem;
  font-weight: 700;
}
.c-order .order-confirmation .subtitle {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 1rem;
  font-weight: 600;
}
.c-order .order-confirmation > .description {
  align-items: flex-start;
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-order .order-confirmation .promotion-reminder {
  background: hsl(var(--success-h), var(--s-2), var(--l-1));
  border: 2px solid hsl(var(--success-h), var(--s-2), var(--l-2));
  margin-top: 16px;
  padding: 8px;
}
.c-order .order-confirmation .promotion-reminder .description {
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-order .c-data-card.type-info .entry-label {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-weight: 700;
}
.c-order .c-data-card.type-info .entry-value {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-order .c-data-card .entry.type-total {
  border-top: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-order .c-data-card .entry.type-total .entry-value {
  color: hsl(var(--info-h), var(--s-3), var(--l-0));
  font-size: 1.05rem;
  font-weight: 700;
}

.c-collection-product .c-product-image {
  aspect-ratio: 4/3;
  background: hsl(var(--default-h), var(--s-1), var(--l-4));
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  overflow: hidden;
  position: relative;
  width: 100%;
}
.c-collection-product .c-product-image .btn-favourite {
  inset-inline-end: 8px;
  position: absolute;
  top: 8px;
}
.c-collection-product .c-product-image .c-tippy {
  width: 100%;
}
.c-collection-product .c-product-image.carousel-active {
  cursor: zoom-in;
}
.c-collection-product .c-product-image img {
  height: 100%;
  object-fit: fill;
  width: 100%;
}
.c-collection-product .c-product-image > .c-tippy {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.c-collection-product .c-product-image > .c-tippy .image-placeholder {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 10%;
  width: 100%;
}
.c-collection-product .c-product-image > .c-tippy .image-placeholder svg {
  height: 100%;
  width: 100%;
}
.c-collection-product .c-product-image .c-product-ribbon {
  align-items: center;
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  color: hsl(var(--brand-h), var(--s-3), var(--l-6));
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  font-weight: 600;
  inset-inline-start: -30px;
  justify-content: center;
  padding: 4px;
  position: absolute;
  top: 25px;
  transform: rotate(-45deg);
  width: 140px;
}
.c-collection-product .c-product-image .c-product-ribbon.unavailable {
  background: hsl(var(--grey-h), var(--s-0), var(--l-3));
  color: hsl(var(--grey-h), var(--s-0), var(--l-6));
}
.c-collection-product .c-product-image .c-product-ribbon.updated {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
  color: hsl(var(--success-h), var(--s-2), var(--l-6));
}

.c-collection-product.off-screen .c-product-image {
  cursor: default;
}
.c-collection-product.off-screen .c-product-image .c-product-ribbon {
  transform: none;
}

.c-product-quantity {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}
.c-product-quantity.simple .widget {
  gap: 4px;
}
.c-product-quantity .indicators {
  align-items: center;
  display: flex;
  justify-content: center;
}
.c-product-quantity .indicators .btn {
  height: 24px;
}
.c-product-quantity .widget {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}
.c-product-quantity .widget .actions-extended {
  align-items: center;
  display: flex;
  max-width: 0;
  overflow: hidden;
  padding-inline-end: 0;
  transition: max-width 0.3s ease;
}
.c-product-quantity .widget .actions-extended.active {
  max-width: 100%;
}
.c-product-quantity .widget .btn-quantity {
  border-radius: 50%;
  margin: 0;
  padding: 0;
}
.c-product-quantity .widget .input-amount {
  display: flex;
  justify-content: center;
  margin: 0 4px;
  min-width: auto;
  padding: 0;
}
.c-product-quantity .widget .input-amount input {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -moz-appearance: textfield;
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-3));
  border-radius: 50%;
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 0.7rem;
  height: 40px;
  text-align: center;
  width: 40px;
}
.c-product-quantity .widget .input-amount input::-webkit-outer-spin-button, .c-product-quantity .widget .input-amount input::-webkit-inner-spin-button {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-appearance: none;
  margin: 0;
}
.c-product-quantity .widget .actions {
  align-items: center;
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  border: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-5));
  border-top: 0;
  display: flex;
  justify-content: center;
  padding: 0;
}
.c-product-quantity .widget .actions button {
  border: none;
  border-radius: 0;
  flex: 1;
}
.c-product-quantity.invalid .widget .input-amount input {
  border: 1px solid hsl(var(--warning-h), var(--s-3), var(--l-3));
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-product-quantity.unavailable .widget .c-text,
.c-product-quantity.unavailable .widget .btn-right {
  display: none;
}
.c-product-quantity .round-up-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  font-size: 11px;
}

.footer-fun-fact-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 720px);
  max-width: 420px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.footer-fun-fact-modal-backdrop {
  align-items: center;
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 16px;
  position: fixed;
  z-index: 1000010;
}

.footer-fun-fact-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 720px);
  max-width: 420px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.footer-fun-fact-modal-close {
  align-items: center;
  background: none;
  border: none;
  color: #111;
  cursor: pointer;
  display: flex;
  inset-inline-end: 8px;
  padding: 8px;
  position: absolute;
  top: 8px;
  z-index: 2;
}
.footer-fun-fact-modal-close:focus-visible {
  outline: 2px solid hsl(var(--info-h), var(--s-3), var(--l-1));
  outline-offset: 2px;
}

.footer-fun-fact-modal-text {
  padding: 32px 24px 24px;
  padding-inline-end: 40px;
}

.footer-fun-fact-modal-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}

.footer-fun-fact-modal-body {
  color: #444;
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 24px;
}

.footer-fun-fact-modal-cta {
  border: 2px solid hsl(var(--info-h), var(--s-3), var(--l-1));
  border-radius: 999px;
  color: #111;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 24px;
  text-decoration: none;
  text-transform: uppercase;
}
.footer-fun-fact-modal-cta:hover {
  border-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}

.footer-fun-fact-modal-image-wrap {
  flex-shrink: 0;
  line-height: 0;
  margin-top: auto;
}

.footer-fun-fact-modal-image {
  display: block;
  height: auto;
  max-height: 38vh;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.c-cart-errors {
  background: #fff;
  border-bottom: 1px solid hsl(var(--warning-h), var(--s-3), var(--l-3));
  display: flex;
  flex-direction: column;
  width: 100%;
}
.c-cart-errors .category .body {
  display: flex;
  flex-direction: column;
}
.c-cart-errors .category .body .product-line .product-name {
  cursor: pointer;
}
.c-cart-errors .category .body .product-line .product-name:hover {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}

.confirmations {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  width: 100%;
}
.confirmations .confirmation {
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  padding: 4px 8px;
  transition: max-height 0.3s ease;
}
.confirmations .confirmation .acknowledge {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
  border: 1px solid hsl(var(--warning-h), var(--s-3), var(--l-3));
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
  margin-top: 8px;
  padding: 8px 8px;
}
.confirmations .confirmation .acknowledge > .help {
  align-items: center;
  display: flex;
  gap: 4px;
}
.confirmations .confirmation .acknowledge .field {
  color: hsl(var(--warning-h), var(--s-3), var(--l-6));
  font-weight: 600;
  margin-bottom: 16px;
  margin-top: 8px;
}
.confirmations .confirmation .field {
  margin-bottom: 16px;
}
.confirmations .confirmation .field.c-radio-group .help {
  bottom: unset;
  margin: 0;
  overflow: unset;
  position: relative;
  white-space: normal;
}
.confirmations .confirmation.active {
  max-height: 500px;
}

/**
 * {@link Tile} variants — used inside {@link AsyncBlock} panels.
 */
/* --- photo_wash (full-bleed stat tiles) ---------------------------------- */
.c-async-block-panel-photo-strip .tile-photo-stat-tile {
  appearance: none;
  background-color: var(--surface, #fff);
  background-position: center;
  background-size: cover;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  flex: 1 1 0;
  font: inherit;
  min-height: 350px;
  min-width: 160px;
  overflow: hidden;
  padding: 32px 24px;
  position: relative;
  text-align: center;
  transition: box-shadow 0.2s ease;
}
.c-async-block-panel-photo-strip .tile-photo-stat-tile::before {
  background: linear-gradient(to bottom, hsl(var(--info-h), var(--s-3), var(--l-2)) 0%, hsl(calc(var(--info-h) + 14deg), var(--s-1), var(--l-5)) 100%);
  content: "";
  inset: 0;
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.c-async-block-panel-photo-strip .tile-photo-stat-tile:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.c-async-block-panel-photo-strip .tile-photo-stat-tile .tile-stat-glass {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 50%;
  padding: 24px 28px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.c-async-block-panel-photo-strip .tile-photo-stat-tile:hover .tile-stat-glass {
  background: rgba(255, 255, 255, 0.26) !important;
}
.c-async-block-panel-photo-strip .tile-stat-value,
.c-async-block-panel-photo-strip .tile-stat-label {
  position: relative;
  z-index: 1;
}
.c-async-block-panel-photo-strip .tile-stat-value {
  color: #fff;
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
}
.c-async-block-panel-photo-strip .tile-stat-value.scroll-replay-count {
  font-variant-numeric: tabular-nums;
  min-width: 6ch;
}
.c-async-block-panel-photo-strip .tile-stat-label {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.875rem;
  margin-top: 4px;
}

/* --- pill + brand overlay (category / compact brand) ---------------------- */
.c-async-block-panel-grid .c-tile-pill {
  align-items: stretch;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  min-width: 130px;
  overflow: hidden;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-async-block-panel-grid .c-tile-pill .carousel-item-visual {
  flex-shrink: 0;
  position: relative;
  width: 100%;
}
.c-async-block-panel-grid .c-tile-pill .carousel-item-visual::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(252, 253, 254, 0.22) 38%, rgba(248, 250, 252, 0.48) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.c-async-block-panel-grid .c-tile-pill .carousel-item-visual:has(.placeholder)::after {
  opacity: 0;
}
.c-async-block-panel-grid .c-tile-pill .placeholder {
  background: linear-gradient(165deg, hsl(var(--surface-h, 195deg), 10%, 90%), hsl(var(--surface-h, 195deg), 12%, 84%));
  box-shadow: inset 0 0 0 1px hsl(var(--surface-h, 195deg), 14%, 78%, 45%);
  align-items: center;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  z-index: 0;
}
.c-async-block-panel-grid .c-tile-pill .placeholder .c-icon {
  height: 45%;
  opacity: 0.55;
  width: 45%;
}
.c-async-block-panel-grid .c-tile-pill img {
  aspect-ratio: 1;
  display: block;
  filter: grayscale(1) contrast(1.12);
  object-fit: contain;
  object-position: center top;
  position: relative;
  width: 100%;
  z-index: 0;
}
.c-async-block-panel-grid .c-tile-pill .carousel-item-label {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  bottom: 10px;
  color: rgba(255, 255, 255, 0.96);
  display: block;
  font-weight: 600;
  left: 10px;
  line-height: 1.3;
  padding: 10px 16px;
  position: absolute;
  right: 10px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  z-index: 2;
}
.c-async-block-panel-grid .c-tile-pill:hover {
  background: hsl(var(--surface-h, 195deg), 10%, 98%);
  border-color: hsl(var(--surface-h, 195deg), 12%, 90%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.c-async-block-panel-grid .c-tile-pill:hover .carousel-item-label {
  background: hsl(var(--brand-h), var(--s-3), var(--l-2));
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.c-async-block-panel-grid .c-tile-pill--brand-overlay .carousel-item-label-block {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  bottom: 10px;
  color: rgba(255, 255, 255, 0.96);
  display: flex;
  flex-direction: column;
  gap: 8px;
  left: 10px;
  line-height: 1.35;
  max-height: calc(100% - 16px);
  overflow: hidden;
  padding: 12px 16px;
  position: absolute;
  right: 10px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  z-index: 2;
}
.c-async-block-panel-grid .c-tile-pill--brand-overlay .carousel-item-label-block .carousel-item-label {
  display: block;
  flex-shrink: 0;
  font-weight: 600;
  padding: 0;
  position: static;
  text-shadow: inherit;
}
.c-async-block-panel-grid .c-tile-pill--brand-overlay .carousel-item-description-slot {
  min-height: 2.75rem;
}
.c-async-block-panel-grid .c-tile-pill--brand-overlay .carousel-item-description {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: 0.8125rem;
  font-weight: 400;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  line-height: 1.4;
  opacity: 0.95;
  overflow: hidden;
}
.c-async-block-panel-grid .c-tile-pill--brand-overlay:hover .carousel-item-label-block {
  background: hsl(var(--brand-h), var(--s-3), var(--l-2));
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.c-async-block-panel-grid {
  /* --- brand detail + offer cards (reuse legacy class names) ------------ */
}
.c-async-block-panel-grid .brand-holder-detail-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  font-size: 0.875rem;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-async-block-panel-grid .brand-holder-detail-card:hover {
  background: hsl(var(--surface-h, 195deg), 10%, 98%);
  border-color: hsl(var(--surface-h, 195deg), 12%, 90%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.c-async-block-panel-grid .brand-holder-detail-card-visual {
  flex-shrink: 0;
  position: relative;
  width: 100%;
}
.c-async-block-panel-grid .brand-holder-detail-card-visual .placeholder {
  background: linear-gradient(165deg, hsl(var(--surface-h, 195deg), 10%, 90%), hsl(var(--surface-h, 195deg), 12%, 84%));
  box-shadow: inset 0 0 0 1px hsl(var(--surface-h, 195deg), 14%, 78%, 45%);
  align-items: center;
  aspect-ratio: 4/3;
  display: flex;
  justify-content: center;
  width: 100%;
}
.c-async-block-panel-grid .brand-holder-detail-card-visual .placeholder .c-icon {
  height: 40%;
  opacity: 0.55;
  width: 40%;
}
.c-async-block-panel-grid .brand-holder-detail-card-visual img {
  aspect-ratio: 4/3;
  display: block;
  filter: grayscale(1) contrast(1.12);
  object-fit: cover;
  object-position: center;
  width: 100%;
}
.c-async-block-panel-grid .brand-holder-detail-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-height: 7.5rem;
  padding: 16px 16px 24px;
}
.c-async-block-panel-grid .brand-holder-detail-card-name {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.c-async-block-panel-grid .brand-holder-detail-card-tagline {
  color: hsl(var(--surface-h, 195deg), 8%, 38%);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
}
.c-async-block-panel-grid .brand-holder-detail-card-description-slot {
  flex: 1;
  margin: 4px 0;
  min-height: 5rem;
}
.c-async-block-panel-grid .brand-holder-detail-card-description {
  -webkit-box-orient: vertical;
  color: hsl(var(--surface-h, 195deg), 12%, 18%);
  display: -webkit-box;
  font-size: 0.8125rem;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  line-height: 1.55;
  margin: 0;
  min-height: 0;
  overflow: hidden;
}
.c-async-block-panel-grid .brand-holder-detail-card-footer {
  border-top: 1px solid var(--border, #e8e8e8);
  color: hsl(var(--surface-h, 195deg), 8%, 42%);
  font-size: 0.75rem;
  line-height: 1.45;
  margin: 0;
  padding-top: 8px;
}
.c-async-block-panel-grid .offer-placeholder {
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  max-width: 275px;
  overflow: hidden;
  padding: 16px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-async-block-panel-grid .offer-placeholder:hover {
  background: hsl(var(--brand-h), var(--s-1), 98%);
  border-color: hsl(var(--brand-h), var(--s-2), 85%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.c-async-block-panel-grid .offer-placeholder .img-placeholder {
  align-items: center;
  aspect-ratio: 1;
  background: var(--surface-hover, #eee);
  border-radius: 6px;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 100%;
}
.c-async-block-panel-grid .offer-placeholder .img-placeholder svg {
  height: 60%;
  width: 60%;
}
.c-async-block-panel-grid .offer-placeholder img {
  aspect-ratio: 1;
  display: block;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
.c-async-block-panel-grid .offer-placeholder .label {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 500;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin-top: 16px;
  min-height: 2.6em;
  overflow: hidden;
  text-align: center;
}

.view-team-member {
  margin: 0;
}

.view-team-member-inner {
  background: #fff;
  border: 1px solid hsl(var(--surface-h, 195deg), 10%, 86%);
  border-left: 4px solid var(--funnel-accent-teal, #01a2c6);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 45, 60, 0.06), 0 4px 14px rgba(0, 45, 60, 0.05);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 112px minmax(0, 1fr);
  height: 100%;
  min-height: 100%;
  padding: 1.35rem 1.35rem 1.35rem calc(1.35rem - 3px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.view-team-member-inner:hover {
  border-color: hsl(var(--surface-h, 195deg), 10%, 78%);
  box-shadow: 0 2px 4px rgba(0, 45, 60, 0.07), 0 8px 22px rgba(0, 45, 60, 0.07);
}
@media (width <= 480px) {
  .view-team-member-inner {
    gap: 1rem;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 1.25rem 1.15rem;
    text-align: center;
  }
}

.view-team-member-photo {
  align-self: start;
  flex-shrink: 0;
}
@media (width <= 480px) {
  .view-team-member-photo {
    align-self: center;
  }
}

.view-team-member-photo img {
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 45, 60, 0.12);
  display: block;
  height: 112px;
  object-fit: cover;
  width: 112px;
}

.view-team-member-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (width <= 480px) {
  .view-team-member-content {
    align-items: center;
    width: 100%;
  }
}

.view-team-member-name {
  color: var(--grey-1, #333);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.2rem;
}

.view-team-member-role {
  color: var(--funnel-accent-teal, #01a2c6);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.view-team-member-quote {
  border: none;
  color: #000;
  flex: 1 1 auto;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.55;
  margin: 0 0 0.85rem;
  padding: 0;
}
@media (width <= 480px) {
  .view-team-member-quote {
    text-align: center;
  }
}

.view-team-member-email {
  color: var(--funnel-accent-teal, #01a2c6);
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: auto;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.view-team-member-email:hover {
  color: #017691;
  text-decoration: underline;
  text-decoration-color: rgba(1, 118, 145, 0.45);
  text-underline-offset: 0.2em;
}
.view-team-member-email:visited {
  color: var(--funnel-accent-teal, #01a2c6);
}

.content-figure {
  display: block;
  margin: 0 0 3rem;
  max-width: 720px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.content-figure-img {
  display: block;
  filter: grayscale(100%);
  height: auto;
  max-width: 100%;
  width: 100%;
}

.content-figure::after {
  background: linear-gradient(to bottom, hsl(var(--info-h), var(--s-3), var(--l-2)) 0%, hsl(calc(var(--info-h) + 14deg), var(--s-1), var(--l-5)) 100%);
  content: "";
  inset: 0;
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* Shared responsive card grid (team page, CMS “meet the team” blocks, any 2→1 column card strip). */
.view-card-grid-section {
  background: hsl(var(--surface-h, 195deg), 14%, 94%);
  border: 1px solid hsl(var(--surface-h, 195deg), 12%, 88%);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.view-card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (width <= 720px) {
  .view-card-grid {
    grid-template-columns: 1fr;
  }
}

.usps {
  background: var(--surface-hover, #f5f6f7);
  border-bottom: 1px solid var(--border, #e9ecef);
  border-top: 1px solid var(--border, #e9ecef);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 40px 16px;
}
.usps .usp-item {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 20px 28px;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.usps .usp-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.usps .usp-item .usp-value {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
}
.usps .usp-item .usp-value--replay-count {
  font-variant-numeric: tabular-nums;
  min-width: 5.5ch;
}
.usps .usp-item .usp-label {
  color: var(--grey-3, #666);
  font-size: 0.875rem;
  margin-top: 4px;
}

.hero-content-block {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 32px;
  text-align: left;
}
.hero-content-block--has-background {
  background-position: center top;
  background-size: cover;
}
.hero-content-block__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (width >= 768px) {
  .hero-content-block:has(.hero-content-block__media) .hero-content-block__inner {
    align-items: flex-start;
    flex-direction: row;
    gap: 32px;
  }
}
.hero-content-block__media {
  flex-shrink: 0;
}
.hero-content-block__img {
  border-radius: 0.5rem;
  display: block;
  max-width: min(100%, 420px);
  object-fit: cover;
}
.hero-content-block__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.hero-content-block__title {
  color: var(--funnel-heading-ink, hsl(196, 22%, 16%));
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}
.hero-content-block__text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}
.hero-content-block__text p {
  margin: 0 0 16px;
}
.hero-content-block__text p:last-child {
  margin-bottom: 0;
}
.hero-content-block--band.hero-content-block--has-background {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 3rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  min-height: 12rem;
  overflow: hidden;
  position: relative;
  width: 100vw;
}
.hero-content-block--band.hero-content-block--has-background::before {
  background: linear-gradient(to bottom, hsl(var(--info-h), var(--s-3), var(--l-2)) 0%, hsl(calc(var(--info-h) + 14deg), var(--s-1), var(--l-5)) 100%);
  content: "";
  inset: 0;
  opacity: 0.45;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.hero-content-block--band.hero-content-block--has-background .hero-content-block__inner {
  flex: 0 1 auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding-bottom: 32px;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 32px;
  position: relative;
  width: 100%;
  z-index: 1;
}
.hero-content-block--band .hero-content-block__title {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.hero-content-block--band .hero-content-block__text {
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.hero-content-block--band .hero-content-block__text p {
  color: inherit;
}
.hero-content-block--band .hero-content-block__cta .c-button {
  align-items: center;
  align-self: flex-start;
  appearance: none;
  background: linear-gradient(180deg, #fff 0%, hsl(var(--success-h), 18%, 97%) 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 4px 14px rgba(0, 35, 40, 0.22), 0 2px 4px rgba(0, 25, 30, 0.12);
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  gap: 0.5rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin: 0;
  padding: 12px 24px 12px 20px;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hero-content-block--band .hero-content-block__cta .c-button:hover {
  background: linear-gradient(180deg, #fff 0%, hsl(var(--success-h), 22%, 94%) 100%);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 20px rgba(0, 45, 50, 0.28), 0 2px 6px rgba(0, 30, 35, 0.14);
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
  transform: translateY(-2px);
}
.hero-content-block--band .hero-content-block__cta .c-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}
.hero-content-block--band .hero-content-block__cta .c-button:active {
  transform: translateY(0);
}
.hero-content-block--band .hero-content-block__cta .hero-content-block__pill-link {
  align-items: center;
  align-self: flex-start;
  appearance: none;
  background: linear-gradient(180deg, #fff 0%, hsl(var(--success-h), 18%, 97%) 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 4px 14px rgba(0, 35, 40, 0.22), 0 2px 4px rgba(0, 25, 30, 0.12);
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  gap: 0.5rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin: 0;
  padding: 12px 24px 12px 20px;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hero-content-block--band .hero-content-block__cta .hero-content-block__pill-link:hover {
  background: linear-gradient(180deg, #fff 0%, hsl(var(--success-h), 22%, 94%) 100%);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 20px rgba(0, 45, 50, 0.28), 0 2px 6px rgba(0, 30, 35, 0.14);
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
  transform: translateY(-2px);
}
.hero-content-block--band .hero-content-block__cta .hero-content-block__pill-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}
.hero-content-block--band .hero-content-block__cta .hero-content-block__pill-link:active {
  transform: translateY(0);
}
.hero-content-block--band .hero-content-block__cta .hero-content-block__pill-icon-wrap {
  display: flex;
  flex-shrink: 0;
  line-height: 0;
}
.hero-content-block--band .hero-content-block__cta .hero-content-block__pill-icon-wrap .c-icon {
  display: block;
}
.hero-content-block--band .hero-content-block__cta .hero-content-block__pill-label {
  line-height: 1.2;
}

/*
 * Stats + brand marquee hero (landing): full-bleed band with `custom_inner` on {@link HeroBand}.
 * Was only in portal `content_view.scss`; sandbox needs it in the components bundle.
 */
.stats-hero-band {
  position: relative;
  /* Overrides `justify-content: center` on `.hero-content-block--band.hero-content-block--has-background` so the marquee can sit on the bottom with `margin-top: auto`. */
}
.stats-hero-band.hero-content-block--band.hero-content-block--has-background {
  /* Below the last flex item (marquee): flex layout ignores descendant padding for “empty” wash space. */
  justify-content: flex-start;
  min-height: 520px;
  padding-bottom: 48px;
}
.stats-hero-band {
  /* Photo + teal wash live on `.hero-content-block--has-background`. */
}
.stats-hero-band .brand-tiles--on-stats {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  /* Horizontal padding + vertical spacing under the track: `.brand-tiles--marquee` + `&.brand-tiles--on-stats`. */
  /* Match `.usp-item` glass panels above — frosted chips on the photo wash. */
}
.stats-hero-band .brand-tiles--on-stats .brand-tile {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 35, 45, 0.14);
  color: hsl(var(--info-h), var(--s-3), var(--l-0));
  font-weight: 600;
}
.stats-hero-band .brand-tiles--on-stats .brand-tile img {
  filter: none;
}
.stats-hero-band .brand-tiles--on-stats .brand-tile:hover {
  background: rgba(255, 255, 255, 0.64);
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 4px 18px rgba(0, 35, 45, 0.18);
  color: hsl(var(--info-h), var(--s-3), var(--l-0));
}
.stats-hero-band {
  /* Column limits headline/USPs; `.stats-hero__footer` is a sibling so the marquee spans the full band width. */
}
.stats-hero-band.hero-content-block--band.hero-content-block--has-background .hero-content-block__inner.stats-hero-inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}
.stats-hero-band .stats-hero__footer {
  align-self: stretch;
  flex-shrink: 0;
  margin-top: auto;
  max-width: none;
  position: relative;
  width: 100%;
  z-index: 1;
}
.stats-hero-band .stats-hero__footer .brand-tiles--on-stats {
  padding-left: 0;
  padding-right: 0;
}
.stats-hero-band .stats-section {
  align-content: center;
  /* Space before brand strip (still inside HeroBand). */
  padding-bottom: 16px;
  position: relative;
  z-index: 1;
}
@media (width <= 768px) {
  .stats-hero-band {
    min-height: 600px;
  }
}

.stats-section {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 0 auto;
  max-width: 1200px;
  padding: 48px 32px;
  position: relative;
  width: 100%;
  z-index: 1;
}
@media (width <= 768px) {
  .stats-section {
    flex-direction: column;
    padding: 40px 32px;
  }
}
.stats-section__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  max-width: 480px;
}
.stats-section__title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.stats-section__description {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.stats-section__cta {
  align-items: center;
  align-self: flex-start;
  appearance: none;
  background: linear-gradient(180deg, #fff 0%, hsl(var(--info-h), 18%, 97%) 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 4px 14px rgba(0, 35, 40, 0.22), 0 2px 4px rgba(0, 25, 30, 0.12);
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  gap: 0.5rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin: 0;
  padding: 12px 24px 12px 20px;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.stats-section__cta:hover {
  background: linear-gradient(180deg, #fff 0%, hsl(var(--info-h), 22%, 94%) 100%);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 20px rgba(0, 45, 50, 0.28), 0 2px 6px rgba(0, 30, 35, 0.14);
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  transform: translateY(-2px);
}
.stats-section__cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}
.stats-section__cta:active {
  transform: translateY(0);
}
.stats-section__cta-icon-wrap {
  display: flex;
  flex-shrink: 0;
  line-height: 0;
}
.stats-section__cta-icon-wrap .c-icon {
  display: block;
}
.stats-section__cta-label {
  line-height: 1.2;
}
.stats-section__stats {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}
@media (width <= 768px) {
  .stats-section__stats {
    justify-content: flex-start;
  }
}
.stats-section__stats .usps {
  align-items: center;
  background: none;
  border: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-end;
  margin-top: 150px;
}
@media (width <= 768px) {
  .stats-section__stats .usps {
    justify-content: flex-start;
  }
}
.stats-section__stats .usp-item {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.52) !important;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 35, 45, 0.14);
  padding: 24px 28px;
}
.stats-section__stats .usp-item:hover {
  background: rgba(255, 255, 255, 0.64) !important;
}
.stats-section__stats .usp-item {
  /* Match funnel photo-tile stat text — white on frosted glass over photo. */
}
.stats-section__stats .usp-item .usp-value {
  color: #fff !important;
  font-size: 1.75rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.stats-section__stats .usp-item .usp-value--replay-count {
  font-variant-numeric: tabular-nums;
  min-width: 5.5ch;
}
.stats-section__stats .usp-item .usp-label {
  color: rgba(255, 255, 255, 0.95) !important;
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin-top: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/**
 * Async CMS section shell: teal bar title + panel (see {@link AsyncBlock}).
 */
.c-async-block {
  margin-bottom: 48px;
}

.c-async-block-title {
  border-inline-start: 4px solid var(--funnel-accent-teal, #01a2c6);
  color: hsl(var(--info-h), var(--s-3), var(--l-0));
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 24px;
  padding: 0.15em 0 0.15em 24px;
}

.c-async-block-panel {
  background: hsl(var(--surface-h, 195deg), 14%, 94%);
  border: 1px solid hsl(var(--surface-h, 195deg), 12%, 88%);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* One responsive grid for all tile variants; visual treatment is owned by `Tile`.
   `auto-fit` collapses empty tracks so any number of items fills the full width.
   A 180 px minimum fits ~5 tiles side-by-side on typical desktop containers. */
.c-async-block-panel-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Stat photo tiles: no outer frame; flex strip */
.c-async-block-panel-photo-strip {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 0;
  width: 100%;
}

.view-outline-link.c-link.type-info {
  border: 2px solid var(--funnel-accent-teal, #01a2c6);
  border-radius: 4px;
  color: var(--funnel-accent-teal, #01a2c6);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.view-outline-link.c-link.type-info:hover {
  background: var(--funnel-accent-teal-hover-fill);
  border-color: var(--funnel-accent-teal-hover, #017691);
  color: var(--funnel-accent-teal-hover, #017691);
  text-decoration: none;
}
.view-outline-link.c-link.type-info:visited {
  color: var(--funnel-accent-teal, #01a2c6);
}
.view-outline-link.c-link.type-info:visited:hover {
  color: var(--funnel-accent-teal-hover, #017691);
}
.view-outline-link.c-link.type-info {
  align-items: center;
  display: inline-flex;
  gap: 0.4em;
}
.view-outline-link.c-link.type-info--arrow::after {
  content: "→";
  font-size: 1.15em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.view-outline-link.c-link.type-info--arrow:hover::after {
  transform: translateX(4px);
}

/* Shared wrapper — variant modifiers carry typography. */
.view-prose {
  box-sizing: border-box;
  display: block;
}

/* Marketing / CMS body copy: optional headings (e.g. teal-bar h2) + paragraphs. */
.view-prose--normal {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 2.5rem;
  margin-left: 0;
  margin-right: auto;
  margin-top: 0;
  max-width: min(720px, 100%);
}
.view-prose--normal h1,
.view-prose--normal h2,
.view-prose--normal h3 {
  color: var(--funnel-heading-ink, hsl(196, 22%, 16%));
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}
.view-prose--normal h1 {
  font-size: 1.75rem;
}
.view-prose--normal h2 {
  border-left: 4px solid var(--funnel-accent-teal, #01a2c6);
  color: var(--funnel-heading-ink);
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 24px;
  padding: 0.15em 0 0.15em 24px;
}
.view-prose--normal h3 {
  font-size: 1.15rem;
}
.view-prose--normal p {
  color: var(--grey-2, #444);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 1rem;
  max-width: 65ch;
}
.view-prose--normal p:last-child {
  margin-bottom: 0;
}
.view-prose--normal ul,
.view-prose--normal ol {
  margin: 0 0 16px;
  padding-left: 1.25rem;
}
.view-prose--normal li {
  color: var(--grey-2, #444);
  margin-bottom: 8px;
}

/* Legal / privacy long-form (narrower measure). */
.view-prose--narrow {
  color: var(--grey-2, #444);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 42rem;
  padding: 0 0 16px;
}
.view-prose--narrow .funnel-legal-lead {
  color: var(--funnel-heading-ink);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.55;
  margin: 0 0 32px;
}
.view-prose--narrow h2 {
  border-left: 4px solid var(--funnel-accent-teal, #01a2c6);
  color: var(--funnel-heading-ink);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 40px 0 24px;
  padding: 0.15em 0 0.15em 24px;
}
.view-prose--narrow h2:first-of-type {
  margin-top: 0;
}
.view-prose--narrow h3 {
  color: var(--funnel-heading-ink);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 32px 0 16px;
}
.view-prose--narrow p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 24px;
}
.view-prose--narrow ul,
.view-prose--narrow ol {
  line-height: 1.6;
  margin: 0 0 24px;
  padding-left: 1.35rem;
}
.view-prose--narrow li {
  line-height: 1.6;
  margin-bottom: 8px;
}
.view-prose--narrow li + li {
  margin-top: 0.2em;
}
.view-prose--narrow p + b {
  margin-top: 16px;
}

.quote-card {
  background: var(--surface-hover, #f5f6f7);
  border: 1px solid var(--border, #e9ecef);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 45, 60, 0.05);
  border-left: 4px solid var(--funnel-accent-teal, #01a2c6);
  max-width: 720px;
  margin-bottom: 2rem;
  padding: 32px 3.5rem 32px 40px;
  position: relative;
}
.quote-card p {
  color: var(--grey-1, #333);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.65;
  margin: 0;
}
.quote-card--with-mark::before {
  color: var(--funnel-accent-teal, #01a2c6);
  content: "“";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
  line-height: 1;
  opacity: 0.3;
  pointer-events: none;
  position: absolute;
  right: 24px;
  top: 16px;
}
@media (width <= 520px) {
  .quote-card {
    padding: 24px 24px 24px 32px;
  }
  .quote-card--with-mark::before {
    display: none;
  }
}

/* Co-located with {@link MarqueeStrip} — was only in portal `content_view.scss`, so sandbox missed marquee CSS. */
.brand-tiles h3,
.pallet-deals h3 {
  color: hsl(var(--info-h), var(--s-3), var(--l-0));
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.brand-tiles .brand-tile {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 10px 20px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.brand-tiles .brand-tile:hover {
  background: hsl(var(--brand-h), var(--s-1), 98%);
  border-color: hsl(var(--brand-h), var(--s-2), 85%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}

.brand-tiles .tiles,
.brand-tiles__tiles {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
}
.brand-tiles .tiles .brand-tile,
.brand-tiles__tiles .brand-tile {
  align-items: center;
  border-radius: 8px;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  min-height: 70px;
  min-width: 90px;
  padding: 12px;
  transition: all 0.2s ease;
}
.brand-tiles .tiles .brand-tile img,
.brand-tiles__tiles .brand-tile img {
  max-height: 44px;
  max-width: 90px;
  object-fit: contain;
}

/* Marquee / stock ticker variant */
.brand-tiles--marquee {
  padding: 0;
  /* Stats hero: keep space under the track (root `padding: 0` would flush pills to the band edge). */
}
.brand-tiles--marquee.brand-tiles--on-stats {
  padding-left: 0;
  padding-right: 0;
  padding-top: 16px;
}
.brand-tiles--marquee .brand-tiles__title {
  border-left: 4px solid var(--funnel-accent-teal, #01a2c6);
  color: hsl(var(--info-h), var(--s-3), var(--l-0));
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 auto 24px;
  max-width: 1200px;
  padding: 0.15em 0 0.15em 24px;
  text-align: left;
  text-transform: none;
  width: 100%;
}
.brand-tiles--marquee .brand-tiles__track-wrapper {
  overflow: hidden;
  width: 100%;
}
.brand-tiles--marquee .brand-tiles__track-wrapper:hover .brand-tiles__track {
  animation-play-state: paused;
}
.brand-tiles--marquee .brand-tiles__track {
  animation: brand-marquee 15s linear infinite;
  display: flex;
  width: max-content;
}
.brand-tiles--marquee .brand-tiles__tiles {
  flex-shrink: 0;
  padding: 0 16px;
}

@keyframes brand-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-tiles--marquee .brand-tiles__track {
    animation: none;
    width: 100%;
  }
  .brand-tiles--marquee .brand-tiles__tiles:last-child {
    display: none;
  }
  .brand-tiles--marquee .brand-tiles__tiles {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.link-card-grid {
  margin-bottom: 2.5rem;
}

.link-card-grid-title {
  border-left: 4px solid var(--funnel-accent-teal, #01a2c6);
  color: var(--funnel-heading-ink, hsl(196, 22%, 16%));
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 24px;
  padding: 0.15em 0 0.15em 24px;
}

.link-card-grid-panel {
  background: hsl(var(--surface-h, 195deg), 14%, 94%);
  border: 1px solid hsl(var(--surface-h, 195deg), 12%, 88%);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  margin-bottom: 32px;
  max-width: 900px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.link-card-grid-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (width <= 520px) {
  .link-card-grid-list {
    grid-template-columns: 1fr;
  }
}
.link-card-grid-list > li {
  display: flex;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}
.link-card-grid-list > li::marker {
  content: none;
}

.link-card-grid-card {
  align-items: flex-start;
  background: #fff;
  border: 1px solid hsl(var(--surface-h, 195deg), 10%, 86%);
  border-left: 4px solid var(--funnel-accent-teal, #01a2c6);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 45, 60, 0.06), 0 4px 12px rgba(0, 45, 60, 0.04);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 100%;
  padding: 1.1rem 1.1rem 1.1rem calc(1.1rem - 3px);
  text-align: left;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.link-card-grid-card:hover {
  border-color: hsl(var(--surface-h, 195deg), 10%, 78%);
  box-shadow: 0 2px 4px rgba(0, 45, 60, 0.07), 0 8px 18px rgba(0, 45, 60, 0.06);
  text-decoration: none;
}
.link-card-grid-card:visited {
  color: inherit;
}

.link-card-grid-card-title {
  color: var(--grey-1, #333);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  max-width: 100%;
}

.link-card-grid-card-line {
  color: var(--funnel-accent-teal, #01a2c6);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.link-card-grid-card-icon {
  align-self: flex-end;
  color: var(--funnel-accent-teal, #01a2c6);
  flex-shrink: 0;
  line-height: 0;
  margin-top: auto;
  padding-top: 0.5rem;
}

.link-card-grid-cta-wrap {
  margin: 0;
  max-width: 720px;
}

.link-card-grid-browse.c-link.type-info {
  align-items: center;
  border: 2px solid var(--funnel-accent-teal, #01a2c6);
  border-radius: 4px;
  color: var(--funnel-accent-teal, #01a2c6);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  gap: 0.4em;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.link-card-grid-browse.c-link.type-info:hover {
  background: var(--funnel-accent-teal-hover-fill);
  border-color: var(--funnel-accent-teal-hover, #017691);
  color: var(--funnel-accent-teal-hover, #017691);
  text-decoration: none;
}
.link-card-grid-browse.c-link.type-info:visited {
  color: var(--funnel-accent-teal, #01a2c6);
}
.link-card-grid-browse.c-link.type-info:visited:hover {
  color: var(--funnel-accent-teal-hover, #017691);
}
.link-card-grid-browse.c-link.type-info svg {
  flex-shrink: 0;
}

/* Co-located with PersonalCard — was in portal `content_view.scss`. */
.personal-block {
  background: var(--surface-hover, #f5f6f7);
  border: 1px solid var(--border, #e9ecef);
  border-radius: 8px;
  margin-bottom: 48px;
  overflow: hidden;
}

.personal-block-content {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr 1fr;
  padding: 40px 32px;
}
@media (width <= 768px) {
  .personal-block-content {
    grid-template-columns: 1fr;
  }
}

.personal-block-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.personal-block-title {
  color: var(--grey-1, #333);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.personal-block-description {
  color: var(--grey-2, #444);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.personal-block-quote {
  align-items: flex-start;
  display: flex;
  gap: 24px;
}

.personal-block-profile {
  flex-shrink: 0;
}

.personal-block-profile-img {
  border-radius: 50%;
  height: 120px;
  object-fit: cover;
  width: 120px;
}

.personal-block-quote-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.personal-block-quote-text {
  color: var(--funnel-accent-teal);
  font-size: 1.1rem;
  font-style: normal;
  line-height: 1.6;
  margin: 0;
}

.personal-block-attribution {
  color: var(--grey-2, #444);
  font-size: 0.9rem;
  font-style: normal;
}

/* Override `.c-link.type-info:hover { color: $brand-3 }` — needs `.c-link.type-info` in selector. */
.personal-block-btn.c-link.type-info {
  border: 2px solid var(--funnel-accent-teal, #01a2c6);
  border-radius: 4px;
  color: var(--funnel-accent-teal, #01a2c6);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.personal-block-btn.c-link.type-info:hover {
  background: var(--funnel-accent-teal-hover-fill);
  border-color: var(--funnel-accent-teal-hover, #017691);
  color: var(--funnel-accent-teal-hover, #017691);
  text-decoration: none;
}
.personal-block-btn.c-link.type-info:visited {
  color: var(--funnel-accent-teal, #01a2c6);
}
.personal-block-btn.c-link.type-info:visited:hover {
  color: var(--funnel-accent-teal-hover, #017691);
}
.personal-block-btn.c-link.type-info {
  align-self: flex-start;
}

.checkmark-list {
  background: var(--surface-hover, #f5f6f7);
  border: 1px solid var(--border, #e9ecef);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 45, 60, 0.05);
  max-width: 720px;
  color: var(--grey-1, #333);
  display: flex;
  flex-direction: column;
  font-size: 1.05rem;
  font-weight: 600;
  gap: 24px;
  letter-spacing: 0.01em;
  line-height: 1.45;
  list-style: none;
  margin: 0 0 32px;
  padding: 32px 32px;
}
.checkmark-list li {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
}
.checkmark-list li::before {
  align-items: center;
  background: var(--funnel-accent-teal, #01a2c6);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(1, 118, 145, 0.22);
  color: #fff;
  content: "✓";
  display: flex;
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 800;
  height: 1.65rem;
  justify-content: center;
  line-height: 1;
  margin-top: 0.12em;
  width: 1.65rem;
}

.element {
  display: flex;
  padding: 4px 0;
}
.element .help {
  font-size: 0.8rem;
  font-style: italic;
}
.element .label {
  color: var(--info-1);
  margin-bottom: 4px;
}

.c-filter-workflow {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  border-left: 3px solid hsl(var(--info-h), var(--s-2), var(--l-3));
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0;
  position: relative;
  transition: all 0.2s ease;
  width: 100%;
}
.c-filter-workflow::before {
  background: hsl(var(--info-h), var(--s-2), var(--l-3));
  content: "";
  height: 2px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.2s ease;
  width: 100%;
}
.c-filter-workflow.is-active {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3));
  border-left-color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.c-filter-workflow.is-active::before {
  opacity: 1;
}
.c-filter-workflow .filter-workflow-badge {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
}
.c-filter-workflow .filter-workflow-badge-icon-wrapper {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
  width: 32px;
}
.c-filter-workflow .filter-workflow-badge-icon-wrapper:hover:not(:disabled) {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.c-filter-workflow .filter-workflow-badge-icon-wrapper:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.c-filter-workflow .filter-workflow-badge-content {
  flex: 1;
  min-width: 0;
}
.c-filter-workflow .filter-workflow-badge-label {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.c-filter-workflow .filter-workflow-badge-active-name {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 4px;
}
.c-filter-workflow .filter-workflow-badge-hint {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  font-size: 0.7rem;
  font-style: italic;
  margin-top: 4px;
}
.c-filter-workflow .filter-workflow-options {
  border-top: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px 16px;
}
.c-filter-workflow .filter-workflow-option {
  align-items: center;
  background: #fff;
  border: 2px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  border-radius: 4px;
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  cursor: pointer;
  display: flex;
  font-weight: 400;
  gap: 8px;
  padding: 12px 16px;
  position: relative;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
}
.c-filter-workflow .filter-workflow-option:hover:not(.filter-workflow-option-completed) {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3));
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-filter-workflow .filter-workflow-option:hover:not(.filter-workflow-option-completed) .filter-workflow-option-radio {
  border-color: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-filter-workflow .filter-workflow-option.filter-workflow-option-completed {
  background: hsl(var(--success-h), var(--s-2), var(--l-6));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-4));
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-filter-workflow .filter-workflow-option.filter-workflow-option-completed .filter-workflow-option-radio {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-filter-workflow .filter-workflow-option.filter-workflow-option-completed .filter-workflow-option-count {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
  font-weight: 500;
}
.c-filter-workflow .filter-workflow-option.filter-workflow-option-completed .filter-workflow-option-check {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-filter-workflow .filter-workflow-option.filter-workflow-option-completed:hover {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-filter-workflow .filter-workflow-option-active {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3));
  border-left-width: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  font-weight: 500;
}
.c-filter-workflow .filter-workflow-option-active .filter-workflow-option-radio {
  background: hsl(var(--info-h), var(--s-2), var(--l-3));
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-filter-workflow .filter-workflow-option-active.filter-workflow-option-completed {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-3));
  border-left-color: hsl(var(--success-h), var(--s-2), var(--l-2));
  border-left-width: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.c-filter-workflow .filter-workflow-option-active.filter-workflow-option-completed .filter-workflow-option-radio {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-filter-workflow .filter-workflow-option-active.filter-workflow-option-completed .filter-workflow-option-check {
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
}
.c-filter-workflow .filter-workflow-option-radio {
  align-items: center;
  background: #fff;
  border: 2px solid hsl(var(--grey-h), var(--s-0), var(--l-4));
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 18px;
  justify-content: center;
  transition: all 0.15s ease;
  width: 18px;
}
.c-filter-workflow .filter-workflow-option-radio-dot {
  background: #fff;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}
.c-filter-workflow .filter-workflow-option-label {
  flex: 1;
}
.c-filter-workflow .filter-workflow-option-count {
  align-items: center;
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  display: flex;
  font-size: 0.7rem;
  font-weight: 500;
  justify-content: center;
}
.c-filter-workflow .filter-workflow-option-active .filter-workflow-option-count {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-filter-workflow .filter-workflow-option-badge {
  align-items: center;
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  border-radius: 10px;
  color: #fff;
  display: flex;
  font-size: 0.7rem;
  font-weight: 500;
  height: 18px;
  justify-content: center;
  min-width: 18px;
  padding: 0 4px;
}
.c-filter-workflow .filter-workflow-actions {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  border-top: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  padding: 12px 16px;
  padding-bottom: 24px;
}
.c-filter-workflow .filter-workflow-actions .filter-workflow-actions-header {
  align-items: center;
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.c-filter-workflow .filter-workflow-actions-info {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  cursor: help;
  transition: color 0.15s ease;
}
.c-filter-workflow .filter-workflow-actions-info:hover {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-filter-workflow .filter-workflow-actions-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c-filter-workflow .filter-workflow-actions-item {
  align-items: center;
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  display: flex;
  font-size: 0.7rem;
  gap: 4px;
}
.c-filter-workflow .filter-workflow-actions-arrow {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  flex-shrink: 0;
}
.c-filter-workflow.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.field.c-filter-toggle {
  background: none;
  flex-direction: row-reverse;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.field.c-filter-toggle label {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  transition: color 0.3s ease-in-out;
}
.field.c-filter-toggle.active label {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}

.filter {
  width: 100%;
}
.filter * {
  user-select: none;
}
.filter .help-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 300;
}
.filter .title {
  align-items: center;
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding: 8px;
  position: relative;
}
.filter .title .name {
  align-items: center;
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  display: flex;
  font-weight: 500;
  transition: color 0.3s ease;
}
.filter .title .name .btn-filter-toggle:focus {
  outline: none;
}
.filter .title .name .btn-filter-toggle:hover {
  cursor: default;
}
.filter .title .name .btn-filter-toggle.active {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.filter .title .name svg {
  margin-right: 8px;
}
.filter .title .name .count {
  margin-left: 4px;
}
.filter .title .name,
.filter .title .name svg,
.filter .title .btn-collapse {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.filter .title:hover {
  cursor: n-resize;
}
.filter .items {
  border-top: 2px solid hsl(var(--default-h), var(--s-1), var(--l-5));
  max-height: 250px;
  overflow-x: auto;
  padding: 0;
  transition: max-height 0.3s ease-out;
}
.filter .items .c-checkbox-group,
.filter .items .c-radio-group {
  padding: 8px 0;
}
.filter .items .item {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  display: flex;
  padding: 4px 8px;
  transition: color 0.5s;
}
.filter .items .item .radio,
.filter .items .item .checkbox {
  flex: 1;
  margin: 0;
}
.filter .items .item label {
  display: block;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter .items .item .count {
  align-items: center;
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  display: flex;
  font-size: 0.8rem;
  justify-content: flex-end;
}
.filter .items .item.disabled label {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.filter.non-collapsable:not(.active, .disabled) .title:hover, .filter.collapsed:not(.active, .disabled) .title:hover {
  cursor: s-resize;
}
.filter.non-collapsable:not(.active, .disabled) .title .name,
.filter.non-collapsable:not(.active, .disabled) .title .name svg,
.filter.non-collapsable:not(.active, .disabled) .title .btn-collapse, .filter.collapsed:not(.active, .disabled) .title .name,
.filter.collapsed:not(.active, .disabled) .title .name svg,
.filter.collapsed:not(.active, .disabled) .title .btn-collapse {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.filter.non-collapsable .items, .filter.collapsed .items {
  max-height: 0;
  overflow: hidden;
}
.filter.active .title .name .btn-filter-toggle:hover {
  cursor: pointer;
}
.filter.active .title .name,
.filter.active .title .name svg,
.filter.active .title .btn-collapse {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.filter.active.collapsed .title .name .btn-filter-toggle:hover svg {
  color: hsl(var(--brand-h), var(--s-3), var(--l-4));
}
.filter.disabled .title {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.filter.disabled .title .btn-filter-toggle {
  cursor: not-allowed;
}
.filter.disabled .title .name,
.filter.disabled .title .name svg,
.filter.disabled .title .btn-collapse {
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.filter.disabled .title .btn-collapse {
  display: none;
}
.filter.loading .items input {
  border: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.filter.loading .items .count,
.filter.loading .items .item {
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
}

.c-filter-text {
  position: relative;
}
.c-filter-text .title .c-field-text input {
  width: 100%;
}
.c-filter-text .help {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.c-filter-select-range:not(.active) .noUi-connect {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
}
.c-filter-select-range:not(.active) .noUi-target .noUi-base .noUi-connects .noUi-connect {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-filter-select-range.active .noUi-target.noUi-horizontal .noUi-origin .noUi-tooltip {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-filter-select-range .items {
  height: 110px;
  overflow-y: hidden;
  width: 100%;
}
.c-filter-select-range .c-slider {
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 48px;
}
.c-filter-select-range .help {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 300;
  padding-left: 18px;
  padding-top: 32px;
  width: 100%;
}

/* Auth dialog: polished restyle for login/register modal */
/* Solid info surface; pairs with `funnel-info-photo-wash-overlay` on the image */
.c-dialog-auth .c-dialog .dialog {
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-width: 900px;
  min-width: 640px;
  overflow: hidden;
}
.c-dialog-auth .c-dialog .btn-close--floating {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}
.c-dialog-auth .c-dialog .btn-close--floating:hover {
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-dialog-auth .c-dialog .title {
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
  flex-shrink: 0;
  letter-spacing: 0.04em;
  padding: 24px 32px;
}
.c-dialog-auth .c-dialog .title .title-text {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.c-dialog-auth .c-dialog .title .btn-close {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}
.c-dialog-auth .c-dialog .title .btn-close:hover {
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-dialog-auth .c-dialog .body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 !important;
}

.c-dialog-auth-content {
  display: flex;
  flex: 1;
  min-height: 420px;
  min-width: 0;
}
.c-dialog-auth-content .dialog-auth-panel-image {
  align-self: stretch;
  flex-shrink: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 400px;
}
.c-dialog-auth-content .dialog-auth-panel-image img {
  display: block;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
.c-dialog-auth-content .dialog-auth-panel-image {
  /* Wash uses theme info tokens (same hue/lightness scale as $info-1), not stock funnel hexes */
}
.c-dialog-auth-content .dialog-auth-panel-image::before {
  background: linear-gradient(to top, hsl(var(--info-h), var(--s-3), var(--l-1)) 0%, hsl(var(--info-h), var(--s-3), var(--l-2)) 42%, hsl(var(--info-h), var(--s-3), var(--l-3)) 100%);
  content: "";
  inset: 0;
  opacity: 0.68;
  pointer-events: none;
  position: absolute;
}
.c-dialog-auth-content .dialog-auth-panel-image .dialog-auth-image-text {
  bottom: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.8rem;
  left: 0;
  line-height: 1.5;
  padding: 32px 32px 40px;
  position: absolute;
  right: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.c-dialog-auth-content .dialog-auth-panel-image .dialog-auth-image-text blockquote {
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 12px;
}
.c-dialog-auth-content .dialog-auth-panel-image .dialog-auth-image-text cite {
  display: block;
  font-size: 0.875rem;
  opacity: 0.9;
}
.c-dialog-auth-content .dialog-auth-panel-form {
  background: hsl(var(--info-h), var(--s-3), var(--l-0));
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 32px 40px;
}
.c-dialog-auth .dialog--no-title .c-dialog-auth-content .dialog-auth-panel-form {
  padding-top: 48px;
}
.c-dialog-auth-content {
  /* Tabs and form share same content alignment */
}
.c-dialog-auth-content .dialog-auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  margin-left: 0;
  padding-bottom: 16px;
  padding-left: 0;
}
.c-dialog-auth-content .dialog-auth-tabs .tab {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 16px;
  transition: color 0.2s ease, background 0.2s ease;
}
.c-dialog-auth-content .dialog-auth-tabs .tab:hover {
  background: rgba(255, 255, 255, 0.22);
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-dialog-auth-content .dialog-auth-tabs .tab.active {
  background: rgba(255, 255, 255, 0.95);
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
  font-weight: 600;
}
.c-dialog-auth-content .dialog-auth-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-left: 0;
  min-height: 0;
  overflow: hidden;
  padding-left: 0;
}
.c-dialog-auth-content .dialog-auth-forgot {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-left: 0;
  min-height: 0;
  overflow-y: auto;
  padding-left: 0;
}
.c-dialog-auth-content .dialog-auth-forgot .dialog-auth-forgot-back {
  margin-bottom: 24px;
}
.c-dialog-auth-content .dialog-auth-forgot .dialog-auth-forgot-back .dialog-auth-forgot-back-btn.c-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  color: rgba(255, 255, 255, 0.98) !important;
  display: inline-flex;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 0.02em;
  min-height: 40px;
  padding: 8px 16px 8px 8px;
}
.c-dialog-auth-content .dialog-auth-forgot .dialog-auth-forgot-back .dialog-auth-forgot-back-btn.c-button .c-button-text {
  color: rgba(255, 255, 255, 0.98) !important;
}
.c-dialog-auth-content .dialog-auth-forgot .dialog-auth-forgot-back .dialog-auth-forgot-back-btn.c-button svg {
  color: rgba(255, 255, 255, 0.95) !important;
  flex-shrink: 0;
  opacity: 0.95;
}
.c-dialog-auth-content .dialog-auth-forgot .dialog-auth-forgot-back .dialog-auth-forgot-back-btn.c-button:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  color: hsl(var(--info-h), var(--s-2), var(--l-6)) !important;
}
.c-dialog-auth-content .dialog-auth-forgot .dialog-auth-forgot-back .dialog-auth-forgot-back-btn.c-button:hover:not(.disabled) .c-button-text {
  color: hsl(var(--info-h), var(--s-2), var(--l-6)) !important;
}
.c-dialog-auth-content .dialog-auth-forgot .dialog-auth-forgot-back .dialog-auth-forgot-back-btn.c-button:hover:not(.disabled) svg {
  color: hsl(var(--info-h), var(--s-2), var(--l-6)) !important;
}
.c-dialog-auth-content .dialog-auth-forgot .dialog-auth-forgot-back .dialog-auth-forgot-back-btn.c-button:active:not(.disabled) {
  transform: translateY(1px);
}
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form {
  margin-left: 0;
  padding-left: 0;
}
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form h3 {
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .step-info {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  line-height: 1.55;
  margin-bottom: 24px;
}
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .field {
  margin-bottom: 24px;
}
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .c-button.type-success:not(.disabled) {
  border-radius: 8px;
  font-weight: 600;
  height: 48px;
  letter-spacing: 0.02em;
  margin-top: 16px;
  padding: 0 32px;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .c-button.type-success:not(.disabled):not(.disabled) {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  color: hsl(var(--default-h), var(--s-1), var(--l-1)) !important;
}
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .c-button.type-success:not(.disabled):not(.disabled) .c-button-text,
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .c-button.type-success:not(.disabled):not(.disabled) svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1)) !important;
}
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .c-button.type-success:not(.disabled):not(.disabled):hover, .c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .c-button.type-success:not(.disabled):not(.disabled):active {
  background: rgb(255, 255, 255) !important;
  border-color: rgb(255, 255, 255) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .c-button.type-success:not(.disabled):not(.disabled):hover .c-button-text,
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .c-button.type-success:not(.disabled):not(.disabled):hover svg, .c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .c-button.type-success:not(.disabled):not(.disabled):active .c-button-text,
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .c-button.type-success:not(.disabled):not(.disabled):active svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1)) !important;
}
.c-dialog-auth-content .dialog-auth-forgot .c-auth-forgot-password-embedded .form .c-button.type-success:not(.disabled):not(.disabled):active {
  transform: translateY(1px);
}
.c-dialog-auth-content {
  /* Reset form padding so it aligns with tabs */
}
.c-dialog-auth-content .c-auth-login .form.stepper-form {
  margin-left: 0;
  padding-left: 0;
}
.c-dialog-auth-content {
  /* Form styling within auth dialog */
}
.c-dialog-auth-content .stepper-form .step h3 {
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.c-dialog-auth-content .stepper-form .step .step-info {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  line-height: 1.55;
  margin-bottom: 24px;
}
.c-dialog-auth-content .stepper-form .step .field {
  margin-bottom: 24px;
}
.c-dialog-auth-content .stepper-form .step .forgot-pw {
  margin-bottom: 24px;
}
.c-dialog-auth-content .stepper-form .step .forgot-pw .c-button {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}
.c-dialog-auth-content .stepper-form .step .forgot-pw .c-button:hover {
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-dialog-auth-content .stepper-form .step .btn-login,
.c-dialog-auth-content .stepper-form .step .btn-submit {
  border-radius: 8px;
  font-weight: 600;
  height: 48px;
  letter-spacing: 0.02em;
  margin-top: 16px;
  padding: 0 32px;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
  /* Light surface like active tab; dark text (success type keeps pale .c-button-text otherwise) */
}
.c-dialog-auth-content .stepper-form .step .btn-login:not(.disabled),
.c-dialog-auth-content .stepper-form .step .btn-submit:not(.disabled) {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  color: hsl(var(--default-h), var(--s-1), var(--l-1)) !important;
}
.c-dialog-auth-content .stepper-form .step .btn-login:not(.disabled) .c-button-text,
.c-dialog-auth-content .stepper-form .step .btn-login:not(.disabled) svg,
.c-dialog-auth-content .stepper-form .step .btn-submit:not(.disabled) .c-button-text,
.c-dialog-auth-content .stepper-form .step .btn-submit:not(.disabled) svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1)) !important;
}
.c-dialog-auth-content .stepper-form .step .btn-login:not(.disabled):hover, .c-dialog-auth-content .stepper-form .step .btn-login:not(.disabled):active,
.c-dialog-auth-content .stepper-form .step .btn-submit:not(.disabled):hover,
.c-dialog-auth-content .stepper-form .step .btn-submit:not(.disabled):active {
  background: rgb(255, 255, 255) !important;
  border-color: rgb(255, 255, 255) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.c-dialog-auth-content .stepper-form .step .btn-login:not(.disabled):hover .c-button-text,
.c-dialog-auth-content .stepper-form .step .btn-login:not(.disabled):hover svg, .c-dialog-auth-content .stepper-form .step .btn-login:not(.disabled):active .c-button-text,
.c-dialog-auth-content .stepper-form .step .btn-login:not(.disabled):active svg,
.c-dialog-auth-content .stepper-form .step .btn-submit:not(.disabled):hover .c-button-text,
.c-dialog-auth-content .stepper-form .step .btn-submit:not(.disabled):hover svg,
.c-dialog-auth-content .stepper-form .step .btn-submit:not(.disabled):active .c-button-text,
.c-dialog-auth-content .stepper-form .step .btn-submit:not(.disabled):active svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1)) !important;
}
.c-dialog-auth-content .stepper-form .step .btn-login:not(.disabled):active,
.c-dialog-auth-content .stepper-form .step .btn-submit:not(.disabled):active {
  transform: translateY(1px);
}
.c-dialog-auth-content {
  /* Input refinement in auth context */
}
.c-dialog-auth-content .c-field-text input,
.c-dialog-auth-content .c-field-code input {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  border-width: 1px;
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
  padding: 16px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-dialog-auth-content .c-field-text input::placeholder,
.c-dialog-auth-content .c-field-code input::placeholder {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
}
.c-dialog-auth-content .c-field-text input:focus,
.c-dialog-auth-content .c-field-code input:focus {
  background-color: hsl(var(--default-h), var(--s-1), var(--l-6)) !important;
  border-color: hsl(var(--info-h), var(--s-2), var(--l-5));
  box-shadow: 0 0 0 3px hsl(var(--info-h), var(--s-2), var(--l-5), 50%);
}
.c-dialog-auth-content {
  /* Field labels on info panel */
}
.c-dialog-auth-content .field label {
  color: rgba(255, 255, 255, 0.95);
}
.c-dialog-auth-content .field .help {
  color: rgba(255, 255, 255, 0.85);
}
.c-dialog-auth-content {
  /* Validation message on info panel */
}
.c-dialog-auth-content .field.invalid .help.validation {
  color: hsl(var(--danger-h), var(--s-3), var(--l-5));
  font-style: normal;
  font-weight: 500;
}
@media (width <= 600px) {
  .c-dialog-auth-content .dialog-auth-panel-image {
    display: none;
  }
}
.c-dialog-auth-content .dialog-auth-registration {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
}
.c-dialog-auth-content .dialog-auth-registration .c-registration {
  padding: 0;
}
.c-dialog-auth-content .dialog-auth-registration .c-registration--in-dialog .c-stepper {
  margin-bottom: 32px;
  margin-top: 0;
}
.c-dialog-auth-content .dialog-auth-registration .c-registration--in-dialog .c-stepper .step,
.c-dialog-auth-content .dialog-auth-registration .c-registration--in-dialog .c-stepper .step a {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.9);
}
.c-dialog-auth-content .dialog-auth-registration .c-registration--in-dialog .c-stepper .step.active, .c-dialog-auth-content .dialog-auth-registration .c-registration--in-dialog .c-stepper .step.active a {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  border-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-dialog-auth-content .dialog-auth-registration .c-registration--in-dialog .c-stepper .step.completed, .c-dialog-auth-content .dialog-auth-registration .c-registration--in-dialog .c-stepper .step.completed a {
  background: rgba(255, 255, 255, 0.25);
  border-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-dialog-auth-content .dialog-auth-registration .c-registration--in-dialog .c-stepper .step.disabled, .c-dialog-auth-content .dialog-auth-registration .c-registration--in-dialog .c-stepper .step.disabled a {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.5);
}
.c-dialog-auth-content .dialog-auth-registration .c-registration--in-dialog .c-stepper .progress-line {
  background: rgba(255, 255, 255, 0.35);
}
.c-dialog-auth-content .dialog-auth-registration .stepper-form {
  padding: 0;
}
.c-dialog-auth-content .dialog-auth-registration {
  /* Review Registration (step-4) on info panel */
}
.c-dialog-auth-content .dialog-auth-registration .step-4 .field-readonly-list {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  margin-bottom: 24px;
}
.c-dialog-auth-content .dialog-auth-registration .step-4 .field-readonly {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}
.c-dialog-auth-content .dialog-auth-registration .step-4 .field-readonly .key {
  color: rgba(255, 255, 255, 0.95);
}
.c-dialog-auth-content .dialog-auth-registration .step-4 .field-readonly .value {
  color: rgba(255, 255, 255, 0.9);
}
.c-dialog-auth-content .dialog-auth-registration .step-4 .consent .field label {
  color: rgba(255, 255, 255, 0.95);
}

.c-bar-main {
  align-items: center;
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  display: flex;
  padding-left: var(--query-spacer);
  position: relative;
  user-select: none;
  width: 100%;
  z-index: 10000;
}
.c-bar-main .bar-logo {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  margin-right: 32px;
}
.c-bar-main .bar-logo .bar-logo-link {
  align-items: center;
  display: flex;
  height: 64px;
}
.c-bar-main .bar-logo .bar-logo-img {
  display: block;
  height: auto;
  max-height: 36px;
  max-width: 140px;
  object-fit: contain;
}
.c-bar-main select {
  border: none;
  outline: none;
}
.c-bar-main button.variant-menu svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-bar-main button.variant-menu.active, .c-bar-main button.variant-menu:hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  border-bottom-color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-bar-main .bar-search {
  align-items: center;
  display: flex;
  flex: 10;
  height: 64px;
  max-width: 604px;
}
.c-bar-main .bar-search .search-box input {
  background: none;
  border: none;
  border-bottom: 1px solid hsl(var(--default-h), var(--s-1), var(--l-3));
  border-radius: 0;
  box-shadow: none;
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
  opacity: 0.7;
  outline: none;
  padding: 0 32px;
  transition: opacity 0.3s ease;
  width: 100%;
}
.c-bar-main .bar-search .search-box input::first-letter {
  text-transform: capitalize;
}
.c-bar-main .bar-search .search-box input::placeholder {
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
  opacity: 1;
}
.c-bar-main .bar-search .search-box input:focus {
  border-bottom: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  opacity: 1;
}
.c-bar-main .bar-search .search-box input:focus ~ button[disabled] svg {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-bar-main .bar-search .btn-search {
  height: 32px;
  width: 32px;
  color: hsl(var(--surface-h), var(--s-1), var(--l-4));
  position: absolute;
}
.c-bar-main .bar-search .btn-clear {
  height: 24px;
  width: 24px;
  color: hsl(var(--surface-h), var(--s-1), var(--l-3));
  position: absolute;
  right: 8px;
}
.c-bar-main .action-group {
  align-items: center;
  display: flex;
  gap: 0.8px;
  margin-left: var(--query-spacer);
}
.c-bar-main .action-group .btn-dropdown,
.c-bar-main .action-group .bar-nav-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 0 8px;
}
.c-bar-main .action-group .btn-dropdown svg,
.c-bar-main .action-group .btn-dropdown .c-icon,
.c-bar-main .action-group .bar-nav-item svg,
.c-bar-main .action-group .bar-nav-item .c-icon {
  color: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-bar-main .action-group .btn-dropdown svg.active, .c-bar-main .action-group .btn-dropdown svg:hover,
.c-bar-main .action-group .btn-dropdown .c-icon.active,
.c-bar-main .action-group .btn-dropdown .c-icon:hover,
.c-bar-main .action-group .bar-nav-item svg.active,
.c-bar-main .action-group .bar-nav-item svg:hover,
.c-bar-main .action-group .bar-nav-item .c-icon.active,
.c-bar-main .action-group .bar-nav-item .c-icon:hover {
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-bar-main .action-group .btn-dropdown .c-icon,
.c-bar-main .action-group .bar-nav-item .c-icon {
  margin-left: 2px;
}
.c-bar-main .action-group .btn-dropdown .c-icon:first-child,
.c-bar-main .action-group .bar-nav-item .c-icon:first-child {
  margin-left: 0;
}
.c-bar-main .action-group .bar-shop-cart-trigger {
  gap: 2px;
}
.c-bar-main .action-group .bar-shop-cart-trigger .bar-shop-cart-chevron {
  margin-left: 0;
  opacity: 0.88;
}
.c-bar-main .action-group .dropdown-body {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  border: none;
  min-width: 200px;
}
.c-bar-main .action-group .dropdown-body header {
  align-items: center;
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  color: hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  height: 48px;
  padding: 8px;
}
.c-bar-main .action-group .dropdown-body .divider {
  background: hsl(var(--default-h), var(--s-1), var(--l-4));
  height: 1px;
}
.c-bar-main .action-group .btn-action {
  color: hsl(var(--default-h), var(--s-1), var(--l-4));
  height: 48px;
  transition: all 0.3s ease;
}
.c-bar-main .action-group .btn-action:hover, .c-bar-main .action-group .btn-action.active {
  color: #fff;
  filter: drop-shadow(0 0 4px hsl(var(--info-h), var(--s-3), var(--l-1)));
}
.c-bar-main .action-group .dropdown-my-portal {
  cursor: pointer;
}
.c-bar-main .action-group .dropdown-my-portal .dropdown-body .c-button {
  justify-content: flex-start;
  padding: 8px;
  text-align: left;
  width: 100%;
}
.c-bar-main .action-group .dropdown-cart.has-options {
  cursor: context-menu;
}
.c-bar-main .action-group .dropdown-cart .dropdown-button .amount-unit {
  bottom: 8px;
  position: absolute;
  right: -12px;
}
.c-bar-main .action-group .dropdown-cart .dropdown-body .c-button {
  padding: 8px;
}
.c-bar-main .action-group .dropdown-cart .dropdown-body .cart {
  align-items: center;
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding: 8px;
}
.c-bar-main .action-group .dropdown-cart .dropdown-body .cart .order-details {
  flex: 1;
  margin-left: 8px;
}
.c-bar-main .action-group .dropdown-cart .dropdown-body .cart .cart-items {
  display: flex;
  gap: 4px;
}
.c-bar-main .action-group .dropdown-cart .dropdown-body .cart:hover {
  background: hsl(var(--brand-h), var(--s-3), var(--l-4));
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
  cursor: pointer;
}
.c-bar-main .action-group .dropdown-cart .dropdown-body .cart.active {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-bar-main .bar-header {
  align-items: center;
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}
.c-bar-main .bar-header .title {
  align-items: center;
  display: flex;
  font-size: 1rem;
  font-weight: 600;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.c-bar-main .bar-header .page-icon {
  align-items: center;
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  display: flex;
  height: 100%;
  justify-content: center;
  margin-left: var(--query-spacer);
  width: 50px;
}
.c-bar-main.legacy-account {
  background: hsl(50deg, 90%, var(--l-3));
}
.c-bar-main.legacy-account .search-bar svg {
  color: hsl(50deg, 90%, var(--l-1));
}
.c-bar-main.legacy-account select,
.c-bar-main.legacy-account .search-bar,
.c-bar-main.legacy-account .search-bar input,
.c-bar-main.legacy-account .search-bar input::placeholder {
  background: hsl(50deg, 90%, var(--l-4));
  color: hsl(50deg, 90%, var(--l-1));
}
.c-bar-main.legacy-account .bar-header .title {
  color: hsl(50deg, 90%, var(--l-1));
}
.c-bar-main.legacy-account .bar-header .action-group svg {
  color: hsl(50deg, 90%, var(--l-1));
}
@media (max-width: 750px) {
  .c-bar-main .bar-header .title {
    display: none;
  }
}
@media (max-width: 600px) {
  .c-bar-main .bar-header .page-icon {
    display: none;
  }
  .c-bar-main .action-group {
    margin-right: var(--query-spacer);
  }
}

.c-panel-left.c-panel-menu.collapsed .btn-highlight .highlight-tag {
  display: none;
}
.c-panel-left.c-panel-menu .c-button.btn-highlight {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-panel-left.c-panel-menu .c-button.btn-highlight .highlight-tag {
  background: hsl(var(--success-h), var(--s-2), var(--l-2));
  border-radius: 16px;
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
  font-weight: 600;
  padding: 4px 8px;
}
.c-panel-left.c-panel-menu .c-button.btn-highlight:not([disabled], .disabled):hover {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-panel-left.c-panel-menu .c-button.btn-highlight:not([disabled], .disabled):hover .highlight-tag {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-panel-left.c-panel-menu .c-button.btn-highlight:not([disabled], .disabled) .c-icon,
.c-panel-left.c-panel-menu .c-button.btn-highlight:not([disabled], .disabled) span {
  color: hsl(var(--success-h), var(--s-2), var(--l-1)) !important;
}
.c-panel-left.c-panel-menu .c-button.btn-highlight:not([disabled], .disabled).active {
  background: #fff;
  border-bottom-color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-panel-left.c-panel-menu .c-button.btn-highlight:not([disabled], .disabled).active .highlight-tag {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-panel-left.c-panel-menu .c-button.btn-highlight:not([disabled], .disabled).active .c-icon,
.c-panel-left.c-panel-menu .c-button.btn-highlight:not([disabled], .disabled).active span {
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
}
@media (min-width: 1400px) {
  .c-panel-left.c-panel-menu .logo img.collapsed {
    display: none;
  }
  .c-panel-left.c-panel-menu .logo img.collapse {
    display: block;
  }
  .c-panel-left.c-panel-menu.collapsed .logo img.collapsed {
    display: block;
  }
  .c-panel-left.c-panel-menu.collapsed .logo img.collapse {
    display: none;
  }
}
@media (max-height: 750px) {
  .c-panel-left.c-panel-menu .manager {
    display: none;
  }
}

.c-panel-filters {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  max-width: 320px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 0;
  position: relative;
  width: 100%;
}
.c-panel-filters.disabled * {
  pointer-events: none;
}
.c-panel-filters.disabled .field button,
.c-panel-filters.disabled .field input {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-panel-filters.disabled .filter svg,
.c-panel-filters.disabled .filter .name, .c-panel-filters.disabled .filter.collapsed:not(.active, :disabled) svg,
.c-panel-filters.disabled .filter.collapsed:not(.active, :disabled) .name,
.c-panel-filters.disabled .filter .title svg,
.c-panel-filters.disabled .filter .title .name {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-panel-filters.disabled .filter .items input[type=radio]:checked,
.c-panel-filters.disabled .filter .items input[type=checkbox]:checked {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-panel-filters.disabled .filter .items .item label {
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-panel-filters.disabled .filter.c-filter-select-range .items .noUi-base .noUi-connects .noUi-connect {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
}
.c-panel-filters.disabled .filter.c-filter-select-range .items .noUi-base .noUi-connects .noUi-tooltip {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-panel-filters.disabled .filter.c-filter-select-range .items .noUi-base .noUi-origin .noUi-tooltip {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-panel-filters.disabled .filter.c-filter-select-range .items .noUi-pips {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-panel-filters.disabled .c-filters-active {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  box-shadow: none !important;
}
.c-panel-filters.disabled .c-filters-active button {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-panel-filters .scroll-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  max-height: 100%;
  overflow-y: auto;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 16px;
}
.c-panel-filters .scroll-container .filter .field {
  margin: 0;
}
.c-panel-filters .scroll-container .filter-group {
  display: flex;
  flex-direction: column;
}
.c-panel-filters .c-filters-active {
  position: absolute;
  transition: max-height 0.3s ease;
  z-index: 10;
}
.c-panel-filters:not(.float-panel--active) .c-filters-active {
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  max-height: 64px;
  min-height: 64px;
  overflow: hidden;
  padding-bottom: 64px;
}
.c-panel-filters:not(.float-panel--active) .c-filters-active:hover {
  animation: expand 1.5s ease forwards, collapse 0.5s ease backwards;
  max-height: 100%;
}
.c-panel-filters.c-panel-filters--mobile-shop-overlay {
  /* Portal shop: mobile bottom sheet or tablet left drawer; header/FiltersActive omitted; thumb bar. */
  max-width: none;
  padding-top: 0;
}
.c-panel-filters.c-panel-filters--mobile-shop-overlay .c-panel-filters-mobile-sheet-controls {
  flex-shrink: 0;
  width: 100%;
}
.c-panel-filters.c-panel-filters--mobile-shop-overlay .c-panel-filters-thumb-bar {
  flex-shrink: 0;
}
.c-panel-filters.float-panel--active {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  border-right: hsl(var(--grey-h), var(--s-0), var(--l-5));
  opacity: 1;
  z-index: 10000;
}
.c-panel-filters.float-panel--active .c-filters-active {
  position: relative;
}
.c-panel-filters.float-panel--active .c-collection-filter-control {
  display: flex;
  padding: 0 16px;
  position: absolute;
  right: 0;
}
.c-panel-filters.float-panel--active .c-collection-filter-control .c-button {
  border: 0;
}
.c-panel-filters.float-panel--active .scroll-container {
  margin-top: unset;
  padding-bottom: 16px;
}
.c-panel-filters.float-panel--active .filter {
  background: #fff;
}
.c-panel-filters.float-panel--active.collapsed {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
}
.c-panel-filters.float-panel--active.collapsed .view-actions,
.c-panel-filters.float-panel--active.collapsed .filter {
  overflow: visible;
}
.c-panel-filters.float-panel--active .toggle {
  display: flex;
}
.c-panel-filters.float-panel--active .toggle.collapsed {
  display: none;
  left: 0;
  top: 8px;
}
.c-panel-filters.float-panel--active .toggle.uncollapsed {
  bottom: 8px;
  right: 8px;
}

.c-layout-landing {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.c-layout-landing .landing-image {
  background-color: #000;
  background-size: cover;
  height: 100vh;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 1.5s ease;
  width: 100vw;
}
.c-layout-landing .landing-image.active {
  opacity: 1;
}
.c-layout-landing .landing-email {
  background-image: url("/common/img/landing-email.jpg");
}
.c-layout-landing .landing-login {
  background-image: url("/common/img/landing-login.jpg");
}
.c-layout-landing .landing-register {
  background-image: url("/common/img/landing-register.jpg");
}
.c-layout-landing .landing-redeem {
  background-image: url("/common/img/landing-redeem.jpg");
}
.c-layout-landing .l-panel {
  align-items: center;
  backdrop-filter: blur(12px);
  background: hsl(var(--info-h), var(--s-1), var(--l-1), 70%);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  max-width: 40%;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.c-layout-landing .l-panel .header {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  max-width: 470px;
  position: relative;
  width: 100%;
}
.c-layout-landing .l-panel .header .language-selection {
  display: flex;
  gap: 8px;
  height: 32px;
  width: 64px;
}
.c-layout-landing .l-panel .header .language-selection .fi {
  height: 100%;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  width: 100%;
}
.c-layout-landing .l-panel .header .language-selection .fi:not(.active) {
  cursor: pointer;
}
.c-layout-landing .l-panel .header .language-selection .fi.active {
  opacity: 1;
}
.c-layout-landing .l-panel .header .logo {
  align-items: center;
  display: flex;
  position: relative;
  width: 100%;
}
.c-layout-landing .l-panel .header .logo img {
  display: block;
  max-width: 200px;
}
.c-layout-landing .l-panel .header .support-manager {
  border-radius: 50%;
  height: 128px;
  list-style: none;
  padding: 0;
  position: relative;
}
.c-layout-landing .l-panel .header .support-manager > .c-button {
  height: 40px;
  left: 50%;
  margin: -20px;
  position: absolute;
  top: 50%;
  width: 40px;
}
.c-layout-landing .l-panel .header .support-manager > .c-button:nth-of-type(1) {
  transform: rotate(100deg) translate(64px) rotate(-100deg);
}
.c-layout-landing .l-panel .header .support-manager > .c-button:nth-of-type(2) {
  transform: rotate(140deg) translate(64px) rotate(-140deg);
}
.c-layout-landing .l-panel .header .support-manager > .c-button:nth-of-type(3) {
  transform: rotate(180deg) translate(64px) rotate(-180deg);
}
.c-layout-landing .l-panel .header .support-manager > .c-button:nth-of-type(4) {
  transform: rotate(220deg) translate(64px) rotate(-220deg);
}
.c-layout-landing .l-panel .header .support-manager > .c-button:nth-of-type(5) {
  transform: rotate(260deg) translate(64px) rotate(-260deg);
}
.c-layout-landing .l-panel .header .support-manager > .c-button:nth-of-type(6) {
  transform: rotate(300deg) translate(64px) rotate(-300deg);
}
.c-layout-landing .l-panel .header .support-manager > .c-button:nth-of-type(7) {
  transform: rotate(340deg) translate(64px) rotate(-340deg);
}
.c-layout-landing .l-panel .header .support-manager > .c-button:nth-of-type(8) {
  transform: rotate(380deg) translate(64px) rotate(-380deg);
}
.c-layout-landing .l-panel .header .support-manager > .c-button:nth-of-type(9) {
  transform: rotate(420deg) translate(64px) rotate(-420deg);
}
.c-layout-landing .l-panel .header .support-manager {
  height: 128px;
  width: 128px;
  background-size: cover;
  border: 3px solid hsl(var(--info-h), var(--s-3), var(--l-2));
  border-radius: 50%;
  bottom: 50px;
  position: absolute;
  right: 0;
  top: 16px;
}
.c-layout-landing .l-panel .header .support-manager .name {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
  display: flex;
  flex-direction: column;
  font-weight: 600;
  margin-top: -40px;
  text-align: center;
}
.c-layout-landing .l-panel .header .support-manager .name span {
  white-space: nowrap;
}
.c-layout-landing .l-panel .header .support-manager .name span:first-child {
  color: hsl(var(--default-h), var(--s-1), var(--l-4));
}
.c-layout-landing .l-panel .header .support-manager .c-notifications {
  bottom: 16px;
  left: 128px;
}
.c-layout-landing .l-panel .header .support-manager .c-button {
  height: 38px;
  width: 38px;
  right: 0;
}
.c-layout-landing .l-panel .header .sub-header {
  width: 100%;
}
.c-layout-landing .l-panel .header .sub-header h3 {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
  font-size: 1.5rem;
  margin-bottom: 4px;
  margin-top: 24px;
}
.c-layout-landing .l-panel .header .sub-header p {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
  font-size: 1rem;
  margin: 0;
}
.c-layout-landing .l-panel .landing {
  max-width: 470px;
}
.c-layout-landing .l-panel .form {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
  display: flex;
  flex-direction: column;
  min-width: 470px;
  padding: 24px;
  width: 100%;
}
.c-layout-landing .l-panel .form .fieldset {
  background: none;
  border: 0;
  padding: 0;
}
.c-layout-landing .l-panel .form .btn-login {
  margin-top: 16px;
  width: 100%;
}
.c-layout-landing .l-panel .form h3 {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 1rem;
  margin: 0;
  margin-bottom: 8px;
}
.c-layout-landing .l-panel .form .fieldset-group {
  margin-bottom: 8px;
}
.c-layout-landing .l-panel .form .field-group .field {
  flex: 1;
  min-width: 0;
}
.c-layout-landing .l-panel .form .fieldset-label {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  font-size: 1rem;
  margin-bottom: 8px;
  margin-top: 16px;
}
.c-layout-landing .about {
  background: hsl(var(--info-h), var(--s-3), var(--l-1), 50%);
  border: 1px solid hsl(var(--info-h), var(--s-3), var(--l-2));
  border-radius: 8px;
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
  line-height: 1.4;
  margin-top: 16px;
  padding: 16px 24px;
}
.c-layout-landing .stepper-form {
  margin-bottom: 24px;
}
.c-layout-landing .stepper-form .step {
  margin-bottom: 24px;
}
.c-layout-landing .stepper-form .step.step-unknown {
  margin-bottom: 0;
}
.c-layout-landing .stepper-form .step .field {
  margin-bottom: 16px;
}
.c-layout-landing .stepper-form .step .field:last-child {
  margin-bottom: 0;
}
.c-layout-landing .stepper-form .step .field-group {
  margin-bottom: 16px;
}
.c-layout-landing .stepper-form .step .field-group .field {
  margin-bottom: 0;
}
.c-layout-landing .stepper-form .step .field-readonly-list {
  max-height: 250px;
  overflow: scroll;
}
@media (max-width: 1400px) {
  .c-layout-landing {
    flex-direction: column;
  }
  .c-layout-landing .stepper-form {
    overflow: scroll;
  }
  .c-layout-landing .step-3 {
    overflow: scroll;
  }
  .c-layout-landing .step-3 + .c-button-group {
    margin-top: 16px;
  }
  .c-layout-landing .about {
    display: none;
  }
  .c-layout-landing .l-panel {
    max-width: 60%;
  }
  .c-layout-landing .c-image {
    display: none;
  }
}
@media (max-width: 750px) {
  .c-layout-landing .l-panel {
    backdrop-filter: blur(2px);
    max-width: unset;
    padding: 8px;
  }
  .c-layout-landing .l-panel .header .sub-header {
    margin-top: 16px;
  }
  .c-layout-landing .l-panel .header .sub-header h3 {
    font-size: 1.05rem;
  }
  .c-layout-landing .l-panel .header .sub-header p {
    font-size: 0.85rem;
  }
  .c-layout-landing .l-panel .form {
    min-width: unset;
  }
}

html.embedded body,
html.embedded .app {
  height: auto;
  width: 100%;
}
html.embedded body .c-layout-landing,
html.embedded .app .c-layout-landing {
  min-width: 400px;
  padding: 8px;
}

.c-panel-context {
  align-items: center;
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  box-shadow: -2px 0 4px hsl(var(--surface-h), var(--s-1), var(--l-1), 30%);
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 600px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease, max-width 0.3s ease;
  width: 100%;
  z-index: 1000;
}
.c-panel-context.minimizable {
  max-width: 600px;
}
.c-panel-context:not(.minimizable) {
  max-width: 600px;
}
.c-panel-context header {
  height: 64px;
}
.c-panel-context header .panel-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  padding-right: 8px;
}
.c-panel-context header .c-panel-minimize-toggle {
  flex-shrink: 0;
}
.c-panel-context .content {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  width: 100%;
}
.c-panel-context .content .btn-submit {
  max-width: unset;
}
.c-panel-context .content.form-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.c-panel-context .content.form-container .field-group {
  width: 100%;
}
.c-panel-context .content > .fieldset {
  padding: 8px;
  width: 100%;
}
.c-panel-context .content > .c-button-group {
  padding: 8px;
  width: 100%;
}
.c-panel-context .content .c-sales-order-items {
  flex: 1;
  overflow-y: scroll;
  width: 100%;
}
.c-panel-context .content .c-tabs {
  width: 100%;
}
.c-panel-context .content .c-tabs .tabs-container {
  width: 100%;
}
.c-panel-context .content .c-tabs .tabs-container .panels {
  width: 100%;
}
.c-panel-context .content .c-tabs .c-tab-panel {
  padding: 8px;
}
.c-panel-context .content .c-tabs .c-tab-panel .c-collection-view {
  padding: 0;
}
.c-panel-context .content .c-tabs .c-collection-items {
  width: 100%;
}
.c-panel-context .content .form-panel {
  padding: 8px 16px;
}
.c-panel-context .content .incentives .c-field-select {
  padding: 0 8px;
}
.c-panel-context .content .vouchers {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding: 0 8px;
  width: 100%;
}
.c-panel-context .content .vouchers .item {
  display: inline-flex;
  gap: 8px;
}
.c-panel-context .content .toggle {
  margin-top: 16px;
}
.c-panel-context .toggle {
  align-items: center;
  background: hsl(var(--default-h), var(--s-1), var(--l-3));
  overflow: visible;
}
.c-panel-context .toggle.selection {
  background: hsl(var(--brand-h), var(--s-3), var(--l-4));
}
.c-panel-context .toggle.active, .c-panel-context .toggle:hover {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  color: #fff;
}
.c-panel-context .toggle:not(.collapsed) {
  animation: 0.75s ease toggle-panel-uncollapse;
}
.c-panel-context.collapsed {
  padding: 0;
}
.c-panel-context.collapsed > header .title .icon {
  margin: unset;
}
.c-panel-context.collapsed .workflow {
  justify-content: center;
  padding: 8px 0;
}
.c-panel-context.collapsed .workflow .steps {
  gap: 8px;
}
.c-panel-context.collapsed.minimizable {
  max-width: 50px;
}
.c-panel-context.collapsed.minimizable header {
  align-items: stretch;
  flex-direction: column;
  gap: 2px;
  height: auto;
  min-height: 64px;
  padding: 0;
}
.c-panel-context.collapsed.minimizable header .title {
  flex: 0 0 auto;
  justify-content: center;
  min-width: 0;
  width: 100%;
}
.c-panel-context.collapsed.minimizable header .title svg {
  margin: 0;
}
.c-panel-context.collapsed.minimizable header .title span {
  display: none;
}
.c-panel-context.collapsed.minimizable header .panel-actions {
  flex-shrink: 0;
  justify-content: center;
  padding: 0 2px 4px;
  width: 100%;
}
.c-panel-context.collapsed.minimizable header .panel-actions .c-panel-minimize-toggle {
  margin-left: 0;
  max-width: 100%;
  min-height: 32px;
  min-width: 0;
  width: 100%;
}
.c-panel-context.collapsed:not(.minimizable) {
  box-shadow: none;
  max-width: 0;
  min-width: 0;
}
.c-panel-context.collapsed .panel-actions {
  display: none;
}
.c-panel-context.collapsed.minimizable .panel-actions {
  align-items: center;
  display: flex;
}
.c-panel-context.collapsed .toggle {
  animation-play-state: unset;
  left: 0;
  position: relative;
}
.c-panel-context.collapsed .toggle.disabled {
  display: block;
}
.c-panel-context.collapsed .toggle.collapsed {
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-name: toggle-panel-collapse;
}
.c-panel-context:not(.collapsed) .content .toggle {
  bottom: 8px;
  left: 8px;
  position: absolute;
}
.c-panel-context:not(.collapsed) .total-container-collapsed {
  display: none;
}

.c-panel-left {
  align-items: center;
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  box-shadow: 2px 0 4px hsl(var(--surface-h), var(--s-1), var(--l-1), 30%);
  display: flex;
  flex-direction: column;
  height: var(--app-height);
  max-width: 225px;
  position: relative;
  transition: max-width 0.25s ease-in-out;
  width: 100%;
  z-index: 1000000;
}
.c-panel-left .logo {
  align-items: center;
  align-self: flex-start;
  background-color: #fff;
  border-bottom: 2px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  height: 112px;
  position: relative;
  width: 100%;
}
.c-panel-left .logo > a {
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%;
}
.c-panel-left .logo > a img {
  max-height: 100px;
  max-width: 100%;
  padding: 8px;
}
.c-panel-left .logo .version {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
  cursor: help;
  cursor: pointer;
  flex: 1;
  position: absolute;
  right: 2px;
  text-align: right;
  top: 2px;
  user-select: none;
}
.c-panel-left .logo .version:hover {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-panel-left .menu {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.c-panel-left .menu .c-button .btn-label {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  border-radius: 32px;
  color: hsl(var(--brand-h), var(--s-3), var(--l-5));
  font-size: 0.7rem;
  font-weight: 600;
  padding: 8px;
}
.c-panel-left .menu .c-button.active .btn-label {
  background: hsl(var(--brand-h), var(--s-3), var(--l-4));
  color: #fff;
}
.c-panel-left .menu hr {
  border-bottom: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  margin: 8px 0;
}
.c-panel-left.active {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  border-right: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-4));
  box-shadow: 2px 0 4px hsl(var(--surface-h), var(--s-1), var(--l-1), 30%);
  display: flex;
  flex-direction: column;
  height: var(--app-height);
  left: 0;
  max-width: 420px;
  overflow-x: hidden;
  padding-left: 50px;
  position: absolute;
  top: 0;
  transition: max-width 0.3s ease, opacity 0.3s ease;
  width: 100%;
  z-index: 100002;
}
.c-panel-left.active.collapsed {
  max-width: 0;
  overflow: hidden;
}
.c-panel-left.collapsed {
  max-width: 50px;
  overflow: visible;
  padding: 0;
}
.c-panel-left.collapsed .menu .btn-label {
  display: none;
}
.c-panel-left.collapsed .menu .c-button svg {
  margin: 0;
  width: 50px;
}
.c-panel-left.collapsed .menu .c-button span {
  display: none;
}
.c-panel-left.collapsed .menu .c-button .context {
  display: flex;
}
.c-panel-left.collapsed .nav-item {
  overflow: hidden;
}
.c-panel-left.collapsed .logo {
  width: 100%;
}
.c-panel-left.collapsed .logo img {
  padding: 4px;
}
.c-panel-left.collapsed .logo .version {
  display: none;
}
.c-panel-left.collapsed .support-manager {
  background: none;
  padding: 0;
}
.c-panel-left.collapsed .support-manager :hover {
  cursor: pointer;
}
@media (min-width: 1400px) {
  .c-panel-left .logo img.collapsed {
    display: none;
  }
  .c-panel-left .logo img.collapse {
    display: block;
  }
  .c-panel-left.collapsed .logo img.collapsed {
    display: block;
  }
  .c-panel-left.collapsed .logo img.collapse {
    display: none;
  }
}
@media (max-width: 1400px) {
  .c-panel-left .logo img.collapse {
    display: none;
  }
  .c-panel-left .logo img.collapsed {
    display: block;
  }
}

.c-panel-bulk {
  display: flex;
  flex-direction: column;
  max-width: 320px;
  padding-top: 0;
  position: relative;
  width: 100%;
}
.c-panel-bulk .scroll-container .bulk-control {
  align-content: end;
  display: flex;
  flex-direction: row;
  width: 100%;
}
.c-panel-bulk .scroll-container .bulk-control .c-field-select {
  flex-grow: 100;
}
.c-panel-bulk .c-panel-bulk-active {
  display: flex;
  flex-direction: column;
  max-width: 320px;
  padding-top: 0;
  position: relative;
  width: 100%;
}

.c-link {
  font-weight: 600;
}
.c-link.type-info {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-link.type-info:hover {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-link.type-flattened {
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
}
.c-link.type-flattened:hover {
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-link.type-success {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-link.type-success:hover {
  color: hsl(var(--success-h), var(--s-2), var(--l-3));
}

.c-memo {
  align-items: stretch;
  display: flex;
  gap: 8px;
}
.c-memo .memo {
  align-items: center;
  border: 1px solid;
  display: inline-flex;
  font-size: 0.7rem;
  gap: 8px;
  line-height: 1.5;
  padding: 8px;
  width: 100%;
}
.c-memo .memo .memo-content {
  flex: 1;
  hyphens: auto;
  width: 100%;
}
.c-memo .memo .memo-icon {
  height: 36px;
  width: 36px;
}
.c-memo .memo.info {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-memo .memo.info .memo-icon {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-memo .memo.info .memo-icon:hover {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-memo .memo.warning {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
  border-color: hsl(var(--danger-h), var(--s-3), var(--l-4));
}
.c-memo .memo.warning .memo-icon {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-memo .memo.warning .memo-icon:hover {
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-memo.multiline .memo-icon {
  cursor: ns-resize;
}
.c-memo.collapsed .memo-content {
  -webkit-box-orient: vertical;
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  hyphens: auto;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-memo.collapsed .memo-icon {
  cursor: ns-resize;
}

.c-quantity {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  gap: 4px;
}
.c-quantity .c-icon {
  opacity: 0.5;
}
.c-quantity .case-quantity,
.c-quantity .bottle-quantity {
  align-items: center;
  display: flex;
  gap: 4px;
}
.c-quantity .case-quantity {
  font-weight: 600;
}

.c-issues .dialog {
  width: 600px;
}
.c-issues .btn-close:hover {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-issues .btn-expand {
  display: none;
}
.c-issues img {
  max-width: 100%;
}
.c-issues .header {
  align-items: center;
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
  cursor: pointer;
  display: flex;
  font-weight: 600;
  height: 40px;
  padding: 8px;
}
.c-issues .header .expanded {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.c-issues .body .c-field-textarea textarea {
  min-height: 100px;
}
.c-issues .body.thanks img {
  margin-bottom: 8px;
}
.c-issues .body.thanks p {
  line-height: 1.5rem;
}

.c-stepper {
  align-items: center;
  display: flex;
  flex: 1;
}
.c-stepper .steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
}
.c-stepper .steps .progress-line {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  position: absolute;
}
.c-stepper .steps .step {
  align-items: center;
  border: 2px solid;
  border-radius: 50%;
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  font-weight: 600;
  justify-content: center;
  transition: all 0.3s ease-out;
  z-index: 2;
}
.c-stepper .steps .step,
.c-stepper .steps .step a {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  border-color: hsl(var(--default-h), var(--s-1), var(--l-3));
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-stepper .steps .step:hover,
.c-stepper .steps .step a:hover {
  background: hsl(var(--default-h), var(--s-1), var(--l-3));
  border-color: hsl(var(--default-h), var(--s-1), var(--l-1));
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-stepper .steps .step a {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.c-stepper .steps .step.active,
.c-stepper .steps .step.active a {
  background-color: hsl(var(--info-h), var(--s-2), var(--l-4));
  border-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  cursor: default;
}
.c-stepper .steps .step.disabled,
.c-stepper .steps .step.disabled a {
  background-color: hsl(var(--default-h), var(--s-1), var(--l-5));
  border-color: hsl(var(--default-h), var(--s-1), var(--l-4));
  color: hsl(var(--default-h), var(--s-1), var(--l-4));
  cursor: not-allowed;
}
.c-stepper .steps .step.warning,
.c-stepper .steps .step.warning a {
  background-color: hsl(var(--warning-h), var(--s-3), var(--l-5));
  border-color: hsl(var(--warning-h), var(--s-3), var(--l-3));
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-stepper .steps .step.completed,
.c-stepper .steps .step.completed a {
  background-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  border-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
  cursor: pointer;
}
.c-stepper .steps .step.completed:hover,
.c-stepper .steps .step.completed a:hover {
  background-color: hsl(var(--info-h), var(--s-3), var(--l-1));
  border-color: hsl(var(--info-h), var(--s-3), var(--l-1));
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-stepper .steps .step.completed.disabled, .c-stepper .steps .step.completed.disabled a {
  background-color: hsl(var(--success-h), var(--s-2), var(--l-4));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-3));
  color: hsl(var(--success-h), var(--s-2), var(--l-3));
  cursor: not-allowed;
}
.c-stepper.size-d .step {
  height: 48px;
  min-width: 48px;
  width: 48px;
}
.c-stepper.horizontal {
  justify-content: center;
}
.c-stepper.horizontal .progress-line {
  height: 2px;
  top: 24px;
  width: 100%;
  z-index: 1;
}
.c-stepper.vertical {
  align-items: center;
  justify-content: center;
}
.c-stepper.vertical .steps {
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.c-stepper.vertical .progress-line {
  flex-direction: column;
  gap: 8px;
  height: 100%;
  left: 23px;
  width: 2px;
}

.c-rating {
  align-items: center;
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  border-radius: 0;
  padding: 8px;
}
.c-rating .header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.c-rating .header .title {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 1.05rem;
}
.c-rating .description {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-rating .step-rate textarea {
  min-height: 75px;
}
.c-rating .step-thanks img {
  border: 2px solid hsl(var(--info-h), var(--s-3), var(--l-1));
  margin-top: 8px;
  max-width: 100%;
}

.c-rating-stars {
  display: flex;
  height: 100%;
}
.c-rating-stars.readonly,
.c-rating-stars.readonly .c-icon,
.c-rating-stars.readonly .c-icon:hover {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
  cursor: default;
}
.c-rating-stars:not(.readonly) .c-icon {
  transition: color 0.3s ease;
}
.c-rating-stars:not(.readonly) .c-icon.rated {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}

.c-progress .label {
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
  margin-bottom: 2px;
}
.c-progress .bar-container {
  background: hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  position: relative;
  width: 100%;
}
.c-progress .bar-container .bar {
  height: 24px;
  transition: all 0.3s ease;
}
.c-progress .boundaries {
  align-items: center;
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
  display: flex;
  font-size: 0.7rem;
  font-weight: 600;
  justify-content: space-between;
  width: 100%;
}
.c-progress .boundaries .left {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-progress .boundaries .right {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-progress.type-danger .bar-container .bar {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-progress.type-info .bar-container .bar {
  background: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-progress.type-default .bar-container .bar {
  background: hsl(var(--default-h), var(--s-1), var(--l-3));
}
.c-progress.type-success .bar-container .bar {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-progress.type-warning .bar-container .bar {
  background: hsl(var(--warning-h), var(--s-3), var(--l-3));
}

.c-notification {
  align-items: center;
  animation: fade-in 0.75s ease;
  border-radius: 16px;
  display: flex;
  min-height: 64px;
  padding: 8px;
  position: relative;
  transition: background 0.3s ease;
}
.c-notification.type-default {
  border: 4px solid hsl(var(--default-h), var(--s-2), var(--l-3));
  color: hsl(var(--default-h), var(--s-2), var(--l-2));
  filter: drop-shadow(0 6px 3px hsl(var(--default-h), var(--s-2), var(--l-1), 20%));
}
.c-notification.type-default, .c-notification.type-default::before {
  background: hsl(var(--default-h), var(--s-2), var(--l-5));
}
.c-notification.type-default:hover, .c-notification.type-default:hover::before {
  background: hsl(var(--default-h), var(--s-3), var(--l-4));
}
.c-notification.type-default:last-child::before {
  background: hsl(var(--default-h), var(--s-2), var(--l-3));
}
.c-notification.type-default .notification-icon {
  color: hsl(var(--default-h), var(--s-3), var(--l-1));
}
.c-notification.type-brand {
  border: 4px solid hsl(var(--brand-h), var(--s-2), var(--l-3));
  color: hsl(var(--brand-h), var(--s-2), var(--l-2));
  filter: drop-shadow(0 6px 3px hsl(var(--brand-h), var(--s-2), var(--l-1), 20%));
}
.c-notification.type-brand, .c-notification.type-brand::before {
  background: hsl(var(--brand-h), var(--s-2), var(--l-5));
}
.c-notification.type-brand:hover, .c-notification.type-brand:hover::before {
  background: hsl(var(--brand-h), var(--s-3), var(--l-4));
}
.c-notification.type-brand:last-child::before {
  background: hsl(var(--brand-h), var(--s-2), var(--l-3));
}
.c-notification.type-brand .notification-icon {
  color: hsl(var(--brand-h), var(--s-3), var(--l-1));
}
.c-notification.type-success {
  border: 4px solid hsl(var(--success-h), var(--s-2), var(--l-3));
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
  filter: drop-shadow(0 6px 3px hsl(var(--success-h), var(--s-2), var(--l-1), 20%));
}
.c-notification.type-success, .c-notification.type-success::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-notification.type-success:hover, .c-notification.type-success:hover::before {
  background: hsl(var(--success-h), var(--s-3), var(--l-4));
}
.c-notification.type-success:last-child::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-notification.type-success .notification-icon {
  color: hsl(var(--success-h), var(--s-3), var(--l-1));
}
.c-notification.type-info {
  border: 4px solid hsl(var(--info-h), var(--s-2), var(--l-3));
  color: hsl(var(--info-h), var(--s-2), var(--l-2));
  filter: drop-shadow(0 6px 3px hsl(var(--info-h), var(--s-2), var(--l-1), 20%));
}
.c-notification.type-info, .c-notification.type-info::before {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-notification.type-info:hover, .c-notification.type-info:hover::before {
  background: hsl(var(--info-h), var(--s-3), var(--l-4));
}
.c-notification.type-info:last-child::before {
  background: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-notification.type-info .notification-icon {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-notification.type-warning {
  border: 4px solid hsl(var(--warning-h), var(--s-2), var(--l-3));
  color: hsl(var(--warning-h), var(--s-2), var(--l-2));
  filter: drop-shadow(0 6px 3px hsl(var(--warning-h), var(--s-2), var(--l-1), 20%));
}
.c-notification.type-warning, .c-notification.type-warning::before {
  background: hsl(var(--warning-h), var(--s-2), var(--l-5));
}
.c-notification.type-warning:hover, .c-notification.type-warning:hover::before {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-notification.type-warning:last-child::before {
  background: hsl(var(--warning-h), var(--s-2), var(--l-3));
}
.c-notification.type-warning .notification-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-notification.type-danger {
  border: 4px solid hsl(var(--danger-h), var(--s-2), var(--l-3));
  color: hsl(var(--danger-h), var(--s-2), var(--l-2));
  filter: drop-shadow(0 6px 3px hsl(var(--danger-h), var(--s-2), var(--l-1), 20%));
}
.c-notification.type-danger, .c-notification.type-danger::before {
  background: hsl(var(--danger-h), var(--s-2), var(--l-5));
}
.c-notification.type-danger:hover, .c-notification.type-danger:hover::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
}
.c-notification.type-danger:last-child::before {
  background: hsl(var(--danger-h), var(--s-2), var(--l-3));
}
.c-notification.type-danger .notification-icon {
  color: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-notification .message {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-left: 8px;
}
.c-notification .message .title {
  margin-bottom: 8px;
}
.c-notification .message .body {
  line-height: 1.5rem;
}
.c-notification:last-child::before {
  clip-path: polygon(100% 100%, 100% 0, 0 50%);
  content: "";
  display: block;
  height: 20px;
  left: -20px;
  position: absolute;
  width: 20px;
}
.c-notification.exit {
  animation: fade-out 0.75s ease;
}

.c-dialog {
  align-items: center;
  backdrop-filter: blur(2px);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 10000000;
}
.c-dialog .btn-close {
  color: hsl(var(--surface-h), var(--s-1), var(--l-6));
}
.c-dialog .btn-close:hover {
  color: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-dialog.type-danger .dialog .title {
  background: hsl(var(--danger-h), var(--s-3), var(--l-25));
  color: hsl(var(--danger-h), var(--s-3), var(--l-6));
}
.c-dialog.type-default .dialog .title {
  background: hsl(var(--surface-h), var(--s-2), var(--l-1));
}
.c-dialog.type-info .dialog .title {
  background: hsl(var(--info-h), var(--s-2), var(--l-25));
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-dialog.type-success .dialog .title {
  background: hsl(var(--success-h), var(--s-2), var(--l-25));
  color: hsl(var(--success-h), var(--s-2), var(--l-6));
}
.c-dialog.type-warning .dialog .title {
  background: hsl(var(--warning-h), var(--s-3), var(--l-25));
  color: hsl(var(--warning-h), var(--s-3), var(--l-6));
}
.c-dialog .dialog {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
  max-height: 95vh;
  max-width: 750px;
  min-width: 600px;
  overflow: auto;
  position: relative;
}
.c-dialog .dialog.dialog--no-title .body {
  padding-top: 32px;
}
.c-dialog .dialog .btn-close--floating {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 1;
}
.c-dialog .dialog .title {
  align-items: center;
  border-bottom: 1px hsl(var(--default-h), var(--s-1), var(--l-1));
  color: hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding: 8px;
}
.c-dialog .dialog .title .title-text {
  font-size: 1rem;
  text-transform: uppercase;
}
.c-dialog .dialog .title::after {
  clear: both;
}
.c-dialog .dialog .body {
  padding: 16px;
  position: relative;
}
.c-dialog .dialog .body img {
  width: 100%;
}
.c-dialog .dialog .footer {
  padding: 8px;
}
.c-dialog .dialog .footer .c-button-group {
  justify-content: flex-end;
}
@media (max-width: 750px) {
  .c-dialog {
    align-items: center;
    margin: 0;
    width: 100%;
  }
  .c-dialog .dialog {
    width: 100%;
  }
}

.c-country {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}
.c-country.disabled {
  filter: grayscale(100%);
  opacity: 0.25;
}

.c-timeline .timeline {
  border-right: 2px solid hsl(var(--surface-h), var(--s-1), var(--l-3));
  padding-top: 40px;
  position: relative;
}
.c-timeline .timeline .now {
  background: hsl(var(--surface-h), var(--s-1), var(--l-2));
  border-left: 0;
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
  font-weight: 600;
  margin-bottom: 8px;
  padding: 4px 8px;
  position: absolute;
  right: -10px;
  top: 0;
  width: 100px;
}
.c-timeline .timeline .timeline-item {
  margin-bottom: 16px;
  margin-right: 16px;
  position: relative;
}
.c-timeline .timeline .timeline-item .timeline-icon {
  height: 18px;
  width: 18px;
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border-radius: 50%;
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
  position: absolute;
  right: -26px;
  top: 24px;
}
.c-timeline .timeline .timeline-item .entry-date {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  font-weight: 600;
}
.c-timeline .timeline .timeline-item .timeline-message {
  background: #fff;
  border: 2px solid hsl(var(--surface-h), var(--s-1), var(--l-4));
  padding: 16px;
}
.c-timeline .timeline .timeline-item .timeline-message .message-header {
  align-items: center;
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
  display: flex;
  font-weight: 600;
  justify-content: space-between;
}
.c-timeline .timeline .timeline-item .timeline-message .message-header .message-header-left {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 4px;
}
.c-timeline .timeline .timeline-item .timeline-message .message-header .message-header-right {
  align-items: center;
  display: flex;
  gap: 4px;
}
.c-timeline .timeline .timeline-item .timeline-message .message-header .message-header-right .c-button {
  height: 36px;
  width: 36px;
}
.c-timeline .timeline .timeline-item .timeline-message .message-content {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-timeline .entry {
  padding-bottom: 24px;
}
.c-timeline .entry .entry-header {
  font-weight: 600;
  text-transform: uppercase;
}

.c-button {
  border: 0;
  cursor: pointer;
  display: flex;
  outline: 0;
  touch-action: manipulation;
  user-select: none;
  white-space: nowrap;
}
.c-button.disabled, .c-button[disabled] {
  cursor: not-allowed;
}
.c-button.no-interaction {
  cursor: default;
}
.c-button svg {
  pointer-events: none;
}
.c-button svg.icon-xl {
  height: 36px;
  width: 36px;
}
.c-button.type-brand.variant-action:not(.disabled) {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  border-color: hsl(var(--brand-h), var(--s-3), var(--l-25));
  color: hsl(var(--brand-h), var(--s-3), var(--l-4));
}
.c-button.type-brand.variant-action:not(.disabled) .c-button-text,
.c-button.type-brand.variant-action:not(.disabled) svg {
  color: hsl(var(--brand-h), var(--s-3), var(--l-4));
}
.c-button.type-brand.variant-action:not(.disabled):active, .c-button.type-brand.variant-action:not(.disabled).active, .c-button.type-brand.variant-action:not(.disabled):hover {
  background: hsl(var(--brand-h), var(--s-3), var(--l-25));
}
.c-button.type-brand.variant-action:not(.disabled):active .c-button-text,
.c-button.type-brand.variant-action:not(.disabled):active svg, .c-button.type-brand.variant-action:not(.disabled).active .c-button-text,
.c-button.type-brand.variant-action:not(.disabled).active svg, .c-button.type-brand.variant-action:not(.disabled):hover .c-button-text,
.c-button.type-brand.variant-action:not(.disabled):hover svg {
  color: hsl(var(--brand-h), var(--s-3), var(--l-5));
}
.c-button.type-brand.variant-action:not(.disabled):focus {
  outline: hsl(var(--brand-h), var(--s-3), var(--l-5));
}
.c-button.type-brand.variant-action.disabled {
  filter: grayscale(0.7);
}
.c-button.type-brand.variant-action.disabled:not(.active) {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  color: hsl(var(--brand-h), var(--s-3), var(--l-2));
}
.c-button.type-brand.variant-action.disabled:not(.active) .c-button-text,
.c-button.type-brand.variant-action.disabled:not(.active) svg {
  color: hsl(var(--brand-h), var(--s-3), var(--l-2));
}
.c-button.type-brand.variant-action.disabled.active {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  border-color: hsl(var(--brand-h), var(--s-3), var(--l-25));
  color: hsl(var(--brand-h), var(--s-3), var(--l-4));
}
.c-button.type-brand.variant-context {
  background: hsl(var(--brand-h), var(--s-3), var(--l-4));
  border: none;
  transition: 0.3s all ease;
}
.c-button.type-brand.variant-context .c-button-text,
.c-button.type-brand.variant-context .c-icon {
  color: hsl(var(--brand-h), var(--s-3), var(--l-1));
}
.c-button.type-brand.variant-context::before {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-context:not(.disabled).active, .c-button.type-brand.variant-context:not(.disabled):hover {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  transition: background 0.5s ease-in;
}
.c-button.type-brand.variant-context:not(.disabled).active::before, .c-button.type-brand.variant-context:not(.disabled):hover::before {
  transform: scaleX(1);
}
.c-button.type-brand.variant-context:not(.disabled).active .c-button-text,
.c-button.type-brand.variant-context:not(.disabled).active .c-icon, .c-button.type-brand.variant-context:not(.disabled):hover .c-button-text,
.c-button.type-brand.variant-context:not(.disabled):hover .c-icon {
  color: hsl(var(--brand-h), var(--s-3), var(--l-6));
}
.c-button.type-brand.variant-context.disabled {
  filter: grayscale(0.4);
}
.c-button.type-brand.variant-context.disabled .c-button-text {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-context.disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-brand.variant-context.disabled:not(.active) .c-icon {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-context.disabled.active {
  background: hsl(var(--brand-h), var(--s-3), var(--l-4));
}
.c-button.type-brand.variant-context.disabled.active .c-icon {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-link {
  background: none;
}
.c-button.type-brand.variant-link:not([disabled]) {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  cursor: pointer;
}
.c-button.type-brand.variant-link:not([disabled]):active, .c-button.type-brand.variant-link:not([disabled]).active, .c-button.type-brand.variant-link:not([disabled]):hover {
  color: hsl(var(--brand-h), var(--s-3), var(--l-25));
}
.c-button.type-brand.variant-link[disabled] {
  color: hsl(var(--brand-h), var(--s-3), var(--l-4));
  cursor: not-allowed;
}
.c-button.type-brand.variant-menu {
  background: none;
  font-weight: 500;
}
.c-button.type-brand.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--brand-h), var(--s-3), var(--l-6));
}
.c-button.type-brand.variant-menu:not([disabled], .disabled):not(.active) .c-icon {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-brand.variant-menu:not([disabled], .disabled):not(.active) svg {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-menu:not([disabled], .disabled):not(.active):hover {
  background: #fff;
}
.c-button.type-brand.variant-menu:not([disabled], .disabled):not(.active):hover .c-icon {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-menu:not([disabled], .disabled):not(.active):hover .amount,
.c-button.type-brand.variant-menu:not([disabled], .disabled):not(.active):hover .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-brand.variant-menu:not([disabled], .disabled):not(.active):hover svg {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-menu:not([disabled], .disabled).active {
  background: #fff;
  border-bottom-color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-menu:not([disabled], .disabled).active .c-icon {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-menu:not([disabled], .disabled).active .amount,
.c-button.type-brand.variant-menu:not([disabled], .disabled).active .c-button-text,
.c-button.type-brand.variant-menu:not([disabled], .disabled).active svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-brand.variant-menu:not([disabled], .disabled).active:hover {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-menu:not([disabled], .disabled) .amount,
.c-button.type-brand.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-brand.variant-menu:not([disabled], .disabled) .amount {
  font-size: 0.6rem;
}
.c-button.type-brand.variant-menu:not([disabled], .disabled) .amount-badge .c-badge {
  font-size: 0.7rem;
  font-weight: 600;
  min-height: 16px;
  min-width: 16px;
  padding: 0 2px;
}
.c-button.type-brand.variant-menu[disabled],
.c-button.type-brand.variant-menu .disabled {
  filter: grayscale(0.4);
}
.c-button.type-brand.variant-menu[disabled]:not(.active),
.c-button.type-brand.variant-menu .disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-brand.variant-menu[disabled]:not(.active) .c-icon,
.c-button.type-brand.variant-menu .disabled:not(.active) .c-icon {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-menu[disabled].active,
.c-button.type-brand.variant-menu .disabled.active {
  background: hsl(var(--brand-h), var(--s-3), var(--l-6));
}
.c-button.type-brand.variant-menu[disabled].active .c-icon,
.c-button.type-brand.variant-menu .disabled.active .c-icon {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-menu[disabled].active .amount,
.c-button.type-brand.variant-menu[disabled].active .c-button-text,
.c-button.type-brand.variant-menu[disabled].active svg,
.c-button.type-brand.variant-menu .disabled.active .amount,
.c-button.type-brand.variant-menu .disabled.active .c-button-text,
.c-button.type-brand.variant-menu .disabled.active svg {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-button.type-brand.variant-menu[disabled] .c-button-text,
.c-button.type-brand.variant-menu .disabled .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-button.type-brand.variant-toggle:not(:disabled) {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  border-color: hsl(var(--brand-h), var(--s-3), var(--l-25));
  color: hsl(var(--brand-h), var(--s-3), var(--l-5));
}
.c-button.type-brand.variant-toggle:not(:disabled) .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-button.type-brand.variant-toggle:not(:disabled) .amount {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
  font-weight: 600;
}
.c-button.type-brand.variant-toggle:not(:disabled) svg {
  color: hsl(var(--brand-h), var(--s-3), var(--l-5));
}
.c-button.type-brand.variant-toggle:not(:disabled):not(.no-interaction):active, .c-button.type-brand.variant-toggle:not(:disabled):not(.no-interaction).active, .c-button.type-brand.variant-toggle:not(:disabled):not(.no-interaction):hover {
  background: hsl(var(--brand-h), var(--s-3), var(--l-25));
  border-color: hsl(var(--brand-h), var(--s-3), var(--l-5));
}
.c-button.type-brand.variant-toggle:not(:disabled):not(.no-interaction):active svg, .c-button.type-brand.variant-toggle:not(:disabled):not(.no-interaction).active svg, .c-button.type-brand.variant-toggle:not(:disabled):not(.no-interaction):hover svg {
  color: hsl(var(--brand-h), var(--s-3), var(--l-6));
}
.c-button.type-brand.variant-toggle:not(:disabled):not(.no-interaction):focus {
  outline: hsl(var(--brand-h), var(--s-3), var(--l-6));
}
.c-button.type-brand.variant-toggle.disabled, .c-button.type-brand.variant-toggle[disabled] {
  filter: grayscale(0.4);
}
.c-button.type-brand.variant-toggle.disabled:not(.active), .c-button.type-brand.variant-toggle[disabled]:not(.active) {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  border-color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  color: hsl(var(--brand-h), var(--s-3), var(--l-25));
}
.c-button.type-brand.variant-toggle.disabled:not(.active) svg, .c-button.type-brand.variant-toggle[disabled]:not(.active) svg {
  color: hsl(var(--brand-h), var(--s-3), var(--l-25));
}
.c-button.type-brand.variant-toggle.disabled.active, .c-button.type-brand.variant-toggle[disabled].active {
  background: hsl(var(--brand-h), var(--s-3), var(--l-4));
  border-color: hsl(var(--brand-h), var(--s-3), var(--l-25));
  color: hsl(var(--brand-h), var(--s-3), var(--l-25));
}
.c-button.type-danger.variant-action:not(.disabled) {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
  border-color: hsl(var(--danger-h), var(--s-3), var(--l-3));
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-button.type-danger.variant-action:not(.disabled) .c-button-text,
.c-button.type-danger.variant-action:not(.disabled) svg {
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-button.type-danger.variant-action:not(.disabled):active, .c-button.type-danger.variant-action:not(.disabled).active, .c-button.type-danger.variant-action:not(.disabled):hover {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-action:not(.disabled):active .c-button-text,
.c-button.type-danger.variant-action:not(.disabled):active svg, .c-button.type-danger.variant-action:not(.disabled).active .c-button-text,
.c-button.type-danger.variant-action:not(.disabled).active svg, .c-button.type-danger.variant-action:not(.disabled):hover .c-button-text,
.c-button.type-danger.variant-action:not(.disabled):hover svg {
  color: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-button.type-danger.variant-action:not(.disabled):focus {
  outline: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-button.type-danger.variant-action.disabled {
  filter: grayscale(0.7);
}
.c-button.type-danger.variant-action.disabled:not(.active) {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-action.disabled:not(.active) .c-button-text,
.c-button.type-danger.variant-action.disabled:not(.active) svg {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-action.disabled.active {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
  border-color: hsl(var(--danger-h), var(--s-3), var(--l-3));
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-button.type-danger.variant-context {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
  border: none;
  transition: 0.3s all ease;
}
.c-button.type-danger.variant-context .c-button-text,
.c-button.type-danger.variant-context .c-icon {
  color: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-button.type-danger.variant-context::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-25));
}
.c-button.type-danger.variant-context:not(.disabled).active, .c-button.type-danger.variant-context:not(.disabled):hover {
  background: hsl(var(--danger-h), var(--s-3), var(--l-25));
  transition: background 0.5s ease-in;
}
.c-button.type-danger.variant-context:not(.disabled).active::before, .c-button.type-danger.variant-context:not(.disabled):hover::before {
  transform: scaleX(1);
}
.c-button.type-danger.variant-context:not(.disabled).active .c-button-text,
.c-button.type-danger.variant-context:not(.disabled).active .c-icon, .c-button.type-danger.variant-context:not(.disabled):hover .c-button-text,
.c-button.type-danger.variant-context:not(.disabled):hover .c-icon {
  color: hsl(var(--danger-h), var(--s-3), var(--l-5));
}
.c-button.type-danger.variant-context.disabled {
  filter: grayscale(0.4);
}
.c-button.type-danger.variant-context.disabled .c-button-text {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-context.disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-danger.variant-context.disabled:not(.active) .c-icon {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-context.disabled.active {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
}
.c-button.type-danger.variant-context.disabled.active .c-icon {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-link {
  background: none;
}
.c-button.type-danger.variant-link:not([disabled]) {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
  cursor: pointer;
}
.c-button.type-danger.variant-link:not([disabled]):active, .c-button.type-danger.variant-link:not([disabled]).active, .c-button.type-danger.variant-link:not([disabled]):hover {
  color: hsl(var(--danger-h), var(--s-3), var(--l-25));
}
.c-button.type-danger.variant-link[disabled] {
  color: hsl(var(--danger-h), var(--s-3), var(--l-4));
  cursor: not-allowed;
}
.c-button.type-danger.variant-menu {
  background: none;
  font-weight: 500;
}
.c-button.type-danger.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--danger-h), var(--s-3), var(--l-5));
}
.c-button.type-danger.variant-menu:not([disabled], .disabled):not(.active) .c-icon {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-danger.variant-menu:not([disabled], .disabled):not(.active) svg {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-menu:not([disabled], .disabled):not(.active):hover {
  background: #fff;
}
.c-button.type-danger.variant-menu:not([disabled], .disabled):not(.active):hover .c-icon {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-button.type-danger.variant-menu:not([disabled], .disabled):not(.active):hover .amount,
.c-button.type-danger.variant-menu:not([disabled], .disabled):not(.active):hover .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-danger.variant-menu:not([disabled], .disabled):not(.active):hover svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-button.type-danger.variant-menu:not([disabled], .disabled).active {
  background: #fff;
  border-bottom-color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-button.type-danger.variant-menu:not([disabled], .disabled).active .c-icon {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-button.type-danger.variant-menu:not([disabled], .disabled).active .amount,
.c-button.type-danger.variant-menu:not([disabled], .disabled).active .c-button-text,
.c-button.type-danger.variant-menu:not([disabled], .disabled).active svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-danger.variant-menu:not([disabled], .disabled).active:hover {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-button.type-danger.variant-menu:not([disabled], .disabled) .amount,
.c-button.type-danger.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-danger.variant-menu:not([disabled], .disabled) .amount {
  font-size: 0.6rem;
}
.c-button.type-danger.variant-menu:not([disabled], .disabled) .amount-badge .c-badge {
  font-size: 0.7rem;
  font-weight: 600;
  min-height: 16px;
  min-width: 16px;
  padding: 0 2px;
}
.c-button.type-danger.variant-menu[disabled],
.c-button.type-danger.variant-menu .disabled {
  filter: grayscale(0.4);
}
.c-button.type-danger.variant-menu[disabled]:not(.active),
.c-button.type-danger.variant-menu .disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-danger.variant-menu[disabled]:not(.active) .c-icon,
.c-button.type-danger.variant-menu .disabled:not(.active) .c-icon {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-menu[disabled].active,
.c-button.type-danger.variant-menu .disabled.active {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
}
.c-button.type-danger.variant-menu[disabled].active .c-icon,
.c-button.type-danger.variant-menu .disabled.active .c-icon {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-menu[disabled].active .amount,
.c-button.type-danger.variant-menu[disabled].active .c-button-text,
.c-button.type-danger.variant-menu[disabled].active svg,
.c-button.type-danger.variant-menu .disabled.active .amount,
.c-button.type-danger.variant-menu .disabled.active .c-button-text,
.c-button.type-danger.variant-menu .disabled.active svg {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-menu[disabled] .c-button-text,
.c-button.type-danger.variant-menu .disabled .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-button.type-danger.variant-toggle:not(:disabled) {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
  border-color: hsl(var(--danger-h), var(--s-3), var(--l-3));
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-toggle:not(:disabled) .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-button.type-danger.variant-toggle:not(:disabled) .amount {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
  font-weight: 600;
}
.c-button.type-danger.variant-toggle:not(:disabled) svg {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-toggle:not(:disabled):not(.no-interaction):active, .c-button.type-danger.variant-toggle:not(:disabled):not(.no-interaction).active, .c-button.type-danger.variant-toggle:not(:disabled):not(.no-interaction):hover {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
  border-color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-toggle:not(:disabled):not(.no-interaction):active svg, .c-button.type-danger.variant-toggle:not(:disabled):not(.no-interaction).active svg, .c-button.type-danger.variant-toggle:not(:disabled):not(.no-interaction):hover svg {
  color: hsl(var(--danger-h), var(--s-3), var(--l-6));
}
.c-button.type-danger.variant-toggle:not(:disabled):not(.no-interaction):focus {
  outline: hsl(var(--danger-h), var(--s-3), var(--l-6));
}
.c-button.type-danger.variant-toggle.disabled, .c-button.type-danger.variant-toggle[disabled] {
  filter: grayscale(0.4);
}
.c-button.type-danger.variant-toggle.disabled:not(.active), .c-button.type-danger.variant-toggle[disabled]:not(.active) {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  border-color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-toggle.disabled:not(.active) svg, .c-button.type-danger.variant-toggle[disabled]:not(.active) svg {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-danger.variant-toggle.disabled.active, .c-button.type-danger.variant-toggle[disabled].active {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
  border-color: hsl(var(--danger-h), var(--s-3), var(--l-3));
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-button.type-surface.variant-action:not(.disabled), .c-button.type-default.variant-action:not(.disabled) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border-color: hsl(var(--surface-h), var(--s-1), var(--l-3));
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
}
.c-button.type-surface.variant-action:not(.disabled) .c-button-text,
.c-button.type-surface.variant-action:not(.disabled) svg, .c-button.type-default.variant-action:not(.disabled) .c-button-text,
.c-button.type-default.variant-action:not(.disabled) svg {
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
}
.c-button.type-surface.variant-action:not(.disabled):active, .c-button.type-surface.variant-action:not(.disabled).active, .c-button.type-surface.variant-action:not(.disabled):hover, .c-button.type-default.variant-action:not(.disabled):active, .c-button.type-default.variant-action:not(.disabled).active, .c-button.type-default.variant-action:not(.disabled):hover {
  background: hsl(var(--surface-h), var(--s-1), var(--l-3));
}
.c-button.type-surface.variant-action:not(.disabled):active .c-button-text,
.c-button.type-surface.variant-action:not(.disabled):active svg, .c-button.type-surface.variant-action:not(.disabled).active .c-button-text,
.c-button.type-surface.variant-action:not(.disabled).active svg, .c-button.type-surface.variant-action:not(.disabled):hover .c-button-text,
.c-button.type-surface.variant-action:not(.disabled):hover svg, .c-button.type-default.variant-action:not(.disabled):active .c-button-text,
.c-button.type-default.variant-action:not(.disabled):active svg, .c-button.type-default.variant-action:not(.disabled).active .c-button-text,
.c-button.type-default.variant-action:not(.disabled).active svg, .c-button.type-default.variant-action:not(.disabled):hover .c-button-text,
.c-button.type-default.variant-action:not(.disabled):hover svg {
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-action:not(.disabled):focus, .c-button.type-default.variant-action:not(.disabled):focus {
  outline: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-action.disabled, .c-button.type-default.variant-action.disabled {
  filter: grayscale(0.7);
}
.c-button.type-surface.variant-action.disabled:not(.active), .c-button.type-default.variant-action.disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  color: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-button.type-surface.variant-action.disabled:not(.active) .c-button-text,
.c-button.type-surface.variant-action.disabled:not(.active) svg, .c-button.type-default.variant-action.disabled:not(.active) .c-button-text,
.c-button.type-default.variant-action.disabled:not(.active) svg {
  color: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-button.type-surface.variant-action.disabled.active, .c-button.type-default.variant-action.disabled.active {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border-color: hsl(var(--surface-h), var(--s-1), var(--l-3));
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
}
.c-button.type-surface.variant-context, .c-button.type-default.variant-context {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
  border: none;
  transition: 0.3s all ease;
}
.c-button.type-surface.variant-context .c-button-text,
.c-button.type-surface.variant-context .c-icon, .c-button.type-default.variant-context .c-button-text,
.c-button.type-default.variant-context .c-icon {
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-context::before, .c-button.type-default.variant-context::before {
  background: hsl(var(--surface-h), var(--s-1), var(--l-2));
}
.c-button.type-surface.variant-context:not(.disabled).active, .c-button.type-surface.variant-context:not(.disabled):hover, .c-button.type-default.variant-context:not(.disabled).active, .c-button.type-default.variant-context:not(.disabled):hover {
  background: hsl(var(--surface-h), var(--s-1), var(--l-2));
  transition: background 0.5s ease-in;
}
.c-button.type-surface.variant-context:not(.disabled).active::before, .c-button.type-surface.variant-context:not(.disabled):hover::before, .c-button.type-default.variant-context:not(.disabled).active::before, .c-button.type-default.variant-context:not(.disabled):hover::before {
  transform: scaleX(1);
}
.c-button.type-surface.variant-context:not(.disabled).active .c-button-text,
.c-button.type-surface.variant-context:not(.disabled).active .c-icon, .c-button.type-surface.variant-context:not(.disabled):hover .c-button-text,
.c-button.type-surface.variant-context:not(.disabled):hover .c-icon, .c-button.type-default.variant-context:not(.disabled).active .c-button-text,
.c-button.type-default.variant-context:not(.disabled).active .c-icon, .c-button.type-default.variant-context:not(.disabled):hover .c-button-text,
.c-button.type-default.variant-context:not(.disabled):hover .c-icon {
  color: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-surface.variant-context.disabled, .c-button.type-default.variant-context.disabled {
  filter: grayscale(0.4);
}
.c-button.type-surface.variant-context.disabled .c-button-text, .c-button.type-default.variant-context.disabled .c-button-text {
  color: hsl(var(--surface-h), var(--s-1), var(--l-3));
}
.c-button.type-surface.variant-context.disabled:not(.active), .c-button.type-default.variant-context.disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-surface.variant-context.disabled:not(.active) .c-icon, .c-button.type-default.variant-context.disabled:not(.active) .c-icon {
  color: hsl(var(--surface-h), var(--s-1), var(--l-3));
}
.c-button.type-surface.variant-context.disabled.active, .c-button.type-default.variant-context.disabled.active {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-button.type-surface.variant-context.disabled.active .c-icon, .c-button.type-default.variant-context.disabled.active .c-icon {
  color: hsl(var(--surface-h), var(--s-1), var(--l-3));
}
.c-button.type-surface.variant-link, .c-button.type-default.variant-link {
  background: none;
}
.c-button.type-surface.variant-link:not([disabled]), .c-button.type-default.variant-link:not([disabled]) {
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
  cursor: pointer;
}
.c-button.type-surface.variant-link:not([disabled]):active, .c-button.type-surface.variant-link:not([disabled]).active, .c-button.type-surface.variant-link:not([disabled]):hover, .c-button.type-default.variant-link:not([disabled]):active, .c-button.type-default.variant-link:not([disabled]).active, .c-button.type-default.variant-link:not([disabled]):hover {
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-link[disabled], .c-button.type-default.variant-link[disabled] {
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  cursor: not-allowed;
}
.c-button.type-surface.variant-menu, .c-button.type-default.variant-menu {
  background: none;
  font-weight: 500;
}
.c-button.type-surface.variant-menu:not([disabled], .disabled) .c-button-text, .c-button.type-default.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-surface.variant-menu:not([disabled], .disabled):not(.active) .c-icon, .c-button.type-default.variant-menu:not([disabled], .disabled):not(.active) .c-icon {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-menu:not([disabled], .disabled):not(.active) svg, .c-button.type-default.variant-menu:not([disabled], .disabled):not(.active) svg {
  color: hsl(var(--surface-h), var(--s-1), var(--l-3));
}
.c-button.type-surface.variant-menu:not([disabled], .disabled):not(.active):hover, .c-button.type-default.variant-menu:not([disabled], .disabled):not(.active):hover {
  background: #fff;
}
.c-button.type-surface.variant-menu:not([disabled], .disabled):not(.active):hover .c-icon, .c-button.type-default.variant-menu:not([disabled], .disabled):not(.active):hover .c-icon {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-button.type-surface.variant-menu:not([disabled], .disabled):not(.active):hover .amount,
.c-button.type-surface.variant-menu:not([disabled], .disabled):not(.active):hover .c-button-text, .c-button.type-default.variant-menu:not([disabled], .disabled):not(.active):hover .amount,
.c-button.type-default.variant-menu:not([disabled], .disabled):not(.active):hover .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-menu:not([disabled], .disabled):not(.active):hover svg, .c-button.type-default.variant-menu:not([disabled], .disabled):not(.active):hover svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-button.type-surface.variant-menu:not([disabled], .disabled).active, .c-button.type-default.variant-menu:not([disabled], .disabled).active {
  background: #fff;
  border-bottom-color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-button.type-surface.variant-menu:not([disabled], .disabled).active .c-icon, .c-button.type-default.variant-menu:not([disabled], .disabled).active .c-icon {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-button.type-surface.variant-menu:not([disabled], .disabled).active .amount,
.c-button.type-surface.variant-menu:not([disabled], .disabled).active .c-button-text,
.c-button.type-surface.variant-menu:not([disabled], .disabled).active svg, .c-button.type-default.variant-menu:not([disabled], .disabled).active .amount,
.c-button.type-default.variant-menu:not([disabled], .disabled).active .c-button-text,
.c-button.type-default.variant-menu:not([disabled], .disabled).active svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-menu:not([disabled], .disabled).active:hover, .c-button.type-default.variant-menu:not([disabled], .disabled).active:hover {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-button.type-surface.variant-menu:not([disabled], .disabled) .amount,
.c-button.type-surface.variant-menu:not([disabled], .disabled) .c-button-text, .c-button.type-default.variant-menu:not([disabled], .disabled) .amount,
.c-button.type-default.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-menu:not([disabled], .disabled) .amount, .c-button.type-default.variant-menu:not([disabled], .disabled) .amount {
  font-size: 0.6rem;
}
.c-button.type-surface.variant-menu:not([disabled], .disabled) .amount-badge .c-badge, .c-button.type-default.variant-menu:not([disabled], .disabled) .amount-badge .c-badge {
  font-size: 0.7rem;
  font-weight: 600;
  min-height: 16px;
  min-width: 16px;
  padding: 0 2px;
}
.c-button.type-surface.variant-menu[disabled],
.c-button.type-surface.variant-menu .disabled, .c-button.type-default.variant-menu[disabled],
.c-button.type-default.variant-menu .disabled {
  filter: grayscale(0.4);
}
.c-button.type-surface.variant-menu[disabled]:not(.active),
.c-button.type-surface.variant-menu .disabled:not(.active), .c-button.type-default.variant-menu[disabled]:not(.active),
.c-button.type-default.variant-menu .disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-surface.variant-menu[disabled]:not(.active) .c-icon,
.c-button.type-surface.variant-menu .disabled:not(.active) .c-icon, .c-button.type-default.variant-menu[disabled]:not(.active) .c-icon,
.c-button.type-default.variant-menu .disabled:not(.active) .c-icon {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-button.type-surface.variant-menu[disabled].active,
.c-button.type-surface.variant-menu .disabled.active, .c-button.type-default.variant-menu[disabled].active,
.c-button.type-default.variant-menu .disabled.active {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
}
.c-button.type-surface.variant-menu[disabled].active .c-icon,
.c-button.type-surface.variant-menu .disabled.active .c-icon, .c-button.type-default.variant-menu[disabled].active .c-icon,
.c-button.type-default.variant-menu .disabled.active .c-icon {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-button.type-surface.variant-menu[disabled].active .amount,
.c-button.type-surface.variant-menu[disabled].active .c-button-text,
.c-button.type-surface.variant-menu[disabled].active svg,
.c-button.type-surface.variant-menu .disabled.active .amount,
.c-button.type-surface.variant-menu .disabled.active .c-button-text,
.c-button.type-surface.variant-menu .disabled.active svg, .c-button.type-default.variant-menu[disabled].active .amount,
.c-button.type-default.variant-menu[disabled].active .c-button-text,
.c-button.type-default.variant-menu[disabled].active svg,
.c-button.type-default.variant-menu .disabled.active .amount,
.c-button.type-default.variant-menu .disabled.active .c-button-text,
.c-button.type-default.variant-menu .disabled.active svg {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-button.type-surface.variant-menu[disabled] .c-button-text,
.c-button.type-surface.variant-menu .disabled .c-button-text, .c-button.type-default.variant-menu[disabled] .c-button-text,
.c-button.type-default.variant-menu .disabled .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-button.type-surface.variant-toggle:not(:disabled), .c-button.type-default.variant-toggle:not(:disabled) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
  border-color: hsl(var(--surface-h), var(--s-1), var(--l-3));
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-toggle:not(:disabled) .c-button-text, .c-button.type-default.variant-toggle:not(:disabled) .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-button.type-surface.variant-toggle:not(:disabled) .amount, .c-button.type-default.variant-toggle:not(:disabled) .amount {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
  font-weight: 600;
}
.c-button.type-surface.variant-toggle:not(:disabled) svg, .c-button.type-default.variant-toggle:not(:disabled) svg {
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-toggle:not(:disabled):not(.no-interaction):active, .c-button.type-surface.variant-toggle:not(:disabled):not(.no-interaction).active, .c-button.type-surface.variant-toggle:not(:disabled):not(.no-interaction):hover, .c-button.type-default.variant-toggle:not(:disabled):not(.no-interaction):active, .c-button.type-default.variant-toggle:not(:disabled):not(.no-interaction).active, .c-button.type-default.variant-toggle:not(:disabled):not(.no-interaction):hover {
  background: hsl(var(--surface-h), var(--s-1), var(--l-3));
  border-color: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-toggle:not(:disabled):not(.no-interaction):active svg, .c-button.type-surface.variant-toggle:not(:disabled):not(.no-interaction).active svg, .c-button.type-surface.variant-toggle:not(:disabled):not(.no-interaction):hover svg, .c-button.type-default.variant-toggle:not(:disabled):not(.no-interaction):active svg, .c-button.type-default.variant-toggle:not(:disabled):not(.no-interaction).active svg, .c-button.type-default.variant-toggle:not(:disabled):not(.no-interaction):hover svg {
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-toggle:not(:disabled):not(.no-interaction):focus, .c-button.type-default.variant-toggle:not(:disabled):not(.no-interaction):focus {
  outline: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-button.type-surface.variant-toggle.disabled, .c-button.type-surface.variant-toggle[disabled], .c-button.type-default.variant-toggle.disabled, .c-button.type-default.variant-toggle[disabled] {
  filter: grayscale(0.4);
}
.c-button.type-surface.variant-toggle.disabled:not(.active), .c-button.type-surface.variant-toggle[disabled]:not(.active), .c-button.type-default.variant-toggle.disabled:not(.active), .c-button.type-default.variant-toggle[disabled]:not(.active) {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  border-color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-button.type-surface.variant-toggle.disabled:not(.active) svg, .c-button.type-surface.variant-toggle[disabled]:not(.active) svg, .c-button.type-default.variant-toggle.disabled:not(.active) svg, .c-button.type-default.variant-toggle[disabled]:not(.active) svg {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-button.type-surface.variant-toggle.disabled.active, .c-button.type-surface.variant-toggle[disabled].active, .c-button.type-default.variant-toggle.disabled.active, .c-button.type-default.variant-toggle[disabled].active {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  border-color: hsl(var(--surface-h), var(--s-1), var(--l-3));
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-button.type-info.variant-action:not(.disabled) {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  border-color: hsl(var(--info-h), var(--s-3), var(--l-1));
  color: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-button.type-info.variant-action:not(.disabled) .c-button-text,
.c-button.type-info.variant-action:not(.disabled) svg {
  color: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-button.type-info.variant-action:not(.disabled):active, .c-button.type-info.variant-action:not(.disabled).active, .c-button.type-info.variant-action:not(.disabled):hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-button.type-info.variant-action:not(.disabled):active .c-button-text,
.c-button.type-info.variant-action:not(.disabled):active svg, .c-button.type-info.variant-action:not(.disabled).active .c-button-text,
.c-button.type-info.variant-action:not(.disabled).active svg, .c-button.type-info.variant-action:not(.disabled):hover .c-button-text,
.c-button.type-info.variant-action:not(.disabled):hover svg {
  color: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-button.type-info.variant-action:not(.disabled):focus {
  outline: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-button.type-info.variant-action.disabled {
  filter: grayscale(0.7);
}
.c-button.type-info.variant-action.disabled:not(.active) {
  background: hsl(var(--info-h), var(--s-2), var(--l-3));
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-action.disabled:not(.active) .c-button-text,
.c-button.type-info.variant-action.disabled:not(.active) svg {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-action.disabled.active {
  background: hsl(var(--info-h), var(--s-2), var(--l-3));
  border-color: hsl(var(--info-h), var(--s-3), var(--l-1));
  color: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-button.type-info.variant-context {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
  border: none;
  transition: 0.3s all ease;
}
.c-button.type-info.variant-context .c-button-text,
.c-button.type-info.variant-context .c-icon {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-button.type-info.variant-context::before {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-context:not(.disabled).active, .c-button.type-info.variant-context:not(.disabled):hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  transition: background 0.5s ease-in;
}
.c-button.type-info.variant-context:not(.disabled).active::before, .c-button.type-info.variant-context:not(.disabled):hover::before {
  transform: scaleX(1);
}
.c-button.type-info.variant-context:not(.disabled).active .c-button-text,
.c-button.type-info.variant-context:not(.disabled).active .c-icon, .c-button.type-info.variant-context:not(.disabled):hover .c-button-text,
.c-button.type-info.variant-context:not(.disabled):hover .c-icon {
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-button.type-info.variant-context.disabled {
  filter: grayscale(0.4);
}
.c-button.type-info.variant-context.disabled .c-button-text {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-button.type-info.variant-context.disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-info.variant-context.disabled:not(.active) .c-icon {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-button.type-info.variant-context.disabled.active {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-button.type-info.variant-context.disabled.active .c-icon {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-button.type-info.variant-link {
  background: none;
}
.c-button.type-info.variant-link:not([disabled]) {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  cursor: pointer;
}
.c-button.type-info.variant-link:not([disabled]):active, .c-button.type-info.variant-link:not([disabled]).active, .c-button.type-info.variant-link:not([disabled]):hover {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-button.type-info.variant-link[disabled] {
  color: hsl(var(--info-h), var(--s-2), var(--l-4));
  cursor: not-allowed;
}
.c-button.type-info.variant-menu {
  background: none;
  font-weight: 500;
}
.c-button.type-info.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-button.type-info.variant-menu:not([disabled], .disabled):not(.active) .c-icon {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-info.variant-menu:not([disabled], .disabled):not(.active) svg {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-menu:not([disabled], .disabled):not(.active):hover {
  background: #fff;
}
.c-button.type-info.variant-menu:not([disabled], .disabled):not(.active):hover .c-icon {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-menu:not([disabled], .disabled):not(.active):hover .amount,
.c-button.type-info.variant-menu:not([disabled], .disabled):not(.active):hover .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-info.variant-menu:not([disabled], .disabled):not(.active):hover svg {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-menu:not([disabled], .disabled).active {
  background: #fff;
  border-bottom-color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-menu:not([disabled], .disabled).active .c-icon {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-menu:not([disabled], .disabled).active .amount,
.c-button.type-info.variant-menu:not([disabled], .disabled).active .c-button-text,
.c-button.type-info.variant-menu:not([disabled], .disabled).active svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-info.variant-menu:not([disabled], .disabled).active:hover {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-menu:not([disabled], .disabled) .amount,
.c-button.type-info.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-info.variant-menu:not([disabled], .disabled) .amount {
  font-size: 0.6rem;
}
.c-button.type-info.variant-menu:not([disabled], .disabled) .amount-badge .c-badge {
  font-size: 0.7rem;
  font-weight: 600;
  min-height: 16px;
  min-width: 16px;
  padding: 0 2px;
}
.c-button.type-info.variant-menu[disabled],
.c-button.type-info.variant-menu .disabled {
  filter: grayscale(0.4);
}
.c-button.type-info.variant-menu[disabled]:not(.active),
.c-button.type-info.variant-menu .disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-info.variant-menu[disabled]:not(.active) .c-icon,
.c-button.type-info.variant-menu .disabled:not(.active) .c-icon {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-menu[disabled].active,
.c-button.type-info.variant-menu .disabled.active {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-button.type-info.variant-menu[disabled].active .c-icon,
.c-button.type-info.variant-menu .disabled.active .c-icon {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-menu[disabled].active .amount,
.c-button.type-info.variant-menu[disabled].active .c-button-text,
.c-button.type-info.variant-menu[disabled].active svg,
.c-button.type-info.variant-menu .disabled.active .amount,
.c-button.type-info.variant-menu .disabled.active .c-button-text,
.c-button.type-info.variant-menu .disabled.active svg {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-menu[disabled] .c-button-text,
.c-button.type-info.variant-menu .disabled .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-button.type-info.variant-toggle:not(:disabled) {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-toggle:not(:disabled) .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-button.type-info.variant-toggle:not(:disabled) .amount {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
  font-weight: 600;
}
.c-button.type-info.variant-toggle:not(:disabled) svg {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-toggle:not(:disabled):not(.no-interaction):active, .c-button.type-info.variant-toggle:not(:disabled):not(.no-interaction).active, .c-button.type-info.variant-toggle:not(:disabled):not(.no-interaction):hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  border-color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-button.type-info.variant-toggle:not(:disabled):not(.no-interaction):active svg, .c-button.type-info.variant-toggle:not(:disabled):not(.no-interaction).active svg, .c-button.type-info.variant-toggle:not(:disabled):not(.no-interaction):hover svg {
  color: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-button.type-info.variant-toggle:not(:disabled):not(.no-interaction):focus {
  outline: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-button.type-info.variant-toggle.disabled, .c-button.type-info.variant-toggle[disabled] {
  filter: grayscale(0.4);
}
.c-button.type-info.variant-toggle.disabled:not(.active), .c-button.type-info.variant-toggle[disabled]:not(.active) {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  border-color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-button.type-info.variant-toggle.disabled:not(.active) svg, .c-button.type-info.variant-toggle[disabled]:not(.active) svg {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-button.type-info.variant-toggle.disabled.active, .c-button.type-info.variant-toggle[disabled].active {
  background: hsl(var(--info-h), var(--s-2), var(--l-3));
  border-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-button.type-success.variant-action:not(.disabled) {
  background: hsl(var(--success-h), var(--s-2), var(--l-2));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-1));
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-button.type-success.variant-action:not(.disabled) .c-button-text,
.c-button.type-success.variant-action:not(.disabled) svg {
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-button.type-success.variant-action:not(.disabled):active, .c-button.type-success.variant-action:not(.disabled).active, .c-button.type-success.variant-action:not(.disabled):hover {
  background: hsl(var(--success-h), var(--s-2), var(--l-1));
}
.c-button.type-success.variant-action:not(.disabled):active .c-button-text,
.c-button.type-success.variant-action:not(.disabled):active svg, .c-button.type-success.variant-action:not(.disabled).active .c-button-text,
.c-button.type-success.variant-action:not(.disabled).active svg, .c-button.type-success.variant-action:not(.disabled):hover .c-button-text,
.c-button.type-success.variant-action:not(.disabled):hover svg {
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-button.type-success.variant-action:not(.disabled):focus {
  outline: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-button.type-success.variant-action.disabled {
  filter: grayscale(0.7);
}
.c-button.type-success.variant-action.disabled:not(.active) {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-action.disabled:not(.active) .c-button-text,
.c-button.type-success.variant-action.disabled:not(.active) svg {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-action.disabled.active {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-1));
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-button.type-success.variant-context {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
  border: none;
  transition: 0.3s all ease;
}
.c-button.type-success.variant-context .c-button-text,
.c-button.type-success.variant-context .c-icon {
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
}
.c-button.type-success.variant-context::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-context:not(.disabled).active, .c-button.type-success.variant-context:not(.disabled):hover {
  background: hsl(var(--success-h), var(--s-2), var(--l-2));
  transition: background 0.5s ease-in;
}
.c-button.type-success.variant-context:not(.disabled).active::before, .c-button.type-success.variant-context:not(.disabled):hover::before {
  transform: scaleX(1);
}
.c-button.type-success.variant-context:not(.disabled).active .c-button-text,
.c-button.type-success.variant-context:not(.disabled).active .c-icon, .c-button.type-success.variant-context:not(.disabled):hover .c-button-text,
.c-button.type-success.variant-context:not(.disabled):hover .c-icon {
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-button.type-success.variant-context.disabled {
  filter: grayscale(0.4);
}
.c-button.type-success.variant-context.disabled .c-button-text {
  color: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-button.type-success.variant-context.disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-success.variant-context.disabled:not(.active) .c-icon {
  color: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-button.type-success.variant-context.disabled.active {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-button.type-success.variant-context.disabled.active .c-icon {
  color: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-button.type-success.variant-link {
  background: none;
}
.c-button.type-success.variant-link:not([disabled]) {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
  cursor: pointer;
}
.c-button.type-success.variant-link:not([disabled]):active, .c-button.type-success.variant-link:not([disabled]).active, .c-button.type-success.variant-link:not([disabled]):hover {
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
}
.c-button.type-success.variant-link[disabled] {
  color: hsl(var(--success-h), var(--s-2), var(--l-4));
  cursor: not-allowed;
}
.c-button.type-success.variant-menu {
  background: none;
  font-weight: 500;
}
.c-button.type-success.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-button.type-success.variant-menu:not([disabled], .disabled):not(.active) .c-icon {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-success.variant-menu:not([disabled], .disabled):not(.active) svg {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-menu:not([disabled], .disabled):not(.active):hover {
  background: #fff;
}
.c-button.type-success.variant-menu:not([disabled], .disabled):not(.active):hover .c-icon {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-menu:not([disabled], .disabled):not(.active):hover .amount,
.c-button.type-success.variant-menu:not([disabled], .disabled):not(.active):hover .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-success.variant-menu:not([disabled], .disabled):not(.active):hover svg {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-menu:not([disabled], .disabled).active {
  background: #fff;
  border-bottom-color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-menu:not([disabled], .disabled).active .c-icon {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-menu:not([disabled], .disabled).active .amount,
.c-button.type-success.variant-menu:not([disabled], .disabled).active .c-button-text,
.c-button.type-success.variant-menu:not([disabled], .disabled).active svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-success.variant-menu:not([disabled], .disabled).active:hover {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-menu:not([disabled], .disabled) .amount,
.c-button.type-success.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-success.variant-menu:not([disabled], .disabled) .amount {
  font-size: 0.6rem;
}
.c-button.type-success.variant-menu:not([disabled], .disabled) .amount-badge .c-badge {
  font-size: 0.7rem;
  font-weight: 600;
  min-height: 16px;
  min-width: 16px;
  padding: 0 2px;
}
.c-button.type-success.variant-menu[disabled],
.c-button.type-success.variant-menu .disabled {
  filter: grayscale(0.4);
}
.c-button.type-success.variant-menu[disabled]:not(.active),
.c-button.type-success.variant-menu .disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-success.variant-menu[disabled]:not(.active) .c-icon,
.c-button.type-success.variant-menu .disabled:not(.active) .c-icon {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-menu[disabled].active,
.c-button.type-success.variant-menu .disabled.active {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-button.type-success.variant-menu[disabled].active .c-icon,
.c-button.type-success.variant-menu .disabled.active .c-icon {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-menu[disabled].active .amount,
.c-button.type-success.variant-menu[disabled].active .c-button-text,
.c-button.type-success.variant-menu[disabled].active svg,
.c-button.type-success.variant-menu .disabled.active .amount,
.c-button.type-success.variant-menu .disabled.active .c-button-text,
.c-button.type-success.variant-menu .disabled.active svg {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-menu[disabled] .c-button-text,
.c-button.type-success.variant-menu .disabled .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-button.type-success.variant-toggle:not(:disabled) {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-3));
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-toggle:not(:disabled) .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-button.type-success.variant-toggle:not(:disabled) .amount {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
  font-weight: 600;
}
.c-button.type-success.variant-toggle:not(:disabled) svg {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-toggle:not(:disabled):not(.no-interaction):active, .c-button.type-success.variant-toggle:not(:disabled):not(.no-interaction).active, .c-button.type-success.variant-toggle:not(:disabled):not(.no-interaction):hover {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-button.type-success.variant-toggle:not(:disabled):not(.no-interaction):active svg, .c-button.type-success.variant-toggle:not(:disabled):not(.no-interaction).active svg, .c-button.type-success.variant-toggle:not(:disabled):not(.no-interaction):hover svg {
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
}
.c-button.type-success.variant-toggle:not(:disabled):not(.no-interaction):focus {
  outline: hsl(var(--success-h), var(--s-2), var(--l-1));
}
.c-button.type-success.variant-toggle.disabled, .c-button.type-success.variant-toggle[disabled] {
  filter: grayscale(0.4);
}
.c-button.type-success.variant-toggle.disabled:not(.active), .c-button.type-success.variant-toggle[disabled]:not(.active) {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  border-color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  color: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-button.type-success.variant-toggle.disabled:not(.active) svg, .c-button.type-success.variant-toggle[disabled]:not(.active) svg {
  color: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-button.type-success.variant-toggle.disabled.active, .c-button.type-success.variant-toggle[disabled].active {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-3));
  color: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-button.type-warning.variant-action:not(.disabled) {
  background: hsl(var(--warning-h), var(--s-3), var(--l-3));
  border-color: hsl(var(--warning-h), var(--s-3), var(--l-25));
  color: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-button.type-warning.variant-action:not(.disabled) .c-button-text,
.c-button.type-warning.variant-action:not(.disabled) svg {
  color: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-button.type-warning.variant-action:not(.disabled):active, .c-button.type-warning.variant-action:not(.disabled).active, .c-button.type-warning.variant-action:not(.disabled):hover {
  background: hsl(var(--warning-h), var(--s-3), var(--l-25));
}
.c-button.type-warning.variant-action:not(.disabled):active .c-button-text,
.c-button.type-warning.variant-action:not(.disabled):active svg, .c-button.type-warning.variant-action:not(.disabled).active .c-button-text,
.c-button.type-warning.variant-action:not(.disabled).active svg, .c-button.type-warning.variant-action:not(.disabled):hover .c-button-text,
.c-button.type-warning.variant-action:not(.disabled):hover svg {
  color: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-button.type-warning.variant-action:not(.disabled):focus {
  outline: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-button.type-warning.variant-action.disabled {
  filter: grayscale(0.7);
}
.c-button.type-warning.variant-action.disabled:not(.active) {
  background: hsl(var(--warning-h), var(--s-3), var(--l-3));
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-button.type-warning.variant-action.disabled:not(.active) .c-button-text,
.c-button.type-warning.variant-action.disabled:not(.active) svg {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-button.type-warning.variant-action.disabled.active {
  background: hsl(var(--warning-h), var(--s-3), var(--l-3));
  border-color: hsl(var(--warning-h), var(--s-3), var(--l-25));
  color: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-button.type-warning.variant-context {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
  border: none;
  transition: 0.3s all ease;
}
.c-button.type-warning.variant-context .c-button-text,
.c-button.type-warning.variant-context .c-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-button.type-warning.variant-context::before {
  background: hsl(var(--warning-h), var(--s-3), var(--l-25));
}
.c-button.type-warning.variant-context:not(.disabled).active, .c-button.type-warning.variant-context:not(.disabled):hover {
  background: hsl(var(--warning-h), var(--s-3), var(--l-25));
  transition: background 0.5s ease-in;
}
.c-button.type-warning.variant-context:not(.disabled).active::before, .c-button.type-warning.variant-context:not(.disabled):hover::before {
  transform: scaleX(1);
}
.c-button.type-warning.variant-context:not(.disabled).active .c-button-text,
.c-button.type-warning.variant-context:not(.disabled).active .c-icon, .c-button.type-warning.variant-context:not(.disabled):hover .c-button-text,
.c-button.type-warning.variant-context:not(.disabled):hover .c-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-button.type-warning.variant-context.disabled {
  filter: grayscale(0.4);
}
.c-button.type-warning.variant-context.disabled .c-button-text {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-button.type-warning.variant-context.disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-warning.variant-context.disabled:not(.active) .c-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-button.type-warning.variant-context.disabled.active {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-button.type-warning.variant-context.disabled.active .c-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-button.type-warning.variant-link {
  background: none;
}
.c-button.type-warning.variant-link:not([disabled]) {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
  cursor: pointer;
}
.c-button.type-warning.variant-link:not([disabled]):active, .c-button.type-warning.variant-link:not([disabled]).active, .c-button.type-warning.variant-link:not([disabled]):hover {
  color: hsl(var(--warning-h), var(--s-3), var(--l-25));
}
.c-button.type-warning.variant-link[disabled] {
  color: hsl(var(--warning-h), var(--s-3), var(--l-4));
  cursor: not-allowed;
}
.c-button.type-warning.variant-menu {
  background: none;
  font-weight: 500;
}
.c-button.type-warning.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-button.type-warning.variant-menu:not([disabled], .disabled):not(.active) .c-icon {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-warning.variant-menu:not([disabled], .disabled):not(.active) svg {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-button.type-warning.variant-menu:not([disabled], .disabled):not(.active):hover {
  background: #fff;
}
.c-button.type-warning.variant-menu:not([disabled], .disabled):not(.active):hover .c-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-button.type-warning.variant-menu:not([disabled], .disabled):not(.active):hover .amount,
.c-button.type-warning.variant-menu:not([disabled], .disabled):not(.active):hover .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-warning.variant-menu:not([disabled], .disabled):not(.active):hover svg {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-button.type-warning.variant-menu:not([disabled], .disabled).active {
  background: #fff;
  border-bottom-color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-button.type-warning.variant-menu:not([disabled], .disabled).active .c-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-button.type-warning.variant-menu:not([disabled], .disabled).active .amount,
.c-button.type-warning.variant-menu:not([disabled], .disabled).active .c-button-text,
.c-button.type-warning.variant-menu:not([disabled], .disabled).active svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-warning.variant-menu:not([disabled], .disabled).active:hover {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-button.type-warning.variant-menu:not([disabled], .disabled) .amount,
.c-button.type-warning.variant-menu:not([disabled], .disabled) .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-button.type-warning.variant-menu:not([disabled], .disabled) .amount {
  font-size: 0.6rem;
}
.c-button.type-warning.variant-menu:not([disabled], .disabled) .amount-badge .c-badge {
  font-size: 0.7rem;
  font-weight: 600;
  min-height: 16px;
  min-width: 16px;
  padding: 0 2px;
}
.c-button.type-warning.variant-menu[disabled],
.c-button.type-warning.variant-menu .disabled {
  filter: grayscale(0.4);
}
.c-button.type-warning.variant-menu[disabled]:not(.active),
.c-button.type-warning.variant-menu .disabled:not(.active) {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-button.type-warning.variant-menu[disabled]:not(.active) .c-icon,
.c-button.type-warning.variant-menu .disabled:not(.active) .c-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-button.type-warning.variant-menu[disabled].active,
.c-button.type-warning.variant-menu .disabled.active {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-button.type-warning.variant-menu[disabled].active .c-icon,
.c-button.type-warning.variant-menu .disabled.active .c-icon {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-button.type-warning.variant-menu[disabled].active .amount,
.c-button.type-warning.variant-menu[disabled].active .c-button-text,
.c-button.type-warning.variant-menu[disabled].active svg,
.c-button.type-warning.variant-menu .disabled.active .amount,
.c-button.type-warning.variant-menu .disabled.active .c-button-text,
.c-button.type-warning.variant-menu .disabled.active svg {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-button.type-warning.variant-menu[disabled] .c-button-text,
.c-button.type-warning.variant-menu .disabled .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-button.type-warning.variant-toggle:not(:disabled) {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
  border-color: hsl(var(--warning-h), var(--s-3), var(--l-3));
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-button.type-warning.variant-toggle:not(:disabled) .c-button-text {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-button.type-warning.variant-toggle:not(:disabled) .amount {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
  font-weight: 600;
}
.c-button.type-warning.variant-toggle:not(:disabled) svg {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-button.type-warning.variant-toggle:not(:disabled):not(.no-interaction):active, .c-button.type-warning.variant-toggle:not(:disabled):not(.no-interaction).active, .c-button.type-warning.variant-toggle:not(:disabled):not(.no-interaction):hover {
  background: hsl(var(--warning-h), var(--s-3), var(--l-3));
  border-color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-button.type-warning.variant-toggle:not(:disabled):not(.no-interaction):active svg, .c-button.type-warning.variant-toggle:not(:disabled):not(.no-interaction).active svg, .c-button.type-warning.variant-toggle:not(:disabled):not(.no-interaction):hover svg {
  color: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-button.type-warning.variant-toggle:not(:disabled):not(.no-interaction):focus {
  outline: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-button.type-warning.variant-toggle.disabled, .c-button.type-warning.variant-toggle[disabled] {
  filter: grayscale(0.4);
}
.c-button.type-warning.variant-toggle.disabled:not(.active), .c-button.type-warning.variant-toggle[disabled]:not(.active) {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  border-color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-button.type-warning.variant-toggle.disabled:not(.active) svg, .c-button.type-warning.variant-toggle[disabled]:not(.active) svg {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-button.type-warning.variant-toggle.disabled.active, .c-button.type-warning.variant-toggle[disabled].active {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
  border-color: hsl(var(--warning-h), var(--s-3), var(--l-3));
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-button.variant-action {
  align-items: center;
  border: 1px solid;
  border-radius: 8px;
  height: 40px;
  justify-content: center;
  padding: 8px;
  transition: all 0.3s ease;
}
.c-button.variant-action .c-button-text {
  margin-left: 4px;
}
.c-button.variant-action.size-xs {
  border-radius: 4px;
  font-size: 0.7rem;
  height: 24px;
}
.c-button.variant-action.size-xs svg {
  height: 14px;
  width: 14px;
}
.c-button.variant-action.size-s {
  border-radius: 4px;
  font-size: 0.8rem;
  height: 32px;
}
.c-button.variant-action.size-s svg {
  height: 18px;
  width: 18px;
}
.c-button.variant-action.size-d {
  border-radius: 8px;
  font-size: 0.85rem;
  height: 40px;
}
.c-button.variant-action.size-d svg {
  height: 24px;
  width: 24px;
}
.c-button.variant-action.size-l {
  border-radius: 12px;
  font-size: 1rem;
  height: 48px;
  padding: 12px;
}
.c-button.variant-action.size-l svg {
  height: 32px;
  width: 32px;
}
.c-button.variant-action.size-xl {
  border-radius: 16px;
  font-size: 1.05rem;
  height: 56px;
  padding: 16px;
}
.c-button.variant-action.size-xl svg {
  height: 36px;
  width: 36px;
}
.c-button.variant-context {
  align-items: center;
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  flex-direction: column;
  font-weight: 500;
  height: 64px;
  justify-content: center;
  max-height: 64px;
  min-width: 64px;
  padding: 4px 16px;
  position: relative;
}
.c-button.variant-context .c-icon {
  height: 24px;
  width: 24px;
}
.c-button.variant-context::before {
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 150ms;
  will-change: transform;
}
.c-button.variant-context:not(:last-child) {
  border-right: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-6));
}
.c-button.variant-link {
  background: none;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
}
.c-button.variant-link.inactive {
  color: hsl(var(--grey-h), var(--s-0), var(--l-5));
}
.c-button.variant-link svg {
  margin-right: 4px;
}
.c-button.variant-link .c-button-text {
  align-items: center;
  display: flex;
}
.c-button.variant-link + .tip {
  cursor: help;
  margin-left: 4px;
}
.c-button.variant-menu {
  align-items: center;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  display: flex;
  height: 48px;
  justify-content: center;
  padding: 0 8px;
  position: relative;
  transition: all 0.3s ease;
}
.c-button.variant-menu.disabled {
  cursor: not-allowed;
}
.c-button.variant-menu .amount {
  bottom: 0;
  font-size: 0.7rem;
  position: absolute;
  right: 2px;
}
.c-button.variant-menu .c-button-text {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
  display: flex;
  flex: 1;
  justify-content: flex-start;
  margin-left: 8px;
}
.c-button.variant-toggle {
  align-items: center;
  border: 1px solid;
  border-radius: 50%;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  transition: all 0.3s ease-out;
}
.c-button.variant-toggle .amount {
  bottom: -8px;
  color: #fff;
  font-size: 0.7rem;
  position: absolute;
  right: -4px;
}
.c-button.variant-toggle.size-xs {
  height: 25.2px;
  width: 25.2px;
}
.c-button.variant-toggle.size-xs svg {
  height: 14px;
  width: 14px;
}
.c-button.variant-toggle.size-s {
  height: 32.4px;
  width: 32.4px;
}
.c-button.variant-toggle.size-s svg {
  height: 18px;
  width: 18px;
}
.c-button.variant-toggle.size-d {
  height: 40px;
  width: 40px;
}
.c-button.variant-toggle.size-d svg {
  height: 24px;
  width: 24px;
}
.c-button.variant-toggle.size-l {
  height: 51.2px;
  width: 51.2px;
}
.c-button.variant-toggle.size-l svg {
  height: 32px;
  width: 32px;
}
.c-button.variant-toggle.size-xl {
  height: 57.6px;
  width: 57.6px;
}
.c-button.variant-toggle.size-xl svg {
  height: 36px;
  width: 36px;
}

a.c-button {
  text-decoration: none;
}

.c-spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
}
.c-spinner .path {
  animation: dash 1.5s ease-in-out infinite;
  stroke: currentcolor;
  stroke-linecap: round;
}
.c-spinner.view-spinner {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  height: 40px;
  width: 40px;
}
.c-spinner.type-default {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
}
.c-spinner.type-default *.active, .c-spinner.type-default:hover {
  color: hsl(var(--info-h), var(--s-1), var(--l-1));
}
.c-spinner.type-brand {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-spinner.type-success {
  color: hsl(var(--success-h), var(--s-3), var(--l-1));
}
.c-spinner.type-info {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-spinner.type-warning {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.c-changed {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-weight: 500;
  gap: 4px;
}
.c-changed .current {
  align-items: center;
  display: flex;
  font-size: 1.05rem;
  gap: 4px;
  line-height: 1rem;
  white-space: nowrap;
}
.c-changed .current .price-hint {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: -4px;
  position: absolute;
}
.c-changed .previous {
  font-size: 0.85rem;
  position: relative;
  white-space: nowrap;
}
.c-changed .previous::before {
  border-top: 1px solid;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: rotate(-5deg);
}
.c-changed .validity {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  font-size: 0.7rem;
}
.c-changed.type-warning .current {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-changed.type-brand .current {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-changed abbr {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-changed time {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  font-size: x-small;
}

.app .l-main-col.extra-submenu .c-tabs.type-nested-view .panels .c-tab-panel .view-container,
.app .l-main-col.extra-submenu .c-tabs.type-nested-view-vertical .panels .c-tab-panel .view-container {
  height: calc(var(--app-height) - var(--header-size));
}

@media (max-width: 1550px) {
  .c-tabs:not(.type-nested-view-vertical) .tabs .c-tab span:not(.count) {
    display: none;
  }
}
.c-tabs.type-default .tabs-container {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-tabs.type-default .panels .c-tab-panel {
  display: none;
  flex-direction: column;
}
.c-tabs.type-default .panels .c-tab-panel.active {
  display: flex;
}
.c-tabs.type-nested-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 12px;
}
.c-tabs.type-nested-view .tabs-container {
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  /* Gap before first tab: same as `.tabs-container .tabs { gap: $spacer-1 }` between tab buttons. */
}
.c-tabs.type-nested-view .tabs-container .header {
  align-items: center;
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-bottom: 2px solid hsl(var(--info-h), var(--s-3), var(--l-2));
  border-top: 2px solid transparent;
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  cursor: pointer;
  display: flex;
  font-weight: 600;
  gap: 8px;
  height: 48px;
  margin-right: 8px;
  padding: 0 20px;
  text-transform: uppercase;
  width: 344px;
}
.c-tabs.type-nested-view .tabs-container .header svg {
  min-width: 24px;
}
.c-tabs.type-nested-view .tabs-container .header span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-tabs.type-nested-view .panels {
  display: flex;
  flex: 1;
}
.c-tabs.type-nested-view .panels .c-tab-panel {
  flex: 1;
}
.c-tabs.type-nested-view .panels .c-tab-panel.view {
  flex-direction: column;
  height: calc(var(--app-height) - var(--header-size));
  overflow-y: scroll;
  padding: var(--query-spacer);
}
.c-tabs.type-nested-view .panels .c-tab-panel .view-container {
  flex: 1;
}
.c-tabs.type-nested-view .c-tabs.type-nested-view {
  padding-top: unset;
}
.c-tabs.type-nested-view .c-tabs.type-nested-view .tabs-container {
  box-shadow: unset;
}
.c-tabs.type-nested-view .c-tabs.type-nested-view .tabs-container .header {
  background: hsl(var(--success-h), var(--s-2), var(--l-6));
  border-bottom: 2px solid hsl(var(--success-h), var(--s-2), var(--l-2));
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-tabs.type-nested-view .c-tabs.type-nested-view .tabs-container .tabs .c-tab {
  background: hsl(var(--success-h), var(--s-2), var(--l-6));
  border-bottom: 2px solid transparent;
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-tabs.type-nested-view .c-tabs.type-nested-view .tabs-container .tabs .c-tab svg {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-tabs.type-nested-view .c-tabs.type-nested-view .tabs-container .tabs .c-tab:not(.disabled):hover, .c-tabs.type-nested-view .c-tabs.type-nested-view .tabs-container .tabs .c-tab:not(.disabled).active {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  border-bottom: 2px solid hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-tabs {
  /* Sidebar + scrollable panel (e.g. portal My portal) */
}
.c-tabs.type-nested-view-vertical {
  align-items: stretch;
  display: flex;
  flex: 1;
  flex-direction: row;
  gap: 0;
  min-height: 0;
  padding-top: 16px;
  width: 100%;
}
.c-tabs.type-nested-view-vertical .tabs-container {
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  max-height: 100%;
  width: 344px;
}
.c-tabs.type-nested-view-vertical .tabs-container .header {
  align-items: center;
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-bottom: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 28%);
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-weight: 600;
  gap: 8px;
  margin-right: 0;
  min-height: 48px;
  padding: 8px 16px;
  text-transform: uppercase;
  width: 100%;
}
.c-tabs.type-nested-view-vertical .tabs-container .header svg {
  min-width: 24px;
}
.c-tabs.type-nested-view-vertical .tabs-container .header span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-tabs.type-nested-view-vertical .tabs-container .tabs {
  align-items: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  height: auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 8px;
}
.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab {
  background: hsl(var(--info-h), var(--s-3), var(--l-1), 35%);
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 8px;
  border-right: none;
  border-top: none;
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  flex-shrink: 0;
  font-weight: 600;
  justify-content: flex-start;
  min-height: 48px;
  padding: 8px 16px;
  text-align: left;
  width: 100%;
}
.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab svg {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab:not(.disabled):hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-2), 45%);
  border-left-color: hsl(var(--info-h), var(--s-2), var(--l-3), 45%);
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab.active {
  background: #fff;
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3), 22%);
  border-left-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  box-shadow: 0 0.8px 2px hsla(0, 0%, 0%, 0.2);
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab.active svg {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-tabs.type-nested-view-vertical .panels {
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  border: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-6));
  border-left: none;
  border-radius: 0 8px 8px 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.c-tabs.type-nested-view-vertical .panels .c-tab-panel {
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.c-tabs.type-nested-view-vertical .panels .c-tab-panel.active {
  display: flex;
}
@media (max-width: 1550px) {
  .c-tabs.type-nested-view-vertical {
    flex-direction: column;
    gap: 16px;
  }
  .c-tabs.type-nested-view-vertical .tabs-container {
    max-height: none;
    width: 100%;
  }
  .c-tabs.type-nested-view-vertical .tabs-container .tabs {
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: visible;
    padding: 8px;
  }
  .c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab {
    border-bottom: 2px solid transparent;
    border-left: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3), 18%);
    flex: 1 1 auto;
    min-width: min(100%, 10rem);
    width: auto;
  }
  .c-tabs.type-nested-view-vertical .tabs-container .tabs .c-tab.active {
    border-bottom-color: hsl(var(--info-h), var(--s-3), var(--l-2));
    border-left-color: hsl(var(--info-h), var(--s-2), var(--l-3), 22%);
  }
  .c-tabs.type-nested-view-vertical .panels {
    border-left: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-6));
    border-radius: 8px;
    min-height: min(65vh, 640px);
  }
}
.c-tabs .tabs-container {
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  width: 100%;
}
.c-tabs .tabs-container .tabs {
  display: flex;
  gap: 8px;
  height: 48px;
}
.c-tabs .tabs-container .tabs .c-tab {
  align-items: center;
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 0;
  border-bottom: 2px solid transparent;
  border-left: 2px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  border-right: 2px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  border-top: 2px solid transparent;
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 4px 16px;
  transition: border-bottom-color 0.5s ease;
  user-select: none;
}
.c-tabs .tabs-container .tabs .c-tab:focus {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
  border-bottom-color: hsl(var(--info-h), var(--s-3), var(--l-1));
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
}
.c-tabs .tabs-container .tabs .c-tab.disabled {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  cursor: not-allowed;
}
.c-tabs .tabs-container .tabs .c-tab:not(.disabled) {
  cursor: pointer;
}
.c-tabs .tabs-container .tabs .c-tab:not(.disabled):hover, .c-tabs .tabs-container .tabs .c-tab:not(.disabled).active {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-bottom-color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-tabs .tabs-container .tabs .c-tab:not(.disabled):hover svg, .c-tabs .tabs-container .tabs .c-tab:not(.disabled).active svg {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-tabs .tabs-container .tabs .c-tab:not(.disabled):hover:focus, .c-tabs .tabs-container .tabs .c-tab:not(.disabled).active:focus {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-tabs .c-tab-panel {
  display: none;
}
.c-tabs .c-tab-panel.active {
  display: flex;
}
.c-tabs .c-tab-panel.view-container:not(.active) {
  /** TabPanel being a .view-container needs a more specific selector
  * to ensure it is not displayed when the tab is not active. */
  display: none;
}
@media (max-width: 600px) {
  .c-tabs .tabs-container .tabs {
    flex-wrap: wrap;
    gap: 8px;
    height: unset;
  }
  .c-tabs .tabs-container .tabs .c-tab {
    flex-direction: row;
    justify-content: flex-start;
  }
}

.c-process-stepper .step {
  align-items: center;
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  display: flex;
  padding: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.c-process-stepper .step .title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-process-stepper .step:not(.active) {
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-process-stepper .step:not(.active):not(.disabled):hover {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-process-stepper .step.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.c-process-stepper .step.active {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
  cursor: default;
}
.c-process-stepper .step:not(.visible) {
  visibility: hidden;
}
.c-process-stepper .step.completed {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
}
.c-process-stepper .step.type-danger {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
  color: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-process-stepper.variant-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.c-process-stepper.variant-horizontal .step {
  align-items: center;
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  display: flex;
  font-weight: 600;
  gap: 8px;
  padding: 8px 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.c-process-stepper.variant-vertical {
  max-width: 300px;
  width: 100%;
}
.c-process-stepper.variant-vertical .step {
  margin-bottom: 16px;
}

.c-read-more-less-toggle {
  display: flex;
  flex-flow: row;
}
.c-read-more-less-toggle.action {
  cursor: pointer;
}
.c-read-more-less-toggle.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.c-read-more-less-toggle .contents {
  column-gap: 4px;
  display: flex;
  flex: 1;
  flex-flow: column;
  flex-wrap: wrap;
  row-gap: 4px;
}
.c-read-more-less-toggle .contents .header {
  display: flex;
  flex: 1;
  flex-flow: row;
}
.c-read-more-less-toggle .contents .header .icon {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  flex: 0.2;
}
.c-read-more-less-toggle .contents .header .summary {
  flex: 0.8;
}
.c-read-more-less-toggle .contents .body {
  flex: 1;
}
.c-read-more-less-toggle .contents .children {
  flex: 1;
}

.c-inline-edit {
  display: flex;
  white-space: break-spaces;
  width: 100%;
}
.c-inline-edit .read-only-text {
  background: #fff;
  cursor: pointer;
  min-height: 30px;
  overflow-y: auto;
  position: relative;
  width: 100%;
}
.c-inline-edit .read-only-text .btn-edit {
  float: right;
  margin-top: 4px;
  opacity: 0.34;
  position: absolute;
  right: 4px;
  top: 0;
}
.c-inline-edit .read-only-text:hover {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  transition: background 0.3s ease;
}
.c-inline-edit .read-only-text:hover .btn-edit {
  opacity: 1;
}
.c-inline-edit .edit-text {
  width: 100%;
}
.c-inline-edit .edit-text textarea {
  background: #fff;
  border: 1px solid hsl(var(--surface-h), var(--s-1), var(--l-4));
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
  width: 100%;
}
.c-inline-edit .edit-text .c-button-group {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  padding: 4px;
}

.c-pdf-preview {
  width: 100%;
}

.c-badge {
  align-items: center;
  border-radius: 32px;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 600;
  justify-content: center;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}
.c-badge.type-default {
  background-color: hsl(var(--default-h), var(--s-1), var(--l-2));
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-badge.type-info {
  background-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-badge.type-success {
  background-color: hsl(var(--success-h), var(--s-2), var(--l-2));
  color: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-badge.type-danger {
  background-color: hsl(var(--danger-h), var(--s-3), var(--l-3));
  color: hsl(var(--danger-h), var(--s-3), var(--l-6));
}
.c-badge.type-warning {
  background-color: hsl(var(--warning-h), var(--s-3), var(--l-2));
  color: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-badge.type-brand {
  background-color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  color: hsl(var(--brand-h), var(--s-3), var(--l-6));
}

.clipboard-copy {
  cursor: pointer;
}
.clipboard-copy:hover {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.clipboard-copy:active {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}

.c-collection-items .item.has-row-detail .clipboard-copy.no-click {
  cursor: pointer;
}

.c-data-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  width: 100%;
  z-index: 10;
}
.c-data-card .entry {
  align-items: center;
  display: flex;
  padding: 8px;
  width: 100%;
}
.c-data-card .entry .entry-label {
  display: flex;
  flex: 2;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-data-card .entry .entry-value {
  display: flex;
  flex: 4;
  overflow: hidden;
  padding-left: 2px;
  text-overflow: ellipsis;
}
.c-data-card.variant-dense {
  gap: 0;
}
.c-data-card.variant-dense .entry {
  padding: 4px 8px;
}
.c-data-card.variant-extra-dense {
  gap: 2px;
}
.c-data-card.variant-extra-dense > :nth-child(even) {
  background: none;
}
.c-data-card.variant-extra-dense .entry {
  padding: 4px 2px;
}
.c-data-card.variant-extra-dense .entry .entry-label {
  flex: unset;
  margin-right: 4px;
}
.c-data-card.variant-vertical .entry {
  flex-direction: column;
  padding: 4px 8px;
}
.c-data-card.type-default > :nth-child(even) {
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
}
.c-data-card.type-default > :nth-child(odd) {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-data-card.type-default .entry .entry-label {
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-data-card.type-default .entry .entry-label svg {
  color: hsl(var(--surface-h), var(--s-1), var(--l-3));
}
.c-data-card.type-default .entry .entry-value {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-data-card.type-info > :nth-child(even) {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-data-card.type-info > :nth-child(odd) {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-data-card.type-info .entry {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-data-card.type-info .entry .entry-label svg {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-data-card.type-success > :nth-child(even) {
  background: hsl(var(--success-h), var(--s-2), var(--l-6));
}
.c-data-card.type-success > :nth-child(odd) {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-data-card.type-success .entry {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-data-card.type-success .entry .entry-label svg {
  color: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-data-card.type-warning > :nth-child(even) {
  background: hsl(var(--warning-h), var(--s-3), var(--l-6));
}
.c-data-card.type-warning > :nth-child(odd) {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-data-card.type-warning .entry {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-data-card.type-warning .entry .entry-label svg {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}

.c-unsubscribe-survey .survey-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 400px;
}
.c-unsubscribe-survey .survey-form .survey-description p {
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}
.c-unsubscribe-survey .survey-form .survey-options .options-title {
  margin-bottom: 16px;
}
.c-unsubscribe-survey .survey-form .survey-options .options-title h4 {
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.c-unsubscribe-survey .survey-form .survey-options .option-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c-unsubscribe-survey .survey-form .survey-options .option-group .c-field-checkbox {
  margin-bottom: 0;
}
.c-unsubscribe-survey .survey-form .survey-options .option-group .c-field-checkbox label {
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
  font-weight: 400;
}
.c-unsubscribe-survey .survey-form .survey-options .option-group .c-field-checkbox .help {
  color: hsl(var(--surface-h), var(--s-1), var(--l-3));
  font-size: 0.8rem;
  margin-top: 4px;
}
.c-unsubscribe-survey .survey-form .survey-options .option-group .other-reason-input {
  margin-left: 24px;
  margin-top: 8px;
}
.c-unsubscribe-survey .survey-form .survey-options .option-group .other-reason-input textarea {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 1px solid hsl(var(--surface-h), var(--s-1), var(--l-4));
  border-radius: 4px;
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
  font-family: inherit;
  font-size: 0.85rem;
  padding: 8px;
  resize: vertical;
  width: 100%;
}
.c-unsubscribe-survey .survey-form .survey-options .option-group .other-reason-input textarea:focus {
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3));
  box-shadow: 0 0 0 2px hsl(var(--info-h), var(--s-2), var(--l-4), 20%);
  outline: none;
}
.c-unsubscribe-survey .survey-form .survey-options .option-group .other-reason-input textarea::placeholder {
  color: hsl(var(--surface-h), var(--s-1), var(--l-3));
}
.c-unsubscribe-survey .survey-form .survey-actions {
  border-top: 1px solid hsl(var(--surface-h), var(--s-1), var(--l-4));
  padding-top: 24px;
}
.c-unsubscribe-survey .survey-form .survey-actions .action-buttons {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}
.c-unsubscribe-survey .survey-form .survey-actions .action-buttons .btn-cancel {
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
}
.c-unsubscribe-survey .survey-form .survey-actions .action-buttons .btn-cancel:hover {
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-unsubscribe-survey .survey-form .survey-actions .action-buttons .btn-submit:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.c-unsubscribe-survey .survey-thank-you {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 400px;
  text-align: center;
}
.c-unsubscribe-survey .survey-thank-you .thank-you-content h4 {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 16px;
}
.c-unsubscribe-survey .survey-thank-you .thank-you-content p {
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}
.c-unsubscribe-survey .survey-thank-you .thank-you-actions {
  border-top: 1px solid hsl(var(--surface-h), var(--s-1), var(--l-4));
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

@media (max-width: 1400px) {
  .c-unsubscribe-survey .survey-form,
  .c-unsubscribe-survey .survey-thank-you {
    min-width: unset;
    width: 100%;
  }
  .c-unsubscribe-survey .survey-form .survey-actions .action-buttons {
    flex-direction: column;
  }
  .c-unsubscribe-survey .survey-form .survey-actions .action-buttons .c-button {
    width: 100%;
  }
}
.c-campaign-preferences .campaigns {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
  transition: opacity 0.3s ease-in-out;
}
.c-campaign-preferences .campaigns .campaign {
  align-items: stretch;
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  display: flex;
}
.c-campaign-preferences .campaigns .campaign .c-data-card {
  font-size: 0.7rem;
}
.c-campaign-preferences .campaigns .campaign .campaign-info {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  display: flex;
  flex-direction: column;
  padding: 8px;
  width: 100%;
}
.c-campaign-preferences .campaigns .campaign .campaign-info .header {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 8px;
  padding-bottom: 0;
}
.c-campaign-preferences .campaigns .campaign .campaign-info .header .c-icon {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-campaign-preferences .campaigns .campaign .campaign-info .header .title {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  font-size: 1rem;
  font-weight: 600;
}
.c-campaign-preferences .campaigns .campaign .campaign-info .description {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  font-size: 0.8rem;
  font-style: italic;
  padding: 2px 8px;
}
.c-campaign-preferences .campaigns .campaign.disabled {
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}
.c-campaign-preferences .campaigns .campaign.subscribed .campaign-info {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-campaign-preferences .campaigns .campaign.subscribed .campaign-info .header .c-icon {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-campaign-preferences .campaigns .campaign.subscribed .campaign-info .header .title {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-campaign-preferences .campaigns .campaign.subscribed .campaign-info .description {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-campaign-preferences .campaigns .campaign .actions {
  align-items: center;
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  border-left: 1px solid hsl(var(--surface-h), var(--s-1), var(--l-4));
  display: flex;
  justify-content: center;
  padding: 8px;
  width: 175px;
}

.c-amount-unit {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  gap: 4px;
}
.c-amount-unit .c-icon {
  opacity: 0.5;
}
.c-amount-unit .alt-currency,
.c-amount-unit .amount-case,
.c-amount-unit .amount-bottle {
  align-items: center;
  display: flex;
  gap: 4px;
}
.c-amount-unit .amount-case {
  font-weight: 600;
}
.c-amount-unit .alt-currency {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  margin-top: -8px;
}
.c-amount-unit .alt-currency abbr {
  text-decoration: none;
}
.c-amount-unit .amount-excise {
  display: flex;
  flex-direction: column;
}
.c-amount-unit .amount-excise .help-block {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 0.7rem;
  margin: 0;
}

.c-iframe {
  border: unset;
  width: 100%;
}

.c-lot {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  justify-content: center;
}
.c-lot .c-icon {
  margin-right: 2px;
}
.c-lot .lot-warehouse {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
  font-weight: 500;
}
.c-lot .lot-reference {
  display: flex;
}

.c-icon {
  fill: currentcolor;
  position: relative;
}
.c-icon.warning {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-icon.error {
  color: var(--danger-4);
}
.c-icon.action {
  cursor: pointer;
}
.c-icon.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.c-icon.type-default {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
}
.c-icon.type-default *.active, .c-icon.type-default:hover {
  color: hsl(var(--info-h), var(--s-1), var(--l-1));
}
.c-icon.type-unset {
  color: inherit;
}
.c-icon.type-brand {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-icon.type-success {
  color: hsl(var(--success-h), var(--s-3), var(--l-1));
}
.c-icon.type-info {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-icon.type-warning {
  color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-icon.type-error {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-icon.type-danger {
  color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-icon.tip-empty {
  pointer-events: none;
}
.c-icon.tip {
  cursor: help;
}

.icon-xs {
  font-size: 14px;
  height: 14px;
  width: 14px;
}

.icon-s {
  height: 18px;
  width: 18px;
}

.icon-d {
  height: 24px;
  width: 24px;
}

.icon-l {
  height: 32px;
  width: 32px;
}

.icon-xl {
  height: 36px;
  width: 36px;
}

.icon-xxl {
  height: 64px;
  width: 64px;
}

.c-notification-icon {
  align-items: center;
  display: flex;
  position: relative;
}
.c-notification-icon.icon-xs {
  font-size: 8px;
}
.c-notification-icon.icon-s {
  font-size: 10px;
}
.c-notification-icon.icon-l {
  font-size: 18px;
}
.c-notification-icon.icon-xl {
  font-size: 20.5px;
}

.c-notification-icon .c-icon-badge {
  border-radius: 50%;
  font-size: 0.6rem;
  min-height: 1.2em;
  min-width: 1.2em;
  padding: 2px;
  pointer-events: none;
  position: absolute;
  right: -0.35em;
  top: -0.2em;
  z-index: 2;
}

.c-dropdown {
  position: relative;
}
.c-dropdown.right .dropdown-body {
  right: 0;
  top: 100%;
}
.c-dropdown .dropdown-body {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  border: 1px solid var(--grey-6);
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
  display: none;
  max-height: 50vh;
  position: absolute;
  text-align: left;
  z-index: 1000000;
}
.c-dropdown .dropdown-body .dropdown-body-header {
  align-items: center;
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  border-bottom: 2px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
  display: flex;
  flex-direction: row;
  font-size: 0.85rem;
  justify-content: space-between;
  padding: 8px 12px;
}
.c-dropdown .dropdown-body .dropdown-body-header svg {
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-dropdown .dropdown-body .dropdown-body-header span {
  flex: 1;
  margin-left: 4px;
}
.c-dropdown .dropdown-body.left {
  right: 100%;
  top: 0;
}
.c-dropdown .dropdown-body.list {
  font-size: 0.85rem;
  min-width: 150px;
}
.c-dropdown .dropdown-body.list .item {
  align-items: center;
  background: none;
  border: none;
  color: var(--grey-2);
  cursor: pointer;
  display: flex;
  padding: 12px 8px;
  text-align: left;
  width: 100%;
}
.c-dropdown .dropdown-body.list .item:hover {
  background: var(--info-6);
}
.c-dropdown .dropdown-body.list .item svg {
  color: var(--info-2);
  margin-right: 8px;
}
.c-dropdown .dropdown-body.list .item[disabled] {
  background: var(--grey-6);
  color: var(--grey-4);
  cursor: not-allowed;
}
.c-dropdown .dropdown-body.list .item[disabled]:hover a {
  color: var(--grey-4) !important;
}
.c-dropdown .dropdown-body.list .item[disabled] a {
  color: var(--grey-4);
}
.c-dropdown .dropdown-body.list .item.active {
  background: var(--info-6);
  cursor: default;
}
.c-dropdown.active .dropdown-body {
  display: block;
}

.c-ranking {
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  border: 2px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 48px;
  padding: 4px;
  width: 48px;
}
.c-ranking span {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
}
.c-ranking.type-danger {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
  border-color: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-ranking.type-danger span {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}

.rank-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-fieldset {
  background: #fff;
  border: 1px solid hsl(var(--surface-h), var(--s-1), var(--l-4));
  margin-bottom: 16px;
  padding: 16px;
}
.c-fieldset > label {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.c-collection-selection {
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  border-bottom: 2px solid hsl(var(--default-h), var(--s-1), var(--l-5));
  display: flex;
  flex-direction: column;
}
.c-collection-selection .selection-wrapper {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.c-collection-selection .selection-wrapper .c-button {
  flex: 1;
}

.c-collection-carousel {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  padding-bottom: 24px;
  position: relative;
}
.c-collection-carousel .carousel-header {
  align-items: center;
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border-bottom: 1px solid hsl(var(--surface-h), var(--s-1), var(--l-4));
  display: flex;
  height: 64px;
  justify-content: center;
  margin-bottom: 24px;
  pointer-events: none;
  user-select: none;
}
.c-collection-carousel .carousel-header .btn-container {
  display: flex;
  gap: 48px;
}
.c-collection-carousel .carousel-header .btn-container .title {
  align-items: center;
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
  display: flex;
  font-weight: 600;
  gap: 8px;
  text-transform: uppercase;
}
.c-collection-carousel .carousel-header .btn-container a {
  align-items: center;
  display: flex;
  gap: 8px;
  pointer-events: all;
}
.c-collection-carousel .carousel-header .btn-container .btn-scroll {
  box-shadow: -2px 0 4px hsl(var(--surface-h), var(--s-1), var(--l-1), 30%);
  pointer-events: auto;
}
.c-collection-carousel .carousel-container {
  padding: 0 16px;
}
.c-collection-carousel .carousel-container .drag-scroll {
  box-sizing: border-box;
  cursor: grab;
  /* Height comes from in-flow scroll viewport + tallest row (no JS). */
  min-height: 200px;
  position: relative;
  user-select: none;
}
.c-collection-carousel .carousel-container .drag-scroll.dragging {
  background: hsl(var(--surface-h), var(--s-2), var(--l-4), 40%);
  cursor: grabbing;
  transition: background 0.5s ease-in-out;
}
.c-collection-carousel .carousel-container .drag-scroll .c-collection-view {
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: clip;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: 100%;
}
.c-collection-carousel .carousel-container .drag-scroll .c-collection-view::-webkit-scrollbar {
  display: none;
}
.c-collection-carousel .carousel-container .drag-scroll .c-collection-view .loading-observable {
  display: none;
}
.c-collection-carousel .carousel-container .drag-scroll .c-collection-view .c-collection-items {
  /* Single horizontal row: do not rely on JS `gridTemplateColumns`. */
  align-items: stretch;
  grid-auto-columns: minmax(275px, 275px);
  grid-auto-flow: column;
  grid-template-columns: unset;
  justify-items: stretch;
  width: max-content;
}
.c-collection-carousel .carousel-container .drag-scroll .c-collection-view .c-collection-items > * {
  scroll-snap-align: start;
}

@keyframes show {
  100% {
    opacity: 1;
    transform: none;
  }
}
.c-collection-items .collection-feedback {
  align-items: center;
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  display: flex;
  flex-direction: column;
  font-size: 1.05rem;
  gap: 8px;
  justify-content: center;
  padding: 16px;
}
.c-collection-items .collection-feedback svg {
  height: 36px;
  width: 36px;
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-collection-items .collection-feedback .suggest {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.c-collection-items .collection-feedback .suggest,
.c-collection-items .collection-feedback .suggest svg {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  font-style: italic;
}
.c-collection-items .item {
  display: block;
  margin: 0;
  margin-bottom: 4px;
  position: relative;
}
.c-collection-items .item .row-image {
  aspect-ratio: 4/3;
  background: #fff;
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  display: flex;
  height: 75px;
  justify-content: center;
  overflow: hidden;
}
.c-collection-items .item .row-image img {
  cursor: pointer;
  height: 100%;
}
.c-collection-items .item .row-image .placeholder {
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  cursor: default;
  height: 100%;
  padding: 16px;
  width: 100%;
}
.c-collection-items .item .td-group .header {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-collection-items .item .wrap {
  overflow: unset;
  white-space: normal;
  white-space: wrap;
}
.c-collection-items .item.even {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.even:not(.selected, .well):hover {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.even.selected, .c-collection-items .item.even.detail {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.even.changed::before, .c-collection-items .item.even.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.even.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.even.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.even.edit {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.even.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.even.is-hidden tr {
  background: unset;
}
.c-collection-items .item.even.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.even.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.even.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.even {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-collection-items .item.even .row-edit {
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  border-top: 2px dashed hsl(var(--default-h), var(--s-1), var(--l-4));
  cursor: default;
}
.c-collection-items .item.even .cell-bulk {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-collection-items .item.even .row-details {
  border-top: 2px dashed hsl(var(--default-h), var(--s-1), var(--l-4));
}
.c-collection-items .item.odd {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.odd:not(.selected, .well):hover {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.odd.selected, .c-collection-items .item.odd.detail {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.odd.changed::before, .c-collection-items .item.odd.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.odd.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.odd.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.odd.edit {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.odd.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.odd.is-hidden tr {
  background: unset;
}
.c-collection-items .item.odd.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.odd.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.odd.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.odd {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-collection-items .item.odd .cell-bulk {
  background: hsl(var(--default-h), var(--s-1), var(--l-4));
}
.c-collection-items .item.odd .row-edit {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  border-top: 2px dashed hsl(var(--default-h), var(--s-1), var(--l-3));
  cursor: default;
}
.c-collection-items .item.odd .row-details {
  border-top: 2px dashed hsl(var(--default-h), var(--s-1), var(--l-3));
}
.c-collection-items .item.is-pricing-competitor, .c-collection-items .item.is-competitor {
  color: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-collection-items .item.is-pricing-competitor:not(.selected, .well):hover, .c-collection-items .item.is-competitor:not(.selected, .well):hover {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
}
.c-collection-items .item.is-pricing-competitor.selected, .c-collection-items .item.is-pricing-competitor.detail, .c-collection-items .item.is-competitor.selected, .c-collection-items .item.is-competitor.detail {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
}
.c-collection-items .item.is-pricing-competitor.changed::before, .c-collection-items .item.is-pricing-competitor.invalid::before, .c-collection-items .item.is-competitor.changed::before, .c-collection-items .item.is-competitor.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.is-pricing-competitor.changed::before, .c-collection-items .item.is-competitor.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.is-pricing-competitor.invalid::before, .c-collection-items .item.is-competitor.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.is-pricing-competitor.edit, .c-collection-items .item.is-competitor.edit {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
}
.c-collection-items .item.is-pricing-competitor.is-hidden, .c-collection-items .item.is-competitor.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.is-pricing-competitor.is-hidden tr, .c-collection-items .item.is-competitor.is-hidden tr {
  background: unset;
}
.c-collection-items .item.is-pricing-competitor.is-hidden tr td, .c-collection-items .item.is-competitor.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.is-pricing-competitor.is-hidden tr td .c-cell-product .header, .c-collection-items .item.is-competitor.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.is-pricing-competitor.marked, .c-collection-items .item.is-competitor.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.is-pricing-competitor, .c-collection-items .item.is-competitor {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5)) !important;
  border-left: 2px solid hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-collection-items .item.is-pricing-competitor, .c-collection-items .item.is-pricing-competitor.selected, .c-collection-items .item.is-competitor, .c-collection-items .item.is-competitor.selected {
  border-color: hsl(var(--danger-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.is-pricing-competitor .td-group .header, .c-collection-items .item.is-competitor .td-group .header {
  color: hsl(var(--danger-h), var(--s-3), var(--l-1));
}
.c-collection-items .item.is-agent-importer-nl {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-collection-items .item.is-agent-importer-nl:not(.selected, .well):hover {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.is-agent-importer-nl.selected, .c-collection-items .item.is-agent-importer-nl.detail {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.is-agent-importer-nl.changed::before, .c-collection-items .item.is-agent-importer-nl.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.is-agent-importer-nl.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.is-agent-importer-nl.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.is-agent-importer-nl.edit {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.is-agent-importer-nl.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.is-agent-importer-nl.is-hidden tr {
  background: unset;
}
.c-collection-items .item.is-agent-importer-nl.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.is-agent-importer-nl.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.is-agent-importer-nl.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.is-agent-importer-nl {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4)) !important;
  border-left: 2px solid hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-collection-items .item.is-agent-importer-nl, .c-collection-items .item.is-agent-importer-nl.selected {
  border-color: hsl(var(--warning-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.is-agent-importer-nl .td-group .header {
  color: hsl(var(--warning-h), var(--s-3), var(--l-1));
}
.c-collection-items .item.is-current-supplier-price-list {
  color: hsl(220deg, var(--s-2), var(--l-1));
}
.c-collection-items .item.is-current-supplier-price-list:not(.selected, .well):hover {
  background: hsl(220deg, var(--s-2), var(--l-3));
}
.c-collection-items .item.is-current-supplier-price-list.selected, .c-collection-items .item.is-current-supplier-price-list.detail {
  background: hsl(220deg, var(--s-2), var(--l-3));
}
.c-collection-items .item.is-current-supplier-price-list.changed::before, .c-collection-items .item.is-current-supplier-price-list.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.is-current-supplier-price-list.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.is-current-supplier-price-list.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.is-current-supplier-price-list.edit {
  background: hsl(220deg, var(--s-2), var(--l-3));
}
.c-collection-items .item.is-current-supplier-price-list.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.is-current-supplier-price-list.is-hidden tr {
  background: unset;
}
.c-collection-items .item.is-current-supplier-price-list.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.is-current-supplier-price-list.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.is-current-supplier-price-list.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.is-current-supplier-price-list {
  background: hsl(220deg, var(--s-2), var(--l-4)) !important;
  border-left: 2px solid hsl(220deg, var(--s-2), var(--l-2));
  color: hsl(220deg, var(--s-2), var(--l-1));
}
.c-collection-items .item.is-current-supplier-price-list, .c-collection-items .item.is-current-supplier-price-list.selected {
  border-color: hsl(220deg, var(--s-2), var(--l-3));
}
.c-collection-items .item.is-current-supplier-price-list .td-group .header {
  color: hsl(220deg, var(--s-2), var(--l-2));
}
.c-collection-items .item.is-msp {
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
}
.c-collection-items .item.is-msp:not(.selected, .well):hover {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.is-msp.selected, .c-collection-items .item.is-msp.detail {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.is-msp.changed::before, .c-collection-items .item.is-msp.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.is-msp.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.is-msp.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.is-msp.edit {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.is-msp.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.is-msp.is-hidden tr {
  background: unset;
}
.c-collection-items .item.is-msp.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.is-msp.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.is-msp.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.is-msp {
  background: hsl(var(--success-h), var(--s-2), var(--l-4)) !important;
  border-left: 2px solid hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-collection-items .item.is-msp .td-group .header {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-collection-items .item.is-current-offer {
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
}
.c-collection-items .item.is-current-offer:not(.selected, .well):hover {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.is-current-offer.selected, .c-collection-items .item.is-current-offer.detail {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.is-current-offer.changed::before, .c-collection-items .item.is-current-offer.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.is-current-offer.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.is-current-offer.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.is-current-offer.edit {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.is-current-offer.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.is-current-offer.is-hidden tr {
  background: unset;
}
.c-collection-items .item.is-current-offer.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.is-current-offer.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.is-current-offer.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.is-current-offer {
  background: hsl(var(--success-h), var(--s-2), var(--l-3)) !important;
}
.c-collection-items .item.is-current-offer .td-group .header {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-collection-items .item .cells {
  display: grid;
  position: relative;
  width: 100%;
}
.c-collection-items .item .cells .cell {
  align-items: center;
  display: flex;
  min-height: 48px;
  overflow: hidden;
  padding: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-collection-items .item .cells .cell .td-group .header {
  text-wrap: wrap;
}
.c-collection-items .item .cells .cell.cell-bulk {
  padding: 0;
}
.c-collection-items .item .cells .cell.cell-status {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  padding: 8px 2px;
}
.c-collection-items .item .cells .cell.cell-status .c-icon {
  height: 20px;
  width: 20px;
}
.c-collection-items .item .cells .cell.cell-group {
  gap: 16px;
}
.c-collection-items .item .cells .cell.cell-type-disabled {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-collection-items .item .cells .cell.cell-type-hidden {
  display: none;
}
.c-collection-items .item .cells .cell.cell-type-danger {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
}
.c-collection-items .item .cells .cell.cell-type-warning {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-collection-items .item .cells:hover .cell-actions {
  opacity: 1;
}
.c-collection-items .item .cells .cell-actions {
  align-items: center;
  background: linear-gradient(90deg, transparent, hsl(var(--default-h), var(--s-1), var(--l-5)));
  bottom: 0;
  display: flex;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
  opacity: 0;
  padding-right: 8px;
  position: absolute;
  right: 0;
  z-index: 100;
}
.c-collection-items .item .cells .cell-status {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 100;
}
.c-collection-items .item .cells .cell-selection {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.c-collection-items .item .cells .cell-selection .actions {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}
.c-collection-items .item .row-edit {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px;
  width: 100%;
}
.c-collection-items .item .row-edit .field {
  max-width: 200px;
}
.c-collection-items .item .row-edit input {
  max-width: 200px;
}
.c-collection-items .item .row-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px;
  width: 100%;
}
.c-collection-items .item .row-details .columns .column {
  padding-top: 0;
}
.c-collection-items .item.selected {
  border: 2px solid hsl(var(--info-h), var(--s-2), var(--l-3));
  margin-bottom: 16px;
  margin-top: 16px;
  transition: all 0.3s ease;
}
.c-collection-items .item.selected > .cells .cell-actions {
  opacity: 1;
}
.c-collection-items .item.detail:not(.edit) {
  box-shadow: -2px 0 4px hsl(var(--surface-h), var(--s-1), var(--l-1), 30%);
  margin-bottom: 32px;
  transition: all 0.3s ease;
}
.c-collection-items .item.detail:not(.edit) > .cells .cell-actions {
  opacity: 1;
}
.c-collection-items .item.item-type-disabled * {
  opacity: 0.8;
}
.c-collection-items .item.item-type-disabled.odd {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-disabled.odd:not(.selected, .well):hover {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-disabled.odd.selected, .c-collection-items .item.item-type-disabled.odd.detail {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-disabled.odd.changed::before, .c-collection-items .item.item-type-disabled.odd.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-disabled.odd.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-disabled.odd.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-disabled.odd.edit {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-disabled.odd.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-disabled.odd.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-disabled.odd.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-disabled.odd.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-disabled.odd.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-disabled.odd {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
}
.c-collection-items .item.item-type-disabled.even {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-disabled.even:not(.selected, .well):hover {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-disabled.even.selected, .c-collection-items .item.item-type-disabled.even.detail {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-disabled.even.changed::before, .c-collection-items .item.item-type-disabled.even.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-disabled.even.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-disabled.even.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-disabled.even.edit {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-disabled.even.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-disabled.even.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-disabled.even.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-disabled.even.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-disabled.even.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-disabled.even {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
}
.c-collection-items .item.item-type-default > .td-group .header, .c-collection-items .item.item-type-info > .td-group .header {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-collection-items .item.item-type-default.odd, .c-collection-items .item.item-type-info.odd {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-default.odd:not(.selected, .well):hover, .c-collection-items .item.item-type-info.odd:not(.selected, .well):hover {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-default.odd.selected, .c-collection-items .item.item-type-default.odd.detail, .c-collection-items .item.item-type-info.odd.selected, .c-collection-items .item.item-type-info.odd.detail {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-default.odd.changed::before, .c-collection-items .item.item-type-default.odd.invalid::before, .c-collection-items .item.item-type-info.odd.changed::before, .c-collection-items .item.item-type-info.odd.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-default.odd.changed::before, .c-collection-items .item.item-type-info.odd.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-default.odd.invalid::before, .c-collection-items .item.item-type-info.odd.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-default.odd.edit, .c-collection-items .item.item-type-info.odd.edit {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-default.odd.is-hidden, .c-collection-items .item.item-type-info.odd.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-default.odd.is-hidden tr, .c-collection-items .item.item-type-info.odd.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-default.odd.is-hidden tr td, .c-collection-items .item.item-type-info.odd.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-default.odd.is-hidden tr td .c-cell-product .header, .c-collection-items .item.item-type-info.odd.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-default.odd.marked, .c-collection-items .item.item-type-info.odd.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-default.odd, .c-collection-items .item.item-type-info.odd {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-collection-items .item.item-type-default.odd .cell-selection, .c-collection-items .item.item-type-info.odd .cell-selection {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-collection-items .item.item-type-default.even, .c-collection-items .item.item-type-info.even {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-default.even:not(.selected, .well):hover, .c-collection-items .item.item-type-info.even:not(.selected, .well):hover {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-default.even.selected, .c-collection-items .item.item-type-default.even.detail, .c-collection-items .item.item-type-info.even.selected, .c-collection-items .item.item-type-info.even.detail {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-default.even.changed::before, .c-collection-items .item.item-type-default.even.invalid::before, .c-collection-items .item.item-type-info.even.changed::before, .c-collection-items .item.item-type-info.even.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-default.even.changed::before, .c-collection-items .item.item-type-info.even.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-default.even.invalid::before, .c-collection-items .item.item-type-info.even.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-default.even.edit, .c-collection-items .item.item-type-info.even.edit {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-default.even.is-hidden, .c-collection-items .item.item-type-info.even.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-default.even.is-hidden tr, .c-collection-items .item.item-type-info.even.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-default.even.is-hidden tr td, .c-collection-items .item.item-type-info.even.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-default.even.is-hidden tr td .c-cell-product .header, .c-collection-items .item.item-type-info.even.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-default.even.marked, .c-collection-items .item.item-type-info.even.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-default.even, .c-collection-items .item.item-type-info.even {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-collection-items .item.item-type-default.even .cell-selection, .c-collection-items .item.item-type-info.even .cell-selection {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-collection-items .item.item-type-loading .td-group .header {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-collection-items .item.item-type-loading.odd {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-loading.odd:not(.selected, .well):hover {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-loading.odd.selected, .c-collection-items .item.item-type-loading.odd.detail {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-loading.odd.changed::before, .c-collection-items .item.item-type-loading.odd.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-loading.odd.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-loading.odd.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-loading.odd.edit {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-loading.odd.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-loading.odd.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-loading.odd.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-loading.odd.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-loading.odd.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-loading.odd {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
}
.c-collection-items .item.item-type-loading.even {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-loading.even:not(.selected, .well):hover {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-loading.even.selected, .c-collection-items .item.item-type-loading.even.detail {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-loading.even.changed::before, .c-collection-items .item.item-type-loading.even.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-loading.even.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-loading.even.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-loading.even.edit {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-collection-items .item.item-type-loading.even.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-loading.even.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-loading.even.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-loading.even.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-loading.even.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-loading.even {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
}
.c-collection-items .item.item-type-loading .cell-actions {
  background: linear-gradient(90deg, transparent, hsl(var(--grey-h), var(--s-0), var(--l-4)));
}
.c-collection-items .item.item-type-surface .td-group .header {
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-collection-items .item.item-type-surface.odd {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-surface.odd:not(.selected, .well):hover {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-collection-items .item.item-type-surface.odd.selected, .c-collection-items .item.item-type-surface.odd.detail {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-collection-items .item.item-type-surface.odd.changed::before, .c-collection-items .item.item-type-surface.odd.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-surface.odd.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-surface.odd.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-surface.odd.edit {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-collection-items .item.item-type-surface.odd.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-surface.odd.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-surface.odd.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-surface.odd.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-surface.odd.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-surface.odd {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-collection-items .item.item-type-surface.odd .cell-selection {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
}
.c-collection-items .item.item-type-surface.even {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-surface.even:not(.selected, .well):hover {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-collection-items .item.item-type-surface.even.selected, .c-collection-items .item.item-type-surface.even.detail {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-collection-items .item.item-type-surface.even.changed::before, .c-collection-items .item.item-type-surface.even.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-surface.even.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-surface.even.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-surface.even.edit {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-collection-items .item.item-type-surface.even.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-surface.even.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-surface.even.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-surface.even.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-surface.even.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-surface.even {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
}
.c-collection-items .item.item-type-surface.even .cell-selection {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
}
.c-collection-items .item.item-type-surface .cell-actions {
  background: linear-gradient(90deg, transparent, hsl(var(--surface-h), var(--s-1), var(--l-4)));
}
.c-collection-items .item.item-type-success .td-group .header {
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-collection-items .item.item-type-success.odd {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-success.odd:not(.selected, .well):hover {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-success.odd.selected, .c-collection-items .item.item-type-success.odd.detail {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-success.odd.changed::before, .c-collection-items .item.item-type-success.odd.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-success.odd.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-success.odd.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-success.odd.edit {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-success.odd.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-success.odd.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-success.odd.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-success.odd.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-success.odd.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-success.odd {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
}
.c-collection-items .item.item-type-success.even {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-success.even:not(.selected, .well):hover {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-success.even.selected, .c-collection-items .item.item-type-success.even.detail {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-success.even.changed::before, .c-collection-items .item.item-type-success.even.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-success.even.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-success.even.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-success.even.edit {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}
.c-collection-items .item.item-type-success.even.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-success.even.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-success.even.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-success.even.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-success.even.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-success.even {
  background: hsl(var(--success-h), var(--s-2), var(--l-6));
}
.c-collection-items .item.item-type-success .cell-actions {
  background: linear-gradient(90deg, transparent, hsl(var(--success-h), var(--s-2), var(--l-4)));
}
.c-collection-items .item.item-type-warning .td-group .header {
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-collection-items .item.item-type-warning.odd {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-collection-items .item.item-type-warning.odd:not(.selected, .well):hover {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-warning.odd.selected, .c-collection-items .item.item-type-warning.odd.detail {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-warning.odd.changed::before, .c-collection-items .item.item-type-warning.odd.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-warning.odd.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-warning.odd.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-warning.odd.edit {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-warning.odd.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-warning.odd.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-warning.odd.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-warning.odd.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-warning.odd.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-warning.odd {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
}
.c-collection-items .item.item-type-warning.even {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-warning.even:not(.selected, .well):hover {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-warning.even.selected, .c-collection-items .item.item-type-warning.even.detail {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-warning.even.changed::before, .c-collection-items .item.item-type-warning.even.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-warning.even.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-warning.even.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-warning.even.edit {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-warning.even.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-warning.even.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-warning.even.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-warning.even.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-warning.even.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-warning.even {
  background: hsl(var(--warning-h), var(--s-3), var(--l-6));
}
.c-collection-items .item.item-type-warning .cell-actions {
  background: linear-gradient(90deg, transparent, hsl(var(--warning-h), var(--s-3), var(--l-4)));
}
.c-collection-items .item.item-type-danger .td-group .header {
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-collection-items .item.item-type-danger.odd {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-collection-items .item.item-type-danger.odd:not(.selected, .well):hover {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-danger.odd.selected, .c-collection-items .item.item-type-danger.odd.detail {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-danger.odd.changed::before, .c-collection-items .item.item-type-danger.odd.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-danger.odd.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-danger.odd.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-danger.odd.edit {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-danger.odd.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-danger.odd.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-danger.odd.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-danger.odd.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-danger.odd.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-danger.odd {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
}
.c-collection-items .item.item-type-danger.even {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-items .item.item-type-danger.even:not(.selected, .well):hover {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-danger.even.selected, .c-collection-items .item.item-type-danger.even.detail {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-danger.even.changed::before, .c-collection-items .item.item-type-danger.even.invalid::before {
  content: "";
  height: 100%;
  left: -4px;
  position: absolute;
  width: 4px;
  z-index: 10000;
}
.c-collection-items .item.item-type-danger.even.changed::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-collection-items .item.item-type-danger.even.invalid::before {
  background: hsl(var(--danger-h), var(--s-3), var(--l-3));
}
.c-collection-items .item.item-type-danger.even.edit {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
}
.c-collection-items .item.item-type-danger.even.is-hidden {
  background: hsl(var(--grey-h), var(--s-0), var(--l-4));
  opacity: 0.8;
}
.c-collection-items .item.item-type-danger.even.is-hidden tr {
  background: unset;
}
.c-collection-items .item.item-type-danger.even.is-hidden tr td {
  color: hsl(var(--grey-h), var(--s-0), var(--l-25));
}
.c-collection-items .item.item-type-danger.even.is-hidden tr td .c-cell-product .header {
  color: unset;
}
.c-collection-items .item.item-type-danger.even.marked {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border: 2px dashed hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.c-collection-items .item.item-type-danger.even {
  background: hsl(var(--danger-h), var(--s-3), var(--l-6));
}
.c-collection-items .item.item-type-danger .cell-actions {
  background: linear-gradient(90deg, transparent, hsl(var(--danger-h), var(--s-3), var(--l-4)));
}
.c-collection-items .item.has-row-detail {
  cursor: row-resize;
}
.c-collection-items .item.has-row-detail .no-click {
  cursor: default;
}
.c-collection-items .item.has-row-click-action {
  cursor: pointer;
}
.c-collection-items.c-collection-columns .item {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: #fff;
}
.c-collection-items .row-separator {
  align-items: center;
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-left: 8px solid;
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  display: flex;
  font-weight: 600;
  gap: 8px;
  margin-bottom: 16px;
  padding: 16px;
  text-transform: uppercase;
}
.c-collection-items .row-separator:first-child {
  margin-top: 0;
}
.c-collection-items .row-separator:not(:first-child) {
  margin-top: 32px;
}
.c-collection-items .row-separator.type-info {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3));
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-collection-items .row-separator.type-warning {
  background: hsl(var(--warning-h), var(--s-3), var(--l-5));
  border-color: hsl(var(--warning-h), var(--s-3), var(--l-3));
  color: hsl(var(--warning-h), var(--s-3), var(--l-2));
}
.c-collection-items .row-separator.type-danger {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
  border-color: hsl(var(--danger-h), var(--s-3), var(--l-3));
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-collection-items .row-separator.type-success {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--success-h), var(--s-2), var(--l-3));
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-collection-items .row-separator.type-surface {
  background: hsl(var(--surface-h), var(--s-1), var(--l-5));
  border-color: hsl(var(--surface-h), var(--s-1), var(--l-3));
  color: hsl(var(--surface-h), var(--s-1), var(--l-2));
}
.c-collection-items .row-separator.type-disabled {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  border-color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-collection-items .cells .td-group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-collection-items .cells .td-group .header {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-collection-items .cells .td-group .header.stats {
  display: flex;
  gap: 8px;
}
.c-collection-items .cells .td-group .details {
  font-size: 0.8rem;
}
.c-collection-items .cells .td-group .details:not(.wrap) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-collection-items .cells .td-group .details.wrap {
  overflow: unset;
  white-space: normal;
  white-space: wrap;
}
.c-collection-items .cells .td-group .sub-details {
  font-size: 0.8rem;
  font-style: italic;
}
.c-collection-items .cells .td-group .marker {
  align-items: center;
  display: flex;
  gap: 4px;
}
.c-collection-items .cells .td-wrapper {
  align-items: center;
  display: flex;
}
.c-collection-items.has-row-status .cell.cell-actions {
  margin-right: var(--coll-status-width);
}
.c-collection-items.size-s {
  font-size: 0.8rem;
}
.c-collection-items.size-s .cells {
  font-size: 0.8rem;
}
.c-collection-items.bulk-mode .item.detail:not(.edit) .cells .cell-actions,
.c-collection-items.bulk-mode .item .cells .cell-actions {
  display: none;
}
.c-collection-items.bulk-mode .item.detail:not(.edit) .cells .cell-actions.bulk-row-actions,
.c-collection-items.bulk-mode .item .cells .cell-actions.bulk-row-actions {
  display: flex;
}

.c-collection-sorter {
  align-items: center;
  display: flex;
  gap: 8px;
  position: relative;
}
.c-collection-sorter .sorter-label {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  margin-left: 8px;
}
.c-collection-sorter .sort-by-dropdown .sort-placeholder {
  align-items: center;
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border: 1px solid hsl(var(--info-h), var(--s-3), var(--l-2));
  border-radius: 8px;
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  display: flex;
  font-weight: 600;
  height: 40px;
  justify-content: flex-start;
  padding: 4px;
  padding-left: 8px;
  transition: all 0.2s ease-in-out;
}
.c-collection-sorter .sort-by-dropdown .sort-placeholder span {
  min-width: 100px;
  text-align: left;
}
.c-collection-sorter .sort-by-dropdown .sort-placeholder.active {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-collection-sorter .sort-by-dropdown .sort-placeholder.active span,
.c-collection-sorter .sort-by-dropdown .sort-placeholder.active svg {
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-collection-sorter .sort-by-dropdown .dropdown-body {
  padding: 0;
  top: 40px;
  width: unset;
}
.c-collection-sorter .sort-by-dropdown .dropdown-body .sort-item {
  background: #fff;
  border: 0;
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  cursor: pointer;
  font-weight: 400;
  padding: 8px;
  text-align: left;
  user-select: none;
  white-space: nowrap;
  width: 100%;
}
.c-collection-sorter .sort-by-dropdown .dropdown-body .sort-item:hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-collection-sorter .sort-by-dropdown .dropdown-body .sort-item.activated {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-collection-sorter .sort-by-dropdown .dropdown-body .sort-options {
  border-top: 2px solid hsl(var(--default-h), var(--s-1), var(--l-5));
  display: flex;
}
.c-collection-sorter .sort-by-dropdown .dropdown-body .sort-options button {
  background: #fff;
  height: 32px;
}
.c-collection-sorter .sort-by-dropdown.activated .sort-placeholder {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-collection-sorter.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.c-collection-sorter.disabled .c-button.sort-placeholder {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  border-color: hsl(var(--grey-h), var(--s-0), var(--l-5));
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
}

.c-select {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}

.c-collection-bulk {
  background: hsl(var(--default-h), var(--s-1), var(--l-4));
  border-radius: 50%;
  display: flex;
  gap: 8px;
}

.c-collection-bulk-column {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 8px;
}
.c-collection-bulk-column .field .help:not(.validation) {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-collection-bulk-column .field label:not(.switch) {
  display: none;
}
.c-collection-bulk-column .field.c-field-composed-money {
  max-width: 170px;
}
.c-collection-bulk-column .field.c-field-number {
  max-width: 140px;
}
.c-collection-bulk-column .actions {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.c-collection-bulk-column.changed {
  background: hsl(var(--success-h), var(--s-2), var(--l-5));
}

.item-type-success .c-collection-inline-field.changed {
  background: hsl(var(--success-h), var(--s-2), var(--l-4));
}

.item-type-surface .c-collection-inline-field.changed {
  background: hsl(var(--surface-h), var(--s-1), var(--l-4));
}

.item-type-default .c-collection-inline-field.changed,
.item-type-info .c-collection-inline-field.changed {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
}

.item-type-warning .c-collection-inline-field.changed {
  background: hsl(var(--warning-h), var(--s-3), var(--l-4));
}

.item .c-collection-inline-field.invalid {
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
}

.c-collection-status {
  align-items: center;
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  display: flex;
  font-weight: 600;
  margin-left: 16px;
  padding-right: 4px;
}
.c-collection-status .c-icon {
  margin-right: 4px;
}
.c-collection-status .indicator {
  align-items: center;
  display: flex;
  gap: 2px;
}
.c-collection-status .indicator .total-items {
  flex: 1;
  font-style: italic;
  margin-right: 4px;
}
.c-collection-status .indicator .viewport-range {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  font-size: 0.6rem;
}

.c-collection-view {
  padding-bottom: var(--query-spacer);
  position: relative;
}
.c-collection-view.loading {
  min-height: 200px;
}
.c-collection-view.loading .c-collection-product .image,
.c-collection-view.loading .c-collection-product .container {
  opacity: 0.25;
}
.c-collection-view.loading .loading-indicator {
  opacity: 1;
  visibility: visible;
}
.c-collection-view.loading .product .image,
.c-collection-view.loading .product .container {
  opacity: 0.25;
}
.c-collection-view.inactive .c-collection-items * {
  cursor: default;
  filter: grayscale(0.3) blur(2px);
  pointer-events: none;
  user-select: none;
}
.c-collection-view .loading-observable {
  height: 16px;
  margin-top: 64px;
  min-height: 16px;
  width: 100%;
}
.c-collection-view .loading-indicator {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  font-size: 1.05rem;
  height: 0;
  justify-content: center;
  left: 0;
  position: sticky;
  top: 50%;
  transition: opacity 0.5s ease;
  visibility: hidden;
}
.c-collection-view .loading-indicator .wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.c-collection-view .loading-indicator .wrapper span {
  font-size: 1.05rem;
}
.c-collection-view .loading-indicator .wrapper svg {
  height: 36px;
  width: 36px;
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  margin-bottom: 8px;
}
.c-collection-view .c-specs {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  font-size: 0.8rem;
  font-weight: 600;
}
.c-collection-view.grid .c-collection-items {
  display: grid;
  flex-wrap: wrap;
}
.c-collection-view.grid .c-collection-items .collection-feedback {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  border-radius: 8px;
}
.c-collection-view.table {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.c-collection-view.table .row {
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  padding: 8px 0;
  transition: opacity 0.25s ease;
  width: 100%;
}
.c-collection-view.table .row .column {
  flex: 1;
  padding: 16px;
}
.c-collection-view.table .row .column .no-click {
  cursor: default;
}
.c-collection-view.table .row .column.number {
  justify-content: flex-end;
}
.c-collection-view.table .row.row-header {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  box-shadow: -2px 0 4px hsl(var(--surface-h), var(--s-1), var(--l-1), 30%);
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  height: 64px;
  margin-bottom: 8px;
  padding: 0;
}
.c-collection-view.table .row.row-header.sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}
.c-collection-view.table .row.row-header .sort-icon {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
  margin-left: 4px;
}
.c-collection-view.table .row.row-header .column {
  align-content: center;
  align-items: center;
  border-bottom: 2px solid transparent;
  cursor: default;
  display: flex;
  height: 100%;
}
.c-collection-view.table .row.row-header .column.sortable {
  cursor: pointer;
}
.c-collection-view.table .row.row-header .column.sortable:hover, .c-collection-view.table .row.row-header .column.sortable.sort-active {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  border-bottom: 2px solid hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-collection-view.table .row.row-header .column.sortable:hover .sort-icon, .c-collection-view.table .row.row-header .column.sortable.sort-active .sort-icon {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-collection-view.table .row.row-header .column .title {
  align-items: center;
  display: flex;
  font-size: 0.8rem;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.c-collection-view.table .row.row-header .column .title svg {
  margin-right: 4px;
}
.c-collection-view.table .row.row-body:nth-of-type(even) {
  background: #fff;
  transition: background 0.15s ease;
}
.c-collection-view.table .row.row-body:nth-of-type(even):hover {
  background: hsl(var(--brand-h), var(--s-3), var(--l-5));
}
.c-collection-view.table .row.row-body:nth-of-type(odd) {
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
}
.c-collection-view.table .row.row-body:nth-of-type(odd):hover {
  background: hsl(var(--brand-h), var(--s-3), var(--l-5));
}
.c-collection-view.table .row.row-body.active {
  background: hsl(var(--brand-h), var(--s-3), var(--l-5));
}
.c-collection-view.table .row.row-body .column {
  align-items: center;
  display: flex;
}
.c-collection-view.table .row.row-body .column.lead {
  margin: 0;
}
.c-collection-view.table .row.row-body .column.ellipsis {
  min-width: 0;
}
.c-collection-view.table .row.row-body .column.ellipsis span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-collection-view.table .row.row-footer .column .spinner {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  font-size: 32px;
  line-height: 32px;
}
.c-collection-view.table .row.row-footer .column.addition-line {
  justify-content: flex-end;
  padding-right: 0;
  text-align: right;
}
.c-collection-view.table .row .row-group {
  flex: 10;
  flex: var(--grouped-width);
  overflow: hidden;
}
@media (min-width: 1400px) {
  .c-collection-view.table .row .row-group {
    display: flex;
    flex: 25;
    flex: var(--ungrouped-width);
    justify-content: space-between;
  }
}
.c-collection-view.table .row .row-details {
  flex: 0 1 100%;
}
.c-collection-view.table.loading .row.row-header .column {
  cursor: not-allowed;
}
.c-collection-view.table.loading .row:not(.row-header, .row-footer) {
  opacity: 0.3;
}
.c-collection-view.size-s .c-collection-items {
  font-size: 0.8rem;
}
.c-collection-view.size-s .c-collection-items .cell {
  min-height: 32px;
  padding: 8px 2px;
}
@media (max-width: 1550px) {
  .c-collection-view.table .row .column {
    padding: 8px;
  }
}
@media (max-width: 1400px) {
  .c-collection-view.table .row .column {
    padding: 4px;
  }
}
@media (max-width: 750px) {
  .c-collection-view.table .row {
    gap: 4px;
  }
  .c-collection-view.table .row .column {
    padding: 2px;
  }
}
@media (max-width: 600px) {
  .c-collection-view.table .row.row-header .column.sortable .sort-icon {
    height: 18px;
    width: 18px;
    margin-left: 0;
  }
  .c-collection-view.table .row .column {
    padding: 1px;
  }
}

.no-results {
  align-items: center;
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  border: 2px dashed hsl(var(--default-h), var(--s-1), var(--l-4));
  box-shadow: -2px 0 4px hsl(var(--surface-h), var(--s-1), var(--l-1), 30%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  padding: 16px;
  position: relative;
}
.no-results .main-text {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  font-size: 1.05rem;
  text-align: center;
  text-transform: uppercase;
  z-index: 1000;
}
.no-results svg {
  height: 150px;
  width: 150px;
  animation: bounce 0.3s linear 1;
  color: hsl(var(--default-h), var(--s-1), var(--l-5));
  position: absolute;
}
.no-results .search-hint {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 4px;
  white-space: nowrap;
  z-index: 1000;
}
.no-results .search-terms {
  display: flex;
  flex-direction: column;
}
.no-results .search-terms .search-term {
  flex: 1;
  font-size: 0.85rem;
}

.c-collection-filter-control {
  align-items: center;
  display: flex;
  gap: 8px;
  height: 64px;
}

.c-row-action-search-product .search-header {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  font-weight: 600;
  margin-bottom: 8px;
}
.c-row-action-search-product .search-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-row-action-search-product .search-footer {
  border-top: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-3));
  font-size: 12px;
  margin-top: 8px;
  opacity: 0.8;
  padding-top: 4px;
}

.c-collection-workflow-control {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  border-left: 3px solid hsl(var(--info-h), var(--s-2), var(--l-3));
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
  padding: 0;
  position: relative;
  transition: all 0.2s ease;
  width: 100%;
}
.c-collection-workflow-control::before {
  background: hsl(var(--info-h), var(--s-2), var(--l-3));
  content: "";
  height: 2px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.2s ease;
  width: 100%;
}
.c-collection-workflow-control.is-active {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3));
  border-left-color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.c-collection-workflow-control.is-active::before {
  opacity: 1;
}
.c-collection-workflow-control .workflow-badge {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
}
.c-collection-workflow-control .workflow-badge-icon-wrapper {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
  width: 32px;
}
.c-collection-workflow-control .workflow-badge-icon-wrapper:hover:not(:disabled) {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.c-collection-workflow-control .workflow-badge-icon-wrapper:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.c-collection-workflow-control .workflow-badge-content {
  flex: 1;
  min-width: 0;
}
.c-collection-workflow-control .workflow-badge-label {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.c-collection-workflow-control .workflow-badge-active-name {
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 4px;
}
.c-collection-workflow-control .workflow-badge-hint {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  font-size: 0.7rem;
  font-style: italic;
  margin-top: 4px;
}
.c-collection-workflow-control .workflow-options {
  border-top: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px 16px;
}
.c-collection-workflow-control .workflow-option {
  align-items: center;
  background: #fff;
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  border-radius: 4px;
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  cursor: pointer;
  display: flex;
  font-weight: 400;
  gap: 8px;
  padding: 8px;
  position: relative;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
}
.c-collection-workflow-control .workflow-option:hover:not(:disabled) {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3));
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
}
.c-collection-workflow-control .workflow-option:hover:not(:disabled) .workflow-option-radio {
  border-color: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-collection-workflow-control .workflow-option:disabled {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  border-color: hsl(var(--default-h), var(--s-1), var(--l-5));
  color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  cursor: not-allowed;
  opacity: 0.5;
}
.c-collection-workflow-control .workflow-option-active {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3));
  border-left-width: 3px;
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  font-weight: 500;
}
.c-collection-workflow-control .workflow-option-active .workflow-option-radio {
  background: hsl(var(--info-h), var(--s-2), var(--l-3));
  border-color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-collection-workflow-control .workflow-option-radio {
  align-items: center;
  background: #fff;
  border: 1.5px solid hsl(var(--grey-h), var(--s-0), var(--l-4));
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 18px;
  justify-content: center;
  transition: all 0.15s ease;
  width: 18px;
}
.c-collection-workflow-control .workflow-option-radio-dot {
  background: #fff;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}
.c-collection-workflow-control .workflow-option-label {
  flex: 1;
}
.c-collection-workflow-control .workflow-option-count {
  align-items: center;
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  display: flex;
  font-size: 0.7rem;
  font-weight: 500;
  justify-content: center;
}
.c-collection-workflow-control .workflow-option-active .workflow-option-count {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
}
.c-collection-workflow-control .workflow-option-badge {
  align-items: center;
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  border-radius: 10px;
  color: #fff;
  display: flex;
  font-size: 0.7rem;
  font-weight: 500;
  height: 18px;
  justify-content: center;
  min-width: 18px;
  padding: 0 4px;
}
.c-collection-workflow-control .workflow-actions {
  background: hsl(var(--surface-h), var(--s-1), var(--l-6));
  border-top: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  padding: 12px 16px;
}
.c-collection-workflow-control .workflow-actions-label {
  color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  font-size: 0.7rem;
  font-weight: 500;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.c-collection-workflow-control .workflow-actions-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c-collection-workflow-control .workflow-actions-item {
  align-items: center;
  color: hsl(var(--grey-h), var(--s-0), var(--l-1));
  display: flex;
  font-size: 0.7rem;
  gap: 4px;
}
.c-collection-workflow-control .workflow-actions-arrow {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  flex-shrink: 0;
}
.c-collection-workflow-control.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.c-collection-hero {
  container-name: collection-hero;
  container-type: inline-size;
  display: flex;
  font-size: 0.8rem;
  gap: 8px;
}
.c-collection-hero .memo-section {
  flex: 1;
  width: 100%;
}

@container collection-hero (width < 1500px) {
  /* Change the flex direction of the .child element. */
  .memo-section {
    flex-direction: row;
  }
  .memo-section .c-data-card .entry {
    flex-direction: column;
    padding: 4px 8px;
  }
}
.c-collection-columns.c-collection-items {
  width: 100%;
}
.c-collection-columns.c-collection-items .item {
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
  display: flex;
  font-weight: 600;
  margin: 0;
  width: 100%;
}
.c-collection-columns.c-collection-items .item, .c-collection-columns.c-collection-items .item:hover,
.c-collection-columns.c-collection-items .item .cells:hover,
.c-collection-columns.c-collection-items .item .cells .cell.cell-status {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-collection-columns.c-collection-items .item .cell {
  font-size: 0.8rem;
}

.c-collection-header {
  align-items: center;
  background: hsl(var(--grey-h), var(--s-0), var(--l-6));
  box-shadow: -2px 0 4px hsl(var(--surface-h), var(--s-1), var(--l-1), 30%);
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.c-collection-header .actions {
  align-items: center;
  display: flex;
  gap: 16px;
  height: 64px;
  padding: 8px 16px;
  width: 100%;
}
.c-collection-header .actions .c-dropdown > .c-button.variant-menu,
.c-collection-header .actions > .c-button.variant-menu {
  height: 64px;
  width: 64px;
}

.c-field-select {
  flex-direction: column;
}
.c-field-select .control select {
  flex: 1;
  width: 100%;
}
.c-field-select .control .c-button {
  border-left-width: 0;
  border-radius: unset;
}

.c-field-media-upload .media-area {
  align-items: center;
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border: 2px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  display: flex;
  height: 150px;
}
.c-field-media-upload .media-area .snapshot {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  width: 100%;
}
.c-field-media-upload .media-area .snapshot svg {
  height: 64px;
  width: 64px;
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-field-media-upload .media-area .snapshot p {
  color: hsl(var(--info-h), var(--s-2), var(--l-3));
}
.c-field-media-upload .media-area .snapshot.contains-image p,
.c-field-media-upload .media-area .snapshot.contains-image svg {
  display: none;
}
.c-field-media-upload .media-area .actions {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  justify-content: center;
  padding: 4px;
}

/* stylelint-disable selector-max-id */
.c-field-editor .btn {
  padding: 16px;
}
.c-field-editor .editor-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.c-field-editor .editor-toolbar .c-button {
  height: 40px;
  max-width: 40px;
}
.c-field-editor .ql-placeholder-token {
  border-radius: 4px;
  box-shadow: 0 0.8px 2px hsla(0, 0%, 0%, 0.2);
  color: #fff;
  cursor: default;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  margin: 0 2px;
  padding: 2px 0;
  transition: background 0.2s ease-in-out;
  user-select: none;
}
.c-field-editor .ql-placeholder-token span {
  padding: 4px 4px;
}
.c-field-editor .ql-placeholder-token.ql-placeholder-existing {
  background: hsl(var(--info-h), var(--s-2), var(--l-4), 70%);
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  cursor: pointer;
}
.c-field-editor .ql-placeholder-token.ql-placeholder-existing:hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-4));
}
.c-field-editor .ql-placeholder-token.ql-placeholder-fixed {
  background: hsl(var(--success-h), var(--s-2), var(--l-4), 70%);
  color: hsl(var(--success-h), var(--s-2), var(--l-1));
}
.c-field-editor .ql-placeholder-token.ql-placeholder-new {
  background: hsl(var(--surface-h), var(--s-2), var(--l-4), 50%);
  border: none;
  color: hsl(var(--surface-h), var(--s-1), var(--l-1));
  cursor: pointer;
}
.c-field-editor .ql-placeholder-token.ql-placeholder-new:hover {
  background: hsl(var(--surface-h), var(--s-1), var(--l-2));
  color: hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-field-editor .ql-placeholder-token .ql-placeholder-remove {
  align-items: center;
  background: hsl(var(--danger-h), var(--s-3), var(--l-5));
  border: 1px solid hsl(var(--danger-h), var(--s-3), var(--l-2));
  border-radius: 50%;
  color: hsl(var(--danger-h), var(--s-3), var(--l-2));
  cursor: pointer;
  display: none;
  font-size: 17px;
  height: 18px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: -8px;
  top: -8px;
  width: 18px;
  z-index: 1000;
}
.c-field-editor .ql-placeholder-token .ql-placeholder-remove:hover {
  background: hsl(var(--danger-h), var(--s-3), var(--l-4));
}

/*!
 * Quill Editor v2.0.3
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-placeholder .ql-picker-label::before {
  content: "Placeholders";
  margin-right: 2em; /* optional: space between text and svg */
}
.ql-placeholder .ql-picker-item::before {
  content: attr(data-value, "");
}
.ql-placeholder .ql-picker-item:not([data-value])::before {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  content: "-----------------------------------------------------------";
}

.ql-placeholders_custom .ql-picker-label::before,
.ql-placeholders_fixed .ql-picker-label::before,
.ql-placeholders_system .ql-picker-label::before {
  margin-right: 2em;
}
.ql-placeholders_custom .ql-picker-item::before,
.ql-placeholders_fixed .ql-picker-item::before,
.ql-placeholders_system .ql-picker-item::before {
  content: attr(data-value, "");
}
.ql-placeholders_custom .ql-picker-item:not([data-value])::before,
.ql-placeholders_fixed .ql-picker-item:not([data-value])::before,
.ql-placeholders_system .ql-picker-item:not([data-value])::before {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  content: "-----------------------------------------------------------";
}

.ql-placeholders_custom .ql-picker-label::before {
  content: "👤 Custom";
}

.ql-placeholders_fixed .ql-picker-label::before {
  content: "🔒 Fixed";
}

.ql-placeholders_system .ql-picker-label::before {
  content: "⚙️ System";
}

.ql-container {
  background: #fff;
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0;
  position: relative;
}
.ql-container.ql-disabled {
  background: hsl(var(--grey-h), var(--s-0), var(--l-5));
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
  cursor: pointer;
}

.ql-clipboard {
  height: 1px;
  left: -100000px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}

.ql-clipboard p {
  margin: 0;
  padding: 0;
}

.ql-editor {
  box-sizing: border-box;
  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  height: 100%;
  line-height: 1.5;
  min-height: 300px;
  outline: none;
  overflow-wrap: break-word;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
}
@supports (counter-set: none) {
  .ql-editor p,
  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3,
  .ql-editor h4,
  .ql-editor h5,
  .ql-editor h6 {
    counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor p,
  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3,
  .ql-editor h4,
  .ql-editor h5,
  .ql-editor h6 {
    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.ql-editor table td {
  border: 1px solid #000;
  outline: none;
  padding: 2px 5px;
}
.ql-editor ol {
  padding-left: 1.5em;
}
.ql-editor li {
  list-style-type: none;
  padding-left: 1.5em;
  position: relative;
}
.ql-editor li > .ql-ui::before {
  display: inline-block;
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li[data-list=checked] > .ql-ui, .ql-editor li[data-list=unchecked] > .ql-ui {
  color: #777;
}
.ql-editor li[data-list=bullet] > .ql-ui::before {
  content: "•";
}
.ql-editor li[data-list=checked] > .ql-ui::before {
  content: "☑";
}
.ql-editor li[data-list=unchecked] > .ql-ui::before {
  content: "☐";
}
@supports (counter-set: none) {
  .ql-editor li[data-list] {
    counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list] {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered] {
  counter-increment: list-0;
}
.ql-editor li[data-list=ordered] > .ql-ui::before {
  content: counter(list-0, decimal) ". ";
}
.ql-editor li[data-list=ordered].ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui::before {
  content: counter(list-1, lower-alpha) ". ";
}
@supports (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-1 {
    counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui::before {
  content: counter(list-2, lower-roman) ". ";
}
@supports (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-2 {
    counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui::before {
  content: counter(list-3, decimal) ". ";
}
@supports (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-3 {
    counter-set: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui::before {
  content: counter(list-4, lower-alpha) ". ";
}
@supports (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-4 {
    counter-set: list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui::before {
  content: counter(list-5, lower-roman) ". ";
}
@supports (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-5 {
    counter-set: list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui::before {
  content: counter(list-6, decimal) ". ";
}
@supports (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-6 {
    counter-set: list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-6 {
    counter-reset: list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui::before {
  content: counter(list-7, lower-alpha) ". ";
}
@supports (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-7 {
    counter-set: list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-7 {
    counter-reset: list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui::before {
  content: counter(list-8, lower-roman) ". ";
}
@supports (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-8 {
    counter-set: list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list=ordered].ql-indent-8 {
    counter-reset: list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui::before {
  content: counter(list-9, decimal) ". ";
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor li.ql-direction-rtl > .ql-ui::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
  text-align: left;
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor .ql-code-block-container {
  font-family: monospace;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, "Times New Roman", serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, "Courier New", monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor .ql-ui {
  position: absolute;
}
.ql-editor.ql-blank::before {
  color: rgba(0, 0, 0, 0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}

@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow a {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.ql-snow #editor-resizer .toolbar .group .btn {
  background: hsl(var(--surface-h), var(--s-1), var(--l-2));
  border: none;
  color: hsl(var(--surface-h), var(--s-1), var(--l-5));
  display: flex;
  font-size: 0.8rem;
  font-weight: 600;
}
.ql-snow #editor-resizer .toolbar .group .btn:hover {
  background: hsl(var(--surface-h), var(--s-1), var(--l-1));
}
.ql-snow #editor-resizer .toolbar .group .input-wrapper {
  background: hsl(var(--info-h), var(--s-2), var(--l-4));
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  display: flex;
}
.ql-snow #editor-resizer .toolbar .group .input-wrapper input {
  background: transparent;
  height: 100%;
  padding: unset;
}
.ql-snow #editor-resizer .toolbar .group .input-wrapper .suffix {
  align-items: center;
  display: flex;
  flex: 1;
  font-weight: 600;
  justify-content: center;
  padding: 0 2px;
  position: unset;
  right: unset;
}
.ql-snow #editor-resizer .toolbar .group .input-wrapper::after {
  bottom: 0;
  content: "";
  height: 0;
}
.ql-snow.ql-toolbar::after,
.ql-snow .ql-toolbar::after {
  clear: both;
  content: "";
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px #ddd;
  color: #444;
  padding: 5px 12px;
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  border: 1px solid #ccc;
  display: none;
  font-size: 13px;
  height: 26px;
  margin: 0;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  line-height: 26px;
  text-decoration: none;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: "Edit";
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: "Remove";
  margin-left: 8px;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0;
  content: "Save";
  padding-right: 0;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats::after {
  clear: both;
  content: "";
  display: table;
}
.ql-snow .ql-stroke,
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
}
.ql-snow .ql-stroke {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-stroke-miter {
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor .ql-code-block-container {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor .ql-code-block-container {
  background-color: #23241f;
  color: #f8f8f2;
  margin-bottom: 5px;
  margin-top: 5px;
  overflow: visible;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  max-height: 400px;
  overflow-y: auto;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "Normal";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "Heading 1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "Heading 2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "Heading 3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "Heading 4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "Heading 5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "Heading 6";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "Sans Serif";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: "Serif";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: "Monospace";
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, "Times New Roman", serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, "Courier New", monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "Normal";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: "Small";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: "Large";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: "Huge";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-picker.ql-color-picker, .ql-snow .ql-picker.ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-picker.ql-color-picker .ql-picker-label,
.ql-snow .ql-picker.ql-color-picker .ql-picker-label svg, .ql-snow .ql-picker.ql-icon-picker .ql-picker-label,
.ql-snow .ql-picker.ql-icon-picker .ql-picker-label svg {
  padding: 2px 4px;
  right: 4px;
}
.ql-snow .ql-picker.ql-color-picker .ql-picker-options, .ql-snow .ql-picker.ql-icon-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-picker.ql-color-picker .ql-picker-item, .ql-snow .ql-picker.ql-icon-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker, .ql-icon-picker) svg {
  margin-top: -9px;
  position: absolute;
  right: 0;
  top: 50%;
  width: 18px;
}

.ql-code-block-container {
  position: relative;
}
.ql-code-block-container .ql-ui {
  right: 5px;
  top: 5px;
}

.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0;
}

.ql-container.ql-snow {
  border: 1px solid #ccc;
}

.c-field-vat-id {
  display: flex;
  flex-direction: column;
}
.c-field-vat-id .input-form {
  align-items: center;
  display: flex;
}
.c-field-vat-id .input-form.field-compound button.c-button {
  border-radius: 0;
}

.c-field-radio .radio-control {
  display: flex;
}

.c-field-date.years {
  width: 90px;
}
.c-field-date.months {
  width: 140px;
}

.air-datepicker-cell.-year-.-other-decade-,
.air-datepicker-cell.-day-.-other-month- {
  color: var(--adp-color-other-month);
}

.air-datepicker-cell.-year-.-other-decade-:hover,
.air-datepicker-cell.-day-.-other-month-:hover {
  color: var(--adp-color-other-month-hover);
}

.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,
.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month- {
  color: var(--adp-color-other-month);
}

.-selected-.air-datepicker-cell.-year-.-other-decade-,
.-selected-.air-datepicker-cell.-day-.-other-month- {
  background: var(--adp-background-color-selected-other-month);
  color: #fff;
}

.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,
.-selected-.-focus-.air-datepicker-cell.-day-.-other-month- {
  background: var(--adp-background-color-selected-other-month-focused);
}

.-in-range-.air-datepicker-cell.-year-.-other-decade-,
.-in-range-.air-datepicker-cell.-day-.-other-month- {
  background-color: var(--adp-background-color-in-range);
  color: var(--adp-color);
}

.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,
.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month- {
  background-color: var(--adp-background-color-in-range-focused);
}

.air-datepicker-cell.-year-.-other-decade-:empty,
.air-datepicker-cell.-day-.-other-month-:empty {
  background: none;
  border: none;
}

.air-datepicker-cell {
  align-items: center;
  border-radius: var(--adp-cell-border-radius);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.air-datepicker-cell.-focus- {
  background: var(--adp-cell-background-color-hover);
}

.air-datepicker-cell.-current- {
  color: var(--adp-color-current-date);
}

.air-datepicker-cell.-current-.-focus- {
  color: var(--adp-color);
}

.air-datepicker-cell.-current-.-in-range- {
  color: var(--adp-color-current-date);
}

.air-datepicker-cell.-disabled- {
  color: var(--adp-color-disabled);
  cursor: default;
}

.air-datepicker-cell.-disabled-.-focus- {
  color: var(--adp-color-disabled);
}

.air-datepicker-cell.-disabled-.-in-range- {
  color: var(--adp-color-disabled-in-range);
}

.air-datepicker-cell.-disabled-.-current-.-focus- {
  color: var(--adp-color-disabled);
}

.air-datepicker-cell.-in-range- {
  background: var(--adp-cell-background-color-in-range);
  border-radius: 0;
}

.air-datepicker-cell.-in-range-:hover {
  background: var(--adp-cell-background-color-in-range-hover);
}

.air-datepicker-cell.-range-from- {
  background-color: var(--adp-cell-background-color-in-range);
  border: 1px solid var(--adp-cell-border-color-in-range);
  border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);
}

.air-datepicker-cell.-range-to- {
  background-color: var(--adp-cell-background-color-in-range);
  border: 1px solid var(--adp-cell-border-color-in-range);
  border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0;
}

.air-datepicker-cell.-range-to-.-range-from- {
  border-radius: var(--adp-cell-border-radius);
}

.air-datepicker-cell.-selected- {
  background: var(--adp-cell-background-color-selected);
  border: none;
  color: #fff;
}

.air-datepicker-cell.-selected-.-current- {
  background: var(--adp-cell-background-color-selected);
  color: #fff;
}

.air-datepicker-cell.-selected-.-focus- {
  background: var(--adp-cell-background-color-selected-hover);
}

.air-datepicker-body {
  transition: all var(--adp-transition-duration) var(--adp-transition-ease);
}

.air-datepicker-body.-hidden- {
  display: none;
}

.air-datepicker-body--day-names {
  display: grid;
  grid-template-columns: repeat(7, var(--adp-day-cell-width));
  margin: 8px 0 3px;
}

.air-datepicker-body--day-name {
  align-items: center;
  color: var(--adp-day-name-color);
  display: flex;
  flex: 1;
  font-size: 0.8em;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
}

.air-datepicker-body--day-name.-clickable- {
  cursor: pointer;
}

.air-datepicker-body--day-name.-clickable-:hover {
  color: var(--adp-day-name-color-hover);
}

.air-datepicker-body--cells {
  display: grid;
}

.air-datepicker-body--cells.-days- {
  grid-auto-rows: var(--adp-day-cell-height);
  grid-template-columns: repeat(7, var(--adp-day-cell-width));
}

.air-datepicker-body--cells.-months- {
  grid-auto-rows: var(--adp-month-cell-height);
  grid-template-columns: repeat(3, 1fr);
}

.air-datepicker-body--cells.-years- {
  grid-auto-rows: var(--adp-year-cell-height);
  grid-template-columns: repeat(4, 1fr);
}

.air-datepicker-nav {
  border-bottom: 1px solid var(--adp-border-color-inner);
  box-sizing: content-box;
  display: flex;
  justify-content: space-between;
  min-height: var(--adp-nav-height);
  padding: var(--adp-padding);
}

.-only-timepicker- .air-datepicker-nav {
  display: none;
}

.air-datepicker-nav--title,
.air-datepicker-nav--action {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

.air-datepicker-nav--action {
  border-radius: var(--adp-border-radius);
  user-select: none;
  width: var(--adp-nav-action-size);
}

.air-datepicker-nav--action:hover {
  background: var(--adp-background-color-hover);
}

.air-datepicker-nav--action:active {
  background: var(--adp-background-color-active);
}

.air-datepicker-nav--action.-disabled- {
  visibility: hidden;
}

.air-datepicker-nav--action svg {
  height: 32px;
  width: 32px;
}

.air-datepicker-nav--action path {
  fill: none;
  stroke: var(--adp-nav-arrow-color);
  stroke-width: 2px;
}

.air-datepicker-nav--title {
  border-radius: var(--adp-border-radius);
  padding: 0 8px;
}

.air-datepicker-nav--title i {
  color: var(--adp-nav-color-secondary);
  font-style: normal;
  margin-left: 0.3em;
}

.air-datepicker-nav--title:hover {
  background: var(--adp-background-color-hover);
}

.air-datepicker-nav--title:active {
  background: var(--adp-background-color-active);
}

.air-datepicker-nav--title.-disabled- {
  background: none;
  cursor: default;
}

.air-datepicker-buttons {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

.air-datepicker-button {
  background: rgba(255, 255, 255, 0);
  border: none;
  border-radius: var(--adp-btn-border-radius);
  color: var(--adp-btn-color);
  cursor: pointer;
  display: inline-flex;
  height: var(--adp-btn-height);
}

.air-datepicker-button:hover {
  background: var(--adp-btn-background-color-hover);
  color: var(--adp-btn-color-hover);
}

.air-datepicker-button:focus {
  background: var(--adp-btn-background-color-hover);
  color: var(--adp-btn-color-hover);
  outline: none;
}

.air-datepicker-button:active {
  background: var(--adp-btn-background-color-active);
}

.air-datepicker-button span {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  outline: none;
  width: 100%;
}

.air-datepicker-time {
  align-items: center;
  column-gap: 12px;
  display: grid;
  grid-template-columns: max-content 1fr;
  padding: 0 var(--adp-time-padding-inner);
  position: relative;
}

.-only-timepicker- .air-datepicker-time {
  border-top: none;
}

.air-datepicker-time--current {
  align-items: center;
  display: flex;
  flex: 1;
  font-size: 14px;
  text-align: center;
}

.air-datepicker-time--current-colon {
  line-height: 1;
  margin: 0 2px 3px;
}

.air-datepicker-time--current-hours,
.air-datepicker-time--current-minutes {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 19px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.air-datepicker-time--current-hours::after,
.air-datepicker-time--current-minutes::after {
  background: var(--adp-background-color-hover);
  border-radius: var(--adp-border-radius);
  bottom: -2px;
  content: "";
  left: -2px;
  opacity: 0;
  position: absolute;
  right: -2px;
  top: -3px;
  z-index: -1;
}

.air-datepicker-time--current-hours.-focus-::after,
.air-datepicker-time--current-minutes.-focus-::after {
  opacity: 1;
}

.air-datepicker-time--current-ampm {
  align-self: flex-end;
  color: var(--adp-time-day-period-color);
  font-size: 11px;
  margin-bottom: 1px;
  margin-left: 6px;
  text-transform: uppercase;
}

.air-datepicker-time--row {
  align-items: center;
  background: linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat;
  display: flex;
  font-size: 11px;
  height: 17px;
}

.air-datepicker-time--row:first-child {
  margin-bottom: 4px;
}

.air-datepicker-time--row input[type=range] {
  appearance: none;
  background: none;
  cursor: pointer;
  flex: 1;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.air-datepicker-time--row input[type=range]::-ms-tooltip {
  display: none;
}

.air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb {
  border-color: var(--adp-time-track-color-hover);
}

.air-datepicker-time--row input[type=range]:hover::-moz-range-thumb {
  border-color: var(--adp-time-track-color-hover);
}

.air-datepicker-time--row input[type=range]:hover::-ms-thumb {
  border-color: var(--adp-time-track-color-hover);
}

.air-datepicker-time--row input[type=range]:focus {
  outline: none;
}

.air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb {
  background: var(--adp-cell-background-color-selected);
  border-color: var(--adp-cell-background-color-selected);
}

.air-datepicker-time--row input[type=range]:focus::-moz-range-thumb {
  background: var(--adp-cell-background-color-selected);
  border-color: var(--adp-cell-background-color-selected);
}

.air-datepicker-time--row input[type=range]:focus::-ms-thumb {
  background: var(--adp-cell-background-color-selected);
  border-color: var(--adp-cell-background-color-selected);
}

.air-datepicker-time--row input[type=range]::-moz-range-thumb {
  background: #fff;
  border: 1px solid var(--adp-time-track-color);
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  height: 12px;
  transition: background var(--adp-transition-duration);
  width: 12px;
}

.air-datepicker-time--row input[type=range]::-ms-thumb {
  background: #fff;
  border: 1px solid var(--adp-time-track-color);
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  height: 12px;
  transition: background var(--adp-transition-duration);
  width: 12px;
}

.air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
  appearance: none;
  background: #fff;
  border: 1px solid var(--adp-time-track-color);
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  height: 12px;
  margin-top: calc(var(--adp-time-thumb-size) / 2 * -1);
  transition: background var(--adp-transition-duration);
  width: 12px;
}

.air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track {
  background: rgba(0, 0, 0, 0);
  border: none;
  color: rgba(0, 0, 0, 0);
  cursor: pointer;
  height: var(--adp-time-track-height);
}

.air-datepicker-time--row input[type=range]::-moz-range-track {
  background: rgba(0, 0, 0, 0);
  border: none;
  color: rgba(0, 0, 0, 0);
  cursor: pointer;
  height: var(--adp-time-track-height);
}

.air-datepicker-time--row input[type=range]::-ms-track {
  background: rgba(0, 0, 0, 0);
  border: none;
  color: rgba(0, 0, 0, 0);
  cursor: pointer;
  height: var(--adp-time-track-height);
}

.air-datepicker-time--row input[type=range]::-ms-fill-lower {
  background: rgba(0, 0, 0, 0);
}

.air-datepicker-time--row input[type=range]::-ms-fill-upper {
  background: rgba(0, 0, 0, 0);
}

.air-datepicker {
  --adp-font-family:
      -apple-system,
      blinkmacsystemfont,
      "Segoe UI",
      roboto,
      helvetica,
      arial,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
  --adp-font-size: 14px;
  --adp-width: 246px;
  --adp-z-index: 10000;
  --adp-padding: 4px;
  --adp-grid-areas: "nav" "body" "timepicker" "buttons";
  --adp-transition-duration: 0.3s;
  --adp-transition-ease: ease-out;
  --adp-transition-offset: 8px;
  --adp-background-color: #fff;
  --adp-background-color-hover: hsl(var(--grey-h), var(--s-0), var(--l-5));
  --adp-background-color-active: hsl(var(--grey-h), var(--s-0), var(--l-5));
  --adp-background-color-in-range: hsl(var(--grey-h), var(--s-0), var(--l-5));
  --adp-background-color-in-range-focused: hsl(var(--info-h), var(--s-2), var(--l-4));
  --adp-background-color-selected-other-month-focused: hsl(var(--info-h), var(--s-3), var(--l-1));
  --adp-background-color-selected-other-month: hsl(var(--info-h), var(--s-3), var(--l-2));
  --adp-color: hsl(var(--grey-h), var(--s-0), var(--l-2));
  --adp-color-secondary: hsl(var(--grey-h), var(--s-0), var(--l-3));
  --adp-accent-color: hsl(var(--info-h), var(--s-2), var(--l-3));
  --adp-color-current-date: var(--adp-accent-color);
  --adp-color-other-month: hsl(var(--grey-h), var(--s-0), var(--l-4));
  --adp-color-disabled: #aeaeae;
  --adp-color-disabled-in-range: #939393;
  --adp-color-other-month-hover: hsl(var(--grey-h), var(--s-0), var(--l-3));
  --adp-border-color: hsl(var(--surface-h), var(--s-1), var(--l-4));
  --adp-border-color-inner: hsl(var(--surface-h), var(--s-1), var(--l-5));
  --adp-border-radius: 4px;
  --adp-border-color-inline: hsl(var(--surface-h), var(--s-1), var(--l-4));
  --adp-nav-height: 32px;
  --adp-nav-arrow-color: var(--adp-color-secondary);
  --adp-nav-action-size: 32px;
  --adp-nav-color-secondary: var(--adp-color-secondary);
  --adp-day-name-color: hsl(var(--info-h), var(--s-3), var(--l-2));
  --adp-day-name-color-hover: hsl(var(--info-h), var(--s-3), var(--l-1));
  --adp-day-cell-width: 1fr;
  --adp-day-cell-height: 32px;
  --adp-month-cell-height: 42px;
  --adp-year-cell-height: 56px;
  --adp-pointer-size: 10px;
  --adp-poiner-border-radius: 2px;
  --adp-pointer-offset: 14px;
  --adp-cell-border-radius: 4px;
  --adp-cell-background-color-hover: var(--adp-background-color-hover);
  --adp-cell-background-color-selected: hsl(var(--info-h), var(--s-3), var(--l-2));
  --adp-cell-background-color-selected-hover: hsl(var(--info-h), var(--s-3), var(--l-1));
  --adp-cell-background-color-in-range: hsl(var(--info-h), var(--s-2), var(--l-5));
  --adp-cell-background-color-in-range-hover: hsl(var(--info-h), var(--s-2), var(--l-4));
  --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
  --adp-btn-height: 32px;
  --adp-btn-color: var(--adp-accent-color);
  --adp-btn-color-hover: var(--adp-color);
  --adp-btn-border-radius: var(--adp-border-radius);
  --adp-btn-background-color-hover: var(--adp-background-color-hover);
  --adp-btn-background-color-active: var(--adp-background-color-active);
  --adp-time-track-height: 1px;
  --adp-time-track-color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  --adp-time-track-color-hover: hsl(var(--info-h), var(--s-2), var(--l-3));
  --adp-time-thumb-size: 12px;
  --adp-time-padding-inner: 10px;
  --adp-time-day-period-color: var(--adp-color-secondary);
  --adp-mobile-font-size: 16px;
  --adp-mobile-nav-height: 40px;
  --adp-mobile-width: 320px;
  --adp-mobile-day-cell-height: 38px;
  --adp-mobile-month-cell-height: 48px;
  --adp-mobile-year-cell-height: 64px;
  background: var(--adp-background-color);
  border: 1px solid var(--adp-border-color);
  border-radius: var(--adp-border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  box-sizing: content-box;
  color: var(--adp-color);
  display: grid;
  font-family: var(--adp-font-family), sans-serif;
  font-size: var(--adp-font-size);
  grid-template-areas: var(--adp-grid-areas);
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, max-content);
  position: absolute;
  transition: opacity var(--adp-transition-duration) var(--adp-transition-ease), transform var(--adp-transition-duration) var(--adp-transition-ease);
  width: var(--adp-width);
  z-index: var(--adp-z-index);
}

.air-datepicker-overlay {
  --adp-overlay-background-color: rgb(0 0 0 / 30%);
  --adp-overlay-transition-duration: 0.3s;
  --adp-overlay-transition-ease: ease-out;
  --adp-overlay-z-index: 99;
  background: var(--adp-overlay-background-color);
  height: 0;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), left 0s, height 0s, width 0s;
  transition-delay: 0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);
  width: 0;
  z-index: var(--adp-overlay-z-index);
}

.air-datepicker:not(.-custom-position-) {
  opacity: 0;
}

.air-datepicker.-from-top- {
  transform: translateY(calc(var(--adp-transition-offset) * -1));
}

.air-datepicker.-from-right- {
  transform: translateX(var(--adp-transition-offset));
}

.air-datepicker.-from-bottom- {
  transform: translateY(var(--adp-transition-offset));
}

.air-datepicker.-from-left- {
  transform: translateX(calc(var(--adp-transition-offset) * -1));
}

.air-datepicker.-active-:not(.-custom-position-) {
  opacity: 1;
  transform: translate(0, 0);
}

.air-datepicker.-active-.-custom-position- {
  transition: none;
}

.air-datepicker.-inline- {
  border-color: var(--adp-border-color-inline);
  box-shadow: none;
  left: auto;
  opacity: 1;
  position: static;
  right: auto;
  transform: none;
}

.air-datepicker.-inline- .air-datepicker--pointer {
  display: none;
}

.air-datepicker.-is-mobile- {
  --adp-font-size: var(--adp-mobile-font-size);
  --adp-day-cell-height: var(--adp-mobile-day-cell-height);
  --adp-month-cell-height: var(--adp-mobile-month-cell-height);
  --adp-year-cell-height: var(--adp-mobile-year-cell-height);
  --adp-nav-height: var(--adp-mobile-nav-height);
  --adp-nav-action-size: var(--adp-mobile-nav-height);
  border: none;
  position: fixed;
  width: var(--adp-mobile-width);
}

.air-datepicker.-is-mobile- * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.air-datepicker.-is-mobile- .air-datepicker--pointer {
  display: none;
}

.air-datepicker.-is-mobile-:not(.-custom-position-) {
  transform: translate(-50%, calc(-50% + var(--adp-transition-offset)));
}

.air-datepicker.-is-mobile-.-active-:not(.-custom-position-) {
  transform: translate(-50%, -50%);
}

.air-datepicker.-custom-position- {
  transition: none;
}

.air-datepicker-global-container {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 100000000000;
}

.air-datepicker--pointer {
  --pointer-half-size: calc(var(--adp-pointer-size) / 2);
  height: var(--adp-pointer-size);
  position: absolute;
  width: var(--adp-pointer-size);
  z-index: -1;
}

.air-datepicker--pointer::after {
  background: #fff;
  border-right: 1px solid var(--adp-border-color-inline);
  border-top: 1px solid var(--adp-border-color-inline);
  border-top-right-radius: var(--adp-poiner-border-radius);
  box-sizing: border-box;
  content: "";
  height: var(--adp-pointer-size);
  position: absolute;
  width: var(--adp-pointer-size);
}

.-top-left- .air-datepicker--pointer,
.-top-center- .air-datepicker--pointer,
.-top-right- .air-datepicker--pointer,
[data-popper-placement^=top] .air-datepicker--pointer {
  top: calc(100% - var(--pointer-half-size) + 1px);
}

.-top-left- .air-datepicker--pointer::after,
.-top-center- .air-datepicker--pointer::after,
.-top-right- .air-datepicker--pointer::after,
[data-popper-placement^=top] .air-datepicker--pointer::after {
  transform: rotate(135deg);
}

.-right-top- .air-datepicker--pointer,
.-right-center- .air-datepicker--pointer,
.-right-bottom- .air-datepicker--pointer,
[data-popper-placement^=right] .air-datepicker--pointer {
  right: calc(100% - var(--pointer-half-size) + 1px);
}

.-right-top- .air-datepicker--pointer::after,
.-right-center- .air-datepicker--pointer::after,
.-right-bottom- .air-datepicker--pointer::after,
[data-popper-placement^=right] .air-datepicker--pointer::after {
  transform: rotate(225deg);
}

.-bottom-left- .air-datepicker--pointer,
.-bottom-center- .air-datepicker--pointer,
.-bottom-right- .air-datepicker--pointer,
[data-popper-placement^=bottom] .air-datepicker--pointer {
  bottom: calc(100% - var(--pointer-half-size) + 1px);
}

.-bottom-left- .air-datepicker--pointer::after,
.-bottom-center- .air-datepicker--pointer::after,
.-bottom-right- .air-datepicker--pointer::after,
[data-popper-placement^=bottom] .air-datepicker--pointer::after {
  transform: rotate(315deg);
}

.-left-top- .air-datepicker--pointer,
.-left-center- .air-datepicker--pointer,
.-left-bottom- .air-datepicker--pointer,
[data-popper-placement^=left] .air-datepicker--pointer {
  left: calc(100% - var(--pointer-half-size) + 1px);
}

.-left-top- .air-datepicker--pointer::after,
.-left-center- .air-datepicker--pointer::after,
.-left-bottom- .air-datepicker--pointer::after,
[data-popper-placement^=left] .air-datepicker--pointer::after {
  transform: rotate(45deg);
}

.-top-left- .air-datepicker--pointer,
.-bottom-left- .air-datepicker--pointer {
  left: var(--adp-pointer-offset);
}

.-top-right- .air-datepicker--pointer,
.-bottom-right- .air-datepicker--pointer {
  right: var(--adp-pointer-offset);
}

.-top-center- .air-datepicker--pointer,
.-bottom-center- .air-datepicker--pointer {
  left: calc(50% - var(--adp-pointer-size) / 2);
}

.-left-top- .air-datepicker--pointer,
.-right-top- .air-datepicker--pointer {
  top: var(--adp-pointer-offset);
}

.-left-bottom- .air-datepicker--pointer,
.-right-bottom- .air-datepicker--pointer {
  bottom: var(--adp-pointer-offset);
}

.-left-center- .air-datepicker--pointer,
.-right-center- .air-datepicker--pointer {
  top: calc(50% - var(--adp-pointer-size) / 2);
}

.air-datepicker--navigation {
  grid-area: nav;
}

.air-datepicker--content {
  box-sizing: content-box;
  grid-area: body;
  padding: var(--adp-padding);
}

.-only-timepicker- .air-datepicker--content {
  display: none;
}

.air-datepicker--time {
  grid-area: timepicker;
}

.air-datepicker--buttons {
  grid-area: buttons;
}

.air-datepicker--buttons,
.air-datepicker--time {
  border-top: 1px solid var(--adp-border-color-inner);
  padding: var(--adp-padding);
}

.air-datepicker-overlay.-active- {
  height: 100%;
  opacity: 1;
  transition: opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), height 0s, width 0s;
  width: 100%;
}

.c-field-search {
  flex: 1;
}
.c-field-search .input-wrapper {
  align-items: flex-end;
  display: flex;
  position: relative;
}
.c-field-search .input-wrapper input {
  width: 100%;
}
.c-field-search .input-wrapper input + svg {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  position: absolute;
  right: 8px;
  top: 32px;
}
.c-field-search .input-wrapper .search-suggestions {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-3));
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
  max-height: 200px;
  overflow: auto;
  position: absolute;
  top: 40px;
  width: 100%;
  z-index: 100000;
}
.c-field-search .input-wrapper .search-suggestions .suggestion {
  cursor: pointer;
  padding: 8px;
  z-index: 100001;
}
.c-field-search .input-wrapper .search-suggestions .suggestion.selected {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-field-search .input-wrapper .search-suggestions .suggestion:hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-field-search .search-linked {
  align-items: center;
  display: flex;
  flex: 1;
}
.c-field-search .search-linked .linked-label {
  align-items: center;
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  display: flex;
  flex: 1;
  height: 40px;
  padding: 8px;
  width: 100%;
}
.c-field-search .search-linked .c-button {
  border-radius: 0;
}

.c-field-time {
  flex: 1;
}
.c-field-time .input-wrapper input {
  width: 100%;
}

.c-field-switch.variant-inline {
  align-items: center;
  flex-direction: row;
  gap: 4px;
}
.c-field-switch .checkbox-row {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
.c-field-switch .checkbox-row label.switch {
  height: 24px;
  position: relative;
  user-select: none;
  width: 40px;
}
.c-field-switch .checkbox-row label.switch .slider {
  background-color: hsl(var(--grey-h), var(--s-0), var(--l-4));
  border-radius: 16px;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.c-field-switch .checkbox-row label.switch .slider::before {
  background: hsl(var(--grey-h), var(--s-0), var(--l-3));
  border-radius: 50%;
  bottom: 4px;
  content: "";
  height: 16px;
  left: 4px;
  position: absolute;
  transition: 0.3s ease;
  width: 16px;
}
.c-field-switch .checkbox-row label.switch input {
  height: 0;
  opacity: 0;
  width: 0;
}
.c-field-switch .checkbox-row label.switch input:focus + .slider {
  box-shadow: none;
}
.c-field-switch .checkbox-row label.switch input:checked:focus + .slider {
  box-shadow: none;
}
.c-field-switch .checkbox-row label.switch input:checked + .slider::before {
  transform: translateX(16px);
}
.c-field-switch.type-default .checkbox-row label.switch input:checked + .slider {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-field-switch.type-default .checkbox-row label.switch input:checked + .slider::before {
  background: hsl(var(--brand-h), var(--s-3), var(--l-6));
}
.c-field-switch.type-success .checkbox-row label.switch input:checked + .slider {
  background: hsl(var(--success-h), var(--s-2), var(--l-3));
}
.c-field-switch.type-success .checkbox-row label.switch input:checked + .slider::before {
  background: hsl(var(--success-h), var(--s-2), var(--l-6));
}

.c-checkbox {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.c-checkbox label {
  flex: 1 0;
}
.c-checkbox.select-intend > input {
  background: hsl(var(--brand-h), var(--s-3), var(--l-4));
}
.c-checkbox.type-success > input[type=checkbox] {
  background: hsl(var(--success-h), var(--s-2), var(--l-6));
  border: 1px solid hsl(var(--success-h), var(--s-2), var(--l-2));
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
.c-checkbox.type-success > input[type=checkbox]::after {
  border-color: hsl(var(--success-h), var(--s-2), var(--l-2));
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}

.c-field-code .placeholders {
  display: flex;
  gap: 8px;
}
.c-field-code .placeholders input {
  height: 56px;
  width: 56px;
  border-radius: 50%;
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  text-align: center;
  /* stylelint-disable-next-line order/properties-alphabetical-order */
  appearance: textfield;
}
.c-field-code .placeholders input::placeholder {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-field-code .placeholders input:focus {
  border-color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-field-code.invalid .placeholders input {
  border-color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-field-code.invalid .placeholders input.invalid {
  border: 1px solid hsl(var(--danger-h), var(--s-3), var(--l-2));
}
.c-field-code.valid .placeholders input {
  border-color: hsl(var(--success-h), var(--s-2), var(--l-2));
  color: hsl(var(--success-h), var(--s-2), var(--l-2));
}
@media (max-width: 750px) {
  .c-field-code .placeholders {
    gap: 4px;
  }
  .c-field-code .placeholders input {
    height: 48px;
    width: 48px;
  }
}

.c-field-textarea textarea {
  resize: both;
}

.c-field-select-many {
  max-width: 200px;
}
.c-field-select-many select {
  max-width: 200px;
}
.c-field-select-many select option {
  max-width: 200px;
}
.c-field-select-many.variant-default {
  gap: 4px;
  margin-bottom: 16px;
}
.c-field-select-many.variant-default select {
  max-width: 200px;
  width: 100%;
}
.c-field-select-many.variant-default .control {
  align-items: end;
  display: flex;
}
.c-field-select-many.variant-default .control .c-button {
  border-radius: 0;
}
.c-field-select-many.variant-default .selection-list {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
}
.c-field-select-many.variant-default .selection-list .selection-item {
  align-items: center;
  background: hsl(var(--default-h), var(--s-1), var(--l-4));
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-3));
  border-radius: 4px;
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  display: flex;
  padding: 8px 2px;
}
.c-field-select-many.variant-inline {
  height: 100%;
  position: relative;
}
.c-field-select-many.variant-inline .c-dropdown .btn-dropdown {
  height: 40px;
  width: 100%;
}
.c-field-select-many.variant-inline .c-dropdown.active .btn-dropdown {
  border: 1px solid hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-field-select-many.variant-inline .c-dropdown.active .btn-dropdown .c-icon,
.c-field-select-many.variant-inline .c-dropdown.active .btn-dropdown span {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-field-select-many.variant-inline .c-dropdown.active .dropdown-body {
  display: flex;
  flex-direction: column;
  max-height: 240px;
}
.c-field-select-many.variant-inline .c-dropdown.active .dropdown-body .scroll-container {
  max-height: 240px;
  overflow-y: scroll;
  user-select: none;
}
.c-field-select-many.variant-inline .c-dropdown.active .dropdown-body .scroll-container label {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 400;
  height: 40px;
  padding: 0 8px;
}
.c-field-select-many.variant-inline .c-dropdown.active .dropdown-body .scroll-container label:hover {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
  color: hsl(var(--default-h), var(--s-1), var(--l-2));
}
.c-field-select-many.variant-inline .c-dropdown.disabled {
  border: 1px solid hsl(var(--grey-h), var(--s-0), var(--l-4));
}
.c-field-select-many.variant-inline .c-dropdown:not(.disabled) .btn-dropdown {
  border: 1px solid hsl(var(--surface-h), var(--s-1), var(--l-4));
}
.c-field-select-many.variant-inline .c-dropdown:not(.disabled) .btn-dropdown.disabled {
  background: hsl(var(--default-h), var(--s-1), var(--l-5));
}
.c-field-select-many.variant-inline .c-dropdown:not(.disabled) .btn-dropdown.disabled .c-icon,
.c-field-select-many.variant-inline .c-dropdown:not(.disabled) .btn-dropdown.disabled span {
  color: hsl(var(--default-h), var(--s-1), var(--l-3));
}
.c-field-select-many.variant-inline .c-dropdown:not(.disabled) .btn-dropdown:not(.disabled) {
  background: hsl(var(--surface-h), var(--s-1), 100%);
}
.c-field-select-many.variant-inline .c-dropdown:not(.disabled) .btn-dropdown:not(.disabled) .c-icon,
.c-field-select-many.variant-inline .c-dropdown:not(.disabled) .btn-dropdown:not(.disabled) span {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}

.c-panel-context .c-field-select-many {
  max-width: unset;
}
.c-panel-context .c-field-select-many select {
  max-width: unset;
  width: 100%;
}
.c-panel-context .c-field-select-many .control > div {
  width: 100%;
}

.c-field-text {
  flex: 1;
}
.c-field-text .input-wrapper {
  align-items: flex-end;
  display: flex;
  position: relative;
}
.c-field-text .input-wrapper input {
  width: 100%;
}
.c-field-text .input-wrapper input + svg {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  position: absolute;
  right: 8px;
  top: 8px;
}
.c-field-text .input-wrapper .search-suggestions {
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-3));
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
  max-height: 200px;
  overflow: auto;
  position: absolute;
  top: 40px;
  width: 100%;
  z-index: 100000;
}
.c-field-text .input-wrapper .search-suggestions .suggestion {
  cursor: pointer;
  padding: 8px;
  z-index: 100001;
}
.c-field-text .input-wrapper .search-suggestions .suggestion.selected {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-field-text .input-wrapper .search-suggestions .suggestion:hover {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-field-text .search-linked {
  align-items: center;
  display: flex;
  flex: 1;
}
.c-field-text .search-linked .linked-label {
  align-items: center;
  background: hsl(var(--info-h), var(--s-2), var(--l-6));
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  display: flex;
  flex: 1;
  height: 40px;
  padding: 8px;
  width: 100%;
}
.c-field-text .search-linked .c-button {
  border-radius: 0;
}

.c-field-radio-selection .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.c-field-number .input-wrapper {
  width: 100%;
}
.c-field-number .input-wrapper input {
  width: 100%;
}

.c-list-input {
  display: flex;
  flex-flow: wrap;
  margin-bottom: 16px;
  width: 100%;
}
.c-list-input .list-input {
  margin-bottom: 8px;
  width: 100%;
}
.c-list-input .list-input .c-field-text {
  margin-bottom: 0;
}
.c-list-input .list-input .c-field-text .c-button {
  border-radius: 0;
}
.c-list-input .unit-list {
  background: #fff;
  width: 100%;
}
.c-list-input .unit-list .list-item {
  border: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
  cursor: default;
  display: flex;
  justify-content: space-between;
}
.c-list-input .unit-list .list-item:hover {
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-list-input .unit-list .list-item .c-button {
  border-radius: 0;
}
.c-list-input .unit-list .list-item .content {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  padding: 8px;
}

.c-login .forgot-pw {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.c-login .otp-options {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: center;
}

.c-support {
  align-items: center;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 35px;
  position: fixed;
  width: 150px;
  z-index: 1000000;
}
.c-support .support-icon:hover {
  color: hsl(var(--default-h), var(--s-1), var(--l-1));
}
.c-support.collapsed-support .manager-contact {
  background-image: none;
  max-height: 0;
  min-height: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.c-support.collapsed-support .manager-contact-options,
.c-support.collapsed-support .manager-name,
.c-support.collapsed-support .manager-title {
  display: none;
  user-select: none;
}
.c-support .manager-contact-options {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  z-index: 20;
}
.c-support .manager-contact-options .c-button {
  background: hsl(var(--info-h), var(--s-3), var(--l-1));
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
}
.c-support .manager-title {
  align-items: center;
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
  display: flex;
  font-size: 1rem;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
  max-height: 100%;
  user-select: none;
  white-space: nowrap;
  width: 100%;
}
.c-support .manager-title:hover {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-support .manager-contact {
  background-size: cover;
  border: 2px solid hsl(var(--info-h), var(--s-3), var(--l-1));
  border-radius: 50%;
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
  min-height: 125px;
  min-width: 125px;
  transition: all 0.3s ease;
}
.c-support .manager-name {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  margin-top: 4px;
  padding: 8px;
}
.c-support .c-notifications {
  position: fixed;
}
.c-support:not(.collapsed) .c-notifications {
  bottom: 110px;
  left: 190px;
}
.c-support:not(.collapsed) .c-notifications .notification:last-child::before {
  clip-path: polygon(100% 100%, 100% 0, 0 50%);
  content: "";
  display: block;
  height: 20px;
  left: -20px;
  position: absolute;
  width: 20px;
}
.c-support.collapsed-support:not(.collapsed) .c-notifications {
  bottom: 35px;
  left: 150px;
}
.c-support.collapsed {
  bottom: 0;
  left: -25px;
  margin-bottom: -20px;
  margin-left: 0;
  position: fixed;
  width: unset;
  z-index: 1000000;
}
.c-support.collapsed .manager-name,
.c-support.collapsed .manager-title {
  display: none;
}
.c-support.collapsed .manager-contact {
  min-height: 100px;
  min-width: 100px;
  z-index: 10;
}
.c-support.collapsed .manager-contact-options {
  border-radius: 50%;
  height: 100px;
  list-style: none;
  padding: 0;
  position: relative;
}
.c-support.collapsed .manager-contact-options > .c-button {
  height: 20px;
  left: 50%;
  margin: -10px;
  position: absolute;
  top: 50%;
  width: 20px;
}
.c-support.collapsed .manager-contact-options > .c-button:nth-of-type(1) {
  transform: rotate(-102deg) translate(50px) rotate(102deg);
}
.c-support.collapsed .manager-contact-options > .c-button:nth-of-type(2) {
  transform: rotate(-62deg) translate(50px) rotate(62deg);
}
.c-support.collapsed .manager-contact-options > .c-button:nth-of-type(3) {
  transform: rotate(-22deg) translate(50px) rotate(22deg);
}
.c-support.collapsed .manager-contact-options > .c-button:nth-of-type(4) {
  transform: rotate(18deg) translate(50px) rotate(-18deg);
}
.c-support.collapsed .manager-contact-options > .c-button:nth-of-type(5) {
  transform: rotate(58deg) translate(50px) rotate(-58deg);
}
.c-support.collapsed .manager-contact-options > .c-button:nth-of-type(6) {
  transform: rotate(98deg) translate(50px) rotate(-98deg);
}
.c-support.collapsed .manager-contact-options > .c-button:nth-of-type(7) {
  transform: rotate(138deg) translate(50px) rotate(-138deg);
}
.c-support.collapsed .manager-contact-options > .c-button:nth-of-type(8) {
  transform: rotate(178deg) translate(50px) rotate(-178deg);
}
.c-support.collapsed .manager-contact-options > .c-button:nth-of-type(9) {
  transform: rotate(218deg) translate(50px) rotate(-218deg);
}
.c-support.collapsed .manager-contact-options {
  position: absolute;
}
.c-support.collapsed .manager-contact-options > .c-button {
  height: 24px;
  width: 24px;
}
.c-support.collapsed .manager-contact-options > .c-button svg {
  height: 16px;
  width: 16px;
}
.c-support.collapsed .c-notifications {
  bottom: 105px;
  left: 55px;
}
@media (min-width: 600px) {
  .c-support.collapsed .c-notifications .c-notification:last-child::before {
    bottom: -50px;
    clip-path: polygon(50% 0, 100% 0, 0 100%);
    content: "";
    height: 50px;
    left: 0;
    position: absolute;
    width: 50px;
  }
}
.c-support.collapsed.collapsed-support .c-notifications {
  bottom: 160px;
}
.c-support.toggleable {
  cursor: pointer;
}
@media (max-width: 1550px) {
  .c-support.collapsed .manager-contact {
    display: none;
  }
  .c-support.collapsed .manager-contact-options {
    border-radius: unset;
    bottom: 8px;
    flex-direction: column;
    height: unset;
    margin-bottom: 0;
    position: fixed;
    right: 8px;
  }
  .c-support.collapsed .manager-contact-options > .c-button {
    left: unset;
    margin: unset;
    position: unset;
  }
  .c-support.collapsed .manager-contact-options > .c-button:nth-of-type(1) {
    transform: unset;
  }
  .c-support.collapsed .manager-contact-options > .c-button:nth-of-type(2) {
    transform: unset;
  }
}
@media (max-width: 600px) {
  .c-support.collapsed:not(.collapsed-support) .manager-contact {
    display: none;
  }
  .c-support.collapsed .manager-contact-options {
    display: none;
  }
  .c-support.collapsed .c-notifications {
    bottom: 0;
    left: 0;
    padding: 8px;
    width: 100vw;
  }
  .c-support.collapsed .c-notifications .notification {
    width: 100%;
  }
  .c-support.collapsed .c-notifications .notification:last-child::before {
    display: none;
  }
}

.c-version-checker .c-dialog {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-version-checker .c-dialog .body .info-box {
  display: flex;
  max-width: 500px;
  padding-bottom: 16px;
}
.c-version-checker .c-dialog .body .info-box .icon-construction .c-icon {
  height: 64px;
  width: 64px;
  align-items: center;
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: center;
  margin-right: 8px;
}
.c-version-checker .c-dialog .body .info-box .text p {
  margin-bottom: 8px;
}

.carousel,
.c-carousel-slides,
.c-carousel-slides .item {
  height: inherit;
}

.c-carousel {
  cursor: default;
  height: 100%;
  position: relative;
}
.c-carousel .inline {
  height: 100%;
}
.c-carousel .detail-view {
  aspect-ratio: 4/3;
  display: flex;
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
  width: 100%;
}
.c-carousel .detail-view .btn-close {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 10000;
}
.c-carousel .c-carousel-slides {
  height: 100%;
  position: relative;
  width: 100%;
}
.c-carousel .c-carousel-slides .c-carousel-controls {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  padding: 8px;
  position: absolute;
  width: 100%;
  z-index: 10000;
}

.c-carousel-indicators {
  bottom: 0;
  cursor: pointer;
  left: 50%;
  list-style: none;
  margin-left: -30%;
  padding-left: 0;
  position: absolute;
  text-align: center;
  width: 60%;
  z-index: 100000;
}
.c-carousel-indicators li {
  height: 24px;
  width: 24px;
  border: 2px solid hsl(var(--brand-h), var(--s-3), var(--l-6));
  border-radius: 16px;
  display: inline-block;
  margin: 4px;
  transition: all 0.3s ease;
}
.c-carousel-indicators li.active {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
}

.c-carousel-slides {
  display: flex;
  height: 100%;
  position: relative;
  width: 100%;
}
.c-carousel-slides .item {
  display: flex;
  height: 100%;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease-in-out;
  width: 100%;
}
.c-carousel-slides .item a {
  color: hsl(var(--grey-h), var(--s-0), var(--l-5));
}
.c-carousel-slides .item a:hover {
  color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-carousel-slides .item img {
  background: hsl(var(--surface-h), var(--s-1), var(--l-1));
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.c-carousel-slides .item.active {
  opacity: 1;
  z-index: 1;
}
.c-carousel-slides .item > img,
.c-carousel-slides .item > a > img {
  display: block;
  height: auto;
  max-width: 100%;
  line-height: 1;
}
.c-carousel-slides .rows {
  position: relative;
  width: 100%;
}
.c-carousel-slides .rows .row {
  display: flex;
  flex: 1;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: all 1s ease-in-out;
  user-select: none;
  width: 100%;
}
.c-carousel-slides .rows .row.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
.c-carousel-slides .rows .row .row-item {
  position: relative;
  width: 25%;
}
.c-carousel-slides .rows .row .row-item img {
  max-height: 100%;
  max-width: 100%;
}

.c-filters-active {
  background: hsl(var(--default-h), var(--s-1), var(--l-6));
  width: 100%;
  z-index: 1000;
}
.c-filters-active .inactive {
  align-items: center;
  animation: show 0.3s ease forwards;
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
  display: flex;
  flex-direction: column;
  height: 64px;
  justify-content: center;
  max-height: 64px;
  opacity: 0;
  width: 100%;
}
.c-filters-active .inactive .c-icon {
  color: hsl(var(--grey-h), var(--s-0), var(--l-3));
}
.c-filters-active .filters {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
.c-filters-active .filters .term {
  align-items: center;
  animation: fade-in 0.3s ease forwards;
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
  box-shadow: inset 1px 1px 0 hsl(var(--default-h), var(--s-1), var(--l-5));
  color: #fff;
  display: flex;
  flex: 0 0 50%;
  font-size: 0.8rem;
  font-weight: 600;
  height: 32px;
  justify-content: flex-start;
  opacity: 0;
  position: relative;
  width: 50%;
}
.c-filters-active .filters .term .marker {
  border-right: 1px solid hsl(var(--brand-h), var(--s-3), var(--l-5));
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 4px;
  z-index: 1000;
}
.c-filters-active .filters .term .icon-close {
  background: hsl(var(--brand-h), var(--s-3), var(--l-2), 80%);
  color: hsl(var(--brand-h), var(--s-3), var(--l-6));
  display: none;
  height: 100%;
  left: 0;
  padding: 6px;
  position: absolute;
  top: 0;
  width: 100%;
}
.c-filters-active .filters .term span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-filters-active .filters .term:hover {
  background: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-filters-active .filters .term:hover .icon-close {
  display: block;
}
.c-filters-active .filters .term.match {
  background: hsl(var(--info-h), var(--s-2), var(--l-3));
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
}
.c-filters-active .filters .term.match svg {
  color: hsl(var(--info-h), var(--s-2), var(--l-5));
}

html body .c-button-group {
  align-items: center;
  display: flex;
}
html body .c-button-group.type-default .c-button {
  border-left-width: 0;
  border-radius: 0;
}
html body .c-button-group.type-default .c-button:first-child {
  border-left-width: 1px;
}
html body .c-button-group.type-panel {
  gap: 8px;
}
html body .c-button-group.type-panel .c-button {
  flex: 1;
}
html body .c-button-group.type-bar {
  box-shadow: -2px 0 4px hsl(var(--surface-h), var(--s-1), var(--l-1), 30%);
}
html body .c-button-group.type-context {
  box-shadow: 0 0.8px 4px hsla(0, 0%, 0%, 0.2);
  display: inline-flex;
  margin-bottom: 16px;
  margin-right: 16px;
}
html body .c-button-group.type-context .c-button {
  max-width: 100px;
}
html body .c-button-group.type-simple .c-button {
  border-radius: 0;
}
html body .c-button-group.type-simple .c-button:last-child {
  border-radius: 0;
}
html body .c-button-group.type-spaced {
  gap: 8px;
}

.c-checkbox-group .no-children {
  font-style: normal;
  font-weight: 400;
}
.c-checkbox-group .has-children {
  font-style: italic;
  font-weight: 600;
}
.c-checkbox-group .has-children > .item.selected + .sub-items input[type=checkbox]:checked {
  background: hsl(var(--brand-h), var(--s-3), var(--l-5));
  border-color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-checkbox-group .has-children > .item.selected + .sub-items input[type=checkbox]:checked::after {
  border-color: hsl(var(--brand-h), var(--s-3), var(--l-3));
}
.c-checkbox-group .sub-items {
  margin-bottom: 4px;
  margin-left: 12px;
}

.c-radio-group {
  flex-direction: column;
}
.c-radio-group .item {
  display: flex;
  padding: 2px 0;
}
.c-radio-group .item label {
  align-items: center;
  display: flex;
}
.c-radio-group .help {
  margin-top: 4px;
}

.c-notifications {
  bottom: 60px;
  display: flex;
  flex-direction: column;
  font-weight: 500;
  gap: 16px;
  position: absolute;
  width: 475px;
  z-index: 10000000000000000;
}
@media (max-width: 750px) {
  .c-notifications {
    left: 0;
    padding: 0 8px;
    width: 100vw;
  }
}

.c-cell-availability.td-group {
  display: flex;
  justify-content: center;
}
.c-cell-availability.td-group .stock-info {
  align-items: flex-start;
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  display: flex;
  font-size: 0.8rem;
  gap: 4px;
}
.c-cell-availability.td-group .stock-info .stat {
  display: flex;
  gap: 0.8px;
}
.c-cell-availability.td-group.stock-age-group {
  align-items: flex-end;
}
.c-cell-availability.td-group.stock-age-group .stock-age {
  align-items: center;
  display: flex;
  gap: 4px;
}

.c-margin label {
  font-weight: 600;
  margin-right: 4px;
}
.c-margin .amount.rating-warning {
  color: hsl(var(--warning-h), var(--s-3), var(--l-25));
}
.c-margin .amount.rating-danger {
  color: hsl(var(--danger-h), var(--s-3), var(--l-25));
}
.c-margin .amount.rating-success {
  color: hsl(var(--success-h), var(--s-2), var(--l-25));
}

.c-cell-product {
  display: flex;
  flex-direction: column;
}
.c-cell-product.td-group {
  display: flex;
  justify-content: center;
}
.c-cell-product.td-group .header {
  color: hsl(var(--info-h), var(--s-3), var(--l-2));
}
.c-cell-product.td-group .details {
  font-size: 0.8rem;
  font-weight: italic;
}

.c-cell-dimension.td-group {
  display: flex;
  justify-content: center;
}
.c-cell-dimension.td-group .dimension-info {
  align-items: flex-start;
  display: flex;
  font-size: 0.7rem;
  gap: 4px;
}
.c-cell-dimension.td-group .dimension-info .stat {
  display: flex;
  gap: 4px;
}

.c-item-tags {
  align-items: flex-start;
  display: flex;
  gap: 2px;
}
.c-item-tags .c-tag-label {
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  width: auto;
}
.ql-toolbar .ql-picker:not(.ql-color-picker, .ql-icon-picker).ql-table-up {
  width: 28px;
}

.ql-toolbar .ql-picker:not(.ql-color-picker, .ql-icon-picker).ql-table-up .ql-picker-label {
  padding: 2px 4px;
}

.ql-toolbar .ql-picker:not(.ql-color-picker, .ql-icon-picker).ql-table-up .ql-picker-label svg {
  margin-top: 0;
  position: static;
}

.ql-toolbar .ql-picker.ql-expanded .ql-picker-options {
  z-index: 1;
}

.ql-editor .ql-table {
  border-collapse: collapse;
  display: table;
  table-layout: fixed;
  width: auto;
}

.ql-editor .ql-table[data-full] {
  width: 100%;
}

.ql-editor .ql-table-wrapper {
  overflow: auto;
  scrollbar-width: none;
  width: 100%;
}

.ql-editor .ql-table-caption {
  outline: 0;
  overflow-wrap: break-word;
  position: relative;
}

.ql-editor .ql-table-caption .ql-table-caption--switch {
  align-items: center;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  justify-content: center;
  padding: 2px;
}

.ql-editor .ql-table-caption .ql-table-caption--switch:hover {
  background-color: #eee;
}

.ql-editor .ql-table-cell {
  border-color: transparent;
  font-size: 14px;
  outline: 0;
  overflow: auto;
  padding: 8px 12px;
}

.ql-editor .ql-table-cell-inner {
  counter-reset: list-0;
  display: inline-block;
  min-width: 100%;
  outline: 0;
  overflow-wrap: break-word;
}

.ql-editor .ql-table col {
  border-collapse: separate;
  display: table-column;
  table-layout: fixed;
  text-indent: initial;
}

.ql-editor .ql-table tr + tr td {
  border-top: none;
}

.ql-editor .ql-table td {
  border: 1px solid #a1a1aa;
}

.ql-editor .ql-table td + td {
  border-left: none;
}

.table-up-toolbox {
  height: 100%;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.table-up-toolbox * {
  pointer-events: all;
}

.table-up-tooltip {
  background-color: #303133;
  border-radius: 0.25rem;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  position: absolute;
  transition: opacity 0.15s linear;
  white-space: nowrap;
  z-index: 20;
}

.table-up-tooltip.transparent {
  opacity: 0;
}

.table-up-tooltip.hidden {
  display: none;
}

.table-up-button {
  --table-btn-color: #606266;
  --table-btn-bg-hover: #f3f4f6;
  --table-btn-color-border: #dcdfe6;
  --table-btn-border: 0.0625rem solid var(--table-btn-color-border);
  --table-btn-confirm-color-border: #409eff;
  --table-btn-confirm-bg: #409eff;
  --table-btn-confirm-hover: #79bbff;
  --table-btn-confirm-outline-focus-visible: 0.125rem solid #a0cfff;
  background-color: transparent;
  border: var(--table-btn-border);
  border-radius: 0.25rem;
  box-sizing: border-box;
  color: var(--table-btn-color);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  height: 2rem;
  line-height: 1;
  margin: 0;
  padding: 0.5rem 1rem;
}

.table-up-button + .table-up-button {
  margin-left: 0.375rem;
}

.table-up-button:hover {
  background-color: var(--table-btn-bg-hover);
}

.table-up-button.confirm {
  background-color: var(--table-btn-confirm-bg);
  border-color: var(--table-btn-confirm-color-border);
  color: #fff;
}

.table-up-button.confirm:hover {
  background-color: var(--table-btn-confirm-hover);
  border-color: var(--table-btn-confirm-hover);
}

.table-up-button.confirm:focus-visible {
  outline: var(--table-btn-confirm-outline-focus-visible);
  outline-offset: 0.0625rem;
}

.table-up-dialog {
  --dialog-bg: rgb(0 0 0 / 50%);
  --dialog-color-border: #ebeef5;
  --dialog-color-boxshadow: rgb(0 0 0 / 12%);
  --dialog-border: 0.0625rem solid var(--dialog-color-border);
  --dialog-boxshadow: 0 0 0.75rem var(--dialog-color-boxshadow);
  background-color: var(--dialog-bg);
  bottom: 0;
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2000;
}

.table-up-dialog__overlay {
  bottom: 0;
  left: 0;
  overflow: auto;
  padding: 1rem;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
}

.table-up-dialog__overlay::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}

.table-up-dialog__content {
  background-color: #fff;
  border: var(--dialog-border);
  border-radius: 0.25rem;
  box-shadow: var(--dialog-boxshadow);
  box-sizing: border-box;
  display: inline-block;
  font-size: 1.125rem;
  max-width: 50vw;
  overflow: hidden;
  text-align: left;
  vertical-align: middle;
  width: 100%;
}

.table-up-color-picker {
  --color-picker-bg-color: #fff;
  background: var(--color-picker-bg-color);
  border-radius: 0.375rem;
  box-shadow: 0 0 0.375rem #b2b5b8;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  padding: 0.5rem;
  width: 16.75rem;
}

.table-up-color-picker__content {
  box-sizing: border-box;
  height: 11.75rem;
  padding-top: 0.5rem;
  width: 100%;
}

.table-up-color-picker__selector {
  height: 9.375rem;
  position: absolute;
  width: 14.375rem;
}

.table-up-color-picker__background {
  background: linear-gradient(to top, #000 0, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%);
  height: 100%;
  width: 100%;
}

.table-up-color-picker__background-handle {
  border: 0.0625rem solid #fff;
  border-radius: 100%;
  box-sizing: border-box;
  cursor: pointer;
  height: 0.625rem;
  left: 14.375rem;
  position: absolute;
  top: 0;
  transform: translate(-0.3125rem, -0.3125rem);
  width: 0.625rem;
}

.table-up-color-picker__hue {
  background: linear-gradient(0deg, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
  height: 9.375rem;
  margin-left: 15rem;
  position: absolute;
  width: 0.75rem;
}

.table-up-color-picker__hue-handle {
  background-color: #fff;
  border: 0.0625rem solid #fff;
  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  cursor: pointer;
  height: 0.625rem;
  left: 0;
  position: absolute;
  transform: translate(-0.125rem, -0.3125rem);
  width: 1rem;
}

.table-up-color-picker__alpha {
  background: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
  background-position: 0 0, 0.375rem 0, 0.375rem -0.375rem, 0 0.375rem;
  background-size: 0.75rem 0.75rem;
  height: 0.75rem;
  margin-top: 10rem;
  position: absolute;
  width: 14.375rem;
}

.table-up-color-picker__alpha-bg {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);
  height: 100%;
  position: relative;
}

.table-up-color-picker__alpha-handle {
  background-color: #fff;
  border: 0.0625rem solid #fff;
  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  cursor: pointer;
  height: 1rem;
  position: absolute;
  top: 0;
  transform: translate(-0.3125rem, -0.125rem);
  width: 0.625rem;
}

.table-up-color-picker__action {
  align-items: center;
  border-top: 0.0625rem solid #e9ecef;
  box-sizing: border-box;
  display: flex;
  gap: 0.375rem;
  padding-top: 0.5rem;
  width: 100%;
}

.table-up-color-picker__action-item {
  align-items: center;
  display: inline-flex;
  flex: 1;
  font-size: 0.75rem;
}

.table-up-color-picker__input {
  background-color: #fff;
  border: 0.0625rem solid #ced4da;
  border-radius: 0.25rem;
  box-sizing: border-box;
  color: #405057;
  height: 1.375rem;
  margin-left: 0.125rem;
  outline: 0;
  padding: 0.125rem 0 0.125rem 0.25rem;
  width: 100%;
}

.table-up-tooltip .table-up-color-picker {
  --color-picker-bg-color: transparent;
  box-shadow: none;
  padding: 0.5rem 0;
  width: 15.75rem;
}

.ql-container .table-up-selection {
  --select-color: #0589f340;
  display: none;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
}

.ql-container .table-up-selection__line {
  background-color: var(--select-color);
  pointer-events: none;
  position: absolute;
}

.table-up-resize-line__col,
.table-up-resize-line__row {
  position: absolute;
  z-index: 0;
}

.table-up-resize-line__col.is-hidden,
.table-up-resize-line__row.is-hidden {
  display: none;
}

.table-up-resize-line__col::after,
.table-up-resize-line__col::before,
.table-up-resize-line__row::after,
.table-up-resize-line__row::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  z-index: 1;
}

.table-up-resize-line__row {
  cursor: ns-resize;
  height: 0.0625rem;
}

.table-up-resize-line__row::after,
.table-up-resize-line__row::before {
  height: 0.5rem;
  width: 100%;
}

.table-up-resize-line__row::before {
  transform: translateY(-0.5rem);
}

.table-up-resize-line__col {
  cursor: ew-resize;
  width: 0.0625rem;
}

.table-up-resize-line__col::after,
.table-up-resize-line__col::before {
  height: 100%;
  width: 0.5rem;
}

.table-up-resize-line__col::before {
  transform: translateX(-0.5rem);
}

.table-up-resize-box {
  position: absolute;
  z-index: 0;
}

.table-up-resize-box.is-hidden {
  display: none;
}

.table-up-resize-box.is-caption-bottom .table-up-resize-box__corner {
  border-bottom-left-radius: 50%;
  border-bottom-width: 0.0625rem;
  border-top-left-radius: 0;
  border-top-width: 0;
}

.table-up-resize-box.is-align-right .table-up-resize-box__col-separator {
  left: -0.125rem;
}

.table-up-resize-box.is-align-right .table-up-resize-box__corner {
  border-left-width: 0;
  border-right-width: 0.0625rem;
  border-top-left-radius: 0;
  border-top-right-radius: 50%;
}

.table-up-resize-box.is-align-right.is-caption-bottom .table-up-resize-box__corner {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 0;
}

.table-up-resize-box__col,
.table-up-resize-box__row {
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
}

.table-up-resize-box__col-wrapper,
.table-up-resize-box__row-wrapper {
  display: flex;
}

.table-up-resize-box__col-header,
.table-up-resize-box__row-header {
  background-color: #f3f4f5;
  border: 0.0625rem solid #ccc;
  flex-shrink: 0;
  position: relative;
}

.table-up-resize-box__col-wrapper {
  height: 100%;
}

.table-up-resize-box__col-header {
  border-right-color: transparent;
  cursor: pointer;
  height: 100%;
}

.table-up-resize-box__col-header:last-child {
  border-right-color: #ccc;
}

.table-up-resize-box__col-separator {
  bottom: 0;
  cursor: ew-resize;
  position: absolute;
  right: -0.125rem;
  top: 0;
  width: 0.125rem;
  z-index: 0;
}

.table-up-resize-box__col-separator::after {
  right: -0.375rem;
}

.table-up-resize-box__col-separator::before {
  left: -0.375rem;
}

.table-up-resize-box__col-separator::after,
.table-up-resize-box__col-separator::before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 0.5rem;
  z-index: 1;
}

.table-up-resize-box__row-wrapper {
  flex-direction: column;
  width: 100%;
}

.table-up-resize-box__row-header {
  border-bottom-color: transparent;
  cursor: pointer;
  width: 100%;
}

.table-up-resize-box__row-header:last-child {
  border-bottom-color: #ccc;
}

.table-up-resize-box__row-separator {
  bottom: -0.125rem;
  cursor: ns-resize;
  height: 0.125rem;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 0;
}

.table-up-resize-box__row-separator::after {
  bottom: -0.375rem;
}

.table-up-resize-box__row-separator::before {
  top: -0.375rem;
}

.table-up-resize-box__row-separator::after,
.table-up-resize-box__row-separator::before {
  content: "";
  display: block;
  height: 0.5rem;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.table-up-resize-box__corner {
  background-color: #f3f4f5;
  border: 0.0625rem solid #ccc;
  border-bottom-width: 0;
  border-right-width: 0;
  border-top-left-radius: 50%;
  cursor: pointer;
  left: 0;
  position: absolute;
  top: 0;
}

.table-up-drag-line {
  background-color: #409eff;
  position: fixed;
  z-index: 0;
}

.table-up-drag-line.is-col {
  cursor: ew-resize;
  width: 0.125rem;
}

.table-up-drag-line.is-row {
  cursor: ns-resize;
  height: 0.125rem;
}

.table-up-scale {
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
}

.table-up-scale__block {
  background-color: #f1f5f9;
  border: 0.0625rem solid #999;
  cursor: nwse-resize;
  height: 0.75rem;
  left: 0;
  pointer-events: all;
  position: absolute;
  top: 0;
  transform: translate(-100%, -100%);
  width: 0.75rem;
}

.table-up-scale.is-align-right .table-up-scale__block {
  cursor: nesw-resize;
}

.table-up-scale.is-hidden {
  display: none;
}

.table-up-scrollbar {
  position: absolute;
  transition: opacity 0.15s linear;
  z-index: 1;
}

.table-up-scrollbar__container {
  position: relative;
}

.table-up-scrollbar.is-transparent {
  opacity: 0;
}

.table-up-scrollbar.is-vertical {
  bottom: 0.125rem;
  left: -0.5rem;
  top: 0.125rem;
  width: 0.375rem;
}

.table-up-scrollbar.is-vertical .table-up-scrollbar__thumb {
  width: 100%;
}

.table-up-scrollbar.is-horizontal {
  bottom: 0.125rem;
  height: 0.375rem;
  left: 0.125rem;
  right: 0.125rem;
}

.table-up-scrollbar.is-horizontal .table-up-scrollbar__thumb {
  height: 100%;
}

.table-up-scrollbar__thumb {
  background-color: #d2d2d2;
  border-radius: 0.3125rem;
  cursor: pointer;
}

.table-up-scrollbar__thumb:hover {
  background-color: #a1a1aa;
}

.table-up-scrollbar--origin.ql-container .ql-table-wrapper {
  scrollbar-width: inherit;
}

.table-up-align,
.table-up-menu {
  align-items: center;
  background-color: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
  display: none;
  font-size: 0.875rem;
  padding: 0.25rem;
  position: absolute;
  z-index: 1;
}

.table-up-align__item,
.table-up-menu__item {
  align-items: center;
  border-radius: 0.25rem;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 0.25rem;
  position: relative;
}

.table-up-align__item:hover,
.table-up-menu__item:hover {
  background-color: #eee;
}

.table-up-align__item.is-break,
.table-up-menu__item.is-break {
  align-self: stretch;
  background-color: #a3a3a3;
  cursor: default;
  margin: 0.125rem 0.25rem;
  padding: 0;
  width: 0.0625rem;
}

.table-up-align .icon,
.table-up-menu .icon {
  display: flex;
  flex-shrink: 0;
  font-size: 1.25rem;
}

.table-up-align span,
.table-up-menu span {
  text-wrap: nowrap;
}

.table-up-menu.is-contextmenu {
  flex-direction: column;
  max-height: 21.875rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.25rem 0.5rem;
}

.table-up-menu.is-contextmenu .table-up-menu__item {
  cursor: pointer;
  display: flex;
  gap: 0.25rem;
  justify-content: flex-start;
  width: 100%;
}

.table-up-menu.is-contextmenu .is-break {
  background-color: #a3a3a3;
  flex-shrink: 0;
  height: 0.0625rem;
  margin: 0.25rem 0;
  width: 100%;
}

.table-up-align--active {
  display: flex;
}

.table-up-align .icon {
  height: 1.25rem;
  width: 1.25rem;
}

.table-up-color-map {
  display: flex;
  flex-direction: column;
}

.table-up-color-map--used {
  align-items: center;
  border-top: 0.0625rem solid #ccc;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.table-up-color-map__content {
  display: flex;
  flex-direction: column;
}

.table-up-color-map__content-row {
  align-items: center;
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}

.table-up-color-map__item {
  border: 0.0625rem solid #a3a3a3;
  cursor: pointer;
  height: 0.875rem;
  margin: 0.125rem;
  width: 0.875rem;
}

.table-up-color-map__btn {
  align-items: center;
  background-color: #fff;
  color: #303133;
  cursor: pointer;
  display: flex;
  flex: 1;
  height: 1.25rem;
  justify-content: center;
  padding: 0 0.375rem;
}

.table-up-color-map__btn:hover {
  background-color: #edeeef;
}

.table-up-input__item {
  --input-height: 2rem;
  --input-inner-height: calc(var(--input-height) - 0.125rem);
  --input-color-text: #606266;
  --input-color-boxshaow: #dcdfe6;
  --input-color-focus: #409eff;
  --input-color-error: #f56c6c;
  --input-boxshaow: 0 0 0 0.0625rem var(--input-color-boxshaow) inset;
  --input-boxshaow-focus: 0 0 0 0.0625rem var(--input-color-focus) inset;
  --input-boxshaow-error: 0 0 0 0.0625rem var(--input-color-error) inset;
  align-items: center;
  display: flex;
}

.table-up-input__item + .table-up-input__item {
  margin-top: 1.125rem;
}

.table-up-input__label {
  flex-shrink: 0;
  width: 5rem;
}

.table-up-input__input {
  border-radius: 0.25rem;
  box-shadow: var(--input-boxshaow);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  height: var(--input-height);
  line-height: var(--input-height);
  padding: 0.0625rem 0.5rem;
  position: relative;
  transition: box-shadow 0.2s linear;
  width: 100%;
}

.table-up-input__input.focus {
  box-shadow: var(--input-boxshaow-focus);
}

.table-up-input__input input {
  border: 0;
  color: var(--input-color-text);
  flex-grow: 1;
  font-size: 0.875rem;
  height: var(--input-inner-height);
  line-height: var(--input-inner-height);
  outline: 0;
  padding: 0;
  width: 100%;
}

.table-up-input__input.error {
  box-shadow: var(--input-boxshaow-error);
}

.table-up-input__error-tip {
  color: var(--input-color-error);
  font-size: 0.75rem;
  left: 0;
  line-height: 1rem;
  position: absolute;
  top: 100%;
}

.ql-snow .table-up-select-box {
  --select-box-color-bg-hover: #f5f5f5;
  --select-box-color-bg-active: #e0f2fe;
  --select-box-custom-color-text: #0d0d0d;
  --select-box-custom-color-bg: transparent;
  --select-box-custom-color-bg-hover: #ebebeb;
}

.table-up-select-box {
  --select-box-color-border: #e5e7eb;
  --select-box-border: 0.0625rem solid var(--select-box-color-border);
  --select-box-color-active: #0ea5e9;
  --select-box-color-bg-hover: #f5f5f5;
  --select-box-color-bg-active: transparent;
  --select-box-custom-color-text: #f5f5f5;
  --select-box-custom-color-bg: transparent;
  --select-box-custom-color-bg-hover: #2c2c2c;
}

.table-up-select-box__block {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 10rem;
}

.table-up-select-box__item {
  border: var(--select-box-border);
  height: 1rem;
  margin: 0.125rem;
  width: 1rem;
}

.table-up-select-box__item.active {
  background-color: var(--select-box-color-bg-active);
  border-color: var(--select-box-color-active);
}

.table-up-select-box__custom {
  background-color: var(--select-box-custom-color-bg);
  color: var(--select-box-custom-color-text);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem;
  text-align: center;
}

.table-up-select-box__custom:hover {
  background-color: var(--select-box-custom-color-bg-hover);
}

.table-up-creator {
  padding: 1.5rem;
}

.table-up-creator__input {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.table-up-creator__control {
  margin-top: 1rem;
  text-align: right;
}

.table-up-creator__checkbox {
  --check-color: #212121;
  --checked-color: #506eec;
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  user-select: none;
}

.table-up-creator__checkbox input {
  appearance: none;
  background-color: transparent;
  border: 0.0625rem solid var(--check-color);
  border-radius: 0.3125rem;
  cursor: pointer;
  display: inline-block;
  height: 1.125rem;
  margin-right: 0.625rem;
  position: relative;
  width: 1.125rem;
}

.table-up-creator__checkbox input::before {
  background-color: var(--checked-color);
  border-radius: 0.1875rem;
  content: "";
  display: block;
  height: 0.625rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.2s ease-in-out;
  width: 0.625rem;
}

.table-up-creator__checkbox input:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

.c-field-composed-product {
  margin-bottom: 24px;
}
.c-field-composed-product .search-container {
  align-items: center;
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  padding: 4px;
}
.c-field-composed-product .search-container .field label {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
}
.c-field-composed-product .product-container {
  align-items: center;
  background: hsl(var(--info-h), var(--s-2), var(--l-5));
  border: 1px solid hsl(var(--info-h), var(--s-2), var(--l-4));
  display: flex;
  justify-content: space-between;
  padding: 8px;
}
.c-field-composed-product .product-container label {
  width: 100%;
}
.c-field-composed-product .product-container .product {
  color: hsl(var(--info-h), var(--s-3), var(--l-1));
  width: 100%;
}
.c-field-composed-product .product-container .product .product-header {
  display: flex;
  font-weight: 600;
  gap: 4px;
}
.c-field-composed-product .product-container .product .product-specs {
  margin-bottom: 8px;
}
.c-field-composed-product .product-container .product .product-details {
  align-items: center;
  display: flex;
  font-size: 0.8rem;
  font-style: italic;
  gap: 4px;
  margin-bottom: 2px;
}

.c-field-composed-money {
  max-width: 275px;
  min-width: 125px;
}
.c-field-composed-money .control {
  align-items: stretch;
}
.c-field-composed-money .control .c-field-composed-currency .control select {
  height: 40px;
  min-height: 40px;
}
.c-field-composed-money .control .c-field-composed-currency select,
.c-field-composed-money .control .c-field-composed-currency select option {
  background: hsl(var(--info-h), var(--s-3), var(--l-2));
  color: hsl(var(--info-h), var(--s-2), var(--l-6));
}
.c-field-composed-money:not(.currency) .control input {
  border-right: 1px solid hsl(var(--default-h), var(--s-1), var(--l-4));
}
/*# sourceMappingURL=components.OI6ZmZF_wBEv0ASmGTDDx.css.map */