:root {
  --theme-dark-bg: var(--greyscale-900, #252525);
  --theme-light-bg: var(--greyscale-200, #f7f7f7);

  --onepass-greyDarker: #666;
  --onepass-purpleBF: #3a016a;
  --onepass-purple: #9900f1;
  --onepass-purpleWeak: #f5e4ff;
  --onepass-border-radius: 12px;
}

.item-page article.full-width-page {
  margin-top: 0;
}

.full-width-page {
  container-name: width-checker;
  container-type: inline-size;

  main:has(&) {
    padding-top: unset;
  }

  main:has(&) > .container-fluid {
    max-width: unset;
    padding: unset;
  }

  /* sets [content] to a centred 1200px max-width with 10px padding on the sides.
  IF [section] IS NOT .full-width-section
  OR IF [.full-width-section__wrapper] DOES NOT HAVE section */
  section:not(.full-width-section),
  .full-width-section__wrapper:not(:has(section)) {
    max-width: 1220px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 10px;
  }

  .squishify-container > :where([class$="__container"], [class$="__wrapper"]) {
    max-width: 1020px;
    margin-right: auto;
    margin-left: auto;
  }
}

.item-page .theme-dark {
  background: var(--theme-dark-bg);
  color: white;

  :is(h1, h2, h3, h4, h5, p, ol, ul, li, a, .hyperlink, .hyperlink:hover) {
    color: inherit;
  }

  :focus-visible,
  .banner-link:focus-within {
    outline-color: white;
  }

  .content-grid.content-grid--borderless .content-grid__item:hover,
  .banner-link:hover {
    border-color: white;
  }

  .btn {
    border-color: var(--white, #fff) !important;
    background: transparent !important;
    color: var(--white, #fff) !important;

    &:hover {
      border-color: var(--white, #fff) !important;
      background: var(--white, #fff) !important;
      color: var(--theme-dark-bg) !important;
    }
  }
}

.item-page .theme-light {
  background: var(--theme-light-bg);
}

#shop-low-prices {
  h5 {
    text-shadow: 0.05em 0 var(--theme-dark-bg), 0 0.05em var(--theme-dark-bg), -0.05em 0 var(--theme-dark-bg), 0 -0.05em var(--theme-dark-bg), -0.05em -0.05em var(--theme-dark-bg), -0.05em 0.05em var(--theme-dark-bg), 0.05em -0.05em var(--theme-dark-bg), 0.05em 0.05em var(--theme-dark-bg);
  }

  .content-grid.content-grid--borderless .content-grid__item:hover {
    border-color: transparent;
  }

  .content-grid__item__image-container {
    position: relative;

    img {
      z-index: 9;
      position: relative;
    }

    &::before {
      display: block;
      position: absolute;
      top: 0;
      aspect-ratio: 1/1;
      width: 100%;
      border-radius: 1000px;
      background: var(--greyscale-700, #313131);
      background: radial-gradient(circle, rgba(118, 118, 118, 1) 0%, rgba(37, 37, 37, 1) 70%);
      content: "";
    }
  }

  :is(.content-grid__item, a.content-grid__item) .content-grid__item__image-container::before {
    --dark-theme--content-grid__item--scale--off-hover: scale(1);
    --dark-theme--content-grid__item--scale--on-hover: scale(1.5);

    pointer-events: none;

    -webkit-animation: off-hover 0.1s linear alternate both;
    animation: off-hover 0.1s linear alternate both;
  }

  :is(.content-grid__item, a.content-grid__item):hover .content-grid__item__image-container::before {
    -webkit-animation: on-hover 0.2s linear alternate both;
    animation: on-hover 0.2s linear alternate both;
  }
}

/* ----------------------------------------------
 * Generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation on-hover, off-hover
 * ----------------------------------------
 */

@-webkit-keyframes on-hover {
  0% {
    transform: var(--dark-theme--content-grid__item--scale--off-hover);
  }

  100% {
    transform: var(--dark-theme--content-grid__item--scale--on-hover);
  }
}

@keyframes on-hover {
  0% {
    transform: var(--dark-theme--content-grid__item--scale--off-hover);
  }

  100% {
    transform: var(--dark-theme--content-grid__item--scale--on-hover);
  }
}

@-webkit-keyframes off-hover {
  0% {
    transform: var(--dark-theme--content-grid__item--scale--on-hover);
  }

  100% {
    transform: var(--dark-theme--content-grid__item--scale--off-hover);
  }
}

@keyframes off-hover {
  0% {
    transform: var(--dark-theme--content-grid__item--scale--on-hover);
  }

  100% {
    transform: var(--dark-theme--content-grid__item--scale--off-hover);
  }
}

#BF-hero-banner {
  display: grid;
  position: relative;
  grid-template-columns: 1fr;

  @media only screen and (min-width: 640px) {
    grid-template-columns: 1fr min(50%, 563px);
  }
}

#BF-text-container {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-400, 32px);
  padding-bottom: var(--spacing-450, 40px);
  gap: var(--spacing-300, 24px);
  background: var(--black, #000);
  color: var(--white, #fff);
  text-wrap: pretty;

  @media only screen and (min-width: 640px) {
    padding-right: var(--spacing-450, 40px);
    padding-bottom: var(--spacing-400, 32px);
  }

  :where(h1, .h1, h2, .h2) {
    color: inherit;
    font-size: clamp(2.6rem, 1.786vw + 1.457rem, 3.6rem);
    line-height: 1.222222;

    @media only screen and (min-width: 640px) {
      width: 95%;
    }
  }

  &::after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    aspect-ratio: 597 / 16;
    width: 100%;
    height: auto;
    background: url("data:image/svg+xml,%3Csvg width='597' height='16' viewBox='0 0 597 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16V0H58V16H0Z' fill='%23DA192E'/%3E%3Cpath d='M77 16V0H135V16H77Z' fill='%23DA192E'/%3E%3Cpath d='M154 16V0H212V16H154Z' fill='%23DA192E'/%3E%3Cpath d='M231 16V0H289V16H231Z' fill='%23DA192E'/%3E%3Cpath d='M308 16V0H366V16H308Z' fill='%23DA192E'/%3E%3Cpath d='M385 16V0H443V16H385Z' fill='%23DA192E'/%3E%3Cpath d='M462 16V0H520V16H462Z' fill='%23DA192E'/%3E%3Cpath d='M539 16V0H597V16H539Z' fill='%23DA192E'/%3E%3C/svg%3E%0A") no-repeat 0 0/100%;
    content: "";

    @media only screen and (min-width: 640px) {
      right: 0;
      left: unset;
      aspect-ratio: 18 / 360;
      width: auto;
      height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='360' viewBox='0 0 18 360' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 264.243L18 191.515L-7.3647e-06 191.515L-4.18569e-06 264.243L18 264.243ZM18 168.485L18 95.7579L-1.15504e-05 95.7579L-8.3714e-06 168.485L18 168.485ZM18 360L18 287.273L-3.17899e-06 287.273L0 360L18 360ZM18 72.7274L18 -7.86806e-07L-1.57361e-05 0L-1.25571e-05 72.7274L18 72.7274Z' fill='%23DA192E'%3E%3C/path%3E%3C/svg%3E");
    }
  }

  .hyperlink {
    color: var(--white, #fff);
  }
}

@media only screen and (min-width: 640px) {
  #BF-img-container img {
    height: 100%;
    object-fit: cover;
  }
}

.duo-banners {
  container-name: duo-banners;
  container-type: inline-size;
}

.duo-banners__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: min(var(--spacing-300, 24px), 4cqw) 0;

  @media only screen and (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 min(var(--spacing-300, 24px), 2cqw);
  }
}

#content-grid--low-prices {
  --content-grid__item__padding__image-offset: 0 0 var(--content-grid__item__padding);
  justify-content: space-evenly;

  .content-grid__item {
    max-width: 240px;
    overflow: visible;
  }
}

#content-grid--extra {
  @media only screen and (min-width: 640px) {
    --content-grid__amount-per-row: 2;
  }
}

/* Black Friday */
.item-page .bf-banner {
  container-name: black-friday;
  container-type: inline-size;
  position: relative;
  padding: var(--spacing-400, 32px) var(--spacing-400, 80px);
  border-radius: var(--onepass-border-radius);
  background: var(--onepass-purple);

  .bf-banner__container {
    display: grid;
    align-items: center;
    justify-items: center;
  }

  .bf-banner__half-price {
    position: relative;

    @container black-friday (width < 1040px) and (width > 640px) {
      width: 42cqw;
    }
  }

  .bf-banner__cta {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    height: 100%;
    gap: var(--spacing-200);
    text-align: center;

    &::before {
      content: "";
    }

    .btn {
      padding: 0.5em 1.5em;
      font-size: clamp(1.6rem, 0.714vw + 1.143rem, 2rem);
      line-height: 1.5;
    }

    p {
      margin-top: auto;
      margin-bottom: calc(var(--spacing-200, 16px) * -1);
      color: var(--onepass-purpleWeak);
      font-size: max(0.85714em, 10px);
      line-height: 1.2;
      text-wrap: pretty;
    }
  }

  .btn-onepass-secondary {
    border-color: var(--onepass-greyDarker) !important;
    background: var(--white, #fff) !important;
    color: var(--grey-900, #252525) !important;

    &:hover {
      border-color: var(--onepass-greyDarker) !important;
      background: var(--white, #fff) !important;
      box-shadow: 0 0 0 3px var(--onepass-greyDarker);
    }

    &.btn[target="_blank"]::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='%23252525'/%3E%3Cpath d='M10 1V2H13.293L9 6.293L9.707 7L14 2.707V6H15V1H10Z' fill='%23252525'/%3E%3C/svg%3E");
    }
  }

  @media only screen and (min-width: 640px) {
    .bf-banner__container {
      grid-template-columns: minmax(33.3334cqw, 408.89697265625px) minmax(33.3334cqw, 346.8623046875px) auto;
    }

    .bf-banner__half-price {
      left: min(var(--spacing-500, 48px), 4cqw);
    }

    .bf-banner__onesie {
      margin: calc(var(--spacing-200) * -1) 0;
    }

    .bf-banner__cta {
      grid-template-rows: 1fr auto 1fr;
    }
  }
}

#why-shop-at-officeworks {
  .content-grid {
    --content-grid__amount-per-row: 1;

    img {
      border-radius: var(--spacing-50, 4px);
    }
  }
}

.BF-always-on-hero {
  .BF-always-on-hero__container {
    display: grid;
    position: relative;
    grid-template-columns: 1fr;

    @media only screen and (min-width: 640px) {
      grid-template-columns: 1fr min(50%, 563px);
    }
  }

  .BF-always-on-hero__text-container.themed-section--blackfriday {
    --theme-base--primary: black;
  }

  .BF-always-on-hero__text-container {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-400, 32px);
    padding-bottom: var(--spacing-450, 40px);
    gap: var(--spacing-300, 24px);
    text-wrap: pretty;

    @media only screen and (min-width: 640px) {
      padding-right: var(--spacing-450, 40px);
      padding-bottom: var(--spacing-400, 32px);
    }

    :where(h1, .h1, h2, .h2) {
      font-size: clamp(2.6rem, 1.786vw + 1.457rem, 3.6rem);
      line-height: 1.222222;
      

      @media only screen and (min-width: 640px) {
        width: 95%;
      }
    }

    &::after {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      aspect-ratio: 597 / 16;
      width: 100%;
      height: auto;
      background: url("data:image/svg+xml,%3Csvg width='597' height='16' viewBox='0 0 597 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16V0H58V16H0Z' fill='%23DA192E'/%3E%3Cpath d='M77 16V0H135V16H77Z' fill='%23DA192E'/%3E%3Cpath d='M154 16V0H212V16H154Z' fill='%23DA192E'/%3E%3Cpath d='M231 16V0H289V16H231Z' fill='%23DA192E'/%3E%3Cpath d='M308 16V0H366V16H308Z' fill='%23DA192E'/%3E%3Cpath d='M385 16V0H443V16H385Z' fill='%23DA192E'/%3E%3Cpath d='M462 16V0H520V16H462Z' fill='%23DA192E'/%3E%3Cpath d='M539 16V0H597V16H539Z' fill='%23DA192E'/%3E%3C/svg%3E%0A") no-repeat 0 0/100%;
      content: "";

      @media only screen and (min-width: 640px) {
        right: 0;
        left: unset;
        aspect-ratio: 18 / 360;
        width: auto;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='360' viewBox='0 0 18 360' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 264.243L18 191.515L-7.3647e-06 191.515L-4.18569e-06 264.243L18 264.243ZM18 168.485L18 95.7579L-1.15504e-05 95.7579L-8.3714e-06 168.485L18 168.485ZM18 360L18 287.273L-3.17899e-06 287.273L0 360L18 360ZM18 72.7274L18 -7.86806e-07L-1.57361e-05 0L-1.25571e-05 72.7274L18 72.7274Z' fill='%23DA192E'%3E%3C/path%3E%3C/svg%3E");
      }
    }

    .hyperlink {
      color: var(--white, #fff);
    }
  }

  @media only screen and (min-width: 640px) {
    .BF-always-on-hero__img-container img {
      height: 100%;
      object-fit: cover;
    }
  }
}