/*
COLLECT TEMPLATE COLORS WITH WHITE/BLACK FALLBACKS
--bg-color, --text-color, and --line-color feed review-safe aliases.
*/
#virtues,
.product-reviews,
.reviews-read-more-overlay,
.reviews-submit-overlay,
.reviews-read-more-content,
.reviews-submit-content {
  --reviews-bg-color: var(--bg-color, #fff);
  --reviews-text-color: var(--text-color, #000);
  --reviews-line-color: var(--line-color, #d9d9d9);
}

/* MATCH VIRTUES BACKGROUND TO REVIEW SECTION, IF IT EXISTS IN THE TEMPLATE */
#virtues {
  background: var(--reviews-bg-color) !important;

  & .container.virtues {
    margin-bottom: 0;
    padding-bottom: 150px;
  }
}
/* If this is included on a standard merch template, adjust padding to avoid large white space. */
.product-top {
  z-index: 5 !important;
  position: relative !important;
  padding-bottom:20px !important;
}

/* SET SHARED REVIEW STAR STYLES */
.product-reviews,
.reviews-read-more-content {
  & .review-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 18px;
    line-height: 1;
  }

  & .review-star {
    --star-fill: 100%;
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 1.0625em;
    height: 1em;

    & svg {
      display: block;
      width: 1.0625em;
      height: 1em;
    }
  }

  & .review-star-base {
    fill: var(--reviews-line-color);
  }

  & .review-star-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--star-fill);
    height: 100%;
    overflow: hidden;

    & svg {
      max-width: none;
      fill: var(--reviews-text-color);
    }
  }

  & .review-title {
    max-width: 390px;
    margin: 0 0 14px;
    font: inherit;
    font-weight: 600;
    line-height: inherit;
  }
}

/* LAYOUT REVIEW SECTION */
.product-reviews {
  --reviews-container-padding: 4vw;
  --reviews-container-edge: max(4vw, calc((100vw - 1600px) / 2 + 4vw));
  position: relative;
  z-index: 3;
  background-color: var(--reviews-bg-color);
  color: var(--reviews-text-color);
  padding: 0 0 120px;
  overflow-x: clip;
  overflow-y: visible;

  & .container {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--reviews-container-padding);
  }

  & .reviews-star-symbols {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  &::before {
    position: absolute;
    top: 0;
    width: 100%;
    height: 75svh;
    background: linear-gradient(180deg, var(--reviews-bg-color) 0%, transparent 100%);
    transform: rotate(180deg);
    transform-origin: top;
    z-index: 2;
    content: '';
  }
  &::after {
    position: absolute;
    top: 0;
    width: 100%;
    height: 25svh;
    background: linear-gradient(180deg, var(--reviews-bg-color) 0%, transparent 100%);
    transform: rotate(180deg);
    backdrop-filter: blur(15px);
    mask-image: linear-gradient(0deg, transparent, black);
    transform-origin: top;
    z-index: 3;
    content: '';
  }


  &.is-empty-state {
    box-sizing: border-box;

    &::before {
      height: 100%;
    }
  }

  & .reviews-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    text-align: center;
  }

  & .reviews-title {
    width: 100%;
    margin: 0 auto;
    font-size: var(--size-h1);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    text-transform: none;
  }

  & .reviews-title.blinds-text {
    display: flex;
    justify-content: center;
    white-space: nowrap;

    & .char-clip {
      position: relative;
      display: inline-block;
      overflow: hidden;
      bottom: -1vw;
      padding-bottom: 1vw;
      font-family: var(--heading-family);
      line-height: 120%;
    }

    & .char-clip span {
      display: inline-block;
      transform: translateX(-100%);
      transition: opacity 1.1s ease, transform 1.7s ease;
      white-space: pre;
    }

    &.visible .char-clip span {
      transform: translateX(0);
      transition-delay: var(--i);
    }
  }

  & .reviews-empty-state-header .reviews-title {
    position: relative;
    width: fit-content;
    padding-inline: 0.02em;

    &::after {
      position: absolute;
      top: 71%;
      left: -2.5%;
      z-index: 1;
      width: 105%;
      height: 0.06em;
      background: currentColor;
      content: '';
      pointer-events: none;
      transform: translateY(-50%) scaleX(0);
      transform-origin: left center;
      transition: transform 0.8s cubic-bezier(.65, 0, .35, 1);
      transition-delay: 1.25s;
    }

    &.visible::after {
      transform: translateY(-50%) scaleX(1);
    }
  }

  & .reviews-intro {
    width: min(100%, 500px);
    margin: 28px auto 0;
    text-align: center;
    margin-bottom: 0;
  }

  & .reviews-empty-state-cta {
    display: flex;
    width: fit-content;
    margin: 34px auto 0;
  }

  & .reviews-filter-bar {
    --reviews-bar-line: 2px solid var(--reviews-line-color);
    display: flex;
    justify-content: space-evenly;
    margin: 50px 0 50px;
    border-block: var(--reviews-bar-line);

    & .reviews-filter-segment {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      box-sizing: border-box;
      min-width: min(100%, 220px);
      border: 0;
      padding: 1rem 1.25rem;
      font-family: "Kapra";
      letter-spacing: 2px;
      line-height: 1;
      text-align: center;
      text-transform: uppercase;
    }

    & .reviews-filter-value {
      font-family: "Kapra";
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    & hr {
      width: 2px;
      height: auto;
      margin: 0;
      background: var(--reviews-line-color);
      border: 0;
    }
  }

  & .reviews-filter-label,
  & .review-source,
  & .reviewer-title {
    opacity: .55;
  }

  & .reviews-filter-control {
    position: relative;
    gap: 18px;
    font-family: "Kapra";
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;

    & .reviews-filter-label,
    & .reviews-rating-selected-label {
      font-family: "Kapra";
      font-size: inherit;
      letter-spacing: inherit;
      line-height: 1;
      text-transform: uppercase;
    }
  }

  & .reviews-select-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-height: 1em;

    & .reviews-rating-filter {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      margin: 0;
      border: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--reviews-line-color) 56%, transparent);
      border-radius: 0;
      padding: 0;
      background: transparent;
      background-image: none;
      background-repeat: no-repeat;
      background-position: calc(100% - 2px) 50%;
      background-size: 10px;
      color: inherit;
      cursor: pointer;
      font-family: system-ui, sans-serif;
      font-size: inherit;
      letter-spacing: inherit;
      line-height: 1;
      opacity: 0;
      text-transform: uppercase;

      &:focus-visible ~ .reviews-rating-selected-label {
        outline: 1px solid currentColor;
        outline-offset: 4px;
      }

      &:disabled {
        cursor: default;
        opacity: 0;
      }
    }

    & .reviews-filter-chevron {
      width: 10px;
      height: 10px;
      background-color: currentColor;
      -webkit-mask-image: url("chevron-down-white.svg");
      mask-image: url("chevron-down-white.svg");
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
      pointer-events: none;
    }
  }

  & .reviews-swiper {
    width: 100%;
    padding-bottom: 24px;

    &.is-empty .reviews-scrollbar {
      display: none;
    }

    &::before,
    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 2;
      pointer-events: none;
      content: '';
    }

    &::before {
      left: 0;
      width: var(--reviews-container-edge);
      background: linear-gradient(90deg, var(--reviews-bg-color) 0%, transparent 100%);
    }

    &::after {
      right: 0;
      width: var(--reviews-container-padding);
      background: linear-gradient(90deg, transparent 0%, var(--reviews-bg-color) 100%);
    }

    &.swiper-horizontal > .reviews-scrollbar {
      position: relative;
      left: auto;
      bottom: auto;
      width: 62%;
      height: 2px;
      margin: 64px auto 0;
      background: color-mix(in srgb, var(--reviews-text-color) 35%, transparent);
      border-radius: 0;
    }

    & .reviews-scrollbar .swiper-scrollbar-drag {
      background: var(--reviews-text-color);
      border-radius: 0;
    }
  }

  & .a-review {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  & .reviews-load-more-slide {
    height: auto;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  & .review-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    white-space: nowrap;
  }

  & .review-source {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1;

    &:hover {
      opacity: 1;
    }

    & .review-source-icon {
      width: 13px;
      height: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-size: 9px;
      line-height: 1;
    }
  }

  & .review-body {
    max-width: 390px;
    margin-bottom: 0;
  }

  & .review-read-more {
    align-self: flex-start;
    margin: 28px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    opacity: .55;
    text-decoration: underline;
    text-underline-offset: 4px;

    &:hover {
      opacity: 1;
    }
  }

  & .reviewer {
    margin-top: clamp(48px, 4vw, 72px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 20px;
    line-height: 1.1;

    & .reviewer-title {
      font-size: 15px;
      line-height: 1.25;
    }
  }

  & .reviews-empty-message {
    width: min(390px, calc(100% - var(--reviews-container-padding) * 2));
    margin: 0 auto 0;
    text-align: center;

    &[hidden] {
      display: none;
    }

    & p {
      margin: 0 0 18px;
      font-family: Montserrat, sans-serif;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: 0.75rem;
    }
  }

  & .reviews-submit-button,
  & .reviews-empty-cta,
  & .reviews-load-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--reviews-line-color);
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    font-family: "Kapra";
    letter-spacing: 2px;
    min-height: 44px;
    padding: 0 24px;
    text-decoration: none;
    text-transform: uppercase;

    &:hover {
      background: var(--reviews-text-color);
      color: var(--reviews-bg-color);
    }
  }

  & .reviews-submit-button {
    display: flex;
    margin: 34px auto 0;
  }

  & .reviews-submit-button,
  & .reviews-load-more-button {
    font-size: inherit;
    line-height: inherit;
  }

  @media (max-width: 719px) {
    padding: 0px 0 40px;

    &::before {
      height: 25svh;
    }

    &.is-empty-state {
      min-height: 82svh;
      padding: 140px 0 160px;

      &::before {
        height: 100%;
      }
    }

    & .reviews-empty-state-description {
      font-size: 17px;

      & br {
        display: none;
      }
    }

    & .reviews-filter-bar {
      flex-direction: column;
      margin: 54px 0 44px;
      border-inline-start: var(--reviews-bar-line);
      border-inline-end: var(--reviews-bar-line);

      & hr {
        width: 100%;
        height: 2px;
      }
    }

    & .reviews-filter-control {
      gap: 10px;
    }

    & .reviews-select-shell {
      gap: 12px;
    }

    & .review-header {
      align-items: flex-start;
      flex-direction: column;
      gap: 12px;
      text-align: left;
    }

    & .review-body {
      max-width: none;
      text-align: left;
    }

    & .a-review {
      align-items: flex-start;
      box-sizing: border-box;
      padding-inline: max(24px, var(--reviews-container-padding));
    }

    & .review-read-more {
      align-self: flex-start;
    }

    & .reviewer {
      align-items: flex-start;
      text-align: left;
    }

    & .reviews-swiper.swiper-horizontal > .reviews-scrollbar {
      margin-top: 48px;
    }
  }
}

/* STYLE REVIEW MODALS */
.reviews-read-more-overlay,
.reviews-submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--reviews-container-padding, 4vw);
  color: var(--reviews-text-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  visibility: hidden;

  &.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  &::before {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    content: '';
  }

  & .reviews-read-more-content {
    --reviews-read-more-pad-x: clamp(28px, 5vw, 64px);
    --reviews-read-more-pad-top: clamp(56px, 5vw, 64px);
    --reviews-read-more-pad-bottom: clamp(28px, 5vw, 64px);
    --reviews-read-more-scrollbar-gutter: 18px;
    --reviews-read-more-reply-bg: color-mix(in srgb, var(--reviews-bg-color) 88%, black);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: min(720px, calc(100svh - var(--reviews-container-padding, 4vw) * 2));
    overflow: hidden;
    background: var(--reviews-bg-color);
    padding: 0;
    text-align: left;

    &[hidden],
    & [hidden] {
      display: none !important;
    }

    &.is-review-type {
      & .reviews-read-more-source {
        opacity: 1;
        font-family: var(--detail-family);
        font-size: clamp(28px, 5vw, 36px);
        line-height: 1;
        text-transform: uppercase;
      }

      & .review-body {
        margin-bottom: 0;
      }
    }

    & .reviews-read-more-close {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      padding: 20px;
      background: transparent;
      border: 0;
      color: var(--reviews-text-color);
      cursor: pointer;
      font: inherit;
      line-height: 1;
    }

    & .reviews-read-more-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      padding: var(--reviews-read-more-pad-top) calc(var(--reviews-read-more-pad-x) + var(--reviews-read-more-scrollbar-gutter)) var(--reviews-read-more-pad-bottom) var(--reviews-read-more-pad-x);
    }

    & .review-header {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 18px;
      margin-bottom: 32px;
      text-align: left;
      white-space: normal;
    }

    & .reviews-read-more-source {
      opacity: .55;
      font-size: 15px;
      line-height: 1;
    }

    & .review-title {
      max-width: none;
      margin-bottom: 18px;
      font-size: inherit;
      font-weight: 600;
      line-height: inherit;
      text-align: left;
    }

    & .reviews-read-more-info-icon {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-size: 12px;
      line-height: 1;
    }

    & .review-body {
      max-width: none;
      margin-bottom: 48px;
      text-align: left;
    }

    & .reviewer {
      align-items: flex-start;
      margin-top: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 20px;
      line-height: 1.1;
      text-align: left;

      & .reviewer-title {
        font-size: 15px;
        line-height: 1.25;
        opacity: .55;
      }
    }

    & .reviews-read-more-reply {
      --reviews-reply-icon-size: 44px;
      --reviews-reply-icon-half: 22px;
      --reviews-reply-line-rise: 48px;
      --reviews-reply-pad-top: 64px;
      position: relative;
      margin: 48px calc(0px - var(--reviews-read-more-pad-x) - var(--reviews-read-more-scrollbar-gutter)) calc(0px - var(--reviews-read-more-pad-top)) calc(0px - var(--reviews-read-more-pad-x));
      padding: var(--reviews-reply-pad-top) calc(var(--reviews-read-more-pad-x) + var(--reviews-read-more-scrollbar-gutter)) var(--reviews-read-more-pad-top) var(--reviews-read-more-pad-x);
      background: var(--reviews-read-more-reply-bg);
    }

    & .reviews-read-more-reply::before {
      position: absolute;
      top: -30px;
      left: calc(var(--reviews-read-more-pad-x) + var(--reviews-reply-icon-half));
      width: 1px;
      height: 75px;
      background: var(--reviews-text-color);
      content: '';
      opacity: 1;
    }

    & .reviews-read-more-reply-header {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 24px;
    }

    & .reviews-read-more-reply-icon {
      width: var(--reviews-reply-icon-size);
      height: var(--reviews-reply-icon-size);
      flex: 0 0 auto;
      background: currentColor;
      -webkit-mask-image: url("favicon-dark.svg");
      mask-image: url("favicon-dark.svg");
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }

    & .reviews-read-more-reply-title {
      margin: 0;
      font-weight: 500;
      line-height: 1.1;
    }

    & .reviews-read-more-reply-body {
      margin-bottom: 0;
      white-space: pre-line;
    }
  }

  & .reviews-submit-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(760px, 100%);
    max-height: min(880px, calc(100svh - var(--reviews-container-padding, 4vw) * 2));
    overflow: hidden;
    background: var(--reviews-bg-color);
    color: var(--reviews-text-color);
    padding: 0;
    text-align: center;

    &[hidden],
    & [hidden] {
      display: none !important;
    }

    & .reviews-submit-close {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      padding: 20px;
      background: transparent;
      border: 0;
      color: var(--reviews-text-color);
      cursor: pointer;
      font: inherit;
      line-height: 1;
    }

    & .reviews-submit-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      padding: clamp(56px, 5vw, 64px) clamp(28px, 5vw, 52px) clamp(28px, 5vw, 52px);
    }

    & .reviews-submit-title {
      margin: 0 0 clamp(22px, 4vw, 32px);
      font-family: "Bajern";
      font-size: clamp(32px, 4.5vw, 44px);
      line-height: 1;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    & .reviews-submit-product-media {
      width: min(220px, 46vw);
      margin: 0 auto clamp(22px, 4vw, 32px);

      & img {
        display: block;
        width: 100%;
        height: auto;
      }
    }

    & .reviews-submit-form {
      display: flex;
      flex-direction: column;
      gap: 22px;

      &.is-submitted {
        & .reviews-submit-fields,
        & .reviews-submit-actions {
          display: none;
        }

        & .reviews-submit-status {
          margin: 0;
        }
      }
    }

    & .reviews-submit-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 24px;
      text-align: left;
    }

    & .reviews-submit-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
      margin: 0;
      border: 0;
      padding: 0;

      & legend,
      & .reviews-submit-label-text {
        margin: 0;
        color: currentColor;
        font-family: var(--detail-family);
        font-size: 16px;
        letter-spacing: 2px;
        line-height: 1;
        text-transform: uppercase;
      }
    }

    & .reviews-submit-rating-field,
    & .reviews-submit-title-field,
    & .reviews-submit-body-field,
    & .reviews-submit-media-field {
      grid-column: 1 / -1;
    }

    & .reviews-submit-rating-field {
      align-items: center;
      margin: 0 0 4px;

      & legend {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }
    }

    & .reviews-submit-rating {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: clamp(8px, 2vw, 14px);
    }

    & .reviews-submit-rating-star {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: clamp(34px, 5vw, 52px);
      height: clamp(32px, 4.8vw, 50px);
      margin: 0;
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--reviews-line-color);
      cursor: pointer;

      &.is-active {
        color: var(--reviews-text-color);
      }

      &:focus-visible {
        outline: 1px solid currentColor;
        outline-offset: 4px;
      }

      &:disabled {
        cursor: default;
        opacity: .65;
      }

      & svg {
        display: block;
        width: 100%;
        height: 100%;
        fill: currentColor;
      }
    }

    & .reviews-submit-input {
      box-sizing: border-box;
      width: 100%;
      border: 0;
      border-bottom: 1px solid var(--reviews-text-color);
      border-radius: 0;
      padding: 9px 12px;
      background: var(--reviews-line-color);
      color: var(--reviews-text-color);
      font: inherit;
      font-size: 14px;
      letter-spacing: 2px;
      line-height: 24px;

      &::placeholder {
        color: var(--reviews-text-color);
        opacity: .55;
      }

      &:focus-visible {
        border-color: var(--reviews-text-color);
        outline: 1px solid var(--reviews-text-color);
        outline-offset: 2px;
      }

      &:disabled {
        opacity: .65;
      }
    }

    & textarea.reviews-submit-input {
      min-height: clamp(132px, 18vw, 170px);
      resize: vertical;
    }

    & .reviews-submit-content-count {
      align-self: flex-end;
      color: var(--reviews-text-color);
      font-size: 12px;
      line-height: 1;
      opacity: .55;

      &.is-error {
        opacity: 1;
      }
    }

    & .reviews-submit-media-dropzone {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      min-height: 64px;
      border: 1px solid transparent;
      border-radius: 0;
      padding: 10px 14px;
      background: var(--reviews-line-color);

      &:focus-visible,
      &.is-dragover {
        border-color: var(--reviews-text-color);
        outline: 1px solid var(--reviews-text-color);
        outline-offset: 2px;
      }

      &.has-files {
        & .reviews-submit-media-prompt {
          display: none;
        }
      }
    }

    & .reviews-submit-media-input {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    & .reviews-submit-media-prompt {
      color: var(--reviews-text-color);
      font-size: 14px;
      letter-spacing: 2px;
      line-height: 24px;
      opacity: .55;
    }

    & .reviews-submit-media-previews {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      min-width: 0;
    }

    & .reviews-submit-media-preview {
      position: relative;
      display: inline-flex;
      width: 50px;
      height: 50px;

      & img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        object-fit: cover;
      }
    }

    & .reviews-submit-media-remove {
      position: absolute;
      top: -9px;
      right: -9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border: 0;
      border-radius: 50%;
      padding: 0;
      background: #fff;
      color: #111;
      cursor: pointer;
      font: 700 15px/1 system-ui, sans-serif;

      &:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
      }
    }

    & .reviews-submit-media-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--reviews-text-color);
      border-radius: 2rem;
      padding: .5rem 3rem;
      background: transparent;
      color: var(--reviews-text-color);
      cursor: pointer;
      font: inherit;
      font-size: 1rem;
      letter-spacing: 0;
      line-height: 1.2;
      transition: all 1s linear;

      &:hover:not(:disabled) {
        border-color: var(--reviews-text-color);
        color: var(--reviews-text-color);
      }

      &:disabled {
        cursor: default;
        opacity: .65;
      }
    }

    & .reviews-submit-status {
      margin: 0;
      text-align: center;

      &.is-error {
        color: #f3ceb2;
      }

      &.is-success {
        color: currentColor;
      }
    }

    & .reviews-submit-actions {
      display: flex;
      justify-content: stretch;
    }

    & .reviews-submit-send {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 56px;
      border: 0;
      padding: 0 24px;
      background-color: #000000;
      color: #ffffff;
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 4px;
      line-height: inherit;
      text-decoration: none;
      text-transform: uppercase;

      &:hover:not(:disabled) {
        opacity: .84;
      }

      &:disabled {
        cursor: default;
        opacity: .65;
      }
    }
  }

  @media (max-width: 719px) {
    padding: 18px;

    & .reviews-read-more-content {
      --reviews-read-more-pad-x: 24px;
      --reviews-read-more-pad-top: 72px;
      --reviews-read-more-pad-bottom: 32px;
      --reviews-read-more-scrollbar-gutter: 0px;
      width: 100%;
      max-height: calc(100svh - 36px);

      & .reviews-read-more-scroll {
        padding: var(--reviews-read-more-pad-top) calc(var(--reviews-read-more-pad-x) + var(--reviews-read-more-scrollbar-gutter)) var(--reviews-read-more-pad-bottom) var(--reviews-read-more-pad-x);
      }
    }

    & .reviews-submit-content {
      width: 100%;
      max-height: calc(100svh - 36px);

      & .reviews-submit-scroll {
        padding: 64px 18px 28px;
      }

      & .reviews-submit-title {
        margin-bottom: 18px;
      }

      & .reviews-submit-product-media {
        width: min(200px, 62vw);
        margin-bottom: 22px;
      }

      & .reviews-submit-fields {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      & .reviews-submit-rating {
        gap: 6px;
      }

      & .reviews-submit-media-dropzone {
        grid-template-columns: 1fr;
        padding: 12px;
      }
    }
  }
}