/* Component styles - Buttons, icons, modals, cards, and UI components */

[class*=pip-btn--icon].pip-btn--xsmall .pip-btn__inner::after {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  right: -0.375rem;
  bottom: -0.375rem
}

.pip-btn:hover .pip-btn__inner {
  background: var(--background-hover);
  box-shadow: var(--box-shadow-hover)
}

.pip-btn:active .pip-btn__inner {
  background: var(--background-press);
  box-shadow: var(--box-shadow-press)
}

.pip-btn:hover,
.pip-btn:active,
.pip-btn:focus {
  text-decoration: none;
  color: var(--foreground)
}

.pip-btn:disabled {
  cursor: default
}

.pip-btn:disabled .pip-btn__inner {
  background-color: var(--disabled-background);
  color: var(--disabled-foreground);
  box-shadow: none
}

.pip-btn:active:not(:disabled) .pip-btn__inner {
  transform: scale(0.97)
}

@media (forced-colors:active) {
  .pip-btn__inner {
    border: 1px solid rgba(0, 0, 0, 0)
  }

  .pip-btn:disabled .pip-btn__inner {
    color: GrayText;
    border-color: GrayText
  }
}

@keyframes pip-btn-loader {

  0%,
  100% {
    transform: translate(-50%, -160%);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1)
  }

  40% {
    transform: translate(-50%, 20%);
    animation-timing-function: cubic-bezier(0, 0, 0, 1)
  }
}

.pip-btn--xsmall .pip-btn__inner::after {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  right: -0.375rem;
  bottom: -0.375rem
}

.pip-btn--small .pip-btn__inner::after {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  right: -0.125rem;
  bottom: -0.125rem
}

@media (prefers-reduced-motion) {
  .pip-svg-icon {
    transition-property: none
  }
}

@keyframes pip-icon-rotate {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(359deg)
  }
}

@keyframes modal-delayed-fade-in {
  0% {
    opacity: 0
  }

  50% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes pip-modalSlideToLeft {
  from {
    transform: translateX(100%)
  }

  to {
    transform: translateX(0)
  }
}

@keyframes pip-modalSlideToRight {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(100%)
  }
}

@keyframes pip-modalSlideFromLeft {
  from {
    transform: translateX(-100%)
  }

  to {
    transform: translateX(0)
  }
}

@keyframes pip-modalSlideFromRight {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-100%)
  }
}

@keyframes pip-modalSlideDown {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(100%)
  }
}

@keyframes pip-modalSlideUp {
  from {
    transform: translateY(100%)
  }

  to {
    transform: translateY(0)
  }
}

@keyframes pip-modalEnter {
  from {
    clip-path: inset(50%)
  }

  to {
    clip-path: inset(0%)
  }
}

@keyframes pip-modalClose {
  from {
    clip-path: inset(0%)
  }

  to {
    clip-path: inset(50%)
  }
}

@keyframes pip-modalContentEnter {
  from {
    transform: scale(0.8);
    opacity: 0;
    transform-origin: center center
  }

  to {
    transform: scale(1);
    opacity: 1;
    transform-origin: center center
  }
}

@keyframes pip-modalContentClose {
  from {
    transform: scale(1);
    opacity: 1;
    transform-origin: center center
  }

  to {
    transform: scale(0.8);
    opacity: 0;
    transform-origin: center center
  }
}

@keyframes pip-modalBackdropEnter {
  0% {
    visibility: hidden
  }

  1% {
    visibility: visible
  }
}

@keyframes pip-modalBackdropClose {

  0%,
  99% {
    visibility: visible
  }

  100% {
    visibility: hidden
  }
}

.pip-modal-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 400;
  pointer-events: none;
  transition: visibility cubic-bezier(0, 0, 1, 1) 200ms;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}

.pip-modal-wrapper__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity cubic-bezier(0, 0, 1, 1) 200ms;
  pointer-events: none;
  visibility: hidden
}

.pip-modal-wrapper__backdrop--dark {
  background: rgba(var(--colour-static-black, 17, 17, 17), 0.4)
}

.pip-modal-wrapper--close>.pip-modal-wrapper__backdrop {
  animation: pip-modalBackdropClose 200ms
}

@media (prefers-reduced-motion) {
  .pip-modal-wrapper {
    transition: none
  }

  .pip-modal-wrapper__backdrop {
    animation-duration: 0s;
    transition-duration: 0s;
    transition: none
  }
}

.pip-carousel {
  position: relative;
  --focus-margin-start: 0rem;
  --focus-margin-end: 0rem
}

.pip-carousel:has(.pip-carousel-slide *:focus-visible) {
  --focus-margin-start: .5rem;
  --focus-margin-end: .5rem
}

.pip-carousel .pip-skip-content__button {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap
}

.pip-carousel .pip-skip-content__button:active,
.pip-carousel .pip-skip-content__button:focus,
.pip-carousel .pip-skip-content__button:focus-visible {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 1;
  background: rgb(var(--colour-static-light-grey, 245, 245, 245));
  color: rgb(var(--colour-static-black, 17, 17, 17));
  border-radius: 64px;
  padding: 1rem 2rem;
  font-weight: bold;
  text-decoration: none
}

.pip-carousel .pip-skip-content__button:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-carousel__wrapper {
  position: relative
}

.pip-carousel__content {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  margin-inline-start: calc(-1*var(--overflow-start, var(--focus-margin-start)));
  margin-inline-end: calc(-1*var(--overflow-end, var(--focus-margin-end)));
  padding-inline-start: var(--overflow-start, var(--focus-margin-start));
  padding-inline-end: var(--overflow-end, var(--focus-margin-end));
  overscroll-behavior-inline: contain;
  --padding-difference: calc(var(--carousel-vertical-padding, 0.5rem) - 0.5rem);
  --clamped-difference: max(min(0rem, var(--padding-difference)), -0.5rem);
  --calculated-additional-padding: calc(-1*var(--clamped-difference));
  padding-block: calc(var(--carousel-vertical-padding, 0.5rem) + var(--calculated-additional-padding));
  margin-block: var(--clamped-difference);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--carousel-item-gap, 1.25rem)
}

.pip-carousel__content:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-carousel--has-scrollbar .pip-carousel__content {
  margin-block-end: 0
}

.pip-carousel .pip-btn.pip-carousel__button {
  position: absolute
}

.pip-carousel__button {
  top: 50%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms, visibility 200ms;
  z-index: 1;
  left: -1rem;
  transform: translateY(-50%)
}

.pip-carousel:hover .pip-carousel__button {
  opacity: 1;
  visibility: visible;
  display: block;
  transition: opacity 200ms, visibility 200ms
}

.pip-carousel:hover .pip-carousel__button--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms, visibility 200ms
}

.pip-carousel__button--right {
  left: auto;
  right: -1rem
}

.pip-carousel-slide {
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  flex-shrink: 0
}

.pip-carousel:not(.pip-carousel--intersection-observer-disabled) .pip-carousel__content {
  scrollbar-width: none
}

.pip-carousel:not(.pip-carousel--intersection-observer-disabled) .pip-carousel__content::-webkit-scrollbar {
  display: none
}

@media not all and (-webkit-min-device-pixel-ratio:0),
not all and (min-resolution:0.001dpcm) {
  .pip-carousel__content {
    scroll-snap-type: x mandatory
  }
}

@media (hover:none) {
  .pip-carousel:hover .pip-carousel__button {
    opacity: 0;
    display: none
  }
}

.pip-carousel__counter--wrapper {
  display: flex;
  align-items: stretch
}

@media (min-width:37.5em) {
  .pip-carousel__button {
    left: -1.25rem;
    right: auto
  }

  .pip-carousel__button--right {
    left: auto;
    right: -1.25rem
  }
}

@media (min-width:56.25em) {
  .pip-carousel__content {
    top: 0
  }

  .pip-carousel__wrapper {
    bottom: auto;
    width: 100%
  }

  .pip-carousel__button {
    display: block
  }
}

.pip-scroll-indicator {
  box-sizing: border-box;
  height: 1.875rem;
  position: relative;
  width: 100%;
  outline: none;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  cursor: pointer
}

.pip-scroll-indicator--dragging .pip-scroll-indicator__bar-wrapper,
.pip-scroll-indicator--dragging .pip-scroll-indicator__bar,
.pip-scroll-indicator:hover .pip-scroll-indicator__bar-wrapper,
.pip-scroll-indicator:hover .pip-scroll-indicator__bar {
  height: 0.25rem
}

.pip-scroll-indicator__bar-wrapper {
  width: 100%;
  background: rgb(var(--colour-neutral-3, 223, 223, 223));
  transform: translateX(0);
  height: 0.125rem;
  display: block;
  border-radius: 4px;
  scrollbar-width: none
}

.pip-scroll-indicator__bar-wrapper::-webkit-scrollbar {
  display: none
}

.pip-scroll-indicator__bar {
  will-change: transform;
  background: rgb(var(--colour-neutral-7, 17, 17, 17));
  position: absolute;
  top: 0;
  bottom: 0;
  height: 0.125rem;
  transform-origin: 0 0;
  display: block;
  border-radius: 4px;
  cursor: grab
}

.pip-scroll-indicator__bar::after {
  content: " ";
  position: absolute;
  top: -0.625rem;
  bottom: -0.625rem;
  left: 0;
  right: 0;
  display: block
}

*:is(.pip-typography-character-set-arabic, .pip-typography-character-set-chinese_simplified, .pip-typography-character-set-chinese_traditional, .pip-typography-character-set-hebrew, .pip-typography-character-set-japanese, .pip-typography-character-set-korean) {
  --skapa-characterset-multiplier: 0
}

:focus:not(:focus-visible) {
  outline: none
}

a[class*=pip-]:focus-visible,
button[class*=pip-]:focus-visible,
[role=button][class*=pip-]:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-link:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-btn:focus-visible,
.pip-tabs__panel:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-btn[class*=inverse]:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-black, 17, 17, 17)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-white, 255, 255, 255)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-btn[class*=image-overlay]:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-white, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-black, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-quantity-stepper__input:focus-visible {
  outline: none
}

.pip-link {
  text-decoration: underline;
  font-weight: 400;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}

.pip-link:focus,
.pip-link:hover,
.pip-link:active {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}

.pip-link:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-product__subgrid {
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-column-gap: .75rem
}

@media (min-width:37.5em) {
  .pip-product__subgrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-column-gap: 1rem
  }
}

@media (min-width:56.25em) {
  .pip-product__subgrid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-column-gap: 1.25rem
  }
}

.pip-product__buy-module-container {
  grid-column: 1/span 4
}

@media (min-width:37.5em) {
  .pip-product__buy-module-container {
    grid-column-end: span 6
  }
}

@media (min-width:56.25em) {
  .pip-product__buy-module-container {
    padding: 0 0 0 2.5rem;
    grid-column: 8/span 5;
    grid-row: 3/span 2;
    align-self: flex-start
  }
}

@media (min-width:75em) {
  .pip-product__buy-module-container {
    grid-column: 8/span 5
  }
}

@media (min-width:56.25em) {
  .pip-product__buy-module-container--sticky {
    top: 6rem;
    position: sticky
  }
}

.pip-product__buy-module-content {
  display: flex;
  flex-direction: column
}

.pip-product__left-top,
.pip-product__left-bottom {
  grid-column: 1/span 4
}

@media (min-width:37.5em) {

  .pip-product__left-top,
  .pip-product__left-bottom {
    grid-column-end: span 6
  }
}

@media (min-width:56.25em) {

  .pip-product__left-top,
  .pip-product__left-bottom {
    grid-column-end: span 7
  }
}

.pip-product__left-top {
  margin: 0-1.25rem;
  position: relative
}

@media (min-width:56.25em) {
  .pip-product__left-top {
    margin: 0;
    grid-row: 3
  }
}

@media (min-width:56.25em) {
  .pip-product__left-bottom {
    grid-row: 4
  }
}

.pip-list-view {
  padding: 0;
  margin: 0
}

.pip-list-view-item {
  width: 100%;
  list-style-type: none;
  border-bottom: 1px rgb(var(--colour-neutral-3, 223, 223, 223)) solid;
  box-sizing: border-box;
  text-decoration: none
}

@keyframes pip-loading-bounce-small {

  0%,
  100% {
    transform: translate(0, -160%);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1)
  }

  40% {
    transform: translate(0, 20%);
    animation-timing-function: cubic-bezier(0, 0, 0, 1)
  }
}

@keyframes pip-loading-bounce {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1)
  }

  40% {
    transform: translateY(2rem) scaleY(1);
    animation-timing-function: ease-in
  }

  50% {
    transform: translateY(2rem) scaleY(0.75);
    animation-timing-function: ease-out
  }

  60% {
    transform: translateY(2rem) scaleY(1);
    animation-timing-function: cubic-bezier(0, 0, 0, 1)
  }

  100% {
    transform: translateY(0)
  }
}

.pip-content-container {
  max-width: 112rem;
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 1.25rem
}

@media (min-width:37.5em) {
  .pip-content-container {
    padding-inline: 2rem
  }
}

@media (min-width:56.25em) {
  .pip-content-container {
    padding-inline: 3rem
  }
}

.pip-content-container__breakout {
  margin-inline: -1.25rem
}

@media (min-width:37.5em) {
  .pip-content-container__breakout {
    margin-inline: -2rem
  }
}

@media (min-width:56.25em) {
  .pip-content-container__breakout {
    margin-inline: 0
  }
}

.pip-product-identifier {
  display: inline-block
}

.pip-product-identifier__label {
  display: block;
  margin-bottom: .5rem;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}

.pip-product-identifier__value {
  display: inline-block;
  background-color: rgb(var(--colour-neutral-7, 17, 17, 17));
  padding: calc(.25rem - 1px) calc(.75rem - 1px);
  border: 1px solid rgb(var(--colour-neutral-7, 17, 17, 17));
  color: rgb(var(--colour-text-and-icon-5, 255, 255, 255))
}

button.pip-rating::after {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  bottom: -0.75rem
}

button.pip-rating:hover .pip-rating__label {
  text-decoration: underline
}

.pip-rating {
  -webkit-appearance: none
}

.pip-rating__stars {
  -webkit-mask-image: var(--svg-star);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: var(--star-width) var(--star-height)
}

.pip-rating__stars::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--rating);
  height: 100%;
  background-color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}

.pip-rating__stars--small {
  -webkit-mask-position: -0.1875rem
}

@keyframes button-fade-out {

  0%,
  90% {
    opacity: 1;
    box-shadow: none
  }

  100% {
    opacity: 0;
    box-shadow: none;
    visibility: hidden
  }
}

@keyframes button-container-fade-move-ltr {
  0% {
    opacity: 1;
    bottom: 50%;
    right: 50%;
    left: auto;
    transform: translate(50%, 50%)
  }

  33% {
    opacity: 0;
    bottom: 50%;
    right: 50%;
    left: auto;
    transform: translate(50%, 50%)
  }

  66% {
    opacity: 0;
    bottom: 1.25rem;
    right: 1.25rem;
    left: auto;
    transform: none
  }

  100% {
    opacity: 1;
    bottom: 1.25rem;
    right: 1.25rem;
    left: auto;
    transform: none
  }
}

@keyframes button-container-fade-move-rtl {
  0% {
    opacity: 1;
    bottom: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, 50%)
  }

  33% {
    opacity: 0;
    bottom: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, 50%)
  }

  66% {
    opacity: 0;
    bottom: 1.25rem;
    left: 1.25rem;
    right: auto;
    transform: none
  }

  100% {
    opacity: 1;
    bottom: 1.25rem;
    left: 1.25rem;
    right: auto;
    transform: none
  }
}

@keyframes button-container-fade-move-rtl-top {
  0% {
    opacity: 1;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%)
  }

  33% {
    opacity: 0;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%)
  }

  66% {
    opacity: 0;
    top: 1.25rem;
    left: 1.25rem;
    right: auto;
    bottom: auto;
    transform: none
  }

  100% {
    opacity: 1;
    top: 1.25rem;
    left: 1.25rem;
    bottom: auto;
    right: auto;
    transform: none
  }
}

@keyframes button-container-fade-move-ltr-top {
  0% {
    opacity: 1;
    top: 50%;
    right: 50%;
    left: auto;
    bottom: auto;
    transform: translate(50%, -50%)
  }

  33% {
    opacity: 0;
    top: 50%;
    right: 50%;
    left: auto;
    bottom: auto;
    transform: translate(50%, -50%)
  }

  66% {
    opacity: 0;
    top: 1.25rem;
    right: 1.25rem;
    left: auto;
    bottom: auto;
    transform: none
  }

  100% {
    opacity: 1;
    top: 1.25rem;
    right: 1.25rem;
    bottom: auto;
    left: auto;
    transform: none
  }
}

.pip-recommendations-wrapper {
  margin: 2.5rem 0
}

@media (min-width:37.5em) {
  .pip-recommendations-wrapper {
    margin-bottom: 4rem
  }
}

.pip-zoom-image {
  cursor: zoom-in;
  background-repeat: no-repeat;
  background-size: 100%;
  will-change: background-position
}

.pip-zoom-image:focus-visible {
  box-shadow: 0 0 0 4px rgb(var(--colour-static-white, 255, 255, 255));
  outline: 2px solid rgb(var(--colour-static-black, 17, 17, 17));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

@keyframes pip-shine {
  to {
    background-position: 0 100%
  }
}

.pip-buy-module {
  margin-top: 1rem;
  margin-bottom: 1rem;
  min-height: 3.5rem
}

.pip-buy-module__buy-button-container {
  display: flex
}

.pip-buy-module__buttons {
  display: flex;
  align-items: flex-start
}

.pip-buy-module__buttons .pip-buy-module__buttons--container {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  flex-direction: column
}

.pip-buy-module__buttons .pip-buy-module__buttons--container .pip-btn--emphasised:not(:last-of-type),
.pip-buy-module__buttons .pip-buy-module__buttons--container .pip-btn--secondary:not(:last-of-type) {
  margin-bottom: 1rem
}

.pip-highlight-reviews {
  background-color: rgb(var(--colour-neutral-2, 245, 245, 245));
  border: 0.0625rem solid rgb(var(--colour-neutral-3, 223, 223, 223));
  padding: 1.5rem;
  margin-bottom: 4rem
}

.pip-highlight-reviews__left-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.pip-highlight-reviews .pip-carousel__content {
  padding-top: unset;
  padding-bottom: unset
}

.pip-highlight-reviews__header-section .pip-highlight-reviews__heading {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  font-size: 1.125rem;
  line-height: 1.444;
  font-weight: 700
}

@media (min-width:37.5em) {
  .pip-highlight-reviews__header-section .pip-highlight-reviews__heading {
    font-size: 1.5rem;
    line-height: 1.45;
    letter-spacing: -0.0042em
  }
}

.pip-highlight-reviews__name {
  margin-top: 1rem;
  align-self: flex-start;
  font-size: .75rem;
  line-height: 1.5;
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118))
}

.pip-highlight-reviews__content-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 3rem
}

@media (max-width:22.5rem) {
  .pip-highlight-reviews__content-wrapper {
    flex-wrap: wrap
  }
}

.pip-highlight-reviews__card {
  background-color: rgb(var(--colour-neutral-1, 255, 255, 255));
  border: 0.0625rem solid rgb(var(--colour-neutral-3, 223, 223, 223));
  border-radius: .75rem;
  display: flex;
  padding: 1rem;
  width: 100%
}

.pip-highlight-reviews__card-total-reviews {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.pip-highlight-reviews__card-total-reviews .pip-highlight-reviews__header {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  font-size: 1.5rem;
  line-height: 1.45;
  letter-spacing: -0.0042em;
  font-weight: 700
}

@media (min-width:37.5em) {
  .pip-highlight-reviews__card-total-reviews .pip-highlight-reviews__header {
    font-size: 2.25rem;
    line-height: 1.333;
    letter-spacing: -0.0063em
  }
}

.pip-highlight-reviews__card-total-reviews .pip-highlight-reviews__description {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  font-size: 1rem;
  line-height: 1.625
}

.pip-highlight-reviews__card-header-section {
  display: flex;
  flex-direction: column;
  margin-top: unset;
  margin-bottom: unset
}

.pip-highlight-reviews__card-header-section .pip-highlight-reviews__description {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  font-size: 1rem;
  line-height: 1.625
}

.pip-highlight-reviews__card-header-section .pip-highlight-reviews__header {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  font-size: 1.5rem;
  line-height: 1.45;
  letter-spacing: -0.0042em;
  font-weight: 700
}

@media (min-width:37.5em) {
  .pip-highlight-reviews__card-header-section .pip-highlight-reviews__header {
    font-size: 2.25rem;
    line-height: 1.333;
    letter-spacing: -0.0063em
  }
}

.pip-highlight-reviews .pip-carousel-slide {
  min-height: 3rem
}

.pip-highlight-reviews__review-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgb(var(--colour-neutral-1, 255, 255, 255));
  border: 0.0625rem solid rgb(var(--colour-neutral-3, 223, 223, 223));
  border-radius: .75rem;
  padding: 1rem;
  width: 15rem;
  height: 100%
}

.pip-highlight-reviews__review-item .pip-highlight-reviews__title {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  font-size: .875rem;
  line-height: 1.571;
  font-weight: 700;
  margin: .75rem 0
}

.pip-highlight-reviews__review-item .pip-highlight-reviews__text {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  font-size: .875rem;
  line-height: 1.571;
  flex-grow: 1
}

.pip-highlight-reviews__review-item .pip-rating {
  margin-bottom: 1rem
}

.pip-highlight-reviews .pip-rating__label {
  font-weight: 700
}

@media (min-width:37.5em) {
  .pip-highlight-reviews {
    background-color: unset;
    padding: unset;
    display: flex
  }

  .pip-highlight-reviews__left-container {
    background-color: rgb(var(--colour-neutral-2, 245, 245, 245));
    gap: .5rem;
    padding: 2rem;
    width: 60%
  }

  .pip-highlight-reviews .pip-carousel {
    margin-bottom: unset
  }

  .pip-highlight-reviews .pip-carousel-slide {
    min-height: 3rem
  }

  .pip-highlight-reviews__right-container {
    flex-grow: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between
  }

  .pip-highlight-reviews__card {
    border: unset;
    border-radius: unset;
    display: block;
    padding: 1.4375rem 0;
    margin: unset
  }

  .pip-highlight-reviews__card-total-reviews .pip-highlight-reviews__header {
    color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
    font-size: 1.5rem;
    line-height: 1.45;
    letter-spacing: -0.0042em;
    font-weight: 700
  }
}

@media (min-width:37.5em) and (min-width:37.5em) {
  .pip-highlight-reviews__card-total-reviews .pip-highlight-reviews__header {
    font-size: 2.25rem;
    line-height: 1.333;
    letter-spacing: -0.0063em
  }
}

@media (min-width:37.5em) {
  .pip-highlight-reviews__card-total-reviews .pip-highlight-reviews__description {
    color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
    font-size: 1rem;
    line-height: 1.625
  }

  .pip-highlight-reviews__card-header-section {
    display: flex;
    flex-direction: column
  }

  .pip-highlight-reviews__card-header-section .pip-highlight-reviews__description {
    color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
    font-size: 1rem;
    line-height: 1.625
  }

  .pip-highlight-reviews__card-header-section .pip-highlight-reviews__header {
    color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
    font-size: 1.5rem;
    line-height: 1.45;
    letter-spacing: -0.0042em;
    font-weight: 700
  }
}

@media (min-width:37.5em) and (min-width:37.5em) {
  .pip-highlight-reviews__card-header-section .pip-highlight-reviews__header {
    font-size: 2.25rem;
    line-height: 1.333;
    letter-spacing: -0.0063em
  }
}

@media (min-width:37.5em) {
  .pip-highlight-reviews__content-wrapper {
    padding: 3.0625rem 0;
    flex-direction: column;
    gap: 2rem
  }
}

@media (min-width:75em) {
  .pip-highlight-reviews__left-container {
    width: 66%
  }
}

.pip-key-facts {
  margin: 1.5rem 0;
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr)
}

@media (min-width:56.25em) {
  .pip-key-facts {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media (max-width:23.375rem) {
  .pip-key-facts {
    grid-template-columns: repeat(2, 1fr)
  }
}

.pip-key-facts__container {
  display: flex;
  flex-direction: column
}

.pip-key-facts__container>svg {
  margin-bottom: .5rem;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  width: 2rem;
  height: 2rem
}

.pip-key-facts__wrapper--hoverable {
  position: relative;
  cursor: default
}

.pip-key-facts__wrapper--hoverable .pip-key-facts__container:focus,
.pip-key-facts__wrapper--hoverable .pip-guarantee__paragraph:focus,
.pip-key-facts .pip-guarantee--hoverable .pip-key-facts__container:focus,
.pip-key-facts .pip-guarantee--hoverable .pip-guarantee__paragraph:focus {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-link-button {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  font-size: .875rem;
  line-height: 1.571;
  border: none;
  width: -moz-fit-content;
  width: fit-content;
  background: rgba(0, 0, 0, 0);
  padding: 0;
  text-align: inherit
}

.pip-link-button:hover,
.pip-link-button:active {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}

.pip-more-ways-to-pay .pip-section {
  flex-wrap: wrap
}

.pip-more-ways-to-pay__payment-header {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 1.5rem;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  font-size: .875rem;
  line-height: 1.571;
  font-weight: 700
}

.pip-more-ways-to-pay__icon {
  margin-inline-start: .5rem
}

.pip-more-ways-to-pay__payment-text {
  margin-inline-end: .5rem
}

.pip-more-ways-to-pay__button {
  border: 0;
  background: none;
  text-align: inherit;
  flex-grow: 1;
  -webkit-user-select: text;
  user-select: text;
  padding: 0;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  font-size: .875rem;
  line-height: 1.571
}

.pip-pip-long-text__text-item {
  padding: 4rem 0;
  display: flex;
  flex-flow: column wrap;
  border-bottom: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223))
}

.pip-pip-long-text__text-item:first-child {
  border-top: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223))
}

@media (min-width:37.5em) {
  .pip-pip-long-text__text-item {
    flex-direction: row
  }

  .pip-pip-long-text__text-item:first-child {
    border-top: none
  }
}

.pip-pip-long-text__badge {
  font-size: .75rem;
  line-height: 1.5;
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
  width: 100%;
  padding-bottom: .75rem;
  letter-spacing: normal
}

.pip-pip-long-text__box {
  width: 100%
}

@media (min-width:37.5em) {
  .pip-pip-long-text__box {
    width: 50%;
    padding-inline-end: .5rem
  }

  .pip-pip-long-text__box:last-child {
    padding-inline: .5rem 0
  }
}

@media (min-width:37.5em) and (min-width:56.25em) {
  .pip-pip-long-text__box:last-child {
    padding-inline-end: 2rem
  }
}

.pip-pip-long-text__header {
  padding-bottom: .75rem;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  font-size: 1.125rem;
  line-height: 1.444;
  font-weight: 700
}

@media (min-width:37.5em) {
  .pip-pip-long-text__header {
    font-size: 1.5rem;
    line-height: 1.45;
    letter-spacing: -0.0042em
  }
}

@media (min-width:37.5em) {
  .pip-pip-long-text__header {
    padding-bottom: 0
  }
}

.pip-pip-long-text__body {
  padding-top: .25rem
}

.pip-price-package__price-module-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start
}

.pip-price-package .pip-favourite-button {
  min-width: 2.5rem;
  display: none
}

@media (min-width:56.25em) {
  .pip-price-package .pip-favourite-button {
    display: block
  }
}

.pip-price-package .pip-price-module {
  margin-bottom: .75rem
}

.pip-price-package__ratings-questions {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap
}

@keyframes circle-1-animation {
  0% {
    transform: scale(0.1);
    transform-origin: 0% 0%;
    opacity: 0
  }

  100% {
    transform: scale(1);
    transform-origin: 0% 0%;
    opacity: 1
  }
}

@keyframes circle-2-animation {
  0% {
    transform: translateX(0);
    transform: scale(0.1);
    transform-origin: 100% 50%;
    opacity: 0
  }

  100% {
    transform: translateX(-6.25rem);
    transform: scale(1);
    transform-origin: 100% 50%;
    opacity: 1
  }
}

@keyframes circle-3-animation {
  0% {
    transform: scale(0.1);
    transform-origin: 100% 50%;
    opacity: 0
  }

  100% {
    transform: scale(1);
    transform-origin: 100% 50%;
    opacity: 1
  }
}

@keyframes circle-4-animation {
  0% {
    transform-origin: 0% 0%;
    transform: translateY(6.25rem) translateX(-6.25rem) scale(0.1);
    opacity: 0
  }

  100% {
    transform-origin: 0% 0%;
    transform: translateY(0) translateX(0) scale(1);
    opacity: 1
  }
}

@keyframes circle-5-animation {
  0% {
    transform: scale(0.1);
    transform-origin: 100% 50%;
    opacity: 0
  }

  100% {
    transform: scale(1);
    transform-origin: 100% 50%;
    opacity: 1
  }
}

@keyframes circles-text-animation {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.pip-product-gallery {
  margin-bottom: 2.5rem;
  display: flex;
  -moz-column-gap: 1.625rem;
  column-gap: 1.625rem;
  flex-wrap: wrap
}

@media (min-width:56.25em) {
  .pip-product-gallery {
    flex-wrap: nowrap
  }
}

.pip-product-gallery .pip-product-gallery__skip-button {
  position: absolute;
  height: 0.0625rem;
  width: 0.0625rem;
  overflow: hidden;
  margin: -0.0625rem;
  white-space: nowrap;
  background-color: rgb(var(--colour-neutral-1, 255, 255, 255))
}

.pip-product-gallery .pip-product-gallery__skip-button:active,
.pip-product-gallery .pip-product-gallery__skip-button:focus {
  width: auto;
  height: auto;
  left: 1rem;
  top: 1rem;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  z-index: 2
}

.pip-product-gallery__right-section-wrapper {
  width: 100%
}

@media (min-width:56.25em) {
  .pip-product-gallery__right-section-wrapper {
    width: 87%
  }
}

.pip-product-gallery__left-section-wrapper {
  width: 13%;
  min-width: 3.375rem;
  margin-inline-start: -0.375rem;
  margin-top: -0.375rem
}

.pip-product-gallery__left-section-wrapper:hover .pip-product-gallery__thumbnail-scroll-button {
  opacity: 1
}

.pip-product-gallery__thumbnails-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 669%
}

.pip-product-gallery__thumbnails {
  position: absolute;
  border-top: solid 0.375rem rgba(0, 0, 0, 0);
  padding: 0 0.375rem;
  width: 100%;
  inset: 0;
  overflow: hidden
}

.pip-product-gallery__thumbnail {
  position: relative;
  width: 100%;
  padding: 0;
  margin-bottom: 16%;
  border: solid 1px rgb(var(--colour-neutral-3, 223, 223, 223))
}

.pip-product-gallery__thumbnail--active,
.pip-product-gallery__thumbnail:hover {
  border-color: rgb(var(--colour-neutral-7, 17, 17, 17))
}

.pip-product-gallery__thumbnails-wrapper-edge {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  transition: opacity 200ms
}

@media (max-width:75em) {
  .pip-product-gallery__thumbnails-wrapper-edge .pip-product-gallery__thumbnail-scroll-button.pip-btn--xsmall .pip-btn__inner {
    padding: 0;
    min-height: 1rem
  }
}

.pip-product-gallery__thumbnails-wrapper-edge--top {
  z-index: 1;
  top: -0.75rem;
  left: 0
}

@media (min-width:75em) {
  .pip-product-gallery__thumbnails-wrapper-edge--top {
    top: -1rem
  }
}

.pip-product-gallery__thumbnails-wrapper-edge--bottom {
  bottom: -0.75rem;
  left: 0
}

@media (min-width:75em) {
  .pip-product-gallery__thumbnails-wrapper-edge--bottom {
    bottom: -1rem
  }
}

.pip-product-gallery__thumbnail-scroll-button {
  opacity: 0;
  transition: opacity 200ms
}

.pip-product-gallery .pip-product-gallery__navigation-button-right {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1
}

.pip-product-gallery .pip-product-gallery__navigation-button-left:focus-visible,
.pip-product-gallery .pip-product-gallery__navigation-button-right:focus-visible {
  opacity: 1
}

.pip-product-gallery .pip-product-gallery__navigation-button-right {
  right: 1.25rem
}

.pip-product-gallery__media-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 0.375rem;
  margin-top: -0.375rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.pip-product-gallery__media-wrapper::-webkit-scrollbar {
  display: none
}

.pip-product-gallery__media-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow: scroll hidden;
  margin-left: 0;
  margin-right: 0;
  scroll-snap-type: x mandatory
}

.pip-product-gallery__media-wrapper:hover .pip-product-gallery__navigation-button-left,
.pip-product-gallery__media-wrapper:hover .pip-product-gallery__navigation-button-right {
  opacity: 1
}

@media (min-width:56.25em) {
  .pip-product-gallery__media-wrapper {
    padding-top: 0;
    margin-top: 0;
    overflow: visible
  }
}

.pip-product-gallery__media {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always
}

@media (min-width:56.25em) {
  .pip-product-gallery__media--active {
    display: block
  }
}

.pip-product-gallery__badge {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem
}

@media (min-width:56.25em) {
  .pip-product-gallery__badge {
    left: 0;
    top: 0
  }
}

.pip-product-gallery__buttons,
.pip-product-gallery__left-section-wrapper {
  display: none
}

@media (min-width:56.25em) {

  .pip-product-gallery__buttons,
  .pip-product-gallery__left-section-wrapper {
    display: block
  }
}

.pip-product-gallery__buttons {
  margin-top: 1rem
}

@media (min-width:56.25em) {
  .pip-product-gallery__buttons {
    position: absolute;
    z-index: 1;
    bottom: 1.25rem;
    right: 1.25rem
  }
}

.pip-product-information-section {
  border-top: 0.0625rem solid rgb(var(--colour-neutral-3, 223, 223, 223));
  margin-bottom: 4rem
}

.pip-product-story {
  margin: 0-1.25rem;
  display: flex;
  align-items: flex-start;
  position: relative;
  flex-direction: column
}

@media (min-width:37.5em) {
  .pip-product-story {
    flex-direction: row;
    margin: 0
  }
}

.pip-product-story__image-wrapper {
  width: 100%
}

@media (min-width:37.5em) {
  .pip-product-story__image-wrapper {
    width: 75%
  }
}

@media (min-width:56.25em) {
  .pip-product-story__image-wrapper {
    width: 65%
  }
}

.pip-product-story__label {
  font-size: .75rem;
  line-height: 1.5;
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
  padding-bottom: .75rem;
  font-weight: 700
}

.pip-product-story__header {
  padding-bottom: .75rem;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  font-size: 1.125rem;
  line-height: 1.444;
  font-weight: 700
}

@media (min-width:37.5em) {
  .pip-product-story__header {
    font-size: 1.5rem;
    line-height: 1.45;
    letter-spacing: -0.0042em
  }
}

.pip-product-story__sub-header {
  margin-bottom: .5rem;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700
}

.pip-product-story__text-wrapper {
  overflow: hidden;
  padding: 2rem;
  position: relative
}

.pip-product-story__text-wrapper--collapsed {
  height: 28.125rem
}

@media (min-width:37.5em) {
  .pip-product-story__text-wrapper--collapsed {
    position: absolute;
    right: 0;
    height: 80%
  }
}

.pip-product-story--image .pip-product-story__text-wrapper {
  background-color: rgb(var(--colour-neutral-1, 255, 255, 255));
  margin: -18%auto 3.5rem;
  width: calc(100% - 2.5rem)
}

@media (min-width:37.5em) {
  .pip-product-story--image .pip-product-story__text-wrapper {
    margin-top: 2rem;
    margin-inline-start: calc(-25% - 2rem + .5rem);
    width: calc(50% + 2rem - .5rem)
  }
}

@media (min-width:56.25em) {
  .pip-product-story--image .pip-product-story__text-wrapper {
    margin-top: 2rem;
    margin-inline-start: calc(-15% - 2rem + .5rem);
    width: calc(50% + 2rem - .5rem)
  }
}

@media (min-width:75em) {
  .pip-product-story--image .pip-product-story__text-wrapper {
    margin-top: 4rem
  }
}

.pip-product-story__text {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  font-size: .875rem;
  line-height: 1.571
}

.pip-product-story__text:first-child {
  margin-top: 1.5rem
}

.pip-product-story__text {
  margin-bottom: 1.5rem
}

.pip-product-story__links {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem
}

.pip-product-story__text-wrapper--collapsed .pip-product-story__links {
  background: linear-gradient(0deg, rgb(255, 255, 255) 60%, rgba(255, 255, 255, 0.14) 100%)
}

.pip-product-story__readmore-link {
  margin-top: 1rem;
  text-decoration: underline
}

.pip-product-story__readless-link {
  margin-top: 1rem;
  text-decoration: underline
}

.pip-product-story__text-wrapper--collapsed .pip-product-story__readmore-link {
  display: inline-block
}

.pip-product-summary {
  margin: 2.5rem 0
}

.pip-product-summary__description {
  padding-bottom: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.6;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}

@media (min-width:37.5em) {
  .pip-product-summary__description {
    max-width: 87.5%
  }
}

.pip-product-summary__product-info-container {
  display: flex;
  align-items: end
}

@media (min-width:37.5em) {
  .pip-product-summary {
    margin-bottom: 3rem
  }
}

@media (min-width:56.25em) {
  .pip-product-summary {
    margin-top: 0
  }
}

.pip-quantity-stepper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .5rem;
  background-color: rgb(var(--colour-interactive-subtle-bg-default, 255, 255, 255));
  border: 0;
  border-radius: 64px
}

.pip-quantity-stepper .pip-btn:focus-visible {
  z-index: 200
}

.pip-quantity-stepper__input {
  text-align: center;
  font-family: inherit;
  border: none;
  box-sizing: content-box;
  background-color: rgb(var(--colour-interactive-subtle-bg-default, 255, 255, 255));
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  padding: 0 .25rem;
  height: 3.5rem;
  max-width: 5ch;
  order: 2
}

.pip-quantity-stepper__input:focus-visible~.pip-quantity-stepper__border {
  border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163))
}

.pip-quantity-stepper__input:disabled~.pip-quantity-stepper__border {
  border: 1px solid rgb(var(--colour-interactive-disabled-1, 204, 204, 204))
}

.pip-quantity-stepper__input:disabled {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204))
}

.pip-quantity-stepper__border {
  position: absolute;
  border: 1px solid rgb(var(--colour-neutral-5, 146, 146, 146));
  border-radius: 64px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none
}

.pip-quantity-stepper__decrease {
  order: 1
}

.pip-quantity-stepper__decrease:disabled {
  background: rgba(0, 0, 0, 0)
}

.pip-quantity-stepper__increase {
  order: 3
}

.pip-quantity-stepper__increase:disabled {
  background: rgba(0, 0, 0, 0)
}

.pip-quantity-stepper__sr-label {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap
}

.pip-quantity-picker {
  display: flex;
  margin-inline-end: .5rem;
  max-height: 3.5rem
}

.pip-quantity-stepper__input {
  min-width: 1.2rem
}

.pip-section {
  display: flex;
  -moz-column-gap: .75rem;
  column-gap: .75rem;
  padding: .75rem 0;
  justify-content: space-between;
  border: 0;
  background: none;
  text-align: inherit;
  width: 100%;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  font-size: .875rem;
  line-height: 1.571
}

.pip-section__header {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  font-size: .875rem;
  line-height: 1.571;
  font-weight: 700;
  display: block
}

.pip-section__content--wrapper {
  display: flex
}

.pip-section__icons-right-wrapper {
  display: flex;
  -moz-column-gap: 0.25rem;
  column-gap: 0.25rem;
  align-self: center
}

.pip-section__icon {
  flex-shrink: 0;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  margin-inline-end: 1rem
}

.pip-section__icon--right {
  margin-inline-end: unset
}

.pip-section-group {
  margin-bottom: 1rem
}

.pip-section-group__header {
  margin: .5rem 0;
  display: flex;
  justify-content: space-between
}

.pip-section-group__header--left {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  font-size: .875rem;
  line-height: 1.571;
  font-weight: 700
}

.pip-section-group__content {
  padding: .25rem 1rem;
  border: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223));
  border-radius: 8px
}

.pip-section-group__content>.pip-section:not(:last-child):not(.pip-no-border) {
  border-bottom: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223))
}

a.pip-shoppable-price-package__link:hover,
a.pip-shoppable-price-package__link:active,
a.pip-shoppable-price-package__link:focus {
  text-decoration: none
}

.pip-sticky-product-bar {
  transition: transform 200ms ease-in-out;
  background: rgb(var(--colour-neutral-1, 255, 255, 255));
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  transform: translateY(100%);
  z-index: 100
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

@keyframes btn-loader {

  0%,
  to {
    transform: translate(-50%, -160%);
    animation-timing-function: cubic-bezier(.42, 0, 1, 1)
  }

  40% {
    transform: translate(-50%, 20%);
    animation-timing-function: cubic-bezier(0, 0, 0, 1)
  }
}

:focus:not(:focus-visible) {
  outline: none
}

a:focus-visible,
button:focus-visible,
[role=button]:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline .2s ease-out, box-shadow .2s ease-out
}

.plann-card:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline .2s ease-out, box-shadow .2s ease-out
}

.pip-leading-icon .pip-svg-icon {
  margin-inline-end: .5rem;
  vertical-align: top
}

.pip-svg-icon {
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  vertical-align: middle;
  fill: currentColor;
  transition-property: transform, fill;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1)
}

@media (prefers-reduced-motion) {
  .pip-svg-icon {
    transition-property: none
  }
}

@keyframes pip-icon-rotate {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(359deg)
  }
}

.pip-aspect-ratio-box {
  width: 100%;
  position: relative;
  height: auto;
  display: block;
  box-sizing: border-box
}

.pip-aspect-ratio-box[class*="--square"] {
  padding-bottom: 100%
}

.pip-aspect-ratio-box .pip-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(0, 0, 0, 0);
  padding: 0
}

.pip-commercial-message {
  display: inline-block;
  padding: .25rem calc(var(--skapa-font-size)*.5px)
}

*[class*=pip-typography-] {
  font-size: calc(1rem*var(--skapa-base-multiplier, 1)*var(--skapa-font-size, 14)/16);
  font-weight: clamp(400, var(--skapa-font-weight, 400), 700);
  line-height: var(--skapa-typography-line-height, 1.5);
  --skapa-letter-spacing-multiplier-for-font-weight: calc(var(--skapa-font-weight, 400)/800 - .125);
  letter-spacing: calc(var(--skapa-characterset-multiplier, 1)*var(--skapa-letter-spacing-multiplier-for-font-weight, 0.375)*(var(--skapa-base-multiplier, 1)*.875rem - 1em)/(.875*var(--skapa-rem, 16)))
}

.pip-typography-heading-s {
  --skapa-font-weight: 700;
  --skapa-typography-line-height: 1.25;
  --skapa-font-size: var(--skapa-heading-s, 16)
}

.pip-typography-label-s {
  --skapa-font-weight: 700;
  --skapa-typography-line-height: 1.25;
  --skapa-font-size: var(--skapa-label-s, 12)
}

.pip-typography-label-m {
  --skapa-font-weight: 700;
  --skapa-typography-line-height: 1.25;
  --skapa-font-size: var(--skapa-label-m, 14)
}

.pip-typography-label-l {
  --skapa-font-weight: 700;
  --skapa-typography-line-height: 1.25;
  --skapa-font-size: var(--skapa-label-l, 16)
}

.pip-typography-regular {
  --skapa-font-weight: 400
}

.pip-typography-typescale-desktop {
  --skapa-display-xl: 72;
  --skapa-display-l: 56;
  --skapa-display-m: 40;
  --skapa-heading-xl: 32;
  --skapa-heading-l: 24;
  --skapa-heading-m: 18;
  --skapa-heading-s: 16;
  --skapa-heading-xs: 14;
  --skapa-statement-l: 28;
  --skapa-statement-m: 20;
  --skapa-caption-l: 16;
  --skapa-caption-m: 14;
  --skapa-caption-s: 12;
  --skapa-label-l: 16;
  --skapa-label-m: 14;
  --skapa-label-s: 12;
  --skapa-label-xs: 10;
  --skapa-body-l: 16;
  --skapa-body-m: 14;
  --skapa-body-s: 12
}

*:is(.pip-typography-character-set-arabic, .pip-typography-character-set-chinese_simplified, .pip-typography-character-set-chinese_traditional, .pip-typography-character-set-hebrew, .pip-typography-character-set-japanese, .pip-typography-character-set-korean) {
  --skapa-characterset-multiplier: 0
}

.pip-text {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}

.pip-commercial-message--top-seller {
  background-color: rgb(var(--colour-semantic-negative, 224, 7, 81));
  color: rgb(var(--colour-static-white, 255, 255, 255))
}

.pip-image {
  display: block;
  max-width: 100%
}

button.pip-rating {
  position: relative
}

button.pip-rating::after {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  bottom: -0.75rem
}

button.pip-rating:hover .pip-rating__label {
  text-decoration: underline
}

.pip-rating {
  -webkit-appearance: none;
  background: 0;
  padding: 0;
  border: 0;
  text-align: inherit;
  display: inline-block;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}

.pip-rating__stars {
  --star-height: 1.5rem;
  --rating-width: calc(var(--star-width)*var(--ceil-max-rating));
  position: relative;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  width: var(--rating-width);
  height: var(--star-height);
  background-color: rgb(var(--colour-neutral-3, 223, 223, 223));
  -webkit-mask-image: var(--svg-star);
  mask-image: var(--svg-star);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: var(--star-width) var(--star-height);
  mask-size: var(--star-width) var(--star-height);
  forced-color-adjust: none
}

.pip-rating__stars::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--rating);
  height: 100%;
  background-color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}

.pip-rating__stars--small {
  -webkit-mask-position: -0.1875rem;
  mask-position: -0.1875rem;
  margin-inline-start: -0.1875rem;
  --star-width: 1.125rem;
  --svg-star: url(data:image/svg+xml;utf8,<svg\ xmlns=\"http://www.w3.org/2000/svg\"\ viewBox=\"0\ 0\ 18\ 24\"><path\ d=\"m11.9999\ 6\ 2.1245\ 3.6818\ 4.1255.9018-2.8125\ 3.1773L15.8626\ 18l-3.8627-1.7182L8.1372\ 18l.4252-4.2391-2.8125-3.1773\ 4.1255-.9018L11.9999\ 6z\"><\/path><\/svg>)
}

.pip-rating__label {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: .5rem
}

:focus:not(:focus-visible) {
  outline: none
}

a[class*=pip-]:focus-visible,
button[class*=pip-]:focus-visible,
[role=button][class*=pip-]:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-link:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-btn:focus-visible,
.pip-tabs__panel:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-btn[class*=inverse]:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-black, 17, 17, 17)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-white, 255, 255, 255)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-btn[class*=image-overlay]:focus-visible {
  box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-white, 255, 255, 255)));
  outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-black, 17, 17, 17)));
  outline-offset: 4px;
  transition: outline 200ms ease-out, box-shadow 200ms ease-out
}

.pip-quantity-stepper__input:focus-visible {
  outline: none
}

[class*=pip-btn--icon].pip-btn--small .pip-btn__inner {
  padding: 0 .5rem
}

[class*=pip-btn--icon].pip-btn--xsmall .pip-btn__inner {
  padding: 0 .25rem;
  min-height: 2rem
}

[class*=pip-btn--icon].pip-btn--xsmall .pip-btn__inner::after {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  right: -0.375rem;
  bottom: -0.375rem
}

.pip-btn {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  text-align: center;
  display: inline-flex;
  border-radius: 64px;
  cursor: pointer;
  outline: 0;
  vertical-align: top;
  --disabled-foreground: rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
  --disabled-background: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  color: var(--foreground);
  text-decoration: none
}

.pip-btn .pip-btn__inner {
  box-shadow: var(--box-shadow);
  background: var(--background)
}

.pip-btn:hover .pip-btn__inner {
  background: var(--background-hover);
  box-shadow: var(--box-shadow-hover)
}

.pip-btn:active .pip-btn__inner {
  background: var(--background-press);
  box-shadow: var(--box-shadow-press)
}

.pip-btn:hover,
.pip-btn:active,
.pip-btn:focus {
  text-decoration: none;
  color: var(--foreground)
}

.pip-btn .pip-svg-icon {
  flex-shrink: 0
}

.pip-btn:disabled {
  cursor: default
}

.pip-btn:disabled .pip-btn__inner {
  background-color: var(--disabled-background);
  color: var(--disabled-foreground);
  box-shadow: none
}

.pip-btn__inner {
  border-radius: 64px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 2rem;
  width: 100%;
  box-sizing: border-box;
  transition-property: opacity, transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1)
}

.pip-btn:active:not(:disabled) .pip-btn__inner {
  transform: scale(0.97)
}

@media (forced-colors:active) {
  .pip-btn__inner {
    border: 1px solid rgba(0, 0, 0, 0)
  }

  .pip-btn:disabled .pip-btn__inner {
    color: GrayText;
    border-color: GrayText
  }
}

.pip-btn--icon-primary {
  --background: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17));
  --background-hover: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51));
  --background-press: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0))
}

.pip-btn--emphasised {
  --background: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163));
  --background-hover: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147));
  --background-press: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147))
}

.pip-btn--secondary {
  --background: none;
  --background-hover: none;
  --box-shadow: inset 0 0 0 1px rgb(var(--colour-neutral-7, 17, 17, 17));
  --box-shadow-hover: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17));
  --box-shadow-press: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17));
  --background-press: rgba(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204), 0.5)
}

.pip-btn--icon-primary-inverse {
  --background: rgb(var(--colour-interactive-subtle-bg-default, 255, 255, 255));
  --background-hover: rgb(var(--colour-interactive-subtle-bg-hover, 245, 245, 245));
  --background-press: rgb(var(--colour-interactive-subtle-bg-pressed, 223, 223, 223))
}

.pip-btn--icon-tertiary {
  --background: transparent;
  --background-hover: rgb(var(--colour-interactive-secondary-bg-hover, 223, 223, 223));
  --background-press: rgb(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204));
  --disabled-background: transparent;
  --disabled-foreground: rgb(var(--colour-interactive-disabled-1, 204, 204, 204))
}

.pip-btn--icon-image-overlay,
.pip-btn--image-overlay {
  --background: rgba(var(--colour-static-black, 17, 17, 17), 0.75);
  --background-hover: rgba(var(--colour-static-black, 17, 17, 17), 0.85);
  --background-press: rgba(var(--colour-static-black, 17, 17, 17), 0.95)
}

.pip-btn--icon-primary-inverse,
.pip-btn--secondary,
.pip-btn--icon-tertiary {
  --foreground: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}

.pip-btn--icon-primary {
  --foreground: rgb(var(--colour-text-and-icon-5, 255, 255, 255))
}

.pip-btn--icon-image-overlay,
.pip-btn--emphasised,
.pip-btn--image-overlay {
  --foreground: rgb(var(--colour-static-white, 255, 255, 255))
}

@keyframes pip-btn-loader {

  0%,
  100% {
    transform: translate(-50%, -160%);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1)
  }

  40% {
    transform: translate(-50%, 20%);
    animation-timing-function: cubic-bezier(0, 0, 0, 1)
  }
}

.pip-btn--xsmall .pip-btn__inner::after {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  right: -0.375rem;
  bottom: -0.375rem
}

.pip-btn--small .pip-btn__inner {
  min-height: 2.5rem;
  padding: 0 1.5rem
}

.pip-btn--small .pip-btn__inner::after {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  right: -0.125rem;
  bottom: -0.125rem
}

.pip-btn--small.pip-leading-icon .pip-btn__inner {
  padding-inline-start: 1rem
}

.pip-btn--fluid,
.pip-btn--fluid .pip-btn__inner {
  width: 100%
}

.pip-btn .pip-svg-icon,
.pip-btn__label {
  transition-property: opacity, margin-right, margin-left, transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1)
}

.pip-price {
  font-weight: 700;
  line-height: 1;
  position: relative;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}

.pip-price__nowrap {
  white-space: nowrap
}

.pip-price__currency,
.pip-price__decimal,
.pip-price__subscript {
  font-size: .5em;
  line-height: 1.3
}

.pip-price__subscript,
.pip-price__currency,
.pip-price__decimal {
  position: relative
}

.pip-price__currency {
  unicode-bidi: bidi-override
}

.pip-price__subscript {
  display: inline-block;
  unicode-bidi: isolate
}

.pip-price--currency-super-aligned .pip-price__currency {
  top: -0.727em
}

.pip-price--decimal-super-aligned .pip-price__decimal {
  top: -0.727em
}

.pip-price__sr-text {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
  left: 0
}

.pip-price-module {
  --skapa-price-module-commercial-message-offset: 16px;
  --skapa-price-module-information-gap: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.pip-price-module__description {
  display: block
}

.pip-price-module__information,
.pip-price-module__price {
  display: flex;
  flex-direction: column;
  gap: var(--skapa-price-module-information-gap)
}

.pip-price-module__primary-currency-price {
  display: flex;
  flex-direction: column;
  gap: .25rem
}

.pip-price-module__primary-currency-price-energy-class {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem
}

.pip-price-module--xsmall {
  --skapa-price-module-commercial-message-offset: 12px
}

.pip-price-module--xsmall .pip-price-module__current-price {
  font-size: 1.5rem
}

.pip-price-module--medium .pip-price-module__current-price {
  font-size: 2rem
}

.no-outline {
  outline: 0
}

.sr-only {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap
}

.pip-shoppable-price-package {
  display: inline-flex;
  background-color: rgb(var(--colour-neutral-1, 255, 255, 255));
  min-width: 8.4375rem;
  max-width: 12.625rem
}

.pip-shoppable-price-package__link {
  display: flex;
  justify-content: space-between;
  width: 100%
}

a.pip-shoppable-price-package__link {
  text-decoration: none
}

a.pip-shoppable-price-package__link:hover,
a.pip-shoppable-price-package__link:active,
a.pip-shoppable-price-package__link:focus {
  text-decoration: none
}

.pip-shoppable-price-package .pip-price-module {
  display: flex;
  margin: .75rem;
  flex-grow: 1;
  flex-direction: column
}

.pip-shoppable-price-package__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223))
}