/* ! Currently no --spacing-150 or --spacing-250 ! */
/* General Classes & Automatic Styles */
.item-page,
.orca-modal,
.orca-contentful-content {
  :where(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) {
    margin: 0;
    color: var(--primary-font-color, #252525);
  }

  :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) {
    margin-top: 0;
  }

  /* if a major heading is followed by p, ul, or ol; add a margin-bottom */
  :where(h1, h2, h3, .h1, .h2, .h3):has(+ :where(p, ul, ol)) {
    margin-bottom: var(--spacing-100, 8px);
  }

  /* if a minor heading is followed by p, ul, or ol; add a margin-bottom */
  :where(h4, h5, .h4, .h5):has(+ :where(p, ul, ol)) {
    margin-bottom: var(--spacing-50, 4px);
  }

  section:has(+ section) {
    margin-bottom: var(--spacing-300, 24px);
  }

  h1,
  .h1 {
    font: var(--h1-font);
  }

  h2,
  .h2 {
    font: var(--h2-font);
  }

  h3,
  .h3 {
    font: var(--h3-font);
  }

  h4,
  .h4 {
    font: var(--h4-font);
  }

  h5,
  .h5 {
    font: var(--h5-font);
  }

  :where(p, ul, ol) {
    margin: 0;
    font: var(--body-font);
    line-height: 1.375;
  }

  /* if a p, ul, or ol are not the last child; add margin-bottom */
  :where(p, ul, ol):not(:last-child) {
    margin-bottom: var(--spacing-200, 16px);
  }

  ul,
  ol {
    padding-left: 1.75em;
  }

  :where(ul, ol) li {
    margin: 0;

    &:not(:last-child) {
      margin-bottom: var(--spacing-50, 4px);
    }
  }

  a[target="_blank"]:not(.button, .btn-primary, .btn-secondary) {
    display: inline-block;
    position: relative;

    &.hyperlink {
      padding-right: 1.125em;
    }

    &::after {
      display: inline-block;
      aspect-ratio: 1 / 1;
      width: 1em;
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
      content: "";
    }

    &.hyperlink::after {
      position: absolute;
      top: 0.25em;
      right: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 14H3C2.73489 13.9996 2.48075 13.8942 2.29329 13.7067C2.10583 13.5193 2.00036 13.2651 2 13V3C2.00036 2.73489 2.10583 2.48075 2.29329 2.29329C2.48075 2.10583 2.73489 2.00036 3 2H8V3H3V13H13V8H14V13C13.9996 13.2651 13.8942 13.5193 13.7067 13.7067C13.5193 13.8942 13.2651 13.9996 13 14Z' fill='%23001080'/%3E%3Cpath d='M10 1V2H13.293L9 6.293L9.707 7L14 2.707V6H15V1H10Z' fill='%23001080'/%3E%3C/svg%3E");
    }

    &.btn::after {
      position: relative;
      top: 0.125em;
      margin-left: 0.5em;
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 14H3C2.73489 13.9996 2.48075 13.8942 2.29329 13.7067C2.10583 13.5193 2.00036 13.2651 2 13V3C2.00036 2.73489 2.10583 2.48075 2.29329 2.29329C2.48075 2.10583 2.73489 2.00036 3 2H8V3H3V13H13V8H14V13C13.9996 13.2651 13.8942 13.5193 13.7067 13.7067C13.5193 13.8942 13.2651 13.9996 13 14Z' fill='%23fff'/%3E%3Cpath d='M10 1V2H13.293L9 6.293L9.707 7L14 2.707V6H15V1H10Z' fill='%23fff'/%3E%3C/svg%3E");
      
    }

    &:is(.btn-secondary, .btn-tertiary)::after {
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 14H3C2.73489 13.9996 2.48075 13.8942 2.29329 13.7067C2.10583 13.5193 2.00036 13.2651 2 13V3C2.00036 2.73489 2.10583 2.48075 2.29329 2.29329C2.48075 2.10583 2.73489 2.00036 3 2H8V3H3V13H13V8H14V13C13.9996 13.2651 13.8942 13.5193 13.7067 13.7067C13.5193 13.8942 13.2651 13.9996 13 14Z' fill='%23001080'/%3E%3Cpath d='M10 1V2H13.293L9 6.293L9.707 7L14 2.707V6H15V1H10Z' fill='%23001080'/%3E%3C/svg%3E");
    }
  }

  sup {
    top: unset;
    line-height: 0.875;
    vertical-align: super;
  }

  :focus-visible {
    outline: 2px dashed var(--brand-primary-500, #001080);
    outline-offset: 2px;
  }

  [data-dismiss="modal"]:focus-visible {
    outline-color: var(--white, #fff);
  }

  /* .btn is foundation. -primary, -secondary, etc are colour changes */
  .btn {
    padding: var(--spacing-100, 8px) var(--spacing-300, 24px);
    border: 2px solid !important;
    border-radius: var(--size-1000, 160px);
    font: var(--label-font-default-bold);

    &.btn-sm {
      padding: var(--spacing-75, 6px) var(--spacing-200, 16px);
      font: var(--label-font-small-bold);
    }

    &.btn-lg {
      padding: var(--spacing-150, 12px) var(--spacing-300, 24px);
    }
  }

  .btn-primary {
    border-color: var(--brand-primary-500, #001080) !important;
    background-color: var(--brand-primary-500, #001080) !important;
    color: var(--white, #fff) !important;

    &:hover {
      border-color: var(--brand-primary-900, #000963) !important;
      background-color: var(--brand-primary-900, #000963) !important;
    }
  }

  .btn-secondary {
    border-color: var(--brand-primary-500, #001080) !important;
    background-color: var(--white, #fff) !important;
    color: var(--brand-primary-500, #001080) !important;

    &:hover {
      border-color: var(--brand-primary-500, #001080) !important;
      background-color: var(--brand-primary-100, #e0e2f0) !important;
      color: var(--brand-primary-500, #001080) !important;
    }
  }

  .btn-tertiary {
    border-color: transparent !important;
    background-color: transparent !important;
    color: var(--brand-primary-500, #001080) !important;

    &:hover {
      border-color: var(--brand-primary-100, #e0e2f0) !important;
      background-color: var(--brand-primary-100, #e0e2f0) !important;
    }
  }

  .ow-tile-grid .btn {
    border-radius: 100px;
  }

  .btn.ow-add-to-cart {
    border: none !important;
    background-color: var(--addToCart-500, #108600) !important;

    &:hover {
      border-color: var(--addToCart-900, #0d6b00) !important;
      background-color: var(--addToCart-900, #0d6b00) !important;
    }
  }

  .btn.ow-add-to-compare {
    border-color: var(--grey-400, #dedede) !important;
    background-color: var(--white, #fff) !important;
    color: var(--brand-primary-500, #001080) !important;

    &:hover {
      border-color: var(--grey-500, #c6c6c6) !important;
      background-color: var(--grey-200, #f7f7f7) !important;
      color: var(--brand-primary-500, #001080) !important;
    }
  }

  .btn.disabled {
    border-color: var(--grey-600, #949494) !important;
    background-color: var(--grey-600, #949494) !important;

    &:hover {
      border-color: var(--grey-600, #949494) !important;
      background-color: var(--grey-600, #949494) !important;
    }
  }
}

/* Custom Non-Utility Classes */
.item-page,
.orca-modal,
.orca-contentful-content {
  .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    margin-top: 0;
  }

  .hyperlink {
    display: inline-block;
    border: none;
    color: var(--brand-primary-500, #001080);
    font-weight: bold;
    text-decoration: none !important;
  }

  .hyperlink:hover {
    color: var(--brand-primary-500, #001080);
    text-decoration: underline !important;
  }

  .banner-link {
    display: block;
    border: 1px solid transparent;

    &.banner-link--has-border {
      overflow: hidden;
      border-radius: 3px;
      border-color: var(--grey-400, #dedede);
    }

    &:hover {
      border-color: var(--brand-primary-500, #001080);
    }

    &:focus-within {
      outline: 2px dashed var(--brand-primary-500, #001080);
      outline-offset: -2px;
    }
  }
}

/* Utility Classes */
.item-page,
.orca-modal,
.orca-contentful-content {
  /* Margin */
  .m-auto {
    margin: auto;
  }

  .mx-auto {
    margin-right: auto;
    margin-left: auto;
  }

  .my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }

  .m-0 {
    margin: var(--spacing-0, 0px);
  }

  .m-10 {
    margin: var(--spacing-10, 1px);
  }

  .m-25 {
    margin: var(--spacing-25, 2px);
  }

  .m-50 {
    margin: var(--spacing-50, 4px);
  }

  .m-75 {
    margin: var(--spacing-75, 6px);
  }

  .m-100 {
    margin: var(--spacing-100, 8px);
  }

  .m-200 {
    margin: var(--spacing-200, 16px);
  }

  .m-300 {
    margin: var(--spacing-300, 24px);
  }

  .m-400 {
    margin: var(--spacing-400, 32px);
  }

  .m-450 {
    margin: var(--spacing-450, 40px);
  }

  .m-500 {
    margin: var(--spacing-500, 48px);
  }

  .m-600 {
    margin: var(--spacing-600, 64px);
  }

  .m-700 {
    margin: var(--spacing-700, 80px);
  }

  .m-800 {
    margin: var(--spacing-800, 96px);
  }

  .m-900 {
    margin: var(--spacing-900, 128px);
  }

  .m-1000 {
    margin: var(--spacing-1000, 160px);
  }

  /* Margin Top and Bottom */
  .my-0 {
    margin-top: var(--spacing-0, 0px);
    margin-bottom: var(--spacing-0, 0px);
  }

  .my-10 {
    margin-top: var(--spacing-10, 1px);
    margin-bottom: var(--spacing-10, 1px);
  }

  .my-25 {
    margin-top: var(--spacing-25, 2px);
    margin-bottom: var(--spacing-25, 2px);
  }

  .my-50 {
    margin-top: var(--spacing-50, 4px);
    margin-bottom: var(--spacing-50, 4px);
  }

  .my-75 {
    margin-top: var(--spacing-75, 6px);
    margin-bottom: var(--spacing-75, 6px);
  }

  .my-100 {
    margin-top: var(--spacing-100, 8px);
    margin-bottom: var(--spacing-100, 8px);
  }

  .my-200 {
    margin-top: var(--spacing-200, 16px);
    margin-bottom: var(--spacing-200, 16px);
  }

  .my-300 {
    margin-top: var(--spacing-300, 24px);
    margin-bottom: var(--spacing-300, 24px);
  }

  .my-400 {
    margin-top: var(--spacing-400, 32px);
    margin-bottom: var(--spacing-400, 32px);
  }

  .my-450 {
    margin-top: var(--spacing-450, 40px);
    margin-bottom: var(--spacing-450, 40px);
  }

  .my-500 {
    margin-top: var(--spacing-500, 48px);
    margin-bottom: var(--spacing-500, 48px);
  }

  .my-600 {
    margin-top: var(--spacing-600, 64px);
    margin-bottom: var(--spacing-600, 64px);
  }

  .my-700 {
    margin-top: var(--spacing-700, 80px);
    margin-bottom: var(--spacing-700, 80px);
  }

  .my-800 {
    margin-top: var(--spacing-800, 96px);
    margin-bottom: var(--spacing-800, 96px);
  }

  .my-900 {
    margin-top: var(--spacing-900, 128px);
    margin-bottom: var(--spacing-900, 128px);
  }

  .my-1000 {
    margin-top: var(--spacing-1000, 160px);
    margin-bottom: var(--spacing-1000, 160px);
  }

  /* Margin Left and Right */
  .mx-0 {
    margin-right: var(--spacing-0, 0px);
    margin-left: var(--spacing-0, 0px);
  }

  .mx-10 {
    margin-right: var(--spacing-10, 1px);
    margin-left: var(--spacing-10, 1px);
  }

  .mx-25 {
    margin-right: var(--spacing-25, 2px);
    margin-left: var(--spacing-25, 2px);
  }

  .mx-50 {
    margin-right: var(--spacing-50, 4px);
    margin-left: var(--spacing-50, 4px);
  }

  .mx-75 {
    margin-right: var(--spacing-75, 6px);
    margin-left: var(--spacing-75, 6px);
  }

  .mx-100 {
    margin-right: var(--spacing-100, 8px);
    margin-left: var(--spacing-100, 8px);
  }

  .mx-200 {
    margin-right: var(--spacing-200, 16px);
    margin-left: var(--spacing-200, 16px);
  }

  .mx-300 {
    margin-right: var(--spacing-300, 24px);
    margin-left: var(--spacing-300, 24px);
  }

  .mx-400 {
    margin-right: var(--spacing-400, 32px);
    margin-left: var(--spacing-400, 32px);
  }

  .mx-450 {
    margin-right: var(--spacing-450, 40px);
    margin-left: var(--spacing-450, 40px);
  }

  .mx-500 {
    margin-right: var(--spacing-500, 48px);
    margin-left: var(--spacing-500, 48px);
  }

  .mx-600 {
    margin-right: var(--spacing-600, 64px);
    margin-left: var(--spacing-600, 64px);
  }

  .mx-700 {
    margin-right: var(--spacing-700, 80px);
    margin-left: var(--spacing-700, 80px);
  }

  .mx-800 {
    margin-right: var(--spacing-800, 96px);
    margin-left: var(--spacing-800, 96px);
  }

  .mx-900 {
    margin-right: var(--spacing-900, 128px);
    margin-left: var(--spacing-900, 128px);
  }

  .mx-1000 {
    margin-right: var(--spacing-1000, 160px);
    margin-left: var(--spacing-1000, 160px);
  }

  /* Margin Top */
  .mt-0 {
    margin-top: var(--spacing-0, 0px);
  }

  .mt-10 {
    margin-top: var(--spacing-10, 1px);
  }

  .mt-25 {
    margin-top: var(--spacing-25, 2px);
  }

  .mt-50 {
    margin-top: var(--spacing-50, 4px);
  }

  .mt-75 {
    margin-top: var(--spacing-75, 6px);
  }

  .mt-100 {
    margin-top: var(--spacing-100, 8px);
  }

  .mt-200 {
    margin-top: var(--spacing-200, 16px);
  }

  .mt-300 {
    margin-top: var(--spacing-300, 24px);
  }

  .mt-400 {
    margin-top: var(--spacing-400, 32px);
  }

  .mt-450 {
    margin-top: var(--spacing-450, 40px);
  }

  .mt-500 {
    margin-top: var(--spacing-500, 48px);
  }

  .mt-600 {
    margin-top: var(--spacing-600, 64px);
  }

  .mt-700 {
    margin-top: var(--spacing-700, 80px);
  }

  .mt-800 {
    margin-top: var(--spacing-800, 96px);
  }

  .mt-900 {
    margin-top: var(--spacing-900, 128px);
  }

  .mt-1000 {
    margin-top: var(--spacing-1000, 160px);
  }

  /* Margin Right */
  .mr-0 {
    margin-right: var(--spacing-0, 0px);
  }

  .mr-10 {
    margin-right: var(--spacing-10, 1px);
  }

  .mr-25 {
    margin-right: var(--spacing-25, 2px);
  }

  .mr-50 {
    margin-right: var(--spacing-50, 4px);
  }

  .mr-75 {
    margin-right: var(--spacing-75, 6px);
  }

  .mr-100 {
    margin-right: var(--spacing-100, 8px);
  }

  .mr-200 {
    margin-right: var(--spacing-200, 16px);
  }

  .mr-300 {
    margin-right: var(--spacing-300, 24px);
  }

  .mr-400 {
    margin-right: var(--spacing-400, 32px);
  }

  .mr-450 {
    margin-right: var(--spacing-450, 40px);
  }

  .mr-500 {
    margin-right: var(--spacing-500, 48px);
  }

  .mr-600 {
    margin-right: var(--spacing-600, 64px);
  }

  .mr-700 {
    margin-right: var(--spacing-700, 80px);
  }

  .mr-800 {
    margin-right: var(--spacing-800, 96px);
  }

  .mr-900 {
    margin-right: var(--spacing-900, 128px);
  }

  .mr-1000 {
    margin-right: var(--spacing-1000, 160px);
  }

  /* Margin Bottom */
  .mb-0 {
    margin-bottom: var(--spacing-0, 0px);
  }

  .mb-10 {
    margin-bottom: var(--spacing-10, 1px);
  }

  .mb-25 {
    margin-bottom: var(--spacing-25, 2px);
  }

  .mb-50 {
    margin-bottom: var(--spacing-50, 4px);
  }

  .mb-75 {
    margin-bottom: var(--spacing-75, 6px);
  }

  .mb-100 {
    margin-bottom: var(--spacing-100, 8px);
  }

  .mb-200 {
    margin-bottom: var(--spacing-200, 16px);
  }

  .mb-300 {
    margin-bottom: var(--spacing-300, 24px);
  }

  .mb-400 {
    margin-bottom: var(--spacing-400, 32px);
  }

  .mb-450 {
    margin-bottom: var(--spacing-450, 40px);
  }

  .mb-500 {
    margin-bottom: var(--spacing-500, 48px);
  }

  .mb-600 {
    margin-bottom: var(--spacing-600, 64px);
  }

  .mb-700 {
    margin-bottom: var(--spacing-700, 80px);
  }

  .mb-800 {
    margin-bottom: var(--spacing-800, 96px);
  }

  .mb-900 {
    margin-bottom: var(--spacing-900, 128px);
  }

  .mb-1000 {
    margin-bottom: var(--spacing-1000, 160px);
  }

  /* Margin Left */
  .ml-0 {
    margin-right: var(--spacing-0, 0px);
  }

  .ml-10 {
    margin-right: var(--spacing-10, 1px);
  }

  .ml-25 {
    margin-right: var(--spacing-25, 2px);
  }

  .ml-50 {
    margin-right: var(--spacing-50, 4px);
  }

  .ml-75 {
    margin-right: var(--spacing-75, 6px);
  }

  .ml-100 {
    margin-right: var(--spacing-100, 8px);
  }

  .ml-200 {
    margin-right: var(--spacing-200, 16px);
  }

  .ml-300 {
    margin-right: var(--spacing-300, 24px);
  }

  .ml-400 {
    margin-right: var(--spacing-400, 32px);
  }

  .ml-450 {
    margin-right: var(--spacing-450, 40px);
  }

  .ml-500 {
    margin-right: var(--spacing-500, 48px);
  }

  .ml-600 {
    margin-right: var(--spacing-600, 64px);
  }

  .ml-700 {
    margin-right: var(--spacing-700, 80px);
  }

  .ml-800 {
    margin-right: var(--spacing-800, 96px);
  }

  .ml-900 {
    margin-right: var(--spacing-900, 128px);
  }

  .ml-1000 {
    margin-right: var(--spacing-1000, 160px);
  }

  /* Text Wrap */
  .text-wrap {
    text-wrap: wrap;
  }

  .text-nowrap {
    text-wrap: nowrap;
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .image-only {
    .ow-content-grid__image {
      margin: calc(var(--spacing-250, 20px) * -1);
    }
  }

  /* sm */
  @media screen and (min-width: 640px) {
    .sm-mb-0 {
      margin-bottom: var(--spacing-0, 0px);
    }

    .screen-sm__mb-100 {
      margin-bottom: var(--spacing-100, 8px);
    }

    .screen-sm__-mb-100 {
      margin-bottom: calc(var(--spacing-100, 8px) * -1);
    }
  }
}

/* Interim Patches */
.item-page,
.orca-modal,
.orca-contentful-content {
  h1,
  h2,
  h3,
  .h1,
  .h2,
  .h3 {
    font-weight: 400;
  }

  .bg-primary {
    color: unset;
  }

  /* SKU tile grid patches */
  .ow-product-tile a {
    padding-bottom: 2px;
  }

  .ow-product-tile a:focus-visible {
    outline-offset: -2px;
  }

  .ow-product-tile .ow-compare-button {
    display: none;
  }

  .ow-tile-grid .ow-tile-grid__item {
    background: var(--white, #fff);
  }

  .ow-tile-grid .ow-tile-grid__item:hover {
    border-color: var(--brand-primary-500, #001080);
  }

  .ow-product-tile .ow-price {
    margin-bottom: 10px;
  }

  .ow-product-tile .product-name {
    margin-bottom: 10px;
    color: var(--grey-800, #313131);
    font: var(--label-font-default);
  }

  .ow-product-tile .product-name a {
    color: inherit;
  }
  /* END SKU tile grid patches */

  /* ow-content-grid--borderless */
  .ow-content-grid--borderless .ow-content-grid__item {
    border: none;
  }

  .ow-content-grid--borderless .ow-content-grid__item,
  .ow-content-grid--borderless .ow-content-grid__image {
    border-radius: 0;
  }

  .ow-content-grid--borderless a.ow-content-grid__item {
    border: 1px solid transparent;
  }

  .ow-content-grid--borderless a.ow-content-grid__item:hover {
    border-color: var(--brand-primary-500, #001080);
  }
  /* END ow-content-grid--borderless */

  /* ow-content-grid--dark */
  .ow-content-grid.ow-content-grid--dark {
    margin: 0 0 20px;
  }

  .ow-content-grid--dark .ow-content-grid__item,
  .ow-content-grid--dark .ow-content-grid__image {
    border-radius: 0;
  }
  /* END ow-content-grid--dark */

  #officeworks-carousel .carousel-inner>.item img {
    max-width: unset;
    width: 100% !important;
  }

  #officeworks-carousel .ow-slider .carousel-control.left, 
  #officeworks-carousel .ow-slider .carousel-control.right {
    width: 60px;
  }
}