[data-engraving-treatment-trigger],
[data-engraving-control-trigger] {
  display: none !important;
}

.cart-drawer-item--engraving-template {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.cart-drawer-item--engraving-template-image {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

html[data-og-engraving-variant="treatment"]
  [data-engraving-treatment-trigger][data-engraving-eligible="true"],
html[data-og-engraving-variant="control"]
  [data-engraving-control-trigger][data-engraving-eligible="true"] {
  display: block !important;
}

#custom-engraving-2026--dialog {
  max-width: 1024px;
  max-height: calc(100dvh - 24px);
  width: 100%;
  border-radius: 40px;
  border-color: black;
  padding: 40px;
  overflow-y: auto;

  &::backdrop {
    background: rgb(0 0 0 / 55%);
  }

  @media (max-width: 1024px) {
    max-width: 95%;
    padding: 16px 0;
    border-radius: 20px;
  }

  #custom-engraving-2026--dialog-close {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    margin-left: auto;
    margin-right: 1rem;
    align-items: center;
    gap: 5px;
    padding: 5px;
    background-color: white;
    border: 1px solid black;
    border-radius: 4px;

    & svg {
      width: 14px;
      height: 14px;
    }
  }

  & h3 {
    font-size: 2.4rem;
    font-weight: bold;
  }

  & p {
    font-size: 1.6rem;
    margin-top: 0px;

    @media (max-width: 1024px) {
      font-size: 1.4rem;
    }
  }

  & input[type="radio"] {
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 20px;
    width: 20px;
    accent-color: black;
  }

  & input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: black;
  }

  & :focus-visible {
    outline: 3px solid #94773f;
    outline-offset: 3px;
  }

  & [aria-invalid="true"] {
    outline: 3px solid #b42318;
    outline-offset: 2px;
  }

  & .engraving-form-message {
    padding: 1rem 1.2rem;
    margin: 0 0 1.5rem;
    border: 1px solid #b42318;
    border-radius: 6px;
    background: #fef3f2;
    color: #8a1c13;
    font-size: 1.4rem;
    line-height: 1.35;
  }

  & .engraving-input-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #222;

    & [data-character-count] {
      color: #666;
      font-variant-numeric: tabular-nums;
    }

    & [data-character-count].is-over-limit {
      color: #b42318;
      font-weight: 700;
    }
  }

  & ::file-selector-button {
    cursor: pointer;
    appearance: none !important;
    background-color: black;
    border: 1px solid black;
    border-radius: 4px;
    color: white;
    padding: 0 10px;
    min-height: 40px;
    font-size: 1.5rem;
    letter-spacing: 0.05rem;
    line-height: calc(1 + 0.2 / var(--font-body-scale));
    margin-bottom: 1rem;
  }

  & label {
    display: block;
    margin-bottom: 1rem;
    cursor: pointer;
  }

  & label[for="engraving-text-line-one"],
  & label[for="engraving-text-line-two"],
  & label[for="engraving-text-line-three"],
  & #engraiving-custom-icon-text {
    & span {
      font-size: 1.2rem;
    }

    & input {
      display: block;
      width: 100%;
      padding: 10px 20px;
    }
  }

  & #engraiving-custom-icon-text {
    display: block;
    width: 100%;
    padding: 10px 20px;
  }

  & label.engraving-consent {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    max-width: 440px;
    margin: 1.5rem auto 2rem;

    & input {
      margin: initial;
    }

    & span {
      text-align: left;
      line-height: 1.35;
      font-size: 1.35rem;
    }
  }

  & textarea {
    display: block;
    width: 100%;
    background-color: #bcbcbc;
    border-color: #bcbcbc;
  }

  & select {
    display: block;
    font-size: 1.6rem;
    padding: 10px 20px;
    width: 100%;
  }

  & button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }

  .button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;

    & .button {
      min-width: 160px;
      min-height: 48px;

      @media (max-width: 600px) {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
        padding-right: 1rem;
        padding-left: 1rem;
      }
    }
  }

  #engraving-customization-start {
    display: block;
    margin: 1.5rem auto 0 auto;
  }

  & .engraving-customization--next-btn {
    display: inline-block;
    background-color: #94773f;

    & span {
      color: white;
    }
  }

  & .engraving-customization--prev-btn {
    display: inline-block;
    background-color: black;
    color: white;
  }

  & .custom-engraving--inner-container {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(2, minmax(100px, auto));

    & .headlines {
      grid-column: 1 / 2;
      grid-row: 1 / 2;

      @media (max-width: 1024px) {
        padding: 0 20px;
        grid-column: 1 / -1;
        grid-row: 1;
      }
    }

    & .engraving-customizations {
      grid-column: 1 / 2;
      grid-row: 2 / -1;

      @media (max-width: 1024px) {
        grid-column: 1 / -1;
        grid-row: -1;
      }

      display: flex;
      overflow-x: hidden;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -ms-overflow-style: none;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }

      & .engraving-customization-screen {
        flex: 1 0 100%;
        scroll-snap-align: start;
        padding: 1rem;
        overflow: hidden;

        @media (max-width: 1024px) {
          padding: 10px;
        }

        & .engraving-customizations-options {
          display: flex;

          & label {
            display: none;
            flex-direction: column;

            flex: 1 0 50%;
            text-align: center;

            & span {
              display: block;
            }

            & img {
              display: block;
              width: 75px;
              height: 75px;
              object-fit: contain;
              margin: 0 auto;
            }

            & input {
              margin-top: auto;
            }
          }
        }

        & .engraving-custom-icon--step-container-labels {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 1rem;
          padding: 1rem 0;

          & label {
            display: flex;
            min-width: 0;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem;
            border: 2px solid transparent;
            border-radius: 8px;
          }

          & label.is-unavailable {
            opacity: 0.45;
            cursor: not-allowed;
          }

          & label:has(input:checked) {
            border-color: #94773f;
          }

          & img {
            width: 100%;
            max-width: 120px;
            aspect-ratio: 1;
            object-fit: contain;
          }

          @media (max-width: 600px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.5rem;

            & label {
              gap: 0.5rem;
              padding: 0.5rem;
              font-size: 1.1rem;
            }

            & input[type="radio"] {
              width: 18px;
              height: 18px;
            }
          }
        }

        & .engraving-custom-icon--steps-track {
          display: flex;
          overflow-x: scroll;
          overflow-y: hidden;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          -ms-overflow-style: none;
          scrollbar-width: none;

          &::-webkit-scrollbar {
            display: none;
          }

          & label {
            display: inline-block;
          }

          & .engraving-custom-icon--step-container {
            flex: 1 0 100%;
            padding: 1rem;
          }

          & .engraving-custom-icon--step-container-labels {
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            padding: 1rem;

            & label {
              display: inline-flex;
              flex-direction: column;
              align-items: center;
              flex: 1 0 50%;
            }

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

    & #engraving-preview-placeholder {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      grid-column: 2 / -1;
      grid-row: 1 / -1;
      height: fit-content;

      @media (max-width: 1024px) {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: 300px;
        max-height: 290px;
        margin-left: auto;
        margin-right: auto;
      }

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

      & #engraving-option-caseback-placeholder {
        width: auto;
        height: auto;
        max-width: 95%;
        max-height: 100%;
        margin: 0 auto;
        object-fit: contain;
        object-position: center;

        @media (max-width: 1024px) {
          max-height: 280px;
        }
      }

      & #engraving-preview-placeholder--text {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;

        & p {
          font-size: 1.8rem;
        }
      }

      & #engraving-preview-placeholder--icon {
        display: none;
        width: 100%;
        max-width: 45%;
        height: auto;
        position: absolute;
        top: 48%;
        left: 52%;
        transform: translate(-50%, -50%);

        @media (max-width: 1024px) {
          left: 50%;
        }
      }

      & #engraving-preview-placeholder--image-file {
        display: none;
        position: absolute;
        inset: 0;
        margin: auto;
        width: auto;
        height: auto;
        max-width: 65%;
        max-height: 65%;
        object-fit: contain;
        object-position: center;

        @media (max-width: 1024px) {
          max-width: 60%;
          max-height: 60%;
        }
      }

      & #engraving-preview-placeholder--icon-text {
        display: none;
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);

        @media (max-width: 1024px) {
          top: 48%;
          left: 49%;
          max-width: 100%;
        }
      }
    }
  }
}

/* Keep disabled extra lines out of both the form and preview. */
#custom-engraving-2026--dialog [hidden] {
  display: none !important;
}

#engraving-location {
  margin-bottom: 1.5rem;
}

#custom-engraving-2026--dialog #engraving-preview-placeholder[data-engraving-type="sidewall"] {
  align-self: center;
}

#custom-engraving-2026--dialog #engraving-preview-placeholder[data-engraving-type="sidewall"] #engraving-preview-placeholder--text {
  top: 53%;
  width: 85%;
}

#custom-engraving-2026--dialog #engraving-preview-placeholder[data-engraving-type="sidewall"] #engraving-preview-placeholder--text p {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
}