/* Deprecated - linking for older pages. */
@import url(https://www.officeworks.com.au/resources/orca/main/orca-main-utility-classes.css);

  /* New version of utility class stylesheet. Published 23/10/2025. */
@import url(https://www.officeworks.com.au/resources/orca/main/orca-utility-classes.css);

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

  /* 2.6.0 - Changed from is() */
  :where(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, normal normal 600 var(--font-size-900, 36px) / var(--line-height-1000, 44px) var(--officeworks-font-family, Arial));
  }

  h2,
  .h2 {
    font: var(--h2-font, normal normal 600 var(--font-size-700, 26px) / var(--line-height-800, 30px) var(--officeworks-font-family, Arial));
  }

  h3,
  .h3 {
    font: var(--h3-font, normal normal 600 var(--font-size-500, 20px) / var(--line-height-600, 26px) var(--officeworks-font-family, Arial));
  }

  h4,
  .h4 {
    font: var(--h4-font, normal normal 700 var(--font-size-400, 18px) / var(--line-height-400, 22px) var(--primary-font-family, Arial));
  }

  h5,
  .h5 {
    font: var(--h5-font, normal normal 700 var(--font-size-300, 16px) / var(--line-height-400, 22px) var(--primary-font-family, Arial));
  }

  :where(p, ul, ol) {
    margin: 0;
    font: var(--body-font, normal normal 400 var(--font-size-300, 16px) / var(--line-height-400, 22px) var(--primary-font-family, Arial));
    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);
    }
  }

  /* If the anchor tag is not styled as a button */
  /* 2.6.0 - removed border-bottom: none */
  a[target="_blank"] {
    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");
    }

    /* 2.6.0 - add :has() to stop icon appearing on banners */
    &:has(picture, img)::after {
      display: none !important;
    }
  }

  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 {
    width: fit-content;
    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 {
    width: 100%;
    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,
[data-ref="webuikit"] .orca-contentful-content,
[data-ref="ow-app"] .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;

    /* 2.6.0 - added display block to semantic picture to stop inline gap */
    picture {
      display: block;
    }

    &.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;
    }
  }
}

/* Interim Patches */
.item-page,
.orca-modal,
[data-ref="webuikit"] .orca-contentful-content,
[data-ref="ow-app"] .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 {
    height: 50px;
    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 {
    width: 100% !important;
    max-width: unset;
  }

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