*,
*::before,
*::after {
  box-sizing: border-box;
}
@media (max-width: 959px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
}
:root {
  --body-scrollbar-width: 17px;
}
@supports (-webkit-appearance: none) {
  :root {
    --body-scrollbar-width: 15px;
  }
}
body {
  --body-container-width: calc(100vw - var(--body-scrollbar-width));

  width: 100%;
  margin: 0;
}
body,
html {
  color: rgba(var(--color-text));
  background-color: rgb(var(--color-page-background));
}
ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
dl {
  margin-block: 0;
}
dd {
  margin-inline-start: 0;
}
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty,
section:empty,
article:empty,
p:empty,
a:empty,
ol:empty,
ul:empty,
dl:empty,
summary:empty {
  display: none;
}
a:not([href]) {
  cursor: not-allowed;
}
a:not(.button),
a:not(.button):hover {
  color: rgba(var(--color-button-text-link, --color-text), 1);
  text-decoration: none;
}
svg.icon circle,
svg.icon path {
  vector-effect: non-scaling-stroke;
}
p:first-child {
  margin-block-start: 0;
}
p:last-child {
  margin-block-end: 0;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
summary {
  position: relative;
  display: inline-block;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
summary::-webkit-details-marker {
  display: none;
}
:root {
  --z-index-hover: 1;
  --z-index-active: 2;
  --z-index-focus: 3;
  --z-index-sticky: 1000;
  --z-index-dropdown: 1010;
  --z-index-fixed: 1020;
  --z-index-modal: 1030;
  --z-index-popover: 1040;
  --z-index-tooltip: 1050;
  --z-index-toast: 1060;
}
:root {
  --page-padding: 30px;
}
@media (max-width: 959px) {
  :root {
    --page-padding: 20px;
  }
}
.page-width {
  width: 100%;
  max-width: calc(var(--page-padding) * 2 + var(--page-width));
  padding-inline: var(--page-padding);
  margin-inline: auto;
}
.page-width.page-width--fluid {
  max-width: 100%;
}
.page-width.page-width--thin {
  max-width: 726px;
}
@media (max-width: 959px) {
  .page-width {
    max-width: 100%;
    padding-inline: var(--page-padding);
  }
}
.grid {
  --column-gap: var(--grid-horizontal-spacing);
  --row-gap: var(--grid-vertical-spacing);

  display: grid;
  grid-auto-columns: var(--column-width);
  grid-auto-flow: column;
  gap: var(--row-gap) var(--column-gap);
  width: 100%;
  overflow-x: auto;
}
@media (max-width: 959px) {
  .grid {
    --column-gap: calc(var(--grid-horizontal-spacing) / 2);
    --row-gap: calc(var(--grid-vertical-spacing) / 2);
    --column-width: calc(
      (
          100% - var(--column-gap, 0px) *
            (var(--mobile-gap-columns, var(--mobile-columns)) - 1)
        ) /
        var(--mobile-columns)
    );

    grid-template-rows: repeat(var(--mobile-rows, auto), auto);
    grid-template-columns: repeat(var(--mobile-columns), var(--column-width));
    grid-auto-flow: var(--mobile-auto-flow);
  }
}
@media (min-width: 960px) {
  .grid {
    --column-width: calc(
      (
          100% - var(--column-gap, 0px) *
            (var(--desktop-gap-columns, var(--desktop-columns)) - 1)
        ) /
        var(--desktop-columns)
    );

    grid-template-rows: repeat(var(--desktop-rows, auto), auto);
    grid-template-columns: repeat(var(--desktop-columns), var(--column-width));
    grid-auto-flow: var(--desktop-auto-flow);
  }
}
.button,
.shopline-element-buy-now {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--button-border-thickness) + 9px)
    calc(var(--button-border-thickness) + 18px);
  font-family: var(--sort-body-font);
  font-size: var(--body2-font-size);
  font-weight: 600;
  line-height: var(--sort-body-line-height);
  color: rgb(var(--color-button-text));
  text-align: center;
  text-decoration: none;
  letter-spacing: var(--sort-body-letter-spacing);
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: rgba(
    var(--color-button-background),
    var(--button-background-opacity)
  );
  border: none;
  border-radius: var(--button-border-radius);
  transition: opacity 150ms ease-in-out;

  --border-opacity: calc(100% - var(--button-border-opacity));
  --alpha-button-background: 1;
}
.button:not(.button--link, .button--text, .button--icon),
.shopline-element-buy-now {
  white-space: nowrap;
  box-shadow: var(--button-shadow-offset-x) var(--button-shadow-offset-y)
    var(--button-shadow-blur)
    rgba(var(--color-shadow), var(--button-shadow-opacity));
}
.button:not(.button--link, .button--text, .button--icon)::after,
.shopline-element-buy-now::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: var(--button-border-radius);
  box-shadow:
    0 0 0 var(--button-border-thickness, 1px)
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--button-border-thickness, 1px)
      rgba(var(--color-button-background), var(--alpha-button-background));
  transition: box-shadow var(--duration-short, 0.3s) ease;
}
.button:disabled,
.button.disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.button:not([disabled], .button--icon):hover,
.shopline-element-buy-now:hover {
  background-color: rgba(
    var(--color-button-background),
    calc(var(--button-background-opacity) - 10%)
  );
}
.button:not([disabled], .button--icon):hover::after,
.shopline-element-buy-now:hover::after {
  box-shadow:
    0 0 0 calc(var(--button-border-thickness) + 1px)
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--button-border-thickness) + 1px)
      rgba(var(--color-button-background), var(--alpha-button-background));
}
.button:not([disabled], .button--icon)::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  content: "";
}
.button:not([disabled], .button--icon):active::after {
  animation: animation-button-press linear 0.6s 1;
  animation-fill-mode: forwards;
}
@keyframes animation-button-press {
  0% {
    background-color: rgba(var(--color-button-text), 0.08);
    background-image: radial-gradient(
      circle,
      rgba(var(--color-button-text), 0.08) 1%,
      transparent 1%
    );
    background-repeat: no-repeat;
    background-position: 50%;
    background-origin: padding-box;
    background-size: 100%;
  }

  100% {
    background-position: 50%;
    background-size: 25000%;
  }
}
.button--secondary {
  --color-button-background: var(--color-button-secondary-background);
  --color-button-text: var(--color-button-secondary-text);
  --border-opacity: var(--button-border-opacity);
}
.button--secondary:not(.button--link, .button--text)::after {
  box-shadow: 0 0 0 var(--button-border-thickness, 1px)
    rgba(var(--color-button-secondary-border), var(--button-border-opacity));
}
.button--secondary:not(.button--link, .button--text):active::after {
  box-shadow:
    0 0 0 rgb(var(--color-button-secondary-border)),
    inset var(--button-border-thickness, 1px) 0 0
      rgba(var(--color-button-secondary-border), var(--button-border-opacity)),
    inset 0 var(--button-border-thickness, 1px) 0
      rgba(var(--color-button-secondary-border), var(--button-border-opacity));
}
.button--link {
  --color-button-background: transparent;
  --color-button-text: rgb(var(--color-text));

  position: relative;
  padding: 0 1px;
  text-decoration: underline !important;
  text-underline-offset: 6px;
}
.button--text {
  --color-button-background: transparent;
  --color-button-text: rgb(var(--color-text));

  position: relative;
  padding: 0 1px;
}
.button__spinner {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: none;
  width: 20px;
  height: 20px;
  margin-block-start: -10px;
  margin-inline-start: -10px;
  color: rgb(var(--color-button-text));
}
.button.loading {
  color: transparent;
}
.button.loading .button__spinner {
  display: flex;
  animation: animation-circling linear 1.5s infinite;
}
.button--fill {
  width: 100%;
}
.button--icon {
  position: relative;
  display: inline-flex;
  padding: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  border: none;
  transition: transform 300ms;
}
@media (min-width: 960px) {
  .button--icon:hover,
  .button--icon:focus {
    transform: scale(1.11);
  }
}
.button--icon::after {
  display: none;
}
.button.button--icon:hover {
  background-color: transparent;
  box-shadow: none;
}
.loading--rotator {
  display: none;
}
.loading .loading--rotator {
  animation: animation-circling linear 1.5s infinite;
}
.loading > .loading--rotator {
  display: inline-flex;
}
.button.loading .loading--rotator {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: flex;
  width: 20px;
  height: 20px;
  margin-block-start: -10px;
  margin-inline-start: -10px;
  color: rgb(var(--color-button-text));
  content: "";
}
.field {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-block-end: 20px;
  font-size: var(--body4-font-size);
  line-height: var(--sort-body-line-height);
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-background));
  transition: all 300ms;
}
@media (max-width: 959px) {
  .field {
    margin-block-end: 16px;
  }
}
.field::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  border-color: rgba(var(--color-text), var(--input-border-opacity));
  border-style: solid;
  border-width: var(--input-border-thickness);
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y)
    var(--input-shadow-blur)
    rgba(var(--color-text), var(--input-shadow-opacity));
  transition: border-color 300ms;
}
.field__inner {
  position: relative;
  flex: 1;
}
.field__group {
  display: flex;
  gap: 16px;
}
.field__label {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 16px 0;
  display: -webkit-box;
  overflow: hidden;
  font-size: inherit;
  color: rgb(var(--color-light-text));
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  word-break: break-word;
  pointer-events: none;
  transition: transform 300ms ease;
  transform: translateY(-50%);
  transform-origin: left top;
  -webkit-box-orient: vertical;
}
.field__input {
  width: 100%;
  padding: 24px 16px 10px;
  font-size: inherit;
  line-height: var(--sort-body-line-height);
  color: rgb(var(--color-text));
  appearance: none;
  background: none;
  border: none;
  outline: none;
  box-shadow: none !important;
}
.field__input::placeholder {
  opacity: 0;
}
.field__input::-webkit-search-cancel-button {
  display: none;
}
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  word-break: normal;
  white-space: nowrap;
  transform: scale(0.7) translate(0, -120%);
  -webkit-box-orient: vertical;
}
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus,
.field__input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px rgb(var(--color-background)) inset !important;
  -webkit-text-fill-color: rgb(var(--color-text));
}
.field__input.textarea {
  min-height: 100px;
  padding-block: 0;
  padding-inline: 16px;
  margin-block: 20px 6px;
  resize: none;
}
.field__input.textarea + .field__label {
  inset-block-start: 25px;
}
.field__suffix {
  display: flex;
  justify-content: center;
  padding-block: 6px;
  padding-inline-end: 10px;
}
.field__info {
  display: flex;
  font-size: 12px;
  line-height: 1.4;
}
.field__info > svg {
  margin-inline-end: 4px;
}
.field__info--error {
  margin-block: -10px 20px;
  font-size: var(--body6-font-size);
  color: rgb(var(--color-error-message));
}
.field__info--error:empty {
  display: none;
}
@media (min-width: 960px) {
  .field__info > svg {
    margin-inline-end: 8px;
  }
}
.field:hover::after {
  border-color: rgba(var(--color-text), var(--input-border-opacity));
  border-width: calc(var(--input-border-thickness) + 1px);
}
.field:focus::after,
.field:focus-within::after {
  border-color: rgba(var(--color-text), var(--input-border-opacity));
  border-width: calc(var(--input-border-thickness) + 1px);
}
.field--disabled {
  pointer-events: none;
}
.field--disabled::after {
  background-color: rgb(0 0 0 / 10%);
  border-color: rgb(0 0 0 / 10%);
}
.field--error::after {
  border-color: rgba(var(--color-error-message), var(--input-border-opacity));
  border-width: calc(var(--input-border-thickness) + 1px);
}
.field--normal .field__input {
  padding: 13px 16px;
}
.field--normal .field__input::placeholder {
  opacity: 1;
}
.field--normal .field__input ~ .field__label,
.field--normal .field__input:focus ~ .field__label,
.field--normal .field__input:not(:placeholder-shown) ~ .field__label,
.field--normal .field__input:-webkit-autofill ~ .field__label {
  display: none;
}
.field-checkbox {
  position: relative;
  inset-block-start: 0.2em;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-feature-settings: "tnum";
  font-variant: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  outline: none;
}
.field-checkbox input[type="checkbox"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: auto;
  cursor: pointer;
  opacity: 0;
}
.field-checkbox .checkbox {
  position: relative;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-collapse: separate;
  border: 1px solid rgb(var(--color-entry-line));
  border-radius: 2px;
  transition: all 0.3s;
  direction: ltr;
}
.field-checkbox .checkbox::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 21.5%;
  display: table;
  width: 6px;
  height: 8px;
  content: " ";
  border: 2px solid rgb(var(--color-button-text));
  border-block-start: 0;
  border-inline-start: 0;
  opacity: 0;
  transition:
    all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),
    opacity 0.1s;
  transform: rotate(45deg) scale(0) translate(-50%, -50%);
}
.field-checkbox input[type="checkbox"]:checked + .checkbox {
  background-color: rgb(var(--color-button-background));
  border-color: rgb(var(--color-button-background));
}
.field-checkbox input[type="checkbox"]:checked + .checkbox::after {
  position: absolute;
  display: table;
  content: " ";
  border: 2px solid rgb(var(--color-button-text));
  border-block-start: 0;
  border-inline-start: 0;
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
}
.field select ~ .icon-arrow {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 16px;
  display: flex;
  align-items: center;
  margin-block: auto;
  margin-inline: auto;
  pointer-events: none;
}
.field-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
.field-switch-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: rgba(var(--color-text), 0.1);
  border-radius: 20px;
  transition: 0.2s;
}
.field-switch-slider::before {
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  content: "";
  background-color: rgb(var(--color-page-background));
  border-radius: 50%;
  transition: 0.2s;
}
.field-switch input {
  width: 0;
  height: 0;
  opacity: 0;
}
.field-switch input:checked + .field-switch-slider {
  background-color: rgba(var(--color-text), 1);
}
.field-switch input:checked + .field-switch-slider::before {
  transform: translateX(20px);
}
.field-radio {
  position: relative;
  margin-inline-end: 8px;
}
.field-radio-wrapper {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 20px;
  cursor: pointer;
}
.field-radio-wrapper:last-child {
  margin-inline-end: 0;
}
.field-radio .radio {
  position: relative;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: block;
  width: 16px;
  height: 16px;
  border-collapse: separate;
  background-color: rgb(var(--color-page-background));
  border: 1px solid rgb(var(--color-entry-line));
  border-radius: 50%;
  transition: all 0.3s;
}
.field-radio .radio::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 16px;
  height: 16px;
  margin-block-start: -8px;
  margin-inline-start: -8px;
  content: "";
  background-color: rgb(var(--color-button-background));
  border-radius: 16px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transform: scale(0);
}
.field-radio > input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}
.field-radio > input:checked + .radio {
  border-color: rgb(var(--color-button-background));
}
.field-radio > input:checked + .radio::after {
  opacity: 1;
  transform: scale(0.5);
}
.form__error-message {
  margin-block: -10px 20px;
  font-size: var(--body6-font-size);
  color: rgb(var(--color-error-message));
}
.form__error-message:empty {
  display: none;
}
@media (max-width: 959px) {
  .form__error-message {
    margin-block: -8px 16px;
  }
}
@keyframes animation-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes animation-fade-in-center {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-zoom-in {
  0% {
    opacity: 0;
    transform: scaleY(0.8);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes animation-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-slide-in-top {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-slide-in-bottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animation-slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes animation-slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes animation-circling {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(1turn);
  }
}
@keyframes animation-dropdown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes column-fade-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 25px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
:root {
  --title1-font-size: calc(var(--sort-title-size) * 2.3333);
  --title2-font-size: calc(var(--sort-title-size) * 1.6667);
  --title3-font-size: calc(var(--sort-title-size) * 1.2);
  --title4-font-size: calc(var(--sort-title-size) * 1);
  --title5-font-size: calc(var(--sort-title-size) * 0.8333);
  --title6-font-size: calc(var(--sort-title-size) * 0.6667);
  --body1-font-size: calc(var(--sort-body-size) * 1.5714);
  --body2-font-size: calc(var(--sort-body-size) * 1.2857);
  --body3-font-size: calc(var(--sort-body-size) * 1.1429);
  --body4-font-size: calc(var(--sort-body-size) * 1);
  --body5-font-size: calc(var(--sort-body-size) * 0.9286);
  --body6-font-size: calc(var(--sort-body-size) * 0.8571);
  --title0-font-size-mobile-ratio: 30 / 70;
  --title1-font-size-mobile-ratio: 30 / 70;
  --title2-font-size-mobile-ratio: 25 / 48;
  --title3-font-size-mobile-ratio: 24 / 36;
  --title4-font-size-mobile-ratio: 22 / 30;
  --title5-font-size-mobile-ratio: 20 / 25;
  --title6-font-size-mobile-ratio: 18 / 20;
  --body0-font-size-mobile-ratio: 14 / 16;
  --body1-font-size-mobile-ratio: 16 / 22;
  --body2-font-size-mobile-ratio: 15 / 18;
  --body3-font-size-mobile-ratio: 14 / 16;
  --body4-font-size-mobile-ratio: 13 / 14;
  --body5-font-size-mobile-ratio: 12 / 13;
  --body6-font-size-mobile-ratio: 1;
}
@media (max-width: 959px) {
  :root {
    --title1-font-size: calc(var(--sort-title-size) * 1);
    --title2-font-size: calc(var(--sort-title-size) * 0.8333);
    --title3-font-size: calc(var(--sort-title-size) * 0.7333);
    --title4-font-size: calc(var(--sort-title-size) * 0.6667);
    --title5-font-size: calc(var(--sort-title-size) * 0.6);
    --title6-font-size: calc(var(--sort-title-size) * 0.6);
    --body1-font-size: calc(var(--sort-body-size) * 1.1429);
    --body2-font-size: calc(var(--sort-body-size) * 1.0714);
    --body3-font-size: calc(var(--sort-body-size) * 1);
    --body4-font-size: calc(var(--sort-body-size) * 0.9286);
    --body5-font-size: calc(var(--sort-body-size) * 0.8571);
    --body6-font-size: calc(var(--sort-body-size) * 0.8571);
  }
}
h1,
h2,
h3,
h4,
h5,
h6,
.title0,
.title1,
.title2,
.title3,
.title4,
.title5,
.title6 {
  margin-block: 0;
  font-family: var(--sort-title-font);
  font-size: var(--sort-title-size);
  font-style: var(--sort-title-font-style);
  font-weight: var(--sort-title-font-weight, 700);
  line-height: var(--sort-title-line-height);
  text-transform: var(--sort-title-text-transform);
  letter-spacing: var(--sort-title-letter-spacing);
  word-break: break-word;
}
h1.body-font-bold,
h1.title-font-bold,
h2.body-font-bold,
h2.title-font-bold,
h3.body-font-bold,
h3.title-font-bold,
h4.body-font-bold,
h4.title-font-bold,
h5.body-font-bold,
h5.title-font-bold,
h6.body-font-bold,
h6.title-font-bold,
.title0.body-font-bold,
.title0.title-font-bold,
.title1.body-font-bold,
.title1.title-font-bold,
.title2.body-font-bold,
.title2.title-font-bold,
.title3.body-font-bold,
.title3.title-font-bold,
.title4.body-font-bold,
.title4.title-font-bold,
.title5.body-font-bold,
.title5.title-font-bold,
.title6.body-font-bold,
.title6.title-font-bold {
  font-weight: calc(var(--sort-title-font-weight, 700) + 300) !important;
}
@media (max-width: 959px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .title0,
  .title1,
  .title2,
  .title3,
  .title4,
  .title5,
  .title6,
  .mobile-title0,
  .mobile-title1,
  .mobile-title2,
  .mobile-title3,
  .mobile-title4,
  .mobile-title5,
  .mobile-title6 {
    font-family: var(--sort-title-font-mobile, var(--sort-title-font));
    font-size: var(--sort-title-size-mobile, var(--sort-title-size));
    font-style: var(
      --sort-title-font-style-mobile,
      var(--sort-title-font-style)
    );
    font-weight: var(
      --sort-title-font-weight-mobile,
      var(--sort-title-font-weight, 700)
    );
    line-height: var(
      --sort-title-line-height-mobile,
      var(--sort-title-line-height)
    );
    text-transform: var(
      --sort-title-text-transform-mobile,
      var(--sort-title-text-transform)
    );
    letter-spacing: var(
      --sort-title-letter-spacing-mobile,
      var(--sort-title-letter-spacing)
    );
  }

  h1.body-font-bold,
  h1.title-font-bold,
  h2.body-font-bold,
  h2.title-font-bold,
  h3.body-font-bold,
  h3.title-font-bold,
  h4.body-font-bold,
  h4.title-font-bold,
  h5.body-font-bold,
  h5.title-font-bold,
  h6.body-font-bold,
  h6.title-font-bold,
  .title0.body-font-bold,
  .title0.title-font-bold,
  .title1.body-font-bold,
  .title1.title-font-bold,
  .title2.body-font-bold,
  .title2.title-font-bold,
  .title3.body-font-bold,
  .title3.title-font-bold,
  .title4.body-font-bold,
  .title4.title-font-bold,
  .title5.body-font-bold,
  .title5.title-font-bold,
  .title6.body-font-bold,
  .title6.title-font-bold,
  .mobile-title0.body-font-bold,
  .mobile-title0.title-font-bold,
  .mobile-title1.body-font-bold,
  .mobile-title1.title-font-bold,
  .mobile-title2.body-font-bold,
  .mobile-title2.title-font-bold,
  .mobile-title3.body-font-bold,
  .mobile-title3.title-font-bold,
  .mobile-title4.body-font-bold,
  .mobile-title4.title-font-bold,
  .mobile-title5.body-font-bold,
  .mobile-title5.title-font-bold,
  .mobile-title6.body-font-bold,
  .mobile-title6.title-font-bold {
    font-weight: calc(
      var(--sort-title-font-weight-mobile, var(--sort-title-font-weight, 700)) +
        300
    ) !important;
  }
}
.title0 {
  --sort-title-font: var(--sort-title0-font);
  --sort-title-size: var(--sort-title0-size);
  --sort-title-size-mobile: calc(
    var(--sort-title0-size) * var(--title0-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title0-font-style);
  --sort-title-font-weight: var(--sort-title0-font-weight);
  --sort-title-line-height: var(--sort-title0-line-height);
  --sort-title-text-transform: var(--sort-title0-text-transform);
  --sort-title-letter-spacing: var(--sort-title0-letter-spacing);
}
h1,
.title1 {
  --sort-title-font: var(--sort-title1-font);
  --sort-title-size: var(--sort-title1-size);
  --sort-title-size-mobile: calc(
    var(--sort-title1-size) * var(--title1-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title1-font-style);
  --sort-title-font-weight: var(--sort-title1-font-weight);
  --sort-title-line-height: var(--sort-title1-line-height);
  --sort-title-text-transform: var(--sort-title1-text-transform);
  --sort-title-letter-spacing: var(--sort-title1-letter-spacing);
}
h2,
.title2 {
  --sort-title-font: var(--sort-title2-font);
  --sort-title-size: var(--sort-title2-size);
  --sort-title-size-mobile: calc(
    var(--sort-title2-size) * var(--title2-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title2-font-style);
  --sort-title-font-weight: var(--sort-title2-font-weight);
  --sort-title-line-height: var(--sort-title2-line-height);
  --sort-title-text-transform: var(--sort-title2-text-transform);
  --sort-title-letter-spacing: var(--sort-title2-letter-spacing);
}
h3,
.title3 {
  --sort-title-font: var(--sort-title3-font);
  --sort-title-size: var(--sort-title3-size);
  --sort-title-size-mobile: calc(
    var(--sort-title3-size) * var(--title3-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title3-font-style);
  --sort-title-font-weight: var(--sort-title3-font-weight);
  --sort-title-line-height: var(--sort-title3-line-height);
  --sort-title-text-transform: var(--sort-title3-text-transform);
  --sort-title-letter-spacing: var(--sort-title3-letter-spacing);
}
h4,
.title4 {
  --sort-title-font: var(--sort-title4-font);
  --sort-title-size: var(--sort-title4-size);
  --sort-title-size-mobile: calc(
    var(--sort-title4-size) * var(--title4-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title4-font-style);
  --sort-title-font-weight: var(--sort-title4-font-weight);
  --sort-title-line-height: var(--sort-title4-line-height);
  --sort-title-text-transform: var(--sort-title4-text-transform);
  --sort-title-letter-spacing: var(--sort-title4-letter-spacing);
}
h5,
.title5 {
  --sort-title-font: var(--sort-title5-font);
  --sort-title-size: var(--sort-title5-size);
  --sort-title-size-mobile: calc(
    var(--sort-title5-size) * var(--title5-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title5-font-style);
  --sort-title-font-weight: var(--sort-title5-font-weight);
  --sort-title-line-height: var(--sort-title5-line-height);
  --sort-title-text-transform: var(--sort-title5-text-transform);
  --sort-title-letter-spacing: var(--sort-title5-letter-spacing);
}
h6,
.title6 {
  --sort-title-font: var(--sort-title6-font);
  --sort-title-size: var(--sort-title6-size);
  --sort-title-size-mobile: calc(
    var(--sort-title6-size) * var(--title6-font-size-mobile-ratio)
  );
  --sort-title-font-style: var(--sort-title6-font-style);
  --sort-title-font-weight: var(--sort-title6-font-weight);
  --sort-title-line-height: var(--sort-title6-line-height);
  --sort-title-text-transform: var(--sort-title6-text-transform);
  --sort-title-letter-spacing: var(--sort-title6-letter-spacing);
}
.mobile-title0 {
  --sort-title-font-mobile: var(--sort-title0-font);
  --sort-title-size-mobile: calc(
    var(--sort-title0-size) * var(--title0-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title0-font-style);
  --sort-title-font-weight-mobile: var(--sort-title0-font-weight);
  --sort-title-line-height-mobile: var(--sort-title0-line-height);
  --sort-title-text-transform-mobile: var(--sort-title0-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title0-letter-spacing);
}
h1.mobile-typography-default,
.mobile-title1 {
  --sort-title-font-mobile: var(--sort-title1-font);
  --sort-title-size-mobile: calc(
    var(--sort-title1-size) * var(--title1-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title1-font-style);
  --sort-title-font-weight-mobile: var(--sort-title1-font-weight);
  --sort-title-line-height-mobile: var(--sort-title1-line-height);
  --sort-title-text-transform-mobile: var(--sort-title1-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title1-letter-spacing);
}
h2.mobile-typography-default,
.mobile-title2 {
  --sort-title-font-mobile: var(--sort-title2-font);
  --sort-title-size-mobile: calc(
    var(--sort-title2-size) * var(--title2-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title2-font-style);
  --sort-title-font-weight-mobile: var(--sort-title2-font-weight);
  --sort-title-line-height-mobile: var(--sort-title2-line-height);
  --sort-title-text-transform-mobile: var(--sort-title2-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title2-letter-spacing);
}
h3.mobile-typography-default,
.mobile-title3 {
  --sort-title-font-mobile: var(--sort-title3-font);
  --sort-title-size-mobile: calc(
    var(--sort-title3-size) * var(--title3-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title3-font-style);
  --sort-title-font-weight-mobile: var(--sort-title3-font-weight);
  --sort-title-line-height-mobile: var(--sort-title3-line-height);
  --sort-title-text-transform-mobile: var(--sort-title3-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title3-letter-spacing);
}
h4.mobile-typography-default,
.mobile-title4 {
  --sort-title-font-mobile: var(--sort-title4-font);
  --sort-title-size-mobile: calc(
    var(--sort-title4-size) * var(--title4-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title4-font-style);
  --sort-title-font-weight-mobile: var(--sort-title4-font-weight);
  --sort-title-line-height-mobile: var(--sort-title4-line-height);
  --sort-title-text-transform-mobile: var(--sort-title4-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title4-letter-spacing);
}
h5.mobile-typography-default,
.mobile-title5 {
  --sort-title-font-mobile: var(--sort-title5-font);
  --sort-title-size-mobile: calc(
    var(--sort-title5-size) * var(--title5-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title5-font-style);
  --sort-title-font-weight-mobile: var(--sort-title5-font-weight);
  --sort-title-line-height-mobile: var(--sort-title5-line-height);
  --sort-title-text-transform-mobile: var(--sort-title5-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title5-letter-spacing);
}
h6.mobile-typography-default,
.mobile-title6 {
  --sort-title-font-mobile: var(--sort-title6-font);
  --sort-title-size-mobile: calc(
    var(--sort-title6-size) * var(--title6-font-size-mobile-ratio)
  );
  --sort-title-font-style-mobile: var(--sort-title6-font-style);
  --sort-title-font-weight-mobile: var(--sort-title6-font-weight);
  --sort-title-line-height-mobile: var(--sort-title6-line-height);
  --sort-title-text-transform-mobile: var(--sort-title6-text-transform);
  --sort-title-letter-spacing-mobile: var(--sort-title6-letter-spacing);
}
.body0,
.body1,
.body2,
.body3,
.body4,
.body5,
.body6 {
  font-family: var(--sort-body-font);
  font-size: var(--sort-body-size);
  font-style: var(--sort-body-font-style);
  font-weight: var(--sort-body-font-weight, 400);
  line-height: var(--sort-body-line-height);
  letter-spacing: var(--sort-body-letter-spacing);
  word-break: break-word;
}
.body0.body-font-bold,
.body0.title-font-bold,
.body1.body-font-bold,
.body1.title-font-bold,
.body2.body-font-bold,
.body2.title-font-bold,
.body3.body-font-bold,
.body3.title-font-bold,
.body4.body-font-bold,
.body4.title-font-bold,
.body5.body-font-bold,
.body5.title-font-bold,
.body6.body-font-bold,
.body6.title-font-bold {
  font-weight: calc(var(--sort-body-font-weight, 400) + 300) !important;
}
@media (max-width: 959px) {
  .body0,
  .body1,
  .body2,
  .body3,
  .body4,
  .body5,
  .body6,
  .mobile-body0,
  .mobile-body1,
  .mobile-body2,
  .mobile-body3,
  .mobile-body4,
  .mobile-body5,
  .mobile-body6 {
    font-family: var(--sort-body-font-mobile, var(--sort-body-font));
    font-size: var(--sort-body-size-mobile, var(--sort-body-size));
    font-style: var(--sort-body-font-style-mobile, var(--sort-body-font-style));
    font-weight: var(
      --sort-body-font-weight-mobile,
      var(--sort-body-font-weight, 700)
    );
    line-height: var(
      --sort-body-line-height-mobile,
      var(--sort-body-line-height)
    );
    letter-spacing: var(
      --sort-body-letter-spacing-mobile,
      var(--sort-body-letter-spacing)
    );
  }

  .body0.body-font-bold,
  .body0.title-font-bold,
  .body1.body-font-bold,
  .body1.title-font-bold,
  .body2.body-font-bold,
  .body2.title-font-bold,
  .body3.body-font-bold,
  .body3.title-font-bold,
  .body4.body-font-bold,
  .body4.title-font-bold,
  .body5.body-font-bold,
  .body5.title-font-bold,
  .body6.body-font-bold,
  .body6.title-font-bold,
  .mobile-body0.body-font-bold,
  .mobile-body0.title-font-bold,
  .mobile-body1.body-font-bold,
  .mobile-body1.title-font-bold,
  .mobile-body2.body-font-bold,
  .mobile-body2.title-font-bold,
  .mobile-body3.body-font-bold,
  .mobile-body3.title-font-bold,
  .mobile-body4.body-font-bold,
  .mobile-body4.title-font-bold,
  .mobile-body5.body-font-bold,
  .mobile-body5.title-font-bold,
  .mobile-body6.body-font-bold,
  .mobile-body6.title-font-bold {
    font-weight: calc(
      var(--sort-body-font-weight-mobile, var(--sort-body-font-weight, 700)) +
        300
    ) !important;
  }
}
.body0 {
  --sort-body-font: var(--sort-body0-font);
  --sort-body-size: var(--sort-body0-size);
  --sort-body-size-mobile: calc(
    var(--sort-body0-size) * var(--body0-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body0-style);
  --sort-body-font-weight: var(--sort-body0-font-weight);
  --sort-body-line-height: var(--sort-body0-line-height);
  --sort-body-letter-spacing: var(--sort-body0-letter-spacing);
}
.body1 {
  --sort-body-font: var(--sort-body1-font);
  --sort-body-size: var(--sort-body1-size);
  --sort-body-size-mobile: calc(
    var(--sort-body1-size) * var(--body1-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body1-style);
  --sort-body-font-weight: var(--sort-body1-font-weight);
  --sort-body-line-height: var(--sort-body1-line-height);
  --sort-body-letter-spacing: var(--sort-body1-letter-spacing);
}
.body2 {
  --sort-body-font: var(--sort-body2-font);
  --sort-body-size: var(--sort-body2-size);
  --sort-body-size-mobile: calc(
    var(--sort-body2-size) * var(--body2-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body2-style);
  --sort-body-font-weight: var(--sort-body2-font-weight);
  --sort-body-line-height: var(--sort-body2-line-height);
  --sort-body-letter-spacing: var(--sort-body2-letter-spacing);
}
.body3 {
  --sort-body-font: var(--sort-body3-font);
  --sort-body-size: var(--sort-body3-size);
  --sort-body-size-mobile: calc(
    var(--sort-body3-size) * var(--body3-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body3-style);
  --sort-body-font-weight: var(--sort-body3-font-weight);
  --sort-body-line-height: var(--sort-body3-line-height);
  --sort-body-letter-spacing: var(--sort-body3-letter-spacing);
}
.body4 {
  --sort-body-font: var(--sort-body4-font);
  --sort-body-size: var(--sort-body4-size);
  --sort-body-size-mobile: calc(
    var(--sort-body4-size) * var(--body4-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body4-style);
  --sort-body-font-weight: var(--sort-body4-font-weight);
  --sort-body-line-height: var(--sort-body4-line-height);
  --sort-body-letter-spacing: var(--sort-body4-letter-spacing);
}
.body5 {
  --sort-body-font: var(--sort-body5-font);
  --sort-body-size: var(--sort-body5-size);
  --sort-body-size-mobile: calc(
    var(--sort-body5-size) * var(--body5-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body5-style);
  --sort-body-font-weight: var(--sort-body5-font-weight);
  --sort-body-line-height: var(--sort-body5-line-height);
  --sort-body-letter-spacing: var(--sort-body5-letter-spacing);
}
.body6 {
  --sort-body-font: var(--sort-body6-font);
  --sort-body-size: var(--sort-body6-size);
  --sort-body-size-mobile: calc(
    var(--sort-body6-size) * var(--body6-font-size-mobile-ratio)
  );
  --sort-body-font-style: var(--sort-body6-style);
  --sort-body-font-weight: var(--sort-body6-font-weight);
  --sort-body-line-height: var(--sort-body6-line-height);
  --sort-body-letter-spacing: var(--sort-body6-letter-spacing);
}
.mobile-body0 {
  --sort-body-font-mobile: var(--sort-body0-font);
  --sort-body-size-mobile: calc(
    var(--sort-body0-size) * var(--body0-font-size-mobile-ratio)
  );
  --sort-body-font-weight-mobile: var(--sort-body0-font-weight);
  --sort-body-font-style-mobile: var(--sort-body0-style);
  --sort-body-line-height-mobile: var(--sort-body0-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body0-letter-spacing);
}
.mobile-body1 {
  --sort-body-font-mobile: var(--sort-body1-font);
  --sort-body-size-mobile: calc(
    var(--sort-body1-size) * var(--body1-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body1-style);
  --sort-body-font-weight-mobile: var(--sort-body1-font-weight);
  --sort-body-line-height-mobile: var(--sort-body1-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body1-letter-spacing);
}
.mobile-body2 {
  --sort-body-font-mobile: var(--sort-body2-font);
  --sort-body-size-mobile: calc(
    var(--sort-body2-size) * var(--body2-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body2-style);
  --sort-body-font-weight-mobile: var(--sort-body2-font-weight);
  --sort-body-line-height-mobile: var(--sort-body2-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body2-letter-spacing);
}
.mobile-body3 {
  --sort-body-font-mobile: var(--sort-body3-font);
  --sort-body-size-mobile: calc(
    var(--sort-body3-size) * var(--body3-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body3-style);
  --sort-body-font-weight-mobile: var(--sort-body3-font-weight);
  --sort-body-line-height-mobile: var(--sort-body3-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body3-letter-spacing);
}
.mobile-body4 {
  --sort-body-font-mobile: var(--sort-body4-font);
  --sort-body-size-mobile: calc(
    var(--sort-body4-size) * var(--body4-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body4-style);
  --sort-body-font-weight-mobile: var(--sort-body4-font-weight);
  --sort-body-line-height-mobile: var(--sort-body4-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body4-letter-spacing);
}
.mobile-body5 {
  --sort-body-font-mobile: var(--sort-body5-font);
  --sort-body-size-mobile: calc(
    var(--sort-body5-size) * var(--body5-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body5-style);
  --sort-body-font-weight-mobile: var(--sort-body5-font-weight);
  --sort-body-line-height-mobile: var(--sort-body5-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body5-letter-spacing);
}
.mobile-body6 {
  --sort-body-font-mobile: var(--sort-body6-font);
  --sort-body-size-mobile: calc(
    var(--sort-body6-size) * var(--body6-font-size-mobile-ratio)
  );
  --sort-body-font-style-mobile: var(--sort-body6-style);
  --sort-body-font-weight-mobile: var(--sort-body6-font-weight);
  --sort-body-line-height-mobile: var(--sort-body6-line-height);
  --sort-body-letter-spacing-mobile: var(--sort-body6-letter-spacing);
}
.title-font-bold {
  font-weight: var(--sort-title-font-weight-bold) !important;
}
.body-font-bold {
  font-weight: var(--sort-body-font-weight-bold) !important;
}
.text-left {
  text-align: start;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: end;
}
@media (max-width: 959px) {
  .text-left-mobile {
    text-align: start;
  }

  .text-center-mobile {
    text-align: center;
  }

  .text-right-mobile {
    text-align: end;
  }
}
.hidden {
  display: none !important;
}
@media (max-width: 959px) {
  .hidden-mobile {
    display: none !important;
  }
}
@media (min-width: 960px) {
  .hidden-desktop {
    display: none !important;
  }
}
.hidden-empty:empty {
  display: none;
}
.overflow-hidden {
  overflow: hidden;
}
.flex-align-center {
  display: flex;
  align-items: center;
}
.flex-justify-center {
  display: flex;
  justify-content: center;
}
.block-full-width {
  display: block;
  width: 100%;
}
.tag-unstyled {
  padding: 0;
  margin: 0;
}
.list-unstyled {
  padding: 0;
  margin: 0;
  list-style: none;
}
.font-bold {
  font-weight: bold;
}
.hover-scale .hover-scale__image {
  transition: all 0.5s;
}
.hover-scale:hover .hover-scale__image {
  transform: scale(1.05);
}
.modal-border-shadow {
  box-sizing: border-box;
  border-color: rgba(var(--color-text), var(--modal-border-opacity));
  border-style: solid;
  border-width: var(--modal-border-thickness);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow-offset-x) var(--modal-shadow-offset-y)
    var(--modal-shadow-blur)
    rgba(var(--color-shadow), var(--modal-shadow-opacity));
}
.product-card-border-shadow {
  box-sizing: border-box;
  overflow: hidden;
  border-color: rgba(var(--color-text), var(--product-card-border-opacity));
  border-style: solid;
  border-width: var(--product-card-border-thickness) !important;
  border-radius: var(--product-card-border-radius);
  box-shadow: var(--product-card-shadow-offset-x)
    var(--product-card-shadow-offset-y) var(--product-card-shadow-blur)
    rgba(var(--color-shadow), var(--product-card-shadow-opacity));
}
.collection-card-border-shadow {
  box-sizing: border-box;
  overflow: hidden;
  border-color: rgba(var(--color-text), var(--collection-card-border-opacity));
  border-style: solid;
  border-width: var(--collection-card-border-thickness) !important;
  border-radius: var(--collection-card-border-radius);
  box-shadow: var(--collection-card-shadow-offset-x)
    var(--collection-card-shadow-offset-y) var(--collection-card-shadow-blur)
    rgba(var(--color-shadow), var(--collection-card-shadow-opacity));
}
.article-card-border-shadow {
  box-sizing: border-box;
  overflow: hidden;
  border-color: rgba(var(--color-text), var(--article-card-border-opacity));
  border-style: solid;
  border-width: var(--article-card-border-thickness) !important;
  border-radius: var(--article-card-border-radius);
  box-shadow: var(--article-card-shadow-offset-x)
    var(--article-card-shadow-offset-y) var(--article-card-shadow-blur)
    rgba(var(--color-shadow), var(--article-card-shadow-opacity));
}
.card-border-shadow {
  box-sizing: border-box;
  overflow: hidden;
  border-color: rgba(var(--color-text), var(--card-border-opacity));
  border-style: solid;
  border-width: var(--card-border-thickness) !important;
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow-offset-x) var(--card-shadow-offset-y)
    var(--card-shadow-blur)
    rgba(var(--color-shadow), var(--card-shadow-opacity));
}
.pointer-events {
  pointer-events: none;
}
.schema-background {
  background-color: rgb(var(--color-background));
}
.rte::after {
  display: block;
  clear: both;
  content: "";
}
.rte ul,
.rte ol {
  padding: revert;
  margin: revert;
  list-style: revert;
}
.rte > p:first-child {
  margin-block-start: 0;
}
.rte > p:last-child {
  margin-block-end: 0;
}
.rte a,
.rte a:hover {
  position: relative;
  padding: 0 1px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.rte {
  word-break: break-word;
}
.rte img,
.rte video {
  max-width: 100%;
  height: auto;
}
.rte iframe {
  max-width: 100%;
}
.rte p img {
  vertical-align: bottom;
}
.rte table {
  table-layout: fixed;
}
.icon--checkbox {
  cursor: pointer;
}
.icon--checkbox .filled {
  opacity: 0;
  fill: rgba(var(--color-text, 61, 56, 25), 1);
  stroke: rgba(var(--color-text, 61, 56, 25), 1);
  transition: opacity 0.1s ease;
}
.icon--checkbox .checkmark {
  stroke: rgba(var(--color-button-text, 255, 255, 255), 1);
  transition: stroke-dashoffset 0.3s ease;
}
input:checked ~ .icon--checkbox .filled {
  opacity: 1;
}
input:checked ~ .icon--checkbox .box {
  stroke: rgba(var(--color-entry-line, 232, 232, 225), 1);
}
input:checked ~ .icon--checkbox .checkmark {
  stroke-dashoffset: 0;
}
@layer component {
  theme-input-number {
    --input-padding-inline: 30px;

    position: relative;
    display: inline-flex;
    width: calc(
      4 * var(--sort-body-size) + var(--input-border-thickness) * 2 +
        var(--input-padding-inline) * 2
    );
    color: rgba(var(--color-text));
    background: rgb(var(--color-background));
    border-radius: var(--input-border-radius-outset);
  }

  theme-input-number::before {
    position: absolute;
    inset: 0;
    z-index: var(--z-index-hover);
    pointer-events: none;
    content: "";
    border-radius: var(--input-border-radius-outset);
    box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y)
      var(--input-shadow-blur)
      rgba(var(--color-text), var(--input-shadow-opacity));
  }

  theme-input-number::after {
    position: absolute;
    inset: var(--input-border-thickness);
    z-index: var(--z-index-hover);
    pointer-events: none;
    content: "";
    border-radius: var(--input-border-radius);
    box-shadow: 0 0 0 var(--input-border-thickness)
      rgba(var(--color-text), var(--input-border-opacity));
    transition: box-shadow 0.2s;
  }
  theme-input-number:hover::after {
    box-shadow: 0 0 0 calc(var(--input-border-thickness) + 1px)
      rgba(var(--color-text), var(--input-border-opacity));
  }

  theme-input-number button[name="minus"],
  theme-input-number button[name="plus"] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    width: 30px;
    padding: 0;
    color: rgb(var(--color-text));
    background: transparent;
    border: 0;
  }

  theme-input-number button[name="minus"]:disabled,
  theme-input-number button[name="plus"]:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.3;
  }

  theme-input-number button[name="minus"] .icon,
  theme-input-number button[name="plus"] .icon {
    width: 10px;
    height: 10px;
    pointer-events: none;
  }

  theme-input-number input[type="number"] {
    flex: 1 0 0;
    width: 100%;
    padding: 0.6em 0;
    color: currentcolor;
    text-align: center;
    appearance: textfield;
    background: transparent;
    border: 0;
    outline-style: none;
  }

  theme-input-number input[type="number"]::-webkit-outer-spin-button,
  theme-input-number input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
  }
  theme-input-number[data-border-style="line"]::before,
  theme-input-number[data-border-style="line"]::after {
    border-radius: 0;
  }

  theme-input-number[data-border-style="line"]::before {
    display: none;
  }

  theme-input-number[data-border-style="line"]::after {
    --box-shadow-thickness: var(--input-border-thickness);

    box-shadow:
      0 calc(1 * var(--box-shadow-thickness)) 0 0
        rgba(var(--color-text), var(--input-border-opacity)),
      0 calc(-1 * var(--box-shadow-thickness)) 0 0
        rgba(var(--color-text), var(--input-border-opacity));
  }

  theme-input-number[data-border-style="line"]:hover::after {
    --box-shadow-thickness: calc(var(--input-border-thickness) + 1px);
  }

  theme-input-number[data-border-style="none"] {
    --input-padding-inline: 40px;
  }

  theme-input-number[data-border-style="none"]::before,
  theme-input-number[data-border-style="none"]::after {
    display: none;
  }

  theme-input-number[data-border-style="none"] button[name="minus"],
  theme-input-number[data-border-style="none"] button[name="plus"] {
    width: 40px;
  }

  theme-input-number[data-border-style="none"] button[name="minus"] .icon,
  theme-input-number[data-border-style="none"] button[name="plus"] .icon {
    width: 20px;
    height: auto;
    padding: 4px;
    color: rgb(var(--color-background));
    background-color: rgb(var(--color-text));
    border-radius: 50%;
  }
}
.country-select {
  position: relative;
  display: flex;
  padding-inline-start: 8px;
}
.country-select__dropdown {
  position: absolute;
  inset: 0;
  appearance: none;
  cursor: pointer;
  border: none;
  opacity: 0;
}
.country-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline-start: 16px;
}
.country-select__trigger span {
  padding-inline-end: 4px;
  color: rgb(var(--color-text));
}
.country-select__trigger::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 100%;
  content: " ";
  border-inline-start: 1px solid rgb(var(--color-entry-line));
}
@layer component {
  theme-show-more:empty {
    display: none;
  }
  theme-show-more:not([open]) [data-more="true"],
  theme-show-more:not([open]) .view-less {
    display: none !important;
  }
  theme-show-more[open] .view-more {
    display: none !important;
  }
}
.product-price {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.product-price__item {
  display: inline;
}
.product-price__sale {
  color: rgb(var(--color-sale));
}
.product-price__origin {
  color: rgb(var(--color-light-text));
  text-decoration: line-through;
}
.product-price__save--text-style {
  color: rgb(var(--color-discount));
}
.product-price__save--button-style {
  padding: 2px 8px;
  color: rgb(var(--color-tag-text));
  background-color: rgb(var(--color-tag-background));
  border-radius: var(--save-button-radius);
}
theme-sticky-position[data-enforce="true"] {
  display: contents;
}

/* section heading/button colours + form-control fonts */
[class*="section:brand-list"] .block-heading { color: #ed424a; font-size: 56px; }
.section-blog-container .button { background-color: #ed424a; }
/* Blog card "Read more" button: brand coral gradient pill, bold white text (matches SF) */
.block-article-card__view-more-button.button { background-image: linear-gradient(56deg, #f37f80 0%, #e12468 100%); background-color: transparent; color: #fff !important; font-weight: 700; border: none; border-radius: 0; padding: 12px 26px; }
.block-article-card__button { justify-content: flex-start; }
.block-article-card__info { align-items: flex-start !important; }
.block-article-card__extra-info { display: flex !important; flex-direction: column; align-items: flex-start; gap: 9px; font-size: 16px !important; color: #000; margin: 4px 0 14px; }
.block-article-card__extra-info .prb-blog-author,
.block-article-card__extra-info .prb-blog-date { display: flex; align-items: center; gap: 9px; line-height: 1; }
.block-article-card__extra-info .prb-blog-author::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; border: 1.6px solid #ed424a; background: radial-gradient(circle at 50% 37%, #ed424a 0 3.4px, transparent 4.3px), radial-gradient(circle at 50% 104%, #ed424a 0 6.5px, transparent 7.4px); }
.block-article-card__extra-info .prb-blog-date::before { content: ""; width: 17px; height: 17px; flex: 0 0 17px; border-radius: 3px; border: 1.6px solid #ed424a; box-shadow: inset 0 4px 0 -2.6px #ed424a; }
.block-article-card__excerpt, .block-article-card__excerpt * { font-size: 15px !important; line-height: 1.7; }
/* Blog card hover (SF): image zoom + brighten, title -> coral */
.block-article-card__image-wrapper { overflow: hidden; }
.block-article-card__image-wrapper img { transition: transform .45s ease, filter .3s ease; }
.block-article-card:hover .block-article-card__image-wrapper img { transform: scale(1.04); filter: brightness(1.06); }
.block-article-card__title, .block-article-card__title span { transition: color .2s linear; }
.block-article-card:hover .block-article-card__title,
.block-article-card:hover .block-article-card__title span { color: #ed424a !important; }
/* Blog cards: LEFT-align content to match SF (theme defaults to center); bold black title */
.block-article-card__title, .block-article-card__title span,
.block-article-card__info, .block-article-card__info > *,
.block-article-card__date-author, .block-article-card__date-author *,
.block-article-card__excerpt { text-align: left !important; }
.block-article-card__title span { font-weight: 700; color: #000; }

/* Policy pages (Terms/Privacy/etc): SF layout — narrow ~640px centered column,
   TITLE centered, BODY left-aligned (matches Shopify .shopify-policy__container). */
.prb-policy { max-width: 640px !important; margin: 0 auto !important; padding: 0 20px 100px; box-sizing: border-box; text-align: left; }
.prb-policy h1 { text-align: center; font-family: Ubuntu, sans-serif; font-size: 60px; font-weight: 700; line-height: 84px; color: #000; margin: 0 0 24px; }
.prb-policy .rte, .prb-policy .rte * { text-align: left; }
.prb-policy .rte p { font-size: 16px; font-weight: 300; line-height: 1.7; color: #000; }
/* SF renders the policy with NO visible list markers (the imported body is 5 separate <ol>).
   Match SF: drop the numbers, render items as clean left-aligned blocks. */
.prb-policy .rte ol { list-style: none; padding-left: 0; margin: 0 0 16px; }
.prb-policy .rte ol > li { font-size: 16px; font-weight: 300; line-height: 1.7; margin: 0 0 12px; }
@media (max-width: 749px) { .prb-policy h1 { font-size: 34px; line-height: 1.2; } }
[class*="featured-slideshow"] .block-heading { color: #ed424a; }
input, select, textarea, button { font-family: inherit; }
/* Buttons: SF CTAs are bold (700); the theme default .button weight is 300 (too thin). */
.button:not(.button--link) { font-weight: 700; }

/* header nav = Ubuntu 18px BOLD (700) to match SF's heavy nav; hover -> coral */
.header-nav__menu .header-nav__underline,
.header-nav__menu .header-nav__underline .header-nav__ellipsis { font-family: Ubuntu, sans-serif; font-size: 18px; font-weight: 700; transition: color .3s linear; }
.header-nav__menu .header-nav__underline:hover .header-nav__ellipsis { color: #ed424a; }
/* Header icons (FB, IG, cart, search, account): ALL turn coral on hover.
   FB/search use fill=currentColor, IG/cart use stroke=currentColor — cover both channels. */
.prb-right-cluster a, .prb-right-cluster button, .prb-social, .header-action-bar__menu, .header-action-bar__search, .header-action-bar .button--icon { transition: color .3s linear, transform .3s linear; }
.prb-right-cluster a:hover, .prb-right-cluster button:hover, .prb-social:hover,
.header-action-bar__menu:hover, .header-action-bar__search:hover, .header-action-bar .button--icon:hover { color: #ed424a !important; transform: translateY(-2px); }
.prb-right-cluster a:hover [fill="currentColor"], .prb-right-cluster button:hover [fill="currentColor"], .prb-social:hover [fill="currentColor"],
.header-action-bar__menu:hover [fill="currentColor"], .header-action-bar__search:hover [fill="currentColor"], .header-action-bar .button--icon:hover [fill="currentColor"] { fill: #ed424a !important; }
.prb-right-cluster a:hover [stroke="currentColor"], .prb-right-cluster button:hover [stroke="currentColor"], .prb-social:hover [stroke="currentColor"],
.header-action-bar__menu:hover [stroke="currentColor"], .header-action-bar__search:hover [stroke="currentColor"], .header-action-bar .button--icon:hover [stroke="currentColor"] { stroke: #ed424a !important; }
/* Header "Contact" dropdown (caret + hover submenu) */
.header-nav__menu .prb-has-sub { position: relative; }
.header-nav__menu .prb-caret { display: inline-block; margin-left: 5px; font-size: 13px; line-height: 1; transform: translateY(-1px); }
.header-nav__menu .prb-subnav { position: absolute; top: 100%; left: 0; min-width: 210px; margin: 0; padding: 10px 15px; list-style: none; background: #fcd8da; box-shadow: 0 1px 5px rgba(0,0,0,.1); border-radius: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 1000; }
.header-nav__menu .prb-has-sub:hover .prb-subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.header-nav__menu .prb-subnav a { display: block; padding: 5px 0; font-family: Raleway, sans-serif; font-size: 17px; font-weight: 300; color: #eca8a9; white-space: nowrap; transition: color .2s linear; }
.header-nav__menu .prb-subnav a:hover { color: #ed424a; }
/* Header: top full-width search bar (renders above the coral announcement) */
/* Header right: "Shop now" outlined button + FB/IG social */
.prb-right-cluster { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.prb-right-cluster .header-action-bar { margin-left: 0 !important; }
.prb-header-extras { display: flex; align-items: center; gap: 18px; }
.prb-shop-now { display: inline-block; font-family: Ubuntu, sans-serif; font-size: 16px; font-weight: 700; line-height: 1; color: #000; background: transparent; border: 2px solid #000; border-radius: 0; padding: 12px 20px; white-space: nowrap; text-decoration: none; transition: color .3s linear, background-color .3s linear, border-color .3s linear; }
/* Hover fills coral with white text, like SF (.customshop a:hover -> #ed424a bg, white text) */
.prb-right-cluster .prb-shop-now:hover, .prb-shop-now:hover { color: #fff !important; background: #ed424a !important; border-color: #ed424a; }
.prb-social { color: #000; display: inline-flex; align-items: center; transition: color .3s linear, transform .3s linear; }
.prb-social:hover { color: #ed424a; transform: translateY(-2px); }
/* Active page → coral nav item (.) */
.header-nav__menu .prb-active .header-nav__ellipsis { color: #ed424a; }
/* Header right icon order: cart THEN search (search rightmost) */
.prb-right-cluster .header-action-bar { display: flex; }
.prb-right-cluster .header-action-bar [class*="search"] { order: 5; }
.prb-right-cluster .header-action-bar [class*="cart"] { order: 4; }
@media (max-width: 990px) { .prb-header-extras .prb-shop-now { display: none; } }
@media (max-width: 749px) { .prb-header-extras { display: none; } }
.section-ingredient-display .block-heading { font-size: 56px; }
/* Blog article cards: blog article-card titles = Ubuntu 24px */
.block-article-card__title { font-size: 20px; }

/* body line-height 1.7, flavor CTA 16px, mobile drawer nav 13/300 */
:root { --sort-body0-line-height: 1.7; --sort-body1-line-height: 1.7; --sort-body2-line-height: 1.7; --sort-body3-line-height: 1.7; --sort-body4-line-height: 1.7; --sort-body5-line-height: 1.7; --sort-body6-line-height: 1.7; }
.image-with-text-section .button { font-size: 16px; }
.header-nav-drawer__menu .header-nav-drawer__menu-control { font-family: Ubuntu, sans-serif; font-size: 18px; font-weight: 500 !important; }

/* description headings 28px ( h3), product title 28px, buy buttons 16px */
.product-description h2, .product-description h3, .product-description h4 { font-size: 28px; line-height: 1.3; }
.product-detail__title { font-size: 28px; }
.block-product-buy-button, .pay-button-common-item { font-size: 16px; }

/* product card title -> title font (Ubuntu) 18px/700 */
.block-product-title { font-family: var(--sort-title-font); font-size: 18px; font-weight: 700; }

/* product cards show no description (hide placeholder "Describe your product") */
.block-product-card__description { display: none; }
/* Hide the unconfigured promotion-card placeholder ("Promotion heading / Describe your promotion") in the collection grid */
.promotion-card, [class*="promotion-card"], [class*="block-promotion"] { display: none !important; }
/* Hide stray empty headings left in migrated product descriptions/expanders (empty or <br>-only h2/h3) */
.product-expander__content h2:empty, .product-expander__content h3:empty, .product-description h2:empty, .product-description h3:empty,
.product-expander__content h2:has(> br:only-child), .product-expander__content h3:has(> br:only-child),
.product-description h2:has(> br:only-child), .product-description h3:has(> br:only-child) { display: none !important; }

/* 404 page: title 60px + Title Case ("404 Page Not Found") */
.section-main-not-found__title { font-size: 60px; text-transform: capitalize; }

/* Custom form pages (become-a-retailer, press) share templates/page.contact-form.json.
   coral GRADIENT submit button + grey-filled square inputs (not the theme amber/rounded). */
[id$="__form"] .button {
  --color-button-background: 237, 66, 74;
  background-image: linear-gradient(56deg, #f37f80 0%, #e12468 100%);
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 30px;
  min-width: 220px;
  border-radius: 0;
}
[id$="__form"] .field__input { background: #f2f2f2; border-radius: 0; font-size: 16px; }
[id$="__form"] .contact-form__row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 749px) { [id$="__form"] .contact-form__row3 { grid-template-columns: 1fr; } }
[id$="__form"] .contact-form__button { text-align: center; }

/* Newsletter pages (contact, where-to-buy): coral heading + coral GRADIENT Subscribe button. */
#shopline-section-template--page--newsletter__newsletter .page-newsletter__title { color: #ed424a; font-size: 36.4px; }
/* Contact/newsletter page: center content */
.page-newsletter__inner, .page-newsletter__title, .page-newsletter__subtitle { text-align: center !important; }
.page-newsletter__form, .page-newsletter__fields { justify-content: center; }
.page-newsletter__button { display: flex; justify-content: center; }
.page-newsletter__subtitle, .page-newsletter__footnote { text-align: center; max-width: 620px; margin-left: auto; margin-right: auto; }
#shopline-section-template--page--newsletter__newsletter .button {
  --color-button-background: 237, 66, 74;
  background-image: linear-gradient(56deg, #f37f80 0%, #e12468 100%);
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 30px;
  width: 100%;
  max-width: 220px;
  border-radius: 0;
}

/* Brand footer: coral gradient + white text. NOTE: the footer LINK columns
   (PLENTY MORE) and the header nav use Shopline NAVIGATION MENUS, which are admin-only
   (no Admin API) — their link items must be set in the SL online editor. */
.footer { background: linear-gradient(56deg, #f37f80 0%, #e12468 100%) !important; }
.footer, .footer h1, .footer h2, .footer h3, .footer h4, .footer p, .footer span, .footer li, .footer label,
.footer a, .footer a:hover { color: #fff !important; }
.footer .field__input { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45); color: #fff; }
.footer .field__input::placeholder { color: rgba(255,255,255,.8); }
/* Footer newsletter (email-subscribe block) renders a SOLID white input — the .footer white
   text color above makes typed text invisible. Force dark text + readable placeholder on it. */
.footer .block-subscription .field__input { color: #222 !important; background: #fff !important; }
.footer .block-subscription .field__input::placeholder { color: rgba(0,0,0,.5) !important; }
.footer .block-subscription .field__label { color: rgba(0,0,0,.5) !important; }
/* Footer 4-column layout: Plenty More | Get in Touch | Follow Us | Join the Community.
   The theme stacks 2-block groups as full-width rows (justify space-between) -> big gaps.
   Dissolve the 2 content groups into one 4-col grid; copyright spans full width below. */
@media (min-width: 960px) {
  .footer__inner { display: grid !important; grid-template-columns: 1.1fr 1fr 0.9fr 1.6fr; column-gap: 44px; row-gap: 30px; align-items: start !important; justify-items: start; }
  .footer__inner > .footer__group:nth-child(1),
  .footer__inner > .footer__group:nth-child(2) { display: contents; }
  .footer__inner > .footer__group:nth-child(1) > *,
  .footer__inner > .footer__group:nth-child(2) > * { width: 100%; min-width: 0; max-width: 100%; margin: 0 !important; align-self: start !important; grid-row: 1; }
  .footer__inner > .footer__group:nth-child(3) { grid-column: 1 / -1; justify-self: end; text-align: right; margin-top: 8px; }
  .footer__inner > .footer__group:nth-child(3) .footer__payment-icons { justify-content: flex-end !important; text-align: right !important; margin-left: auto; }
}

/* Homepage "Real Ingredients, Real Taste" (rich-text section): uses the brand coral
   gradient with white text; the SL section defaulted to a white scheme.  */
.rich-text { background: linear-gradient(56deg, #f37f80 0%, #e12468 100%) !important; }
.rich-text, .rich-text h1, .rich-text h2, .rich-text h3, .rich-text p,
.rich-text .rich-text__heading, .rich-text .rich-text__text, .rich-text a { color: #fff !important; }

/* Homepage hero: coral announcement bar + dark slideshow pager dots */
.announcement-bar, .announcement-bar__group-item, .announcement-bar__carousel-wrapper { background: #ed424a !important; color: #fff !important; }
.announcement-bar__group-item { padding-top: 6px !important; padding-bottom: 6px !important; }
.announcement-bar__group-item, .announcement-bar__group-item span, .announcement-bar__group-item * { font-family: Raleway, sans-serif !important; font-size: 13px !important; font-weight: 300 !important; line-height: 1.4 !important; }
/* Announcement bar height (~45px, was ~72px): kill extra min-height on the bar/carousel wrappers */
.announcement-bar, .announcement-bar__carousel-wrapper, .announcement-bar__group, .carousel__track { min-height: 0 !important; }
.announcement-bar a, .announcement-bar span { color: #fff !important; }
.slideshow__pager--dot { background: #333 !important; width: 10px !important; height: 10px !important; opacity: .25; }
.slideshow__pager--dot.is-active { opacity: 1; }

/* Homepage paper texture behind the ingredient + featured area (per-section, not body) */
.section-ingredient-display, [class*="ingredient-display"] { background-image: url('https://cdn.shopify.com/s/files/1/0537/6481/7082/files/Plenty_hard_kombucha_background_1512x.jpg?v=1651085635'); background-size: cover; background-position: 50% 50%; }

/* PDP: kombucha paper-texture behind the product area (matches SF .shifter-page tiled bg) */
[data-settings-id="shopline-section-main-product-info"] { background: url('https://plentyrealbrews.com/cdn/shop/files/Plenty_hard_kombucha_background2.png?v=1653326490') repeat; }
/* The inner wrapper carries an opaque white scheme bg that hides the paper texture — clear it. */
[data-settings-id="shopline-section-main-product-info"] .product-detail-wrapper,
[data-settings-id="shopline-section-main-product-info"] .product-detail { background-color: transparent !important; }
/* Express checkout ("Buy now"): purple to match the SF ShopPay button placement (SL default is amber). */
[data-settings-id="shopline-section-main-product-info"] .payment-button-wrapper .button,
[data-settings-id="shopline-section-main-product-info"] [class*="pay-button-container"] { background: #5a31f4 !important; background-image: none !important; color: #fff !important; border-color: #5a31f4 !important; }
/* Case Size variant pills: coral border/text on the selected option (SF style) */
.variant-picker__button--text { border: 1px solid #d9d3cf; padding: 7px 16px; border-radius: 0; transition: border-color .2s linear, color .2s linear; }
.variant-picker__input:checked + .variant-picker__button--text,
.variant-picker__option.is-selected .variant-picker__button--text,
.variant-picker__option[aria-checked="true"] .variant-picker__button--text { border-color: #ed424a; color: #ed424a; }
/* PDP "Add to cart": coral/salmon like SF (SL default is amber). */
[data-settings-id="shopline-section-main-product-info"] .block-product-buy-button.button--fill { background-image: linear-gradient(68deg, #F27D7F 0%, #E01F66 100%) !important; background-color: transparent !important; color: #fff !important; --color-button-background: 238, 106, 109; text-transform: uppercase; letter-spacing: .3px; }
/* PDP: SF has no trust-badge row (Free worldwide shipping / Carbon neutral / etc) — hide to match. */
[data-settings-id="shopline-section-main-product-info"] .block-product-sell-info,
[data-settings-id="shopline-section-main-product-info"] [class*="sell-info"] { display: none !important; }

/* PDP buy-box SF layout: "Price:"/"Case Size:"/"Quantity:" labels in a left column,
   Add-to-cart beside the express-checkout button, wishlist below. */
.prb-buy-label { display: inline-block; min-width: 96px; font-family: Ubuntu, sans-serif; font-weight: 700; font-size: 16px; color: #000; }
.product-detail__price { display: flex; align-items: baseline; gap: 0; flex-wrap: wrap; }
.product-detail__price .prb-price-label { flex: 0 0 auto; }
.product-detail__price .hidden-empty.body4 { display: none !important; }
.product-detail__variant-picker .variant-picker__group-label { min-width: 96px; font-weight: 700; }
.product-detail__variant-picker .variant-picker__group-label::after { content: ":"; margin-left: -0.28em; }
.product-detail__variant-picker .product-detail__row--desktop-direction-row { justify-content: flex-start !important; gap: 0; align-items: center; }
.product-detail__variant-picker .variant-picker__options { flex: 0 0 auto !important; justify-content: flex-start !important; }
.prb-qty-row { display: flex; align-items: center; gap: 0; margin: 14px 0; }
.product-detail__buy-button-group.prb-buybox-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 14px; }
.product-detail__buy-button-group.prb-buybox-row > div,
.product-detail__buy-button-group.prb-buybox-row > theme-product-form { flex: 1 1 200px; margin: 0; }
.product-detail__buy-button-group.prb-buybox-row .button--fill,
.product-detail__buy-button-group.prb-buybox-row .pay-button-container,
.product-detail__buy-button-group.prb-buybox-row [class*="pay-button"] { width: 100% !important; }

/* Ingredient cards "Made from Real Fruits + Botanicals": SF-exact — bold black label with a
   static 3px black underline; on hover a yellow line fills over it LEFT->RIGHT (right transition). */
.section-ingredient-display .block-ingredient-display__image-text-card-text-group strong {
  position: relative;
  display: inline-block;
  font-weight: 700;
  color: #000;
  border-bottom: 3px solid #000;
  padding-bottom: 2px;
}
.section-ingredient-display .block-ingredient-display__image-text-card-text-group strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 3px;
  background: #ffcc24;
  transition: right .3s ease-in-out;
}
.section-ingredient-display .block-ingredient-display__image-text-card:hover .block-ingredient-display__image-text-card-text-group strong::after { right: 0; }
/* SF: on hover the label turns coral (a:hover -> --DTLinkHoverColor) + the image gently zooms */
.section-ingredient-display .block-ingredient-display__image-text-card-text-group strong { transition: color .3s linear, border-color .3s linear; }
.section-ingredient-display .block-ingredient-display__image-text-card:hover .block-ingredient-display__image-text-card-text-group strong { color: #ed424a; }
.section-ingredient-display .block-ingredient-display__image-text-card [class*="card-image"] img { transition: transform .4s ease; }
.section-ingredient-display .block-ingredient-display__image-text-card:hover [class*="card-image"] img { transform: scale(1.03); }

/* Collection banner: force 256px tall; image+overlay set below at line ~2012 */
.main-collection-cover, .block-main-collection__banner, .block-main-collection__banner-inner { height: 256px !important; min-height: 256px !important; }

/* Real Ingredients coral section: 5 stamp badges on the coral (moved from text-columns) + heading line-height */
.rich-text .prb-badges { display: flex; justify-content: center; align-items: center; gap: 30px; flex-wrap: wrap; max-width: 1100px; margin: 50px auto 0; }
.rich-text .prb-badges img { height: 109px; width: auto; }
.rich-text .rich-text__heading, .rich-text h1 { line-height: 1.4; margin-bottom: 10px; }
@media (max-width: 749px){ .rich-text .prb-badges img { height: 74px; } .rich-text .prb-badges { gap: 16px; } }

/* Homepage "As Featured In":  logos are large + transparent (no grey box) */
.brand-item__wrapper, .brand-list__item, .brand-list__item img, .brand-item__wrapper img { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.brand-list__item img, .brand-item__wrapper img { max-width: 360px; width: 100%; height: auto; }
/* Ingredient circles: force square crop + round so pineapple/coconut/hibiscus aren't squished */
[class*="ingredient-display"] .image-text-card__image img, [class*="ingredient-display"] [class*="card-image"] img { aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; width: 100%; max-width: 300px; height: auto; }
/* Ingredient cards: image-on-top, centered column, 300px circles */
.section-ingredient-display .block-ingredient-display__image-text-card { flex-direction: column; }
.section-ingredient-display .block-ingredient-display__image-text-card [class*="card-image"] { width: 300px; max-width: 100%; align-self: center; margin-left: auto; margin-right: auto; }
.section-ingredient-display .block-ingredient-display__image-text-card-text-group { width: 100%; text-align: center; }
.section-ingredient-display .block-ingredient-display__image-text-card-text-group * { text-align: center !important; }

/* ===== Shop / collection banner — brand it ===== */
.block-main-collection__banner { background: linear-gradient(90deg, rgba(237,66,66,.42), rgba(235,63,87,.5)), url('https://cdn.shopify.com/s/files/1/0537/6481/7082/files/DSC08510_copy_1jpg.jpg?v=1684274625') 50% 42% / cover no-repeat !important; min-height: 256px; }
.block-main-collection__banner-sizer { aspect-ratio: auto !important; height: 256px !important; min-height: 256px; }
.block-main-collection__banner-mask::after { background-color: transparent !important; }
.block-main-collection__banner-inner { color: #fff !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.block-main-collection__banner-inner a, .block-main-collection__banner-inner span, .block-main-collection__banner-inner > div { color: #fff !important; }

/* Homepage flavour panels: "Full list of ingredients" link + "Shop Now" button — bold, matches SF */
.image-with-text-section .button { font-weight: 700 !important; }

/* Homepage hero "Sip Smarter" slide: Shop Now button — coral gradient, bold, positioned
   under the baked-in "Sip Smarter." headline (right side of the hero). */
/* Hero CTA (Shop Now): the theme overlays content at the slide's bottom-right; flex-end + padding
   centers it over the baked art. The fixed-size button drifts a little across widths, so tune the
   padding per breakpoint. (Absolute positioning is NOT usable — the carousel clones break it.) */
.slideshow .slideshow__image-container { align-items: flex-end !important; justify-content: flex-end !important; padding: 0 26% 9% 0 !important; box-sizing: border-box; }
.slideshow .slideshow__image-container [class*="slideshow__g"],
.slideshow .slideshow__image-container .block-button-group { width: auto !important; max-width: none !important; align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; align-items: flex-end !important; justify-content: flex-end !important; }
@media (max-width: 1100px) { .slideshow .slideshow__image-container { padding: 0 25% 7% 0 !important; } }
@media (max-width: 900px)  { .slideshow .slideshow__image-container { padding: 0 24% 5% 0 !important; } }
@media (max-width: 749px)  { .slideshow .slideshow__image-container { padding: 0 23% 3.5% 0 !important; } }
/* Slide 2 (Real Fruit Revolution): CTA sits in the speech bubble, under REVOLUTION. */
.slideshow .slideshow__item:has(img[src*="volution"]) .slideshow__image-container { padding: 0 16% 6.5% 0 !important; }
@media (min-width: 1500px) { .slideshow .slideshow__item:has(img[src*="volution"]) .slideshow__image-container { padding-bottom: 7.5% !important; } }
.slideshow .button { background-image: linear-gradient(56deg, #f37f80 0%, #e12468 100%) !important; background-color: transparent !important; color: #fff !important; font-family: Ubuntu, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important; border: none !important; border-radius: 0 !important; padding: 11px 35px !important; white-space: nowrap; }
/* Hero carousel prev/next arrows on the LEFT & RIGHT sides (SF), vertically centered — kept alongside the dots */
.slideshow .slideshow__pager--arrows-sides { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 24px !important; pointer-events: none; z-index: 6; }
.slideshow .slideshow__pager--arrows-sides .slideshow__pager--arrow { position: static !important; pointer-events: auto; background-color: #fff; }
@media (max-width: 749px) { .slideshow .slideshow__pager--arrows-sides { padding: 0 10px !important; } .slideshow .slideshow__pager--arrow { width: 32px; height: 32px; } }

/* Shop/collection grid: reserve 2 lines for the product title so "Add to cart" buttons
   land on the same row across the grid regardless of how many lines a title wraps to (SF behaviour). */
.block-product-card .block-product-title,
.block-product-title { min-height: 3.4em; max-height: 3.4em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Product card hover (collection grid + featured products): title text highlights coral on hover, matches SF */
.block-product-title:hover, .block-product-title:hover span { color: #ed424a !important; }

/* Footer PLENTY MORE: SL always appends a platform-default "Search" link after the
   links_html override (engine quirk — both the if and else branches render); SF has no such link. */
.footer__menu-content li:has(a[href$="/search"]) { display: none !important; }
/* Copyright bar: SL renders a fallback "Search" menu next to the copyright text; SF has none there. */
.footer__copyright-menu { display: none !important; }

/* Footer FOLLOW US: vertical list with the platform name next to each icon (SF layout) */
.footer__social-media-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px; }
.footer__social-media-content li a { display: flex !important; align-items: center; gap: 10px; }
.footer__social-media-content li a svg { width: 20px; height: 20px; }
.social-media-label { font-size: 14px; }
.block-main-collection__heading { font-family: Ubuntu, sans-serif !important; font-size: 60px !important; font-weight: 700 !important; line-height: 1.1 !important; color: #fff !important; margin: 6px 0 0; }
@media (max-width: 768px) {
  .block-main-collection__banner, .block-main-collection__banner-sizer { height: 150px !important; min-height: 150px; }
  .block-main-collection__heading { font-size: 32px !important; }
}

/* Custom banner pages (retailer/ambassador/contact/where-to-buy/about-us/faq/press): the full-width
   banner should sit FLUSH under the header — kill the theme's 80px .main-page top padding gap. */
.main-page:has(.prb-hero), .main-page:has(.prb-about-pg), .main-page:has(.prb-press),
.main-page:has(.prb-faq), .main-page:has(.prb-wtb) { padding-top: 0 !important; }