/** Shopify CDN: Minification failed

Line 351:0 Unexpected "}"

**/
.unit-pricing {
  margin-top: 5px;
}

.productpage__variant-selection .unit-pricing {
  margin-top: 7.5px;
}

.unit-pricing .baseline {
  font: var(--body-label-light);
  font-size: 12px;
}

.unit-pricing .compared {
  text-decoration: line-through;
  color: var(--color-neutral-1);
  margin-left: 2.5px;
  margin-right: 2.5px;
}

.unit-pricing strong {
  font-weight: 500;
}

.unit-pricing--has-compare .baseline-text {
  color: var(--color-primary-1);
}

.productpage__media-gallery {
  --column-gap: var(--spacing-2);
  display: flex;
}

.productpage-breadcrumb {
  padding-top: var(--spacing-3);
}

.amount-sold-badge {
  border-radius: 5px;
  padding: 6px 15px;
  background-color: var(--color-off-white);
  font-weight: 300;
  align-items: center;
  column-gap: 5px;
}

.amount-sold-badge strong {
  font-weight: 500;
}

.amount-sold-badge drawer-control[for="amount-sold"] {
  cursor: pointer;
  display: block;
  width: 16px;
  height: 16px;
}

.amount-sold-badge drawer-control[for="amount-sold"] svg {
  display: block;
}

@media (min-width: 1024px) {
  .productpage__media-gallery,
  .productpage-breadcrumb {
    padding-top: var(--spacing-4);
  }

  .amount-sold-badge {
    background-color: var(--color-neutral-5);
  }
}

.productpage__media-gallery .productpage__media-main {
  overflow: hidden;
  flex: 1 1 calc(100% - 100px - var(--column-gap));
}

.productpage__media-thumbList .productpage__media-thumbItem:not(:last-child) {
  margin-bottom: var(--spacing-2);
}

/* Transparent packshots sit on the page, not on the cream loading placeholder every .media-item paints. */
.productpage__gallery .media-item::before {
  background-color: transparent;
}

/* Every thumbnail framed, the shown one in green; the 2px inset keeps the picture off the frame. */
.productpage__media-thumbItem {
  box-sizing: border-box;
  padding: 2px;
  border: 1.5px solid var(--color-neutral-3);
  border-radius: 8px;
  transition: border-color var(--transition-0);
}

.productpage__media-thumbItem .media-item {
  border-radius: 6px;
}

.productpage__media-thumbItem.swipeable-item-active {
  border: 1.5px solid var(--color-primary-0);
  border-radius: 8px;
}

.productpage__media-main {
  position: relative;
}

.productpage-breadcrumb .breadcrumb {
  margin-bottom: var(--spacing-1);
}

.productpage__variant-selection {
  padding-top: var(--spacing-3);
}

.productpage__variant-selection .variants {
  width: 100%;
  display: block;
}

[data-no-variants] {
  display: none;
}

.productpage-subheading {
  padding-top: var(--spacing-0);
  color: var(--color-neutral-1);
  font: var(--body-normal-light);
}

@media (max-width: 980px) {
  .productpage .oke-sr-label-text {
    display: none;
  }
}

.productpage .oke-stars svg {
  height: 15px;
}

.productpage .oke-sr-count-number,
.productpage .oke-sr-label-text {
  font: var(--body-subtext);
  font-weight: 300;
}

.btn-label--price .dot {
  height: 5px;
  width: 5px;
  display: inline-block;
  background-color: #ffffff5e;
  border-radius: 99px;
  margin-right: 10px;
  margin-bottom: 2.5px;
}

.btn-label--price .btn-label-secondary {
  margin-left: 10px;
}

.productpage__description {
  position: relative;
  margin-top: var(--spacing-2);
}

.btn-atc {
  width: 100%;
}

#ProductPagePricing--main {
  display: flex;
  column-gap: var(--spacing-2);
  justify-content: space-between;
  align-items: end;
}

.productpage__pricing--mobile,
.productpage__pricing .column {
  align-items: center;
}

.productpage__pricing .price,
.productpage__pricing--mobile .price {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
}

.productpage__pricing .compare_at_price,
.productpage__pricing--mobile .compare_at_price {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 300;
  color: var(--color-neutral-1);
  text-decoration: line-through;
}

.productpage__pricing--mobile .price {
  font-size: 18px;
}

.productpage__pricing--mobile .compare_at_price {
  font-size: 14px;
}

.productpage__pricing--mobile {
  padding-top: 0;
}

@media (min-width: 980px) {
  .productpage__pricing--mobile {
    margin-top: var(--spacing-1);
    display: none;
  }
}

.heading-area-footer {
  margin-top: 10px;
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--spacing-3);
  row-gap: var(--spacing-1);
}

[data-if-on-sale] {
  display: none;
}

.productpage[data-on-sale="true"] [data-if-on-sale] {
  display: block;
}

/* Bundle price explainer: give the icon room so it reads as attached to the
   struck price instead of crowding the numbers, and sit it at the top of the
   price row so it reads as a superscript rather than hanging mid-line.
   Display is left alone — the rule above is (0,3,0) and would win anyway. */
.productpage__pricing .price-explainer {
  /* Tight to the price, like a footnote mark: out of the row's column padding, and nudged up. */
  margin-left: 2px;
  padding-left: 0;
  align-self: flex-start;
  margin-top: -3px;
}

.productpage__description .productpage__description-reveal {
  position: absolute;
  bottom: -5px;
  left: 0;
  background-color: rgba(255, 255, 255, 0.925);
  width: 100%;
}

.dropdown-limit-height-body {
  max-height: 312px;
  overflow: hidden;
}

@media (max-width: 979px) {
  .dropdown-limit-height-body {
    max-height: 302px;
  }
}

.unrestricted-dropdown-body .dropdown-limit-height-body {
  max-height: unset;
}

.unrestricted-dropdown-body .trigger-state-idle,
.trigger-state-active {
  display: none;
}

.unrestricted-dropdown-body .trigger-state-active {
  display: block;
}

.dropdown-group .productpage-review-card {
  border: 1px solid var(--color-neutral-3);
}

.productpage-review-card .card-title {
  margin: var(--spacing-1) 0 0;
}

.icon-text {
  display: flex;
  align-items: center;
}

.icon-text > .icon {
  margin-right: 5px;
  flex-grow: 15px;
  width: 15px;
  height: 15px;
}

.icon-text-list .icon-text:not(:last-child) {
  padding-bottom: calc(var(--spacing-0) / 2);
}

.productpage-meta-reviews {
  display: flex;
  column-gap: var(--spacing-1);
  align-items: center;
  transition: opacity var(--transition-0);
}

.productpage-meta-reviews:hover {
  opacity: 0.75;
}

.productpage-meta-reviews-label {
  color: var(--color-neutral-1);
  font-size: var(--font-size-subtext);
  text-decoration: underline;
  cursor: pointer;
}

.productpage-meta-reviews-icon {
  height: 15px;
  width: auto;
}

.productpage__submit {
  display: flex;
}

button#gowishWhiteButton {
      display: flex;
          height: auto;
              background-color: var(--color-beige);
              background-position: center center;
                  margin: 0 0 0 5px;
                      padding: 0;
                          width: 60px;
                          }

                            #gowishWhiteButton:hover {
                                background-color: var(--color-cream);
                                    border: 1px solid #f1f1f1;
                                      }
}

.productpage__media-gallery .productpage__media-thumbList {
  flex: 0 0 100px;
  width: 100px;
}

.productpage-grid {
  display: grid;
}

/* min-width: 0 so the column can shrink below the thumbnail swiper's min-content, or the page scrolls sideways. */
.productpage__gallery {
  min-width: 0;
}

.productpage__media-gallery {
  display: flex;
  gap: var(--column-gap);
  flex-wrap: wrap;
}

.productpage__media-main {
  flex: 1 1 100%;
}

.productpage__media-main iframe {
  border-radius: var(--border-radius-0);
}

.productpage__media-thumbList {
  flex: 0 0 85px;
}

.productpage-media__badges {
  justify-content: flex-end;
  left: auto;
  right: 0;
  z-index: 2;
}

@media (max-width: 767px) {
  .productpage-grid {
    grid-template-columns: 100%;
  }

  .productpage-media__badges {
    max-width: 80%;
    padding-left: 0;
  }

  .productpage__media-main,
  .productpage__media-thumbList {
    flex: 0 0 100%;
  }

  /* The negative inline margin cancels .pw's --pw-mobile-gutter, so the gallery is full-bleed on mobile. */
  .productpage__media-gallery {
    margin-inline: calc(var(--pw-mobile-gutter) * -1);
  }

  .productpage__gallery {
    grid-row: 2 / 3;
  }

  .productpage-main-dropdowns {
    grid-row: 4 / 5;
  }

  .productpage-heading-area {
    grid-row: 1 / 2;
  }

  .productpage-meta-body {
    grid-row: 3 / 4;
  }
}

@media (max-width: 979px) {
  .productpage__media-gallery {
    --row-gap: var(--spacing-1);
  }

  .productpage__media-main .swipeable-item {
    flex-shrink: 0;
  }

  /* Inset by the page gutter like the arrows and the buy box, now that each thumbnail has a frame. */
  .productpage__media-gallery .productpage__media-thumbList {
    flex: 1 1 100%;
    overflow: hidden;
    padding-inline: var(--spacing-2);
  }

  .productpage__media-gallery .productpage__media-thumbList .swipeable-slider {
    display: flex;
    column-gap: var(--spacing-1);
    margin-bottom: calc(var(--spacing-0) * -1);
    padding-bottom: var(--spacing-0);
  }

  /* 58px so five fit inside the gutters on a 390px phone. */
  .productpage__media-thumbItem {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
  }

  .productpage__variant-selection {
    padding-top: var(--spacing-1);
  }
}

.productpage-main-dropdowns {
  padding-top: 20px;
}

@media (min-width: 768px) {
  .productpage-main-dropdowns {
    padding-top: 30px;
  }

  .productpage-grid {
    column-gap: 60px;
    grid-template-columns: 1fr 320px;
  }

  .productpage__gallery {
    grid-area: 1 / 1 / 4 / 2;
  }

  .productpage-main-dropdowns {
    grid-area: 4 / 1 / 5 / 2;
  }

  .productpage-heading-area {
    grid-area: 1 / 2 / 2 / 3;
    padding-left: var(--spacing-3);
  }

  .productpage-meta-body {
    grid-area: 2 / 2 / 3 / 3;
    padding-left: var(--spacing-3);
  }
}

@media (min-width: 980px) {
  .productpage__media-gallery .productpage__media-thumbList {
    order: -1;
  }

  .productpage__description {
    margin-top: var(--spacing-0);
  }

  .productpage__media-thumbList {
    height: 0;
    padding-top: calc(100% - 100px - var(--column-gap));
    overflow: hidden;
    position: relative;
  }

  .productpage__media-thumbList swipeable-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .productpage__description {
    padding-right: 30px;
  }
}

@media (min-width: 1024px) {
  .productpage-heading-area,
  .productpage-meta-body {
    max-width: 480px;
    width: 100%;
    justify-self: flex-start;
  }

  .productpage__meta {
    padding-right: var(--spacing-5);
  }
}

@media (min-width: 767px) {
  .productpage-grid {
    grid-template-columns: 1fr 380px;
  }
}

@media (min-width: 880px) {
  .productpage-grid {
    grid-template-columns: 1fr 440px;
  }
}

@media (min-width: 1100px) {
  .productpage-grid {
    grid-template-columns: 1fr 540px;
  }
}

drawer-control[data-product-option-handle] {
  height: 15px;
  cursor: pointer;
}

/* The .modal-pdp-usp / .pdp-usp-modal-* / .option-information-* rules moved to
   modal.css. This stylesheet only loads on the product template, but
   component-package-modal reuses those classes and is rendered on every page via
   util-modals in theme.liquid — leaving them here left that modal unstyled on
   collection pages. */

variant-option-group {
  display: block;
}

.productpage__variant-selection .variants-options {
  display: flex;
  align-items: flex-start;
  column-gap: 10px;
}

/* Gift card amounts have long labels (e.g. "kr 1,000.00") that can't shrink
   to fit one row on mobile, so let them wrap and grow to fill each row. */
.productpage__variant-selection .variants-options--giftcard {
  flex-wrap: wrap;
  row-gap: 10px;
}

.productpage__variant-selection .variants-options--giftcard .variant-option-btn {
  flex: 1 1 110px;
}

.variant-option-btn {
  flex: 0 1 110px;
}

.variant-option-btn variant-option {
  white-space: nowrap;
}

.variant-savings-perc {
  display: block;
  font-size: 11px;
  font-weight: 300;
  text-align: center;
  margin-top: 5px;
}

.variant-savings-perc .amount {
  font-weight: 500;
  color: var(--color-primary-1);
}

.productpage-video__thumbnail {
  position: absolute;
  bottom: var(--spacing-2);
  right: var(--spacing-2);
  z-index: 1;
  cursor: pointer;
}

.productpage-video__thumbnail svg {
  z-index: 1;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-neutral-5);
}

.productpage-video__thumbnail .media-item {
  width: 70px;
  height: 70px;
}

.productpage-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Non-1:1 images/videos: letterbox inside the 1:1 main media slot
   so the full media is visible against the product's brand background. */
.productpage-media__image .media {
  object-fit: contain;
}

.productpage-thumb-video {
  position: relative;
}

.productpage-thumb-video svg {
  z-index: 1;
  color: var(--color-neutral-5);
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.productpage .okeReviews > div {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  column-gap: 8px;
}

.productpage .oke-sr-stars {
  margin: 0;
}

.productpage .oke-sr-count {
  flex: 0 0 auto;
  text-decoration: underline;
  line-height: 1;
}

.productpage .oke-stars,
.productpage .oke-sr-stars,
.productpage .oke-sr-stars svg {
  display: block;
}

.productpage .oke-sr-count span {
  font-size: 13px;
}

@media (min-width: 980px) {
  .productpage__pricing--wrapper [data-oke-star-rating] {
    display: none;
  }
}
.productpage__pricing [data-oke-star-rating] {
  flex: 0 0 auto;
}

/* Lands the rating summary's jump below the fixed nav rather than under it. */
#product-reviews {
  scroll-margin-top: calc(var(--nav-height, 64px) + 16px);
}

.productpage-payments {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: var(--spacing-2);
  row-gap: var(--spacing-0);
  flex-wrap: wrap;
}

.pdp-bis-trigger {
  display: block;
  width: 100%;
}

/* Sticky makes the title area its own stacking layer, and it now precedes the gallery in source, so the gallery would paint over
   the price-guarantee popup that opens beside the title. One layer up, still under the site header (z-index 5). */
.productpage-heading-area {
  z-index: 1;
}

@media (min-width: 768px) {
  .productpage-grid__item--sticky {
    position: sticky;
    top: calc(
      var(--nav-height, 0px) + var(--sticky-top, 0px) + var(--spacing-2)
    );
  }

  .productpage-grid {
    column-gap: 20px;
  }
}

.pdp-heading-area {
  position: relative;
  outline: 0;
}

[data-pricematch-content] {
  position: absolute;
  top: 0;
  transform: translate(-105%, 25%);
  left: 0;
  border: 1px solid #000;
  border-radius: 12.5px;
  padding: 15px;
  background-color: var(--color-off-white);
  z-index: 4;
}

[data-pricematch-close] {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  cursor: pointer;
}
[data-pricematch-close] .btn-icon {
  height: 22px;
  width: 22px;
}

[data-pricematch-content] .rte {
  font-size: 14px;
}

[data-pricematch-content] .rte p:not(:last-child) {
  margin-bottom: 7px;
}

@media (max-width: 768px) {
  [data-pricematch-content] {
    transform: translate(0%, 130%);
  }
}

.productpage__mainbuy {
  padding-top: 25px;
  padding-bottom: 15px;
}

@media (min-width: 1024px) {
  .productpage__mainbuy {
    background-color: var(--color-cream);
    padding: 20px 20px 15px 20px;
    border-radius: 12px;
  }
  .pdp-message {
    margin-top: 10px;
  }
}

productpage-grid.resource-page .oke-sr-count {
  text-decoration: none;
}

.pdp-message {
  border-radius: 8px;
  padding: 10px 15px;
  text-align: center;
}

.pdp-message .rte {
  font-size: 13px;
  font-weight: 400;
}

.pdp-message .rte a,
.pdp-message .rte strong {
  color: var(--accent-color, --text-color);
  font-weight: 500;
}

.pdp-message .rte p {
  margin-top: 0;
}

.inventory-msg {
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 300;
  text-align: center;
  justify-content: center;
}

.inventory-msg strong {
  color: var(--color-primary-1);
  font-weight: 500;
}

.pulse-dot {
  height: 4px;
  width: 4px;
  display: inline-block;
  background-color: var(--color-primary-2);
  border-radius: 99px;
  margin-right: 5px;
  animation: pulse-dot 2.5s infinite;
}

.pdp__main-usp {
  margin-top: 10px;
  border: 1px solid var(--color-neutral-3);
  border-radius: 8px;
}

.pdp__main-usp .usp-item {
  padding: 10px 10px 10px 15px;
}

.pdp-delivery-progress strong {
  font-weight: 600;
}

@media (min-width: 1024px) {
  .pdp__main-usp .usp-item {
    padding: 10px 15px 10px 20px;
  }
}

.pdp__main-usp .subheading {
  flex: 1 1 auto;
  font: var(--body-small-base-smaller);
  font-weight: 300;
}

.pdp__main-usp .usp-item .row {
  align-items: center;
}

.pdp__main-usp drawer-control:hover {
  cursor: pointer;
}

.pdp__main-usp drawer-control:hover span {
  text-decoration: underline;
}

.pdp__main-usp .usp-item:not(:last-child) {
  border-bottom: 1px solid var(--color-neutral-3);
}

.pdp__main-usp .usp-item.retailers,
.pdp__main-usp .usp-item.payment-options {
  padding: 15px 15px 15px 15px;
}

.pdp__main-usp .heading {
  font: var(--body-subtext);
}

.pdp__main-usp .pill {
  font: var(--body-label-light);
  padding: 5px 7px;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .pdp__main-usp .pill {
    font: var(--body-label-light);
    line-height: 1;
    padding: 7px 10px;
  }
  .pdp__main-usp .usp-item.retailers,
  .pdp__main-usp .usp-item.payment-options {
    padding: 15px 15px 15px 20px;
  }
}

.variant-indicator-status {
  height: 5px;
  border-radius: 4px;
  width: 100%;
  background-color: var(--color-neutral-3);
  margin-bottom: 12px;
  display: block;
  position: relative;
}

.variant-indicator-status--reached {
  background-color: var(--color-primary-1);
}

.variant-indicator-status-icon {
  display: flex;
  justify-content: center;
}

.variant-indicator-status-icon svg {
  width: 8px;
  height: 8px;
  display: inline-block;
}

.variant-indicator-status-icon {
  position: absolute;
  width: 100%;
}

.variant-indicator-status-icon--bottom {
  bottom: -8px;
  color: var(--color-neutral-3);
}

.variant-indicator-status-icon--top {
  display: none;
  color: var(--color-primary-1);
  top: -8px;
}

.variant-indicator-status-icon--top svg {
  transform: rotate(180deg);
}

.variant-indicator-status--reached .variant-indicator-status-icon--bottom {
  display: none;
}

.variant-indicator-status--active .variant-indicator-status-icon--top {
  display: flex;
}

.variants-options
  .variant-option-btn:first-child
  .variant-indicator-status-icon {
  display: none;
}

.variants-options .variant-savings-amount-abs {
  font-size: 11px;
  position: absolute;
  bottom: 14px;
  width: 100%;
  text-align: center;
  opacity: 0.7;
  font-weight: 300;
}

.variant-indicator-status--active .variant-savings-amount-abs {
  opacity: 1;
}

.variant-indicator-status--active .variant-savings-amount-abs .amount {
  font-weight: 500;
}

/* Gallery controls, bottom-left. Scoped by the slider's id to override swipeable-area.css's hide-at-ends rules: always present, dimmed, touch too. */

.productpage__media-main {
  position: relative;
}

/* Appearance lives in swipeable-area.css, shared with the product cards. */
#Product-gallery-main swipeable-control {
  position: absolute;
  top: auto;
  bottom: var(--spacing-2);
  right: auto;
  transform: none;
  opacity: 1;
  pointer-events: all;
}

#Product-gallery-main swipeable-control[alternate] {
  left: var(--spacing-2);
}

#Product-gallery-main swipeable-control:not([alternate]) {
  left: calc(var(--spacing-2) + 32px + var(--spacing-0));
}

/* At either end the arrow dims rather than vanishing. */
#Product-gallery-main[state="start"] swipeable-control[alternate],
#Product-gallery-main[state="end"] swipeable-control:not([alternate]) {
  opacity: 0.35;
  pointer-events: none;
}


.productpage-media__zoom {
  position: absolute;
  bottom: var(--spacing-2);
  /* Clear of .productpage-video__thumbnail, which owns the bottom-right on products with video; the wider gap leaves room for the divider. */
  left: calc(var(--spacing-2) + 2 * (32px + var(--spacing-0)) + var(--spacing-2));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0;
  height: 32px;
  padding: 0 var(--spacing-1);
  border-radius: 999px;
  border: 1px solid var(--color-neutral-3);
  background-color: var(--color-cream);
  color: var(--color-neutral-0);
  cursor: pointer;
  transition: background-color var(--transition-0), color var(--transition-0);
}

.productpage-media__zoom:hover {
  background-color: var(--color-primary-0);
  color: var(--color-neutral-5);
  border-color: var(--color-primary-0);
}

.productpage-media__zoom:focus-visible {
  outline: 2px solid var(--color-neutral-0);
  outline-offset: 2px;
}

/* Divider centred in the gap between the arrows and the "+". */
.productpage-media__zoom::before {
  content: "";
  position: absolute;
  left: calc((var(--spacing-2) + var(--spacing-0)) / -2);
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translate(-50%, -50%);
  background-color: var(--color-neutral-2);
}

/* No arrows on a single-image gallery: swipeable-area skips them when disabled. */
#Product-gallery-main[state="disabled"] ~ .productpage-media__zoom {
  left: var(--spacing-2);
}

#Product-gallery-main[state="disabled"] ~ .productpage-media__zoom::before {
  display: none;
}

/* Touch targets of 44px around the 32px pills, with no change to how they look. */
@media (hover: none) and (pointer: coarse) {
  #Product-gallery-main swipeable-control::after,
  .productpage-media__zoom::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
}

.productpage-media__zoom-label {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  font: var(--body-subtext-medium);
  transition: width var(--transition-0), padding-left var(--transition-0);
}

@media (min-width: 980px) {
  .productpage-media__zoom:hover .productpage-media__zoom-label,
  .productpage-media__zoom:focus-visible .productpage-media__zoom-label {
    width: auto;
    padding-left: var(--spacing-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .productpage-media__zoom-label,
  #Product-gallery-main swipeable-control {
    transition: none;
  }
}


.productpage-media__full {
  --modal-max-width: 720px;
}

.productpage-media__full-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-cream);
}

/* Centred, not baseline-aligned, so the rule between title and hint sits level with both. */
.productpage-media__full-titlegroup {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  min-width: 0;
}

.productpage-media__full-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 2px 0;
  border: 0;
  background: none;
  /* The page's own ink, not caption grey: this is the only hint that the images do something. */
  font: var(--body-subtext-medium);
  color: var(--color-neutral-0);
  pointer-events: none;
}

.productpage-media__full-divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 4px 0;
  background-color: var(--color-neutral-3);
}

.productpage-media__full-hint-icon {
  flex: 0 0 auto;
}

/* Gone once zoomed: a magnifier beside "Zoom ud" suggests the opposite. */
.productpage-media__full-hint.is-active .productpage-media__full-hint-icon {
  display: none;
}

/* Zoomed, the hint becomes the exit button. */
.productpage-media__full-hint.is-active {
  padding: 4px var(--spacing-2);
  border: 1px solid var(--color-neutral-0);
  border-radius: 999px;
  pointer-events: auto;
  cursor: pointer;
}

.productpage-media__full-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* pan-y only, no pinch, deliberately: dra-wer is position: fixed, so a pinch zooms the visual viewport and the image cannot pan (docs/gallery-pinch-zoom-spec.md). */
  touch-action: pan-y;
  padding: var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Room for the sticky add-to-cart bar drawn over this drawer; the script measures it, the fallback covers the moment before. Mobile only. */
@media (max-width: 767px) {
  .productpage-media__full-body {
    padding-bottom: calc(var(--sticky-atc-height, 96px) + var(--spacing-2));
  }
}

/* Skips rendering while closed, so the lazy images wait for the drawer to open. */
#product-gallery-full:not([open]):not([is-moving]) .productpage-media__full-body {
  content-visibility: hidden;
}

.productpage-media__full-item {
  display: block;
  cursor: zoom-in;
}

/* Tap-to-zoom: the tapped image becomes its own double-width scroll box the browser pans; the list stops scrolling so two scrollers never compete. */
.productpage-media__full-body.is-zoomed {
  overflow: hidden;
}

.productpage-media__full-item.is-zoomed {
  overflow: auto;
  /* Both axes, since this box is now the thing being panned. */
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: zoom-out;
  flex: 0 0 auto;
}

.productpage-media__full-item.is-zoomed::-webkit-scrollbar {
  display: none;
}

.productpage-media__full-item.is-zoomed .productpage-media__full-image {
  width: 200%;
  max-width: none;
  border-radius: 0;
}

.productpage-media__full-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius-0);
}

/* Stand down on a video slide, which has its own controls; the thumbnail rail and swipe still navigate. */
.productpage__media-main:has(.swipeable-item-active .productpage-media__video) #Product-gallery-main swipeable-control,
.productpage__media-main:has(.swipeable-item-active .productpage-media__video) .productpage-media__zoom {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Touch only: signals the image itself opens the gallery. */
@media (hover: none) and (pointer: coarse) {
  #Product-gallery-main .productpage-media__image {
    cursor: zoom-in;
  }
}

.productpage-media__full-media {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius-0);
  background-color: var(--color-neutral-0);
}

/* Out-of-stock dot: no pulse, and grey rather than red, which would read as an error. */
.pulse-dot--out {
  background-color: var(--color-neutral-2);
  animation: none;
}

/* Few left: amber, between the green "in stock" and the grey "sold out"; the palette has no warm signal colour. */
.pulse-dot--low {
  background-color: #d9822b;
}

.inventory-msg__sep {
  margin: 0 var(--spacing-0);
  color: var(--color-neutral-2);
}

/* Inherits the line's 12px/300 via .rule; .rule has no hover, so this borrows the text buttons' one. */
.pdp-alternatives-trigger {
  cursor: pointer;
  transition: opacity var(--transition-0);
}

.pdp-alternatives-trigger:hover {
  opacity: 0.5;
}

.pdp-alternatives-heading {
  margin-bottom: var(--spacing-3);
}

/* Two across at every width: the drawer is narrow on desktop too. */
.pdp-alternatives-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-3);
  row-gap: var(--spacing-4);
}

.pdp-alternatives-empty {
  grid-column: 1 / -1;
  color: var(--color-neutral-1);
}

/* The drawer body scrolls; the header above it does not. */
.modal-pdp-alternatives .pdp-usp-modal-body {
  overflow-y: auto;
}

/* A product's own notice (custom.pdp_notice) in the stock line: it wraps, the dot stays on its first line. */
.inventory-msg--notice {
  align-items: flex-start;
  white-space: normal;
  text-align: left;
}

.inventory-msg--notice .pulse-dot {
  flex: 0 0 auto;
  margin-top: 0.45em;
}

/* The delivery line's subline (Levering & returnering · sendes samme dag …), grey side information under the amount. */
.pdp__main-usp .usp-item__sub {
  display: block;
  margin-top: 0;
  font: var(--body-small-base-smaller);
  font-weight: 300;
  line-height: 1.3;
  color: var(--color-neutral-1);
}

.pdp__main-usp .usp-item .pill {
  flex-shrink: 0;
  white-space: nowrap;
}

/* The same info mark as beside "Duft" (component-variant-selection): the whole row opens the delivery terms. */
.pdp__main-usp .usp-item__info {
  display: inline-block;
  margin-right: 4px;
  vertical-align: -2px;
}