.order-confirmation {
  background: #f8f7f4;
  padding-block: 56px 80px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px !important;
  align-items: start;

  .order-confirmation__title {
    grid-column: 1/-1;
  }

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }

  .order-confirmation__gallery {
    grid-column: 1/6;
    display: flex;
    flex-direction: column;
    gap: 16px;

    @media (max-width: 1024px) {
      grid-column: 1/-1;
      display: grid;
      grid-auto-flow: column;
      overflow-x: auto;
      scrollbar-width: none;
      gap: 12px;
      margin-inline: calc(var(--padding-x) * -1);
      padding-inline: var(--padding-x);
      width: unset !important;
      transform: none !important;
    }

    .gallery-item {
      @media (max-width: 1024px) {
        width: calc(5 * var(--column-width) + 4 * var(--grid-gutter));
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .gallery-no-image {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0f0f0;
        color: rgba(0, 0, 0, 0.5);

        span {
          font-family: 'Neutra Text';
          font-size: 12px;
          font-weight: 500;
          text-align: center;
        }
      }
    }
  }

  .woocommerce-order {
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: sticky;
    top: var(--sticky-top, 170px);
    align-self: start;
    grid-column: 7/-1;

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

    .woocommerce-thankyou-order-received {
      color: var(--NOIR-CF, #2c2b2b);
      font-family: 'Neutra Text TF';
      font-size: 24px;
      font-weight: 600;
      line-height: 120%;
      text-transform: initial;
      padding: 0 !important;

      @media (max-width: 768px) {
        font-size: 20px;
      }
    }

    .woocommerce-order-details,
    .order-summary {
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0;
      background: initial;

      .woocommerce-order-details__title {
        margin: 0;
      }

      .order-summary__infos {
        background: white;
        display: flex;
        flex-direction: column;
        list-style: none;
        padding: 4px 16px;

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

      .order-summary__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-block: 16px;
        gap: 16px;
        border-bottom: 1px solid #f0f0f0;
        color: rgba(0, 0, 0, 0.7);
        font-family: 'Neutra Text';
        font-size: 14px;
        font-weight: 500;
        line-height: 140%;

        & > span {
          color: #00000080;
          font-weight: 600;
        }

        strong {
          font-size: 14px;
        }

        & > * {
          flex: 1;
        }

        &:last-child {
          border-bottom: none;
        }

        strong {
          color: var(--NOIR-CF, #2c2b2b);
          font-weight: 600;
          text-align: right;
          font-variant-numeric: lining-nums;
          text-align: left;
        }

        @media (max-width: 768px) {
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
          padding-inline: 16px;

          strong {
            text-align: left;
          }
        }
      }
    }

    .woocommerce-notice {
      padding-block: 16px;
      padding-inline: 24px;

      &.woocommerce-notice--error {
        background: #fee;
        border: 1px solid #e74c3c;
        color: #c0392b;
      }

      &.woocommerce-thankyou-order-failed-actions {
        display: flex;
        gap: 16px;
        align-items: center;

        .button {
          display: inline-flex;
          padding-block: 12px;
          padding-inline: 24px;
          justify-content: center;
          align-items: center;
          gap: 10px;
          text-decoration: none !important;
          transition: background-color 0.3s ease, color 0.3s ease,
            border-color 0.3s ease;
          border: 1px solid black;
          font-size: 14px;
          font-weight: 500;
          line-height: 120%;
          background-color: white;
          color: black;
          border-radius: 0;

          @media (hover: hover) {
            &:hover {
              background-color: black;
              color: white;
            }
          }

          &:focus-visible {
            background-color: black;
            color: white;
          }
        }
      }
    }
  }
}

/* Styles pour les hooks additionnels */
.woocommerce-order-details {
  background: white;
  padding-block: 32px;
  padding-inline: 32px;
  margin-block-start: 32px;

  @media (max-width: 768px) {
    padding-block: 24px;
    padding-inline: 16px;
  }

  h2 {
    color: var(--NOIR-CF, #2c2b2b);
    font-family: 'Neutra Text TF';
    font-size: 20px;
    font-weight: 600;
    line-height: 120%;
    text-transform: initial;
    margin-block-end: 24px;
  }

  table {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
      padding-block: 12px;
      border-bottom: 1px solid #e5e5e5;
      text-align: left;

      &:last-child {
        text-align: right;
      }
    }

    th {
      color: rgba(0, 0, 0, 0.6);
      font-family: 'Neutra Text';
      font-size: 14px;
      font-weight: 500;
      text-transform: uppercase;
    }

    td {
      color: var(--NOIR-CF, #2c2b2b);
      font-family: 'Neutra Text';
      font-size: 16px;
      font-weight: 500;
    }
  }
}