/* https://github.com/necolas/idiomatic-css */
/* @import url(https://www.officeworks.com.au/resources/orca/main/orca-utility-classes.css); */

/* @import url(https://www.officeworks.com.au/resources/orca/main/font/OfficeworksWeb2026Font.css); */

/* ==========================================================================
  General Classes & Automatic Styles
  ========================================================================== */
.item-page {
  html:has(&) {
    font-size: 16px;
  }

  .container-fluid:has(&) {
    max-width: unset;
    padding-right: 0;
    padding-left: 0;
  }

  /* https://web.dev/learn/design/picture-element */
  img {
    display: block;
    width: 100%;
    max-width: unset;
    height: auto;
    max-inline-size: 100%;
    block-size: auto;
    object-fit: cover;
    object-position: center;
  }

  /* Headings
    ========================================================================== */
  :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) {
    margin: 0;
    color: var(--primary-font-color, #252525);
  }

  h1,
  .h1 {
    font: 600 round(2.25rem, 1px) / round(1.225em, 1px) OfficeworksWeb2026, Arial;
  }

  h2,
  .h2 {
    font: 600 round(1.625rem, 1px) / round(1.225em, 1px) OfficeworksWeb2026, Arial;
  }

  h3,
  .h3 {
    font: 600 round(1.25rem, 1px) / round(1.225em, 1px) OfficeworksWeb2026, Arial;
  }

  h4,
  .h4 {
    font: 700 round(1.125rem, 1px) / round(1.225em, 1px) Arial;
  }

  h5,
  .h5 {
    font: 700 round(1rem, 1px) / round(1.375em, 1px) Arial;
  }

  /* Body Text
    ========================================================================== */
  p,
  ul,
  ol {
    margin: 0;
    font: 400 round(1rem, 1px) / round(1.375em, 1px) Arial;
  }

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

  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);
  }

  /* Button
    ========================================================================== */
  /* .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;
    }
  } */

  .button {
    position: relative;
    width: fit-content;
    /* margin: auto; */
    border: 2px solid var(--button-border-colour);
    border-radius: 100em;
    background-color: var(--button-background-colour);
    color: var(--button-text-colour);
    font-weight: 700;
    line-height: 1.5em;
    font-family: Arial;
  }

  .button-small {
    padding: round(0.4em, 1px) round(1.15em, 1px);
    font-size: max(0.875em, 14px);
  }

  .button-medium {
    padding: 0.5em 1.5em;
    font-size: max(1em, 16px);
  }

  .button-large {
    padding: 0.75em 1.5em;
    font-size: max(1em, 16px);
  }

  .button-primary {
    --button-text-colour: #fff;
    --button-background-colour: var(--brand-primary-500, #001080);
    --button-border-colour: var(--button-background-colour);

    &:hover {
      --button-background-colour: var(--brand-primary-900, #000963);
    }
  }

  .button-secondary {
    --button-text-colour: var(--brand-primary-500, #001080);
    --button-background-colour: #fff;
    --button-border-colour: var(--button-text-colour);

    &:hover {
      --button-background-colour: var(--brand-primary-100, #e0e2f0);
    }
  }

  .nu {
    --button-shadow-offsetY: 0.15em;
    --button-box-shadow-colour: var(--button-border-colour);
    bottom: 0;
    box-shadow: 0 var(--button-shadow-offsetY) 0 var(--button-box-shadow-colour);
    

    &:active {
      bottom: calc(var(--button-shadow-offsetY) * -1);
      box-shadow: 0 0 0 var(--button-box-shadow-colour);
    }

    &:focus {
      --button-outline-focus-colour: var(--brand-secondary-500, #da192e);

      outline: 2px dashed var(--button-outline-focus-colour);
      outline-offset: -4px;
    }

    &.button-primary {
      --button-box-shadow-colour: var(--brand-primary-100, #e0e2f0);
    }
  }

  .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
    ========================================================================== */

  .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 white;

    /* 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;
    }
  }

  /* ==========================================================================
    Patches
    ========================================================================== */
  .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;
  }
}

@font-face {
  font-style: normal;
  font-weight: 200;
  src: url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-ExtraLight.eot"); /* IE9 Compat Modes */
  src: url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-ExtraLight.eot") format("embedded-opentype") /* IE6-IE8 */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-ExtraLight.woff") format("woff") /* Pretty Modern Browsers */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-ExtraLight.ttf") format("truetype") /* Safari, Android, iOS */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-ExtraLight.svg") format("svg"); /* Legacy iOS */
  font-family: "OfficeworksWeb2026";
  font-display: swap;
}
@font-face {
  font-style: normal;
  font-weight: normal;
  src: url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Book.eot"); /* IE9 Compat Modes */
  src: url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Book.eot") format("embedded-opentype") /* IE6-IE8 */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Book.woff") format("woff") /* Pretty Modern Browsers */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Book.ttf") format("truetype") /* Safari, Android, iOS */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Book.svg") format("svg"); /* Legacy iOS */
  font-family: "OfficeworksWeb2026";
  font-display: swap;
}
@font-face {
  font-style: normal;
  font-weight: 500;
  src: url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Medium.eot"); /* IE9 Compat Modes */
  src: url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Medium.eot") format("embedded-opentype") /* IE6-IE8 */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Medium.woff") format("woff") /* Pretty Modern Browsers */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Medium.ttf") format("truetype") /* Safari, Android, iOS */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Medium.svg") format("svg"); /* Legacy iOS */
  font-family: "OfficeworksWeb2026";
  font-display: swap;
}
@font-face {
  font-style: normal;
  font-weight: 600;
  src: url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Demi.eot"); /* IE9 Compat Modes */
  src: url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Demi.eot") format("embedded-opentype") /* IE6-IE8 */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Demi.woff") format("woff") /* Pretty Modern Browsers */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Demi.ttf") format("truetype") /* Safari, Android, iOS */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Demi.svg") format("svg"); /* Legacy iOS */
  font-family: "OfficeworksWeb2026";
  font-display: swap;
}
@font-face {
  font-style: normal;
  font-weight: 700;
  src: url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Bold.eot"); /* IE9 Compat Modes */
  src: url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Bold.eot") format("embedded-opentype") /* IE6-IE8 */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Bold.woff") format("woff") /* Pretty Modern Browsers */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Bold.ttf") format("truetype") /* Safari, Android, iOS */, url("/resources/fonts/OfficeWorksWeb/OfficeworksWeb-Bold.svg") format("svg"); /* Legacy iOS */
  font-family: "OfficeworksWeb2026";
  font-display: swap;
}