.productContainer {
  width: 100%;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .productContainer {
    grid-template-columns: clamp(250px, 27%, 300px) auto;
  }
}

.productVersionsOpenerText {
  width: 100%;
  padding: 0;
  margin: 0 auto;

  h1 {
    font-size: var(--font-size-4xl);
    font-weight: 600;
  }

  p {
    font-size: var(--font-size-xl);
    font-weight: 300;
    margin: 1.5em 0 2.3em;
    padding: 0;
  }
}

.productSidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);

  .sidebar-box {
    padding: 0;

    .sidebar-header {
      background-color: var(--colour-brand-blue-100);

      h3 {
        color: #0c1a40;
        font-size: var(--font-size-lg);
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        margin: 0;
        padding: var(--space-sm);
      }

      button[data-bs-toggle="collapse"] {
        --chevron-width: 12px;
        --chevron-offset: 9px;

        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        padding: var(--space-sm) calc(var(--chevron-width) + var(--chevron-offset)) var(--space-sm) 0;
        font-size: var(--font-size-lg);

        &::after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          width: var(--chevron-width);
          height: 100%;
          background: url(/images/ecom-assets/arrow-down.svg) 50% / var(--chevron-width) no-repeat transparent;
          border: none;
          margin: 0;
          transition: transform var(--default-transition-duration) var(--default-transition-timing-function);
        }

        &[aria-expanded="true"]::after {
          transform: rotate(-180deg);
        }

        &:focus-visible {
          outline: none;
        }
      }
    }

    .sidebar-body {
      background: var(--colour-bg-main);
      border: 1px solid var(--colour-brand-blue-100);

      ul {
        margin: 0;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);

        li {
          list-style: none;
          margin: 0;

          a {
            display: flex;
            padding: 0.2em 0.5em;
            gap: var(--space-xs);
            align-items: flex-start;
            justify-content: space-between;
            text-decoration: none;
            color: var(--colour-text);
            font-size: var(--font-size-md);

            &.active {
              background: var(--colour-brand-blue-50);
            }
          }
        }
      }
    }
  }
}

.productSidebar .application-indicator,
.basketWidgetItems {
  display: block;
  padding: 0.2em;
  background: var(--colour-brand-pink-100);
  min-width: 1.4em;
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  line-height: 1em;
  text-align: center;
  color: #461526;
  font-weight: 600;
}

/* General Basket Widget Styles, also applies to Header menu */

.basketWidgetApplicationName {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.basketWidgetProducts {
  margin: 0 0 5px;
  list-style: none;
  padding: 5px 8px;
}

.basketWidgetProduct {
  font-size: var(--font-size-sm);
  font-weight: 400;
  margin: 0 0 2px;
  padding: 0;
}

.basketWidgetItemsContainer,
.basketWidgetValueContainer {
  font-size: var(--font-size-md);
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.basketWidgetValuePrice {
  font-family: var(--font-mono);
}

p.basketWidgetMessage {
  margin: 0 0 5px;
  padding: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* Sidebar-specific Basket Widget Styles */
.sidebar-box .basketWidgetLink {
  background: var(--button-primary-background);
  box-sizing: border-box;
  color: var(--button-primary-text-color);
  font: var(--button-primary-font);
  letter-spacing: var(--button-primary-letter-spacing);
  line-height: var(--button-primary-line-height);
  padding: var(--button-primary-padding);
  text-align: var(--button-primary-text-align);
  text-decoration: var(--button-primary-text-decoration);
  width: 100%;
}

.sidebar-box .basketWidget {
  display: none;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 768px) {
  .sidebar-box .basketWidget {
    display: flex;
  }
}

.sidebar-box .basketWidgetSummary {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--colour-bg-main);
  border: 1px solid var(--colour-brand-blue-100);
  margin-bottom: var(--space-md);
}

.sidebar-box .basketWidgetHeading {
  background-color: #d0eaf3;
  padding: 15px;
  color: #0c1a40;
  font-family: "Helvetica Neue", sans-serif;
  font-size: var(--font-size-lg);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

#productVersions.product-list__versions-builder {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);

  label.productPurchaseLine,
  label.productAddonLine {
    display: flex;
    align-items: start;
    gap: 15px;
    padding: var(--space-md);
    background: var(--colour-bg-main);
    border: 1px solid hsla(219, 37%, 93%, 1);
    position: relative;

    &:has(input:checked) {
      color: var(--colour-brand-teal-900);
      background: var(--colour-brand-teal-100);
      border: 1px solid transparent;

      ::before {
        content: "";
        content: "";
        display: block;
        position: absolute;
        width: 4px;
        height: 100%;
        background-color: var(--colour-brand-teal-700);
        top: 0;
        left: 0;
      }
    }

    &:has(input[type="checkbox"]),
    &:has(input[type="radio"]) {
      display: grid;
      grid-template-columns: 20px auto;
    }

    &:has(select),
    &:has(input[type="number"]) {
      display: flex;
    }

    input[type="checkbox"],
    input[type="radio"] {
      &::before {
        display: none;
      }
    }
  }

  .productPurchaseLine.productAutoAddonLine {
    padding: var(--space-md);
    position: relative;
    color: var(--colour-brand-teal-900);
    background: var(--colour-brand-teal-100);
    border: 1px solid transparent;

    ::before {
      content: "";
      display: block;
      position: absolute;
      width: 4px;
      height: 100%;
      background-color: var(--colour-brand-teal-700);
      top: 0;
      left: 0;
    }
  }

  .productLabel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    justify-content: space-between;
    width: 100%;

    .productText {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);

      .productTitle {
        font-weight: 500;
        font-size: var(--font-size-lg);
        line-height: 100%;
        letter-spacing: -1%;

        .purchaseProductHighlight {
          background-color: var(--colour-brand-orange-700);
          color: var(--colour-white);
          display: inline-block;
          font-family: var(--font-mono);
          font-size: var(--font-size-md);
          font-weight: 300;
          margin: var(--space-sm);
          padding: var(--space-2xs) var(--space-sm);
          white-space: nowrap;
        }
      }

      .productDescription {
        font-weight: 300;
        font-size: var(--font-size-md);
        line-height: 1.4;
        letter-spacing: -1%;
      }
    }

    .productMeta {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);

      .productPrice {
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: var(--space-md);
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-sm);

        .productPriceDescription {
          font-size: var(--font-size-sm);
          text-align: right;
        }
      }
    }
  }

  .product-list__charity-add-prefix {
    font-weight: 500;
    font-size: var(--font-size-lg);
    line-height: 100%;
    letter-spacing: -1%;
  }

  #addons {
    #inlineProductAddonsMain {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }
  }

  #addons h2.productTitle,
  h2.productSectionHeading,
  #addUsers h2.productSectionHeading,
  #migration h2.productSectionHeading {
    margin: calc(var(--space-lg) - var(--space-sm)) 0 var(--space-sm);
  }

  .productSectionHeading:first-child {
    margin-top: 0;
  }

  .productSectionItems {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .product-list__previous-years-callout {
    padding: var(--space-md);
    border: 1px solid var(--colour-brand-grey-100);
    background: var(--colour-bg-main);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: start;

    .productTitle {
      font-weight: 500;
      font-size: var(--font-size-lg);
      line-height: 100%;
      letter-spacing: -1%;
    }

    .productDescription {
      font-weight: 300;
      font-size: var(--font-size-md);
      line-height: 120%;
      letter-spacing: -1%;
    }
  }

  #previousYearsProducts {
    .product-list__previous-years-products-list-container {
      display: flex;
      flex-direction: column;
      align-items: end;
      gap: var(--space-md);

      .productPriceDescription {
        font-size: var(--font-size-sm);
        text-align: right;
      }
    }

    .product-list__previous-years-addons-list-container {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      padding: 0 0 0 var(--space-md);
    }
  }

  .product-list__hidden-section {
    display: none;
  }

  .product-list__is-visible {
    display: block;
  }

  .productTotalLine {
    background: var(--colour-brand-pink-700);
    color: var(--colour-white);
    margin: var(--space-md) 0;
    padding: var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .product-list__subtotal {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);

      .product-list__total-title {
        font-weight: 500;
        font-size: var(--font-size-xl);
        line-height: 100%;
        letter-spacing: -1%;
      }

      .product-list__vat-note {
        font-weight: 300;
        font-size: var(--font-size-md);
        line-height: 100%;
        letter-spacing: -1%;
      }
    }

    #productTotal {
      text-align: right;

      .money {
        font-weight: 400;
        font-size: var(--font-size-xl);
      }
    }
  }

  #productBuyButton {
    display: flex;
    justify-content: end;

    .product-list__modal {
      display: none;
    }

    #addToBasket {
    }
  }

  .product-list__vat-explanation {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);

    p {
      margin: 0;
    }
  }
}

@media (min-width: 576px) {
  #productVersions.product-list__versions-builder {
    .productLabel {
      flex-direction: row;

      .productText {
        .productTitle {
          .purchaseProductHighlight {
            margin: 0 var(--space-md);
          }
        }
      }
    }
  }
}

.product-list__modal {
  max-width: var(--bp-md);
  width: 100%;
}

.product-list__modal--wide {
  max-width: var(--bp-xl);
}

/* Jump links */

.c-nav-product-list {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--colour-bg);
  margin-top: calc(-1 * var(--space-sm));
  margin-bottom: var(--space-md);
}

.c-nav-product-list__wrapper {
  position: relative;
  padding: var(--space-sm) 0;

  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  /* padding: var(--space-sm) var(--space-md); */
}

.c-nav-product-list__button {
  border: 1px solid transparent;
  background: linear-gradient(var(--colour-bg), var(--colour-bg)) padding-box,
  linear-gradient(var(--colour-text), var(--colour-text)) border-box;

  color: var(--colour-text);
  cursor: pointer;
  flex: 0 0 auto;
  min-width: fit-content;
  padding: 0;

  &:hover {
    background: linear-gradient(var(--colour-bg), var(--colour-bg)) padding-box,
    var(--button-primary-background) border-box;
  }

  &.active {
    background: var(--button-primary-background) border-box;

    .c-nav-product-list__button-text {
      background-color: transparent;
      color: var(--button-primary-text-color);
    }
  }
}

.c-nav-product-list__button-text {
  display: block;
  background-color: var(--colour-bg);
  color: var(--colour-text);
  font: var(--button-primary-font);
  letter-spacing: var(--button-primary-letter-spacing);
  padding: var(--button-primary-padding);
  text-decoration: var(--button-primary-text-decoration);
  text-align: var(--button-primary-text-align);
  line-height: var(--button-primary-line-height);
}

.productInBasket,
.productOwned {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;

  .productOwned__text,
  .productInBasket__text {
    font-weight: 500;
    font-size: var(--font-size-md);
    letter-spacing: -1%;
    white-space: nowrap;
    overflow: hidden;
  }

  .productInBasket__icon {
    background: url(/images/ecom-assets/basket_green.svg) 50% / 32px no-repeat transparent;
    height: 33px;
    width: 33px;
  }

  .productOwned__icon {
    background: url(/images/ecom-assets/currently-own.svg) 50% / 28px no-repeat transparent;
    height: 33px;
    width: 33px;
  }
}

/* legacy overrides */

#content .product-list--listing {
  background: var(--colour-white);
}

#productVersions .buyButton.product-list__buy-button,
#productVersions input.product-list__buy-button {
  background: var(--button-primary-background);
  padding: var(--button-primary-padding);
}

#productVersions .buyButton.product-list__previous-years-button {
  cursor: pointer;
  margin-top: 0;
}